/* ============================================================
   92 Technology — marketing site styles
   Framework-free; served directly via asset() (no Vite build).
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Tajawal', 'Plus Jakarta Sans', system-ui, sans-serif;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

#t92 ::selection { background: #4357E6; color: #fff; }
#t92 a { text-decoration: none; color: inherit; }

/* prevent horizontal scroll from decorative absolute-positioned elements;
   `clip` (unlike `hidden`) does not create a scroll container, so the
   sticky header keeps working. */
html, body { overflow-x: hidden; max-width: 100%; }
#t92 { overflow-x: clip; }
#t92 img { max-width: 100%; }
section[id], main[id] { scroll-margin-top: 84px; }

/* accessibility: visible focus */
#t92 a:focus-visible,
#t92 button:focus-visible,
.t92-acc-item:focus-visible,
.t92-faq summary:focus-visible {
  outline: 3px solid #4357E6; outline-offset: 3px; border-radius: 6px;
}

@keyframes flo  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes flo2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(12px); } }

/* nav links */
.t92-nav-link { position: relative; padding: 6px 0; color: #3a3f57; font-weight: 500; font-size: 15.5px; transition: color .15s; }
.t92-nav-link:hover { color: #4357E6; }
.t92-nav-link::after { content: ""; position: absolute; bottom: 0; right: 0; width: 0; height: 2px; background: #4357E6; transition: width .22s; }
.t92-nav-link:hover::after { width: 100%; }

/* register dropdown */
.t92-reg { position: relative; }
.t92-reg-menu {
  opacity: 0; visibility: hidden; transform: translateY(7px);
  transition: opacity .2s, transform .2s, visibility .2s;
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 236px;
  background: #fff; border: 1px solid #ececf4; border-radius: 15px;
  box-shadow: 0 20px 44px -14px rgba(40,35,90,.3); padding: 8px; z-index: 60;
}
.t92-reg:hover .t92-reg-menu, .t92-reg:focus-within .t92-reg-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.t92-reg-menu::before { content: ""; position: absolute; top: -14px; right: 0; left: 0; height: 14px; }
.t92-reg-menu a { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 11px; font-weight: 700; font-size: 14.5px; color: #2a2f4a; transition: background .15s, color .15s; }
.t92-reg-menu a:hover { background: #f2f3fb; color: #4357E6; }
.t92-reg-chev { transition: transform .25s; }
.t92-reg:hover .t92-reg-chev { transform: rotate(180deg); }
.t92-reg-btn { transition: transform .2s, box-shadow .2s; }
.t92-reg-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(67,87,230,.55); }

/* buttons */
.t92-btn-primary { transition: transform .2s, box-shadow .2s, background .2s; }
.t92-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -8px rgba(67,87,230,.55); }
.t92-btn-ghost { transition: border-color .2s, color .2s; }
.t92-btn-ghost:hover { border-color: #4357E6; color: #4357E6; }
.t92-readmore { transition: gap .2s, opacity .2s; opacity: .92; }
.t92-readmore:hover { gap: 11px; opacity: 1; }
.t92-wa { transition: transform .2s; }
.t92-wa:hover { transform: scale(1.06); }
.t92-store { transition: transform .2s, border-color .2s; }
.t92-store:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.3); }

/* partners / clients */
.t92-partner { transition: transform .3s, box-shadow .3s; }
.t92-partner:hover { transform: translateY(-4px); box-shadow: 0 16px 34px -20px rgba(45,40,120,.3); }
.t92-client { filter: grayscale(1); opacity: .62; transition: filter .3s, opacity .3s, transform .3s; }
.t92-client:hover { filter: grayscale(0); opacity: 1; transform: translateY(-4px); }

/* services accordion */
.t92-acc { display: flex; gap: 14px; height: 470px; }
.t92-acc-item {
  position: relative; flex: 1 1 0; min-width: 86px; border-radius: 24px;
  overflow: hidden; cursor: pointer; transition: flex-grow .55s cubic-bezier(.4,0,.2,1);
}
.t92-acc-item.open { flex-grow: 8; cursor: default; }
.acc-collapsed { position: absolute; inset: 0; transition: opacity .3s; }
.t92-acc-item.open .acc-collapsed { opacity: 0; pointer-events: none; }
.acc-expanded { position: absolute; inset: 0; display: flex; opacity: 0; pointer-events: none; transition: opacity .45s .12s; }
.t92-acc-item.open .acc-expanded { opacity: 1; pointer-events: auto; }

/* FAQ */
.t92-faq summary::-webkit-details-marker { display: none; }
.t92-faq[open] .t92-faq-icon { transform: rotate(45deg); }

/* responsive */
@media (max-width: 900px) {
  .t92-hide-mob { display: none !important; }
  .t92-burger { display: inline-flex !important; }
  .t92-hero-grid { grid-template-columns: 1fr !important; text-align: center; }
  .t92-hero-text p { margin-inline: auto; }
  .t92-hero-actions { justify-content: center; }
  .t92-three-grid { grid-template-columns: 1fr !important; }
  .t92-about { grid-template-columns: 1fr !important; text-align: center; }
  .t92-about-stats { grid-template-columns: repeat(2, auto) !important; justify-content: center !important; }
  .t92-foot-grid { grid-template-columns: 1fr 1fr !important; }
  .t92-partners-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .t92-clients-grid { grid-template-columns: repeat(3, 1fr) !important; }

  .t92-acc { flex-direction: column; height: auto; gap: 16px; }
  .t92-acc-item { flex: none !important; width: 100%; min-width: 0; border-radius: 20px; }
  .t92-acc-item .acc-collapsed { display: none; }
  .t92-acc-item .acc-expanded { position: relative; opacity: 1; pointer-events: auto; flex-direction: column-reverse; }
  /* On mobile the person cut-outs read as awkward/cropped inside the stacked
     cards, so hide them and let each card show as a clean colour block with
     its title, features and CTA. */
  .acc-photo-wrap { display: none !important; }
  .t92-acc-item .acc-expanded > div { padding: 30px 26px !important; }

  /* pillars: stop the floating phone cards from overflowing — stack them */
  .t92-pillars-card { padding: 36px 24px !important; }
  .t92-pillars-visual { flex-direction: column; min-height: 0 !important; gap: 16px; margin-top: 8px; }
  .t92-phone { transform: none !important; }
  .t92-pcard {
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    width: 100% !important; max-width: 320px; animation: none !important;
  }
}

/* People cut-outs are hard-cropped at the knees, so their bottom edge lands
   flush on the coloured band and reads as "cut". Fade the lower part into the
   background so the person dissolves in instead of being sliced off. */
.svc-hero-photo {
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 99%);
          mask-image: linear-gradient(to bottom, #000 80%, transparent 99%);
}
.acc-expanded .acc-photo-wrap img {
  -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
}

/* ---------- service detail pages ---------- */
@media (max-width: 860px) {
  .svc-hero-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .svc-hero-copy { order: 2; padding: 34px 0 46px !important; text-align: center !important; }
  .svc-hero-copy p { margin-inline: auto !important; }
  .svc-hero-img { order: 1; min-height: 0 !important; padding-top: 34px; }
  .svc-hero-img img { max-height: 330px !important; }
  .svc-cards { grid-template-columns: 1fr !important; }
  .svc-suitable { grid-template-columns: 1fr 1fr !important; }
  .svc-ctaband { grid-template-columns: 1fr !important; justify-items: center; text-align: center; gap: 20px !important; padding: 34px 26px !important; }
  .svc-ctaband > div { text-align: center !important; }
  .svc-ctaband > div p { margin-inline: auto; }
}
@media (max-width: 460px) {
  .svc-checklist { grid-template-columns: 1fr !important; }
  .svc-suitable { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .t92-hero-grid { padding: 40px 20px 54px !important; }
  /* keep the photo, circle and cards as one centered, proportional unit */
  .t92-hero-img { min-height: 400px !important; max-width: 380px; margin-inline: auto; }
  .t92-hero-img img { height: 400px !important; }
  .t92-hero-circle { width: 300px !important; height: 300px !important; top: 6% !important; }
  /* shrink the floating cards so they frame the photo, not cover it */
  .t92-hcard { padding: 9px 12px !important; border-radius: 12px !important; }
  .t92-hcard-rating { top: 3% !important; right: 0 !important; }
  .t92-hcard-rating > div > span { font-size: 23px !important; }
  .t92-hcard-support { top: 46% !important; left: 0 !important; }
  .t92-hcard-support strong { font-size: 14px !important; }
  .t92-hcard-ready { bottom: 2% !important; right: 1% !important; }
  .t92-hcard-ready span { font-size: 13px !important; }
  .t92-foot-grid { grid-template-columns: 1fr !important; }
  .t92-partners-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .t92-clients-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* tighter header so the logo + burger never overflow narrow screens */
  .t92-head-inner { padding: 12px 16px !important; gap: 12px !important; }
  .t92-logo { height: 36px !important; }

  /* trim oversized card/section paddings on small phones */
  .t92-about { padding: 30px 22px !important; }
  .t92-about-logo { padding: 30px 24px !important; }
  .t92-about-stats { gap: 20px 30px !important; }
  .t92-pillars-card { padding: 30px 20px !important; }
  .t92-cta { padding: 30px 24px !important; }
  .pk-ent, .pk-scale { padding: 30px 22px !important; }
  footer { padding: 60px 20px 28px !important; }

  /* keep the packages tab toggle on one line */
  .pk-tab { padding: 11px 16px !important; font-size: 14px !important; }
}

/* ---------- blog ---------- */
.bl-card { transition: transform .3s, box-shadow .3s; }
.bl-card:hover { transform: translateY(-6px); box-shadow: 0 28px 56px -26px rgba(40,35,90,.3); }
.bl-card:hover .bl-thumb svg { transform: scale(1.08); }
.bl-thumb svg { transition: transform .4s; }
.bl-more { transition: gap .2s; }
.bl-more:hover { gap: 11px; }
.bl-title-link { transition: color .15s; }
.bl-title-link:hover { color: #4357E6; }
@media (max-width: 980px) { .bl-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 640px) { .bl-grid { grid-template-columns: 1fr !important; } }

/* ---------- article ---------- */
.t92-article p { font-size: 17px; line-height: 2; color: #3a3f57; margin-bottom: 18px; }
.t92-article h2 { font-size: 23px; font-weight: 900; color: #161b35; margin: 34px 0 14px; line-height: 1.4; }
.t92-article ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.t92-article li { position: relative; padding-inline-start: 22px; font-size: 16.5px; line-height: 1.85; color: #3a3f57; }
.t92-article li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 13px; width: 7px; height: 7px; border-radius: 2px; background: #4357E6; }
.t92-article a.bl-title-link, .t92-article nav a:hover { color: #4357E6; }

/* ---------- packages ---------- */
.pk-tab, .pk-bill { cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.pk-cta { transition: transform .2s, box-shadow .2s; }
.pk-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(67,87,230,.5); }
.pk-card, .pk-seas-card { transition: transform .3s, box-shadow .3s; }
.pk-prow { display: flex; align-items: stretch; gap: 24px; }
@media (max-width: 880px) {
  .pk-grid { grid-template-columns: 1fr !important; }
  .pk-hide { display: none !important; }
  .pk-ent { grid-template-columns: 1fr !important; }
  .pk-why { grid-template-columns: 1fr 1fr !important; }
  .pk-scale-grid { grid-template-columns: 1fr !important; }
  .pk-prow { flex-direction: column; }
  .pk-pdiv { display: none; }
  .pk-prow > div:last-child { width: 100% !important; }
  .pk-checks2 { grid-template-columns: 1fr !important; }
}
@media (max-width: 520px) { .pk-why { grid-template-columns: 1fr !important; } }

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}