/* =========================================================================
   Hitech revamp 2026 - global enterprise layer, on every front page:
   the theme buttons' shared look (Archivo, glow, arrow nudge, keyboard focus),
   the back-to-top ring, the cursor follower, the light tilt of boxed cards,
   page transitions and calm versions of the theme's own motion.
   Loaded by layouts/front.blade.php right after hitech.css (before the
   chrome and the page's own styles). Plain CSS, no build step.
   Motion: hitech-ui.js (magnets, cursor, tilt). Without JavaScript nothing
   here hides anything; the cursor follower only exists with JavaScript.
   ========================================================================= */

/* ---------- 1. Theme buttons: one vocabulary everywhere ----------------------
   The theme's outline pills (header buttons, "Contact" in the typed band, "Get
   the offer" in the footer, the home About button) keep their white sweep; on
   top: Archivo, a soft Signal glow under the mouse, the arrow nudges, a press,
   and a visible keyboard ring (the theme sets outline: 0 !important, so the
   ring is a box-shadow) on top of the same fill the mouse brings. The theme's
   .btn-slider is the primary action ("Let's Talk" in the menu): its sweep is
   Signal blue with the stronger glow. The magnetic pull itself is hitech-ui.js
   (the separate "translate" property). */
.header__action-btn,
a.btn.btn-slider,
.btn.btn-style1,
.btn.btn-style2 {
  font-family: var(--ht-font, "Archivo", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif);
  font-weight: 600;
  font-stretch: 112%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: color .3s cubic-bezier(.4, 0, .2, 1), background-color .3s cubic-bezier(.4, 0, .2, 1), border-color .3s cubic-bezier(.4, 0, .2, 1), box-shadow .45s var(--ht-ease-out, cubic-bezier(.16, 1, .3, 1)), scale .3s var(--ht-ease-out, cubic-bezier(.16, 1, .3, 1));
}
.rtl .header__action-btn,
.rtl a.btn.btn-slider,
.rtl .btn.btn-style1,
.rtl .btn.btn-style2 { font-family: "Cairo", sans-serif; font-stretch: normal; }
/* the label moves a little further than its button while it is pulled (depth) */
a.btn.btn-slider > span:first-child,
.btn.btn-style1 > span:first-child,
.btn.btn-style2 > span:first-child { display: inline-block; }
.header__action-btn svg,
a.btn.btn-slider svg,
.btn.btn-style1 svg,
.btn.btn-style2 svg {
  transition: fill .3s cubic-bezier(.4, 0, .2, 1), translate .45s var(--ht-ease-out, cubic-bezier(.16, 1, .3, 1));
}

/* the primary action: Signal sweep from the left */
a.btn.btn-slider:before { background: var(--ht-signal, #4361ff); }

@media (hover: hover) {
  .header__action-btn:hover,
  .btn.btn-style1:hover,
  .btn.btn-style2:hover { box-shadow: 0 12px 32px -14px rgba(67, 97, 255, .55); }
  a.btn.btn-slider:hover {
    border-color: var(--ht-signal, #4361ff);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(67, 97, 255, .5), 0 14px 38px -12px rgba(67, 97, 255, .75);
  }
  a.btn.btn-slider:hover svg { fill: #fff; }
  .header__action-btn:hover svg,
  a.btn.btn-slider:hover svg,
  .btn.btn-style1:hover svg,
  .btn.btn-style2:hover svg { translate: 4px 0; }
  .rtl .header__action-btn:hover svg,
  .rtl a.btn.btn-slider:hover svg,
  .rtl .btn.btn-style1:hover svg,
  .rtl .btn.btn-style2:hover svg { translate: -4px 0; }
}
/* The sweep is the fill. The theme also fades a hover background in (white / #222227) while the
   sweep runs, which turned the pill a muddy half-grey with a grey label for a moment, on the way
   in and on the way out: that background is left out, so the edge of the sweep stays crisp. */
.header__action-btn--start-project:hover,
.btn.btn-style1:hover,
.btn.btn-style2:hover { background-color: transparent; }
.header__action-btn:active,
a.btn.btn-slider:active,
.btn.btn-style1:active,
.btn.btn-style2:active { scale: .97; }

/* keyboard focus: 2px Signal ring around a 2px gap in the page colour */
.header__action-btn:focus:not(:focus-visible),
a.btn.btn-slider:focus:not(:focus-visible),
.btn.btn-style1:focus:not(:focus-visible),
.btn.btn-style2:focus:not(:focus-visible) { box-shadow: none; } /* Bootstrap's pale ring after a click */
.header__action-btn:focus-visible,
a.btn.btn-slider:focus-visible,
.btn.btn-style1:focus-visible,
.btn.btn-style2:focus-visible { box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--ht-signal, #4361ff); }
/* ... and it shows what the mouse shows: the primary action fills Signal (with its glow), the
   header and footer pills take their white sweep (the typed band's Contact and the search icon
   do the same in their own files) */
a.btn.btn-slider:focus-visible {
  border-color: var(--ht-signal, #4361ff);
  color: #fff;
  box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--ht-signal, #4361ff), 0 14px 38px -12px rgba(67, 97, 255, .75);
}
a.btn.btn-slider:focus-visible svg { fill: #fff; }
.header__action-btn:focus-visible,
.btn.btn-style2:focus-visible { color: #000; } /* the white sweep below is the fill (no fading background under it) */
.header__action-btn:focus-visible svg,
.btn.btn-style2:focus-visible svg { fill: #000; }
a.btn.btn-slider:focus-visible:before,
.header__action-btn:focus-visible:before,
.btn.btn-style2:focus-visible:before { transform: scaleX(1); }
.header__action-btn:focus-visible svg,
a.btn.btn-slider:focus-visible svg,
.btn.btn-style2:focus-visible svg { translate: 4px 0; }
.rtl .header__action-btn:focus-visible svg,
.rtl a.btn.btn-slider:focus-visible svg,
.rtl .btn.btn-style2:focus-visible svg { translate: -4px 0; }
.light-section .header__action-btn:focus-visible,
.light-section a.btn.btn-slider:focus-visible,
.light-section .btn.btn-style1:focus-visible,
.light-section .btn.btn-style2:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ht-signal, #4361ff); }
/* Touch screens: the header pills keep their 36 px look but take taps over 44 px. The extra 4 px
   all round are a transparent border taken back by a negative margin (the header's layout does
   not move); the pill's edge is drawn inside it, the sweep stays clipped to the pill, and the
   keyboard ring fills the border's outer half (a 2 px gap, then 2 px Signal). Forced colours keep
   the theme's plain border (box-shadows are dropped there). */
@media (pointer: coarse) and (forced-colors: none) {
  .header__action-btn {
    height: 44px;
    margin: -4px;
    padding: 1px 16px 1px 21px;
    border: 4px solid transparent;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px #fff;
  }
  .header__action-btn:focus:not(:focus-visible) { box-shadow: inset 0 0 0 1px #fff; }
  .header__action-btn:focus-visible {
    outline: 2px solid var(--ht-signal, #4361ff) !important;
    outline-offset: -2px !important;
    box-shadow: inset 0 0 0 1px #fff;
  }
}
@media (pointer: coarse) and (forced-colors: none) and (hover: hover) {
  .header__action-btn:hover { box-shadow: inset 0 0 0 1px #fff, 0 12px 32px -18px rgba(67, 97, 255, .55); }
}
/* Windows high contrast (forced colours) drops box-shadows: there the ring is a real outline
   (the theme's "outline: 0 !important" can only be undone the same way, and only here). */
@media (forced-colors: active) {
  .header__action-btn:focus-visible,
  a.btn.btn-slider:focus-visible,
  .btn.btn-style1:focus-visible,
  .btn.btn-style2:focus-visible {
    outline: 2px solid CanvasText !important;
    outline-offset: 2px !important;
  }
}

/* ---------- 2. Back-to-top ring: glass, matching the floating buttons --------
   44 px like the Call button. venor.js draws the reading progress on the svg
   path (keep it and its viewBox); over the white bands hitech-fab.js adds
   .is-light (light glass); the arrow is a mask, so it takes any colour.
   hitech-ui.js: Enter/Space and an instant jump when the visitor asks for less
   motion. */
.progress-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(8, 8, 12, .7);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 70px -30px rgba(0, 0, 0, .9), 0 10px 26px -10px rgba(0, 0, 0, .6);
  outline: none;
  -webkit-tap-highlight-color: transparent;
  /* no "translate" here: the magnetic pull drives it every frame (hitech-ui.js) and the ring steps
     aside with "transform" (hitech-fab.css), so the pull never has to touch these lists */
  transition: opacity .3s ease, visibility 0s linear .3s, transform .5s var(--ht-ease-out, cubic-bezier(.16, 1, .3, 1)), background-color .3s ease, box-shadow .45s var(--ht-ease-out, cubic-bezier(.16, 1, .3, 1)), right .5s var(--ht-ease-out, cubic-bezier(.16, 1, .3, 1)), bottom .5s var(--ht-ease-out, cubic-bezier(.16, 1, .3, 1));
}
.progress-wrap.active-progress { transition-delay: 0s; }
/* without the floating column (WhatsApp switched off) the ring still rises above the cookie card */
.progress-wrap { bottom: calc(22px + var(--ht-float-lift, 0px)); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .progress-wrap { background: #0a0a0e; }
}
.progress-wrap svg.progress-circle path { stroke-linecap: round; transition: stroke .3s ease; }
.progress-wrap::after {
  content: "";
  inset: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.2 11.4'%3E%3Cpath transform='translate(0 11.4) rotate(-90)' d='M11.3 4.1L8.1.2c-.3-.2-.7-.3-1 0-.3.2-.3.6-.1.9l2.3 2.8H.7c-.4 0-.7.3-.7.7 0 .4.3.7.7.7h8.6L7 8c-.2.3-.2.8.1 1 .3.2.7.2 1-.1L11.3 5c.2-.3.2-.6 0-.9z'/%3E%3C/svg%3E") center / 10px 12px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.2 11.4'%3E%3Cpath transform='translate(0 11.4) rotate(-90)' d='M11.3 4.1L8.1.2c-.3-.2-.7-.3-1 0-.3.2-.3.6-.1.9l2.3 2.8H.7c-.4 0-.7.3-.7.7 0 .4.3.7.7.7h8.6L7 8c-.2.3-.2.8.1 1 .3.2.7.2 1-.1L11.3 5c.2-.3.2-.6 0-.9z'/%3E%3C/svg%3E") center / 10px 12px no-repeat;
  transition: background-color .3s ease, translate .45s var(--ht-ease-out, cubic-bezier(.16, 1, .3, 1));
}
@media (hover: hover) {
  .progress-wrap:hover {
    background-color: var(--ht-signal, #4361ff);
    box-shadow: inset 0 0 0 1px var(--ht-signal, #4361ff), 0 14px 38px -12px rgba(67, 97, 255, .75);
  }
  .progress-wrap:hover::after { translate: 0 -2px; }
}
.progress-wrap:focus-visible {
  outline: 2px solid transparent; /* shows in forced colours, where box-shadows are dropped */
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--ht-signal, #4361ff);
}
/* venor.js also marks the ring .light, decided from the floating column's centre (60-130 px below
   the ring): its look is left out here; the ring's own glass follows .is-light (hitech-fab.js,
   from the band under the ring itself) */
body:not(.menu-open) .progress-wrap.active-progress.light { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 70px -30px rgba(0, 0, 0, .9), 0 10px 26px -10px rgba(0, 0, 0, .6); }
body:not(.menu-open) .progress-wrap.active-progress.light path { stroke: #fff; }
/* light glass over the white bands */
body:not(.menu-open) .progress-wrap.active-progress.is-light {
  background-color: rgba(255, 255, 255, .78);
  box-shadow: inset 0 0 0 1px rgba(11, 11, 16, .14), 0 18px 40px -20px rgba(11, 11, 16, .35);
}
body:not(.menu-open) .progress-wrap.active-progress.is-light path { stroke: #0b0b10; }
body:not(.menu-open) .progress-wrap.active-progress.is-light::after { background-color: #0b0b10; }
/* hover and keyboard focus over either glass (same weight as the rules above, so they win) */
@media (hover: hover) {
  body:not(.menu-open) .progress-wrap.active-progress:hover {
    background-color: var(--ht-signal, #4361ff);
    box-shadow: inset 0 0 0 1px var(--ht-signal, #4361ff), 0 14px 38px -12px rgba(67, 97, 255, .75);
  }
  body:not(.menu-open) .progress-wrap.active-progress:hover path { stroke: #fff; }
  body:not(.menu-open) .progress-wrap.active-progress:hover::after { background-color: #fff; }
}
body:not(.menu-open) .progress-wrap.active-progress:focus-visible { box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--ht-signal, #4361ff); }
body:not(.menu-open) .progress-wrap.active-progress.is-light:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ht-signal, #4361ff); }
/* Under the dark layer of a lightbox (Magnific, z 1042-1046), like the rest of the page and the
   cookie card: the ring does not sit bright on the picture's edge. */
body:has(> .mfp-bg) .progress-wrap { z-index: 1041; }
/* out of the way (and out of the Tab order) while the side menu is open */
body.menu-open .progress-wrap {
  opacity: 0;
  visibility: hidden;
}
/* Windows high contrast (forced colours): backgrounds turn into the page colour, so the ring gets
   an edge and the masked arrow the text colour (contained here, hence !important) */
@media (forced-colors: active) {
  .progress-wrap { border: 1px solid CanvasText; }
  .progress-wrap::after {
    background-color: CanvasText !important;
    forced-color-adjust: none;
  }
}

/* ---------- 3. Cursor follower (hitech-ui.js; mouse + motion only) -----------
   A thin ring that trails the pointer and a dot on it. "difference" blending
   makes both read on black and on the white bands. Over links and buttons the
   ring grows and turns Signal; over text fields, iframes, the menu's overlay,
   the theme's photo tooltips, the project/article cards' own label and
   [data-ht-cursor="hide"] it steps aside. The native cursor always stays. */
.ht-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10060; /* above the search panel (10050), below the loading screen */
  width: 0;
  height: 0;
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity .35s ease;
}
.ht-cursor.is-on { opacity: 1; }
.ht-cursor.is-on.is-hidden,
.ht-cursor.is-on.is-text { opacity: 0; transition-duration: .2s; }
.ht-cursor__ring,
.ht-cursor__dot {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 50%;
  pointer-events: none;
  will-change: translate;
}
.ht-cursor__ring {
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 1.5px solid #fff;
  transition: scale .5s var(--ht-ease-out, cubic-bezier(.16, 1, .3, 1)), background-color .3s ease, border-color .2s ease;
}
.ht-cursor__dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: #fff;
  transition: scale .35s var(--ht-ease-out, cubic-bezier(.16, 1, .3, 1)), opacity .2s ease;
}
.ht-cursor.is-link { mix-blend-mode: normal; }
.ht-cursor.is-link .ht-cursor__ring {
  scale: 1.75;
  border-color: var(--ht-signal, #4361ff);
  background-color: rgba(67, 97, 255, .14);
}
.ht-cursor.is-link .ht-cursor__dot { scale: 0; opacity: 0; }
.ht-cursor.is-down .ht-cursor__ring { scale: .82; }
.ht-cursor.is-link.is-down .ht-cursor__ring { scale: 1.5; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .ht-cursor { display: none !important; }
}

/* ---------- 4. Boxed cards: light tilt (hitech-ui.js sets "rotate") ----------
   One card at a time; its list gets depth while it moves, seen from the card. */
.ht-tilt-host {
  perspective: 1100px;
  perspective-origin: var(--ht-tilt-ox, 50%) var(--ht-tilt-oy, 50%);
}

/* ---------- 5. Page transitions (same-site links, Chrome/Edge/Safari) ---------
   The old page sinks back while the next one rises over it like a curtain; its
   first frame is the black loading screen, so the curtain runs straight into
   the loader. Back/forward ("ht-back", set by the layout's head script) runs
   the other way. No JavaScript takes over the clicks. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    mix-blend-mode: normal;
    animation-duration: .8s;
    animation-timing-function: cubic-bezier(.77, 0, .175, 1);
    animation-fill-mode: both;
  }
  ::view-transition-old(root) { animation-name: ht-vt-out; }
  ::view-transition-new(root) { animation-name: ht-vt-in; }
  html:active-view-transition-type(ht-back)::view-transition-old(root) { animation-name: ht-vt-out-back; }
  html:active-view-transition-type(ht-back)::view-transition-new(root) { animation-name: ht-vt-in-back; }
  /* parts of the page left behind that have no place here (e.g. the sign-in card) */
  ::view-transition-old(*) { animation: ht-vt-gone .35s cubic-bezier(.77, 0, .175, 1) both; }
}
@keyframes ht-vt-out {
  to { opacity: .3; transform: translate3d(0, -5vh, 0) scale(.96); }
}
@keyframes ht-vt-in {
  from { clip-path: inset(100% 0 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes ht-vt-out-back {
  to { opacity: .3; transform: translate3d(0, 5vh, 0) scale(.96); }
}
@keyframes ht-vt-in-back {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes ht-vt-gone {
  to { opacity: 0; }
}

/* ---------- 6. Less motion: calm versions of the theme's own motion ----------
   ScrollReveal writes inline styles (hence !important); the theme's endless
   loops stop; the sticky header and slider fades end at once (their events
   still fire); the About photos stop drifting. */
@media (prefers-reduced-motion: reduce) {
  [data-sr-id] {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .animated {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }
  a.hero__scroll svg,
  span.typed-cursor,
  .slider-content h1,
  span.venor-animate-border::after,
  .codeless-add-purchase-button i.icon::before { animation: none; }
  .thumparallax,
  .thumparallax-down {
    transform: none !important;
    transition: none !important;
  }
  .pace-cover { transition: none; }
  .header__action-btn,
  a.btn.btn-slider,
  .btn.btn-style1,
  .btn.btn-style2 { transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
  .header__action-btn:before,
  a.btn.btn-slider:before,
  .btn.btn-style1:before,
  .btn.btn-style2:before { transition-duration: .01s; }
  .header__action-btn:hover svg,
  a.btn.btn-slider:hover svg,
  .btn.btn-style1:hover svg,
  .btn.btn-style2:hover svg,
  .header__action-btn:focus-visible svg,
  a.btn.btn-slider:focus-visible svg,
  .btn.btn-style2:focus-visible svg,
  .rtl .header__action-btn:hover svg,
  .rtl a.btn.btn-slider:hover svg,
  .rtl .btn.btn-style1:hover svg,
  .rtl .btn.btn-style2:hover svg,
  .rtl .header__action-btn:focus-visible svg,
  .rtl a.btn.btn-slider:focus-visible svg,
  .rtl .btn.btn-style2:focus-visible svg,
  .progress-wrap:hover::after { translate: none; }
  .header__action-btn:active,
  a.btn.btn-slider:active,
  .btn.btn-style1:active,
  .btn.btn-style2:active { scale: none; }
  .progress-wrap { transition: opacity .2s ease, visibility 0s linear .2s, background-color .2s ease, box-shadow .2s ease; transform: none; }
}

@media print {
  .ht-cursor,
  .progress-wrap { display: none !important; }
}