/* =========================================================================
   HaZeM Child — main stylesheet
   1. Tokens (light/dark)  2. Base  3. Buttons  4. Header  5. Mobile menu
   6. Sections & cards     7. Hero  8. Portfolio 9. Pricing 10. Misc blocks
   11. Footer & floating   12. Animations 13. Responsive
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --hz-accent:#7c3aed; --hz-accent-2:#06b6d4; --hz-accent-3:#ec4899; --hz-blue:#3b82f6;
  --hz-grad:linear-gradient(120deg,#7c3aed 0%,#4f46e5 35%,#3b82f6 60%,#06b6d4 100%);
  --hz-grad-soft:linear-gradient(120deg,rgba(124,58,237,.14),rgba(6,182,212,.14));
  --hz-radius:22px; --hz-radius-sm:14px; --hz-header-h:78px; --hz-max:1240px;
  --hz-ease:cubic-bezier(.22,1,.36,1);
  --hz-font:"HZ Sans",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  /* light */
  --hz-bg:#f6f7fb; --hz-bg-2:#eef0f8; --hz-surface:#ffffff; --hz-surface-2:#f1f2f9;
  --hz-border:rgba(17,20,45,.09); --hz-border-strong:rgba(17,20,45,.16);
  --hz-heading:#0b0d1f; --hz-text:#2c3150; --hz-muted:#5d6385;
  --hz-glass:rgba(255,255,255,.72); --hz-shadow:0 10px 30px -12px rgba(30,27,75,.18),0 2px 6px rgba(30,27,75,.05);
  --hz-shadow-lg:0 30px 60px -20px rgba(30,27,75,.28);
  --hz-blob-opacity:.42; --hz-grid-color:rgba(17,20,45,.06);
}
html[data-theme="dark"]{
  --hz-accent:#8b5cf6; --hz-accent-2:#22d3ee;
  --hz-bg:#06070f; --hz-bg-2:#0b0d1b; --hz-surface:#0f1122; --hz-surface-2:#151831;
  --hz-border:rgba(255,255,255,.08); --hz-border-strong:rgba(255,255,255,.16);
  --hz-heading:#f5f6ff; --hz-text:#c9cce4; --hz-muted:#9196b8;
  --hz-glass:rgba(10,12,26,.66); --hz-shadow:0 10px 30px -12px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.04) inset;
  --hz-shadow-lg:0 30px 70px -20px rgba(0,0,0,.75);
  --hz-blob-opacity:.55; --hz-grid-color:rgba(255,255,255,.05);
  color-scheme:dark;
}
html[data-theme="light"]{color-scheme:light}
/* Kadence global palette mapped to our tokens so every Kadence/core block follows the theme */
:root,html[data-theme]{
  --global-palette1:var(--hz-accent); --global-palette2:var(--hz-accent-2);
  --global-palette3:var(--hz-heading); --global-palette4:var(--hz-text); --global-palette5:var(--hz-muted);
  --global-palette6:var(--hz-border-strong); --global-palette7:var(--hz-surface-2); --global-palette8:var(--hz-surface);
  --global-palette9:var(--hz-bg); --global-palette-highlight:var(--hz-accent); --global-palette-highlight-alt:var(--hz-accent-2);
  --global-palette-btn-bg:var(--hz-accent); --global-palette-btn-bg-hover:var(--hz-accent-2);
  --global-palette-btn:#fff; --global-palette-btn-hover:#fff;
  --global-body-font-family:var(--hz-font); --global-heading-font-family:var(--hz-font);
  --global-content-width:var(--hz-max);
}

/* ---------- 2. Base ---------- */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.hz-site{font-family:var(--hz-font);background:var(--hz-bg);color:var(--hz-text);font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color .4s var(--hz-ease),color .4s var(--hz-ease)}
body.hz-lang-en{line-height:1.65}
.hz-site h1,.hz-site h2,.hz-site h3,.hz-site h4,.hz-site h5,.hz-site h6{font-family:var(--hz-font);color:var(--hz-heading);letter-spacing:-.02em;line-height:1.25;font-weight:700}
.hz-lang-ar h1,.hz-lang-ar h2,.hz-lang-ar h3{letter-spacing:0;line-height:1.35}
.hz-site a{color:var(--hz-accent);text-decoration:none;transition:color .25s}
.hz-site a:hover{color:var(--hz-accent-2)}
.hz-site ::selection{background:var(--hz-accent);color:#fff}
.hz-site img{max-width:100%;height:auto}
.hz-site .site,.hz-site #wrapper,.hz-site .content-bg,.hz-site .site-main,.hz-site .content-area{background:transparent}
.hz-site .entry-content-wrap{padding:0}
.hz-site.hz-transparent #inner-wrap{padding-top:0}
.hz-site:not(.hz-transparent) #inner-wrap{padding-top:calc(var(--hz-header-h) + 24px)}
.hz-site .content-area{margin-top:0;margin-bottom:0}
.hz-container{width:100%;max-width:var(--hz-max);margin-inline:auto;padding-inline:clamp(18px,4vw,32px);box-sizing:border-box}
.hz-container > *,.hz-section > *{margin-block:0}
.entry-content .hz-section,.entry-content .hz-hero,.entry-content .hz-page-hero{margin:0 !important;max-width:none !important}
.hz-site .entry-content > .wp-block-group{margin-block:0}
.hz-site .single-content > *{margin-block:0}
.hz-hide,.hz-rotate-words{display:none !important}
.hz-center{text-align:center}.hz-mt{margin-top:40px !important}
.hz-site :focus-visible{outline:2px solid var(--hz-accent-2);outline-offset:3px;border-radius:8px}
.hz-gradient-text,.hz-site .hz-grad-text{background:var(--hz-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* ---------- 3. Buttons ---------- */
.hz-btn,.hz-site .wp-block-button .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 24px;border-radius:999px;font-weight:600;font-size:16px;line-height:1.2;border:1px solid transparent;cursor:pointer;position:relative;isolation:isolate;overflow:hidden;transition:transform .35s var(--hz-ease),box-shadow .35s var(--hz-ease),background .3s,color .3s,border-color .3s;text-decoration:none;white-space:nowrap}
.hz-btn .hz-ico--arrow{transition:transform .35s var(--hz-ease)}
.hz-lang-ar .hz-btn .hz-ico--arrow,.hz-lang-ar .hz-price__more::after{transform:scaleX(-1)}
.hz-btn:hover .hz-ico--arrow{transform:translateX(4px)}
.hz-lang-ar .hz-btn:hover .hz-ico--arrow{transform:scaleX(-1) translateX(4px)}
.hz-btn--grad,.hz-site .wp-block-button.hz-b-grad .wp-block-button__link{background:var(--hz-grad);background-size:180% 100%;background-origin:border-box;background-clip:border-box;background-repeat:no-repeat;border-color:transparent;color:#fff !important;box-shadow:0 10px 30px -10px rgba(124,58,237,.7)}
.hz-btn--grad:hover,.hz-site .wp-block-button.hz-b-grad .wp-block-button__link:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(6,182,212,.7);color:#fff}
.hz-btn--grad::after,.hz-site .wp-block-button.hz-b-grad .wp-block-button__link::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--hz-ease);z-index:-1}
.hz-btn--grad:hover::after,.hz-site .wp-block-button.hz-b-grad .wp-block-button__link:hover::after{transform:translateX(120%)}
.hz-btn--ghost,.hz-site .wp-block-button.hz-b-ghost .wp-block-button__link{background:var(--hz-glass);color:var(--hz-heading) !important;border-color:var(--hz-border-strong);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hz-btn--ghost:hover,.hz-site .wp-block-button.hz-b-ghost .wp-block-button__link:hover{border-color:var(--hz-accent);transform:translateY(-2px);box-shadow:0 10px 30px -14px var(--hz-accent)}
.hz-btn--light{background:#fff;color:#0b0d1f !important}.hz-btn--light:hover{transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(0,0,0,.45)}
.hz-btn--wa{background:#25d366;color:#fff !important;box-shadow:0 16px 40px -12px rgba(37,211,102,.75)}
.hz-btn--wa:hover{background:#1ebe5b;transform:translateY(-2px) scale(1.02)}
.hz-btn--sm{padding:9px 16px;font-size:14px}.hz-btn--lg{padding:16px 30px;font-size:17px}.hz-btn--xl{padding:20px 38px;font-size:20px}
.hz-btn--block{width:100%}

/* ---------- 4. Header ---------- */
#masthead.hz-header{background:transparent !important;box-shadow:none !important;position:fixed;z-index:999} /* Kadence's #masthead{position:relative} was out-ranking .hz-header{position:fixed}: header never stuck and the mobile menu covered its close button */
.hz-header{position:fixed;inset-inline:0;top:0;z-index:999;transition:transform .5s var(--hz-ease)}
.admin-bar .hz-header{top:32px}
.hz-header__bar{height:var(--hz-header-h);display:flex;align-items:center;transition:background .4s var(--hz-ease),box-shadow .4s,border-color .4s,height .4s var(--hz-ease);border-bottom:1px solid transparent}
.hz-header.is-scrolled .hz-header__bar,.hz-site:not(.hz-transparent) .hz-header__bar{background:var(--hz-glass);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border-bottom-color:var(--hz-border);box-shadow:0 10px 40px -20px rgba(0,0,0,.35)}
.hz-header.is-scrolled{--hz-header-h:66px}
.hz-header.is-hidden{transform:translateY(-110%)}
.hz-header__inner{display:flex;align-items:center;gap:20px;justify-content:space-between}
.hz-logo{display:inline-flex;align-items:center;gap:10px;color:var(--hz-heading) !important;font-weight:800;font-size:20px;letter-spacing:-.02em;direction:ltr;flex-shrink:0}
.hz-logo__mark svg{display:block;transition:transform .6s var(--hz-ease)}
.hz-logo:hover .hz-logo__mark svg{transform:rotate(-12deg) scale(1.08)}
.hz-logo__text b{font-weight:800;background:var(--hz-grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-inline-start:2px}
.hz-nav{position:relative;display:flex;align-items:center}
.hz-menu{display:flex;gap:4px;list-style:none;margin:0;padding:6px;border-radius:999px;background:color-mix(in srgb,var(--hz-surface) 55%,transparent);border:1px solid var(--hz-border);position:relative}
.hz-menu li{margin:0;position:relative;z-index:1}
.hz-menu a{display:block;padding:8px 16px;border-radius:999px;color:var(--hz-text) !important;font-weight:500;font-size:15.5px;position:relative;transition:color .25s}
.hz-menu a::after{content:"";position:absolute;inset-inline:18px;bottom:4px;height:2px;border-radius:2px;background:var(--hz-grad);transform:scaleX(0);transition:transform .45s var(--hz-ease)}
.hz-menu a:hover,.hz-menu .current-menu-item > a{color:var(--hz-heading) !important}
.hz-menu a:hover::after,.hz-menu .current-menu-item > a::after{transform:scaleX(1)}
.hz-nav__pill{position:absolute;top:6px;height:calc(100% - 12px);border-radius:999px;background:var(--hz-grad-soft);border:1px solid color-mix(in srgb,var(--hz-accent) 30%,transparent);opacity:0;transition:transform .45s var(--hz-ease),width .45s var(--hz-ease),opacity .3s;pointer-events:none;left:0;z-index:0}
.hz-nav.has-pill .hz-nav__pill{opacity:1}
.hz-header__actions{display:flex;align-items:center;gap:10px}
.hz-lang{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 14px;border-radius:999px;border:1px solid var(--hz-border-strong);color:var(--hz-heading) !important;font-weight:600;font-size:14px;background:var(--hz-glass);transition:border-color .25s,transform .3s var(--hz-ease)}
.hz-lang:hover{border-color:var(--hz-accent);transform:translateY(-1px)}
.hz-lang .hz-ico{transition:transform .6s var(--hz-ease)}.hz-lang:hover .hz-ico{transform:rotate(180deg)}
.hz-lang__full{display:none}
.hz-theme-toggle{border:0;background:none;padding:0;cursor:pointer;flex-shrink:0}
.hz-theme-toggle__track{display:block;width:64px;height:34px;border-radius:999px;background:var(--hz-surface-2);border:1px solid var(--hz-border-strong);position:relative;transition:background .4s}
.hz-theme-toggle__thumb{position:absolute;top:3px;inset-inline-start:3px;width:26px;height:26px;border-radius:50%;background:var(--hz-grad);color:#fff;display:grid;place-items:center;transition:transform .5s var(--hz-ease);box-shadow:0 4px 12px -2px rgba(124,58,237,.6)}
.hz-theme-toggle__thumb svg{grid-area:1/1;transition:opacity .3s,transform .5s var(--hz-ease)}
.hz-theme-toggle .hz-ico--moon{opacity:0;transform:rotate(-90deg) scale(.5)}
html[data-theme="dark"] .hz-theme-toggle__thumb{transform:translateX(30px)}
html[dir="rtl"][data-theme="dark"] .hz-theme-toggle__thumb{transform:translateX(-30px)}
html[data-theme="dark"] .hz-theme-toggle .hz-ico--sun{opacity:0;transform:rotate(90deg) scale(.5)}
html[data-theme="dark"] .hz-theme-toggle .hz-ico--moon{opacity:1;transform:none}
.hz-header__cta{padding:11px 20px;font-size:15px}
.hz-burger{display:none;width:46px;height:46px;border-radius:14px;border:1px solid var(--hz-border-strong);background:var(--hz-glass);cursor:pointer;position:relative;padding:0}
.hz-burger span{position:absolute;inset-inline-start:12px;width:22px;height:2px;border-radius:2px;background:var(--hz-heading);transition:transform .45s var(--hz-ease),opacity .3s,width .3s}
.hz-burger span:nth-child(1){top:15px}.hz-burger span:nth-child(2){top:22px;width:16px}.hz-burger span:nth-child(3){top:29px}
.hz-menu-open .hz-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hz-menu-open .hz-burger span:nth-child(2){opacity:0;transform:translateX(10px)}
.hz-menu-open .hz-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hz-progress{position:absolute;inset-inline:0;bottom:0;height:2px;pointer-events:none}
.hz-progress span{display:block;height:100%;width:100%;background:var(--hz-grad);transform:scaleX(var(--p,0));transform-origin:left;transition:transform .1s linear}
html[dir="rtl"] .hz-progress span{transform-origin:right}

/* ---------- 5. Mobile menu ---------- */
.hz-mobile{position:fixed;inset:0;z-index:998;visibility:hidden;pointer-events:none}
.hz-mobile__bg{position:absolute;inset:0;background:var(--hz-bg);clip-path:circle(0% at calc(100% - 50px) 40px);transition:clip-path .7s var(--hz-ease)}
html[dir="rtl"] .hz-mobile__bg{clip-path:circle(0% at 50px 40px)}
.hz-mobile__bg span{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(80px);opacity:.35}
.hz-mobile__bg span:first-child{background:var(--hz-accent);top:-20vmax;inset-inline-end:-20vmax}
.hz-mobile__bg span:last-child{background:var(--hz-accent-2);bottom:-25vmax;inset-inline-start:-20vmax}
.hz-menu-open .hz-mobile{visibility:visible;pointer-events:auto}
.hz-menu-open .hz-mobile__bg{clip-path:circle(150% at calc(100% - 50px) 40px)}
html[dir="rtl"].hz-menu-open .hz-mobile__bg{clip-path:circle(150% at 50px 40px)}
.hz-mobile__inner{position:relative;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--hz-header-h) + 30px) 28px 32px;overflow-y:auto;box-sizing:border-box}
.hz-mobile__menu{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.hz-mobile__menu li{overflow:hidden;margin:0}
.hz-mobile__menu a{display:flex;align-items:center;justify-content:space-between;font-size:clamp(28px,8vw,40px);font-weight:700;color:var(--hz-heading) !important;padding:8px 0;border-bottom:1px solid var(--hz-border)}
.hz-mobile__txt{display:inline-block;transform:translateY(110%);transition:transform .7s var(--hz-ease)}
.hz-menu-open .hz-mobile__txt{transform:none}
.hz-mobile__menu li:nth-child(1) .hz-mobile__txt{transition-delay:.15s}.hz-mobile__menu li:nth-child(2) .hz-mobile__txt{transition-delay:.2s}.hz-mobile__menu li:nth-child(3) .hz-mobile__txt{transition-delay:.25s}.hz-mobile__menu li:nth-child(4) .hz-mobile__txt{transition-delay:.3s}.hz-mobile__menu li:nth-child(5) .hz-mobile__txt{transition-delay:.35s}.hz-mobile__menu li:nth-child(6) .hz-mobile__txt{transition-delay:.4s}
.hz-mobile__menu .current-menu-item a .hz-mobile__txt{background:var(--hz-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hz-mobile__foot{display:grid;gap:18px;margin-top:30px;opacity:0;transform:translateY(20px);transition:opacity .5s .45s,transform .7s .45s var(--hz-ease)}
.hz-menu-open .hz-mobile__foot{opacity:1;transform:none}
.hz-mobile__row{display:flex;justify-content:space-between;align-items:center}
.hz-lang--pill .hz-lang__full{display:inline}.hz-lang--pill .hz-lang__short{display:none}
.hz-mobile__phone{color:var(--hz-muted) !important;text-align:center;font-weight:600}
html.hz-menu-open,html.hz-menu-open body{overflow:hidden}

/* ---------- 6. Sections & cards ---------- */
.hz-section{position:relative;padding-block:clamp(70px,9vw,120px)}
.hz-section--alt{background:var(--hz-bg-2)}
.hz-section--tight{padding-block:clamp(40px,6vw,70px)}
.hz-head{max-width:760px;margin:0 auto clamp(36px,5vw,60px) !important;text-align:center}
.hz-head--start{text-align:start;margin-inline:0 !important}
.hz-eyebrow,.hz-site p.hz-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--hz-grad-soft);border:1px solid color-mix(in srgb,var(--hz-accent) 25%,transparent);color:var(--hz-accent);font-weight:600;font-size:14px;margin:0 0 16px !important;letter-spacing:.02em}
html[data-theme="dark"] .hz-eyebrow{color:#c4b5fd}
.hz-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--hz-grad);box-shadow:0 0 0 4px color-mix(in srgb,var(--hz-accent) 20%,transparent)}
.hz-h2,.hz-site h2.hz-h2{font-size:clamp(30px,4.4vw,52px);margin:0 0 16px}
.hz-sub,.hz-site p.hz-sub{font-size:clamp(16px,1.6vw,19px);color:var(--hz-muted);margin:0 auto;max-width:640px}
.hz-head--start .hz-sub{margin:0}
.hz-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.hz-cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hz-cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hz-card{position:relative;padding:30px;border-radius:var(--hz-radius);background:var(--hz-surface);border:1px solid var(--hz-border);box-shadow:var(--hz-shadow);overflow:hidden;transition:transform .5s var(--hz-ease),border-color .4s,box-shadow .5s;transform-style:preserve-3d}
.hz-card > *{margin-block:0}
.hz-card:hover{border-color:color-mix(in srgb,var(--hz-accent) 45%,transparent);box-shadow:var(--hz-shadow-lg)}
.hz-card h3{font-size:21px;margin:18px 0 10px !important}
.hz-card p{color:var(--hz-muted);margin:0 !important;font-size:16px}
.hz-card__icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:var(--hz-grad);color:#fff;box-shadow:0 12px 30px -10px rgba(124,58,237,.65);transition:transform .6s var(--hz-ease)}
.hz-card:hover .hz-card__icon{transform:rotate(-8deg) scale(1.08)}
.hz-card__icon svg{width:28px;height:28px}
.hz-card .hz-card__link{display:inline-flex;margin-top:18px !important;font-weight:600}
.hz-card .hz-card__link a{display:inline-flex;align-items:center;gap:6px}
.hz-glow,.hz-card::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--hz-accent) 18%,transparent),transparent 45%);opacity:0;transition:opacity .4s;z-index:0}
.hz-card::before{z-index:0}
.hz-card > *{position:relative;z-index:1}
.hz-tilt:hover .hz-glow,.hz-card:hover::before{opacity:1}
.hz-list,.hz-site ul.hz-list{list-style:none;padding:0;margin:18px 0 0 !important;display:grid;gap:10px}
.hz-list li{position:relative;padding-inline-start:30px;color:var(--hz-text)}
.hz-list li::before{content:"";position:absolute;inset-inline-start:0;top:.45em;width:19px;height:19px;border-radius:50%;background:var(--hz-grad) center/12px no-repeat;-webkit-mask:none}
.hz-list li::after{content:"";position:absolute;inset-inline-start:6px;top:calc(.45em + 5px);width:7px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}

/* Stats */
.hz-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.hz-stat{padding:26px 22px;border-radius:var(--hz-radius);background:var(--hz-surface);border:1px solid var(--hz-border);text-align:center;position:relative;overflow:hidden}
.hz-stat > *{margin:0 !important}
.hz-stat::after{content:"";position:absolute;inset-inline:20%;bottom:0;height:3px;border-radius:3px;background:var(--hz-grad)}
.hz-counter,.hz-site p.hz-counter{font-size:clamp(36px,4.6vw,54px);font-weight:800;line-height:1.1;background:var(--hz-grad);-webkit-background-clip:text;background-clip:text;color:transparent;direction:ltr;font-variant-numeric:tabular-nums}
.hz-stat p:last-child{color:var(--hz-muted);font-size:15px;margin-top:6px !important}

/* Split layout */
.hz-split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.hz-split > *{margin:0 !important}

/* Process */
.hz-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;counter-reset:step;position:relative}
.hz-steps::before{content:"";position:absolute;top:44px;inset-inline:12%;height:2px;background:linear-gradient(90deg,transparent,var(--hz-accent),var(--hz-accent-2),transparent);opacity:.5}
.hz-step{position:relative;text-align:center;padding:0 10px}
.hz-step > *{margin:0 !important}
.hz-step::before{counter-increment:step;content:"0" counter(step);display:grid;place-items:center;width:88px;height:88px;margin:0 auto 22px;border-radius:28px;background:var(--hz-surface);border:1px solid var(--hz-border-strong);font-size:28px;font-weight:800;color:var(--hz-heading);box-shadow:var(--hz-shadow);position:relative;z-index:1;transition:transform .5s var(--hz-ease),background .4s,color .4s;direction:ltr}
.hz-step:hover::before{transform:translateY(-6px) rotate(-6deg);background:var(--hz-grad);color:#fff}
.hz-step h3{font-size:20px;margin-bottom:8px !important}
.hz-step p{color:var(--hz-muted);font-size:15.5px}

/* Testimonials */
.hz-quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.hz-quote{padding:30px;border-radius:var(--hz-radius);background:var(--hz-surface);border:1px solid var(--hz-border);position:relative}
.hz-quote > *{margin:0 !important}
.hz-quote::before{content:"”";position:absolute;top:6px;inset-inline-end:22px;font-size:90px;line-height:1;font-family:Georgia,serif;background:var(--hz-grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.6}
.hz-quote__stars{color:#f5a524;letter-spacing:3px;font-size:18px}
.hz-quote__text{font-size:16.5px;color:var(--hz-text);margin:14px 0 20px !important}
.hz-quote__who{font-weight:700;color:var(--hz-heading)}
.hz-quote__role{color:var(--hz-muted);font-size:14px}
.hz-note,.hz-site p.hz-note{text-align:center;color:var(--hz-muted);font-size:13.5px;margin-top:22px !important;opacity:.85}

/* FAQ */
.hz-faq{max-width:860px;margin:0 auto;display:grid;gap:12px}
.hz-faq .wp-block-details{margin:0;border-radius:18px;background:var(--hz-surface);border:1px solid var(--hz-border);padding:0;overflow:hidden;transition:border-color .3s,box-shadow .3s}
.hz-faq .wp-block-details[open]{border-color:color-mix(in srgb,var(--hz-accent) 45%,transparent);box-shadow:var(--hz-shadow)}
.hz-faq summary{cursor:pointer;list-style:none;display:block;position:relative;padding:20px 24px;padding-inline-end:76px;min-height:72px;box-sizing:border-box;font-weight:600;font-size:17.5px;line-height:1.6;color:var(--hz-heading);border-radius:inherit;-webkit-tap-highlight-color:transparent}
.hz-faq summary::-webkit-details-marker{display:none}
.hz-faq summary::after{content:"";position:absolute;top:50%;inset-inline-end:22px;width:32px;height:32px;margin-top:-16px;border-radius:50%;box-sizing:border-box;background:linear-gradient(currentColor,currentColor) center/12px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 12px no-repeat,var(--hz-grad-soft);color:var(--hz-accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hz-accent) 18%,transparent);transition:transform .4s var(--hz-ease),background-color .3s}
.hz-faq summary::marker{content:""}
.hz-faq summary:hover::after{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hz-accent) 45%,transparent)}
.hz-faq summary:focus-visible{outline:2px solid var(--hz-accent);outline-offset:-2px}
.hz-faq details[open] summary::after{transform:rotate(45deg);background:linear-gradient(#fff,#fff) center/12px 2px no-repeat,linear-gradient(#fff,#fff) center/2px 12px no-repeat,var(--hz-grad);box-shadow:none}
@media (max-width:600px){.hz-faq summary{padding:16px 18px;padding-inline-end:64px;font-size:16px;min-height:64px}.hz-faq summary::after{inset-inline-end:16px;width:30px;height:30px;margin-top:-15px}.hz-faq details > :not(summary){padding:0 18px 18px}}
.hz-faq details > :not(summary){padding:0 24px 20px;margin:0;color:var(--hz-muted)}

/* CTA band */
.hz-cta-band{position:relative;overflow:hidden;border-radius:32px;padding:clamp(36px,6vw,70px);background:var(--hz-grad);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;box-shadow:0 40px 80px -30px rgba(79,70,229,.6)}
.hz-cta-band > *{margin:0 !important;position:relative;z-index:1}
.hz-cta-band::before,.hz-cta-band::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.14);z-index:0}
.hz-cta-band::before{width:380px;height:380px;top:-160px;inset-inline-end:-80px;animation:hz-float 9s ease-in-out infinite}
.hz-cta-band::after{width:220px;height:220px;bottom:-110px;inset-inline-start:10%;animation:hz-float 7s ease-in-out infinite reverse}
.hz-site .hz-cta-band h2{color:#fff;font-size:clamp(26px,3.6vw,42px);margin:0 0 8px !important}
.hz-cta-band p{color:rgba(255,255,255,.88);margin:0 !important;font-size:18px;max-width:560px}
.hz-cta-band .wp-block-button .wp-block-button__link,.hz-cta-band .hz-btn{background:#fff;color:#1e1b4b !important}
.hz-cta-band .wp-block-button.hz-b-ghost .wp-block-button__link{background:transparent;color:#fff !important;border-color:rgba(255,255,255,.6)}
.hz-site .wp-block-buttons{gap:12px}

/* Marquee */
.hz-marquee{position:relative;overflow:hidden;padding-block:26px;direction:ltr;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);border-block:1px solid var(--hz-border)}
.hz-marquee__track{display:flex;gap:14px;width:max-content;animation:hz-marquee 40s linear infinite}
.hz-marquee:hover .hz-marquee__track{animation-play-state:paused}
.hz-marquee__item{display:inline-flex;align-items:center;gap:10px;padding:10px 20px;border-radius:999px;background:var(--hz-surface);border:1px solid var(--hz-border);color:var(--hz-heading);font-weight:600;font-size:15.5px;white-space:nowrap;transition:border-color .3s,transform .3s}
.hz-marquee__item:hover{border-color:var(--hz-accent);transform:translateY(-2px)}
.hz-marquee__item i{width:10px;height:10px;border-radius:3px;background:var(--c,var(--hz-accent));transform:rotate(45deg)}
.hz-marquee--reverse .hz-marquee__track{animation-direction:reverse}

/* Page hero (inner pages) */
.hz-page-hero{position:relative;overflow:hidden;padding:calc(var(--hz-header-h) + clamp(60px,9vw,110px)) 0 clamp(50px,7vw,90px);text-align:center;isolation:isolate}
.hz-page-hero > .hz-container > *{margin-block:0}
.hz-page-title,.hz-site h1.hz-page-title{font-size:clamp(36px,6vw,68px);margin:0 0 18px !important}
.hz-lead,.hz-site p.hz-lead{font-size:clamp(17px,1.8vw,21px);color:var(--hz-muted);max-width:720px;margin:0 auto !important}
.hz-crumbs{display:flex;gap:10px;justify-content:center;font-size:14px;color:var(--hz-muted);margin-bottom:18px !important}
.hz-crumbs a{color:var(--hz-muted) !important}.hz-crumbs a:hover{color:var(--hz-accent) !important}

/* ---------- 7. Home hero ---------- */
.hz-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:calc(var(--hz-header-h) + 50px) 0 80px;overflow:hidden;isolation:isolate}
.hz-hero > .hz-container{position:relative;z-index:2}
.hz-hero__bg,.hz-page-hero .hz-hero__bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hz-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:var(--hz-blob-opacity);will-change:transform}
.hz-blob--1{width:46vw;height:46vw;max-width:640px;max-height:640px;background:radial-gradient(circle at 30% 30%,#8b5cf6,transparent 65%);top:-10%;inset-inline-start:-8%;animation:hz-blob 18s ease-in-out infinite}
.hz-blob--2{width:40vw;height:40vw;max-width:560px;max-height:560px;background:radial-gradient(circle at 50% 50%,#06b6d4,transparent 65%);bottom:-15%;inset-inline-end:-6%;animation:hz-blob 22s ease-in-out infinite reverse}
.hz-blob--3{width:28vw;height:28vw;max-width:400px;max-height:400px;background:radial-gradient(circle,#ec4899,transparent 65%);top:30%;left:40%;opacity:calc(var(--hz-blob-opacity) * .6);animation:hz-blob 26s ease-in-out infinite}
.hz-gridlines{position:absolute;inset:0;background-image:linear-gradient(var(--hz-grid-color) 1px,transparent 1px),linear-gradient(90deg,var(--hz-grid-color) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 75%)}
.hz-spot{position:absolute;inset:0;background:radial-gradient(600px circle at var(--sx,50%) var(--sy,30%),color-mix(in srgb,var(--hz-accent) 12%,transparent),transparent 60%);transition:background .2s}
.hz-particles{position:absolute;inset:0;width:100%;height:100%;opacity:.7}
.hz-hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,60px);align-items:center}
.hz-hero__grid > *{margin:0 !important}
.hz-hero__text > *{margin-block:0}
.hz-hero__title,.hz-site h1.hz-hero__title{font-size:clamp(38px,6.4vw,80px);line-height:1.12;margin:0 0 22px !important;font-weight:800}
.hz-lang-ar h1.hz-hero__title{line-height:1.3}
.hz-rotate{display:inline-block;background:var(--hz-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;position:relative;padding-inline-end:6px;min-width:1ch}
.hz-rotate::after{content:"";position:absolute;inset-inline-end:0;top:12%;bottom:12%;width:3px;border-radius:3px;background:var(--hz-accent-2);animation:hz-caret 1s steps(1) infinite}
.hz-hero .hz-lead{margin:0 0 32px !important;max-width:580px}
.hz-hero .hz-eyebrow{margin-bottom:22px !important}
.hz-hero__btns{margin-bottom:38px !important}
.hz-trust{display:flex;align-items:center;gap:16px;flex-wrap:wrap;color:var(--hz-muted);font-size:15px}
.hz-trust__faces{display:flex}
.hz-trust__faces span{width:40px;height:40px;border-radius:50%;border:3px solid var(--hz-bg);margin-inline-start:-12px;display:grid;place-items:center;font-weight:700;color:#fff;font-size:14px}
.hz-trust__faces span:first-child{margin-inline-start:0}
.hz-trust strong{color:var(--hz-heading)}
/* hero visual */
.hz-visual{position:relative;height:clamp(380px,42vw,540px);perspective:1200px}
.hz-vcard{position:absolute;border-radius:22px;background:var(--hz-glass);border:1px solid var(--hz-border-strong);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--hz-shadow-lg);direction:ltr;transition:transform .3s ease-out}
.hz-vcard--main{inset:6% 6% 14% 2%;padding:16px;animation:hz-float 8s ease-in-out infinite}
.hz-vcard__dots{display:flex;gap:6px;margin-bottom:14px}.hz-vcard__dots i{width:10px;height:10px;border-radius:50%;background:#ff5f57}.hz-vcard__dots i:nth-child(2){background:#febc2e}.hz-vcard__dots i:nth-child(3){background:#28c840}
.hz-vcard__screen{height:calc(100% - 26px);border-radius:14px;background:var(--hz-surface);overflow:hidden;padding:18px;display:grid;grid-template-rows:auto 1fr auto;gap:14px;box-sizing:border-box}
.hz-vbar{height:10px;border-radius:6px;background:var(--hz-surface-2)}
.hz-vhero{border-radius:12px;background:var(--hz-grad);position:relative;overflow:hidden;min-height:120px}
.hz-vhero::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);animation:hz-shine 3.5s ease-in-out infinite}
.hz-vrow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.hz-vrow span{height:54px;border-radius:10px;background:var(--hz-surface-2)}
.hz-vcard--stat{top:0;inset-inline-end:0;padding:14px 18px;display:flex;align-items:center;gap:12px;animation:hz-float 6s ease-in-out infinite .5s}
.hz-vcard--stat b{font-size:24px;color:var(--hz-heading);display:block;line-height:1.1}
.hz-vcard--stat small{color:var(--hz-muted);font-size:12.5px}
.hz-vcard__ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#22c55e,#06b6d4);color:#fff}
.hz-vcard--order{bottom:4%;inset-inline-start:0;padding:14px 16px;display:flex;align-items:center;gap:12px;animation:hz-float 7s ease-in-out infinite 1s}
.hz-vcard--order .hz-vcard__ico{background:#25d366}
.hz-vcard--order b{font-size:15px;color:var(--hz-heading);display:block}.hz-vcard--order small{color:var(--hz-muted);font-size:12.5px}
.hz-vcard--code{bottom:22%;inset-inline-end:-2%;padding:14px 16px;font-family:ui-monospace,Menlo,monospace;font-size:12.5px;line-height:1.7;color:var(--hz-text);animation:hz-float 9s ease-in-out infinite 2s}
.hz-vcard--code em{color:#c084fc;font-style:normal}.hz-vcard--code u{color:#22d3ee;text-decoration:none}
.hz-scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);width:26px;height:42px;border-radius:14px;border:2px solid var(--hz-border-strong);z-index:2}
.hz-scroll-hint::after{content:"";position:absolute;top:8px;left:50%;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--hz-accent);animation:hz-scroll 1.8s ease-in-out infinite}

/* ---------- 8. Portfolio ---------- */
.hz-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:38px}
.hz-filter{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:1px solid var(--hz-border-strong);background:var(--hz-surface);color:var(--hz-text);font:600 15px var(--hz-font);cursor:pointer;transition:all .35s var(--hz-ease)}
.hz-filter:hover{border-color:var(--hz-accent);color:var(--hz-heading);transform:translateY(-2px)}
.hz-filter.is-active{background:var(--hz-grad);color:#fff;border-color:transparent;box-shadow:0 10px 26px -10px rgba(124,58,237,.7)}
.hz-filter__count{font-size:12px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:grid;place-items:center;background:var(--hz-surface-2);color:var(--hz-muted)}
.hz-filter.is-active .hz-filter__count{background:rgba(255,255,255,.25);color:#fff}
.hz-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.hz-work{position:relative;border-radius:var(--hz-radius);overflow:hidden;background:var(--hz-surface);border:1px solid var(--hz-border);aspect-ratio:4/3;transition:transform .5s var(--hz-ease),opacity .45s var(--hz-ease),box-shadow .5s;box-shadow:var(--hz-shadow)}
.hz-work.is-out{opacity:0;transform:scale(.85) translateY(20px);pointer-events:none}
.hz-work.is-gone{display:none}
.hz-work__media{display:block;height:100%}
.hz-work__img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--hz-ease),filter .6s}
.hz-work:hover .hz-work__img{transform:scale(1.08)}
.hz-work__overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;background:linear-gradient(to top,rgba(6,7,15,.92) 0%,rgba(6,7,15,.55) 45%,transparent 75%);color:#fff;opacity:0;transition:opacity .45s var(--hz-ease);z-index:2}
.hz-work__overlay > *{transform:translateY(16px);transition:transform .55s var(--hz-ease)}
.hz-work:hover .hz-work__overlay,.hz-work:focus-within .hz-work__overlay{opacity:1}
.hz-work:hover .hz-work__overlay > *,.hz-work:focus-within .hz-work__overlay > *{transform:none}
.hz-work__cat{font-size:13px;font-weight:600;color:#a5f3fc;margin-bottom:6px}
.hz-site .hz-work__title{font-size:21px;margin:0 0 6px;color:#fff}
.hz-work__title a{color:#fff !important}
.hz-work__excerpt{font-size:14.5px;color:rgba(255,255,255,.8);margin:0 0 14px;line-height:1.6}
.hz-work__actions{display:flex;gap:10px}
.hz-work__btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff !important;backdrop-filter:blur(8px);cursor:pointer;transition:background .3s,transform .3s;padding:0}
.hz-work__btn:hover{background:var(--hz-grad);transform:scale(1.1)}
.hz-work .hz-glow{z-index:3;mix-blend-mode:screen}
/* lightbox */
.hz-lightbox{position:fixed;inset:0;z-index:10000;background:rgba(3,4,10,.86);backdrop-filter:blur(10px);display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.hz-lightbox.is-open{opacity:1;visibility:visible}
.hz-lightbox__fig{margin:0;max-width:min(1100px,94vw);transform:scale(.92);transition:transform .45s var(--hz-ease)}
.hz-lightbox.is-open .hz-lightbox__fig{transform:none}
.hz-lightbox img{display:block;width:100%;max-height:78vh;object-fit:contain;border-radius:18px;box-shadow:0 40px 80px rgba(0,0,0,.6)}
.hz-lightbox figcaption{display:flex;justify-content:space-between;align-items:center;gap:16px;color:#fff;margin-top:16px;font-size:18px}
.hz-lightbox__close{position:absolute;top:18px;inset-inline-end:18px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:grid;place-items:center}

/* single project */
.hz-project__meta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:30px 0 0 !important}
.hz-project__meta div{padding:12px 20px;border-radius:16px;background:var(--hz-glass);border:1px solid var(--hz-border);text-align:start;backdrop-filter:blur(10px)}
.hz-project__meta dt{font-size:12.5px;color:var(--hz-muted);margin:0}.hz-project__meta dd{margin:0;font-weight:700;color:var(--hz-heading)}
.hz-project__cover{margin:0 0 50px;border-radius:28px;overflow:hidden;box-shadow:var(--hz-shadow-lg);border:1px solid var(--hz-border)}
.hz-project__cover img{display:block;width:100%}
.hz-prose{max-width:820px;margin:0 auto}
.hz-prose h2{font-size:clamp(24px,3vw,32px);margin:40px 0 14px}
.hz-prose p,.hz-prose li{color:var(--hz-text)}
.hz-project__nav{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;max-width:820px;margin:50px auto 0}

/* ---------- 9. Pricing ---------- */
.hz-pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;align-items:stretch}
.hz-price{position:relative;display:flex;flex-direction:column;padding:32px 28px;border-radius:26px;background:var(--hz-surface);border:1px solid var(--hz-border);box-shadow:var(--hz-shadow);transition:transform .5s var(--hz-ease),border-color .4s,box-shadow .5s;overflow:hidden}
.hz-price > *{position:relative;z-index:1}
.hz-price:hover{border-color:color-mix(in srgb,var(--hz-accent) 45%,transparent);box-shadow:var(--hz-shadow-lg)}
.hz-price.is-featured{border:2px solid transparent;background:linear-gradient(var(--hz-surface),var(--hz-surface)) padding-box,var(--hz-grad) border-box;box-shadow:0 30px 60px -24px rgba(124,58,237,.55)}
.hz-price__badge{position:absolute !important;top:18px;inset-inline-end:18px;padding:5px 12px;border-radius:999px;background:var(--hz-grad);color:#fff;font-size:12.5px;font-weight:700}
.hz-site .hz-price__name{font-size:22px;margin:0 0 8px;padding-inline-end:90px}
.hz-price__name a{color:var(--hz-heading) !important}
.hz-price__desc{color:var(--hz-muted);font-size:15px;margin:0 0 20px;min-height:3.2em}
.hz-price__amount{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding-bottom:20px;margin-bottom:20px;border-bottom:1px dashed var(--hz-border-strong)}
.hz-price__from{font-size:14px;color:var(--hz-muted)}
.hz-price__amount strong{font-size:48px;line-height:1;font-weight:800;color:var(--hz-heading)}
.hz-price.is-featured .hz-price__amount strong{background:var(--hz-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hz-price__cur{font-weight:700;color:var(--hz-heading)}
.hz-price__per{color:var(--hz-muted);font-size:14px}
.hz-price__list{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:11px;flex:1}
.hz-price__list li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;color:var(--hz-text);margin:0}
.hz-price__list .hz-ico{flex-shrink:0;margin-top:4px;padding:3px;border-radius:50%;background:var(--hz-grad-soft);color:var(--hz-accent);box-sizing:content-box}
.hz-price__actions{display:grid;gap:12px;text-align:center}
.hz-price__more{font-size:14.5px;font-weight:600;color:var(--hz-muted) !important}
.hz-price__more:hover{color:var(--hz-accent) !important}

/* Contact */
.hz-contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:start}
.hz-contact > *{margin:0 !important}
.hz-ccards{display:grid;gap:14px}
.hz-ccard{display:flex;align-items:center;gap:16px;padding:20px;border-radius:20px;background:var(--hz-surface);border:1px solid var(--hz-border);color:var(--hz-text) !important;transition:transform .4s var(--hz-ease),border-color .3s}
a.hz-ccard:hover{transform:translateY(-3px);border-color:var(--hz-accent)}
.hz-ccard__ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--hz-grad);color:#fff;flex-shrink:0}
.hz-ccard--wa .hz-ccard__ico{background:#25d366}
.hz-ccard small{display:block;color:var(--hz-muted);font-size:13.5px}
.hz-ccard strong{color:var(--hz-heading);font-size:17px}
.hz-form{padding:clamp(24px,4vw,40px);border-radius:28px;background:var(--hz-surface);border:1px solid var(--hz-border);box-shadow:var(--hz-shadow)}
.hz-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.hz-field{display:grid;gap:8px;margin:0}
.hz-field--full{grid-column:1/-1}
.hz-field > span{font-weight:600;font-size:14.5px;color:var(--hz-heading)}
.hz-site .hz-field input,.hz-site .hz-field select,.hz-site .hz-field textarea{width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--hz-border-strong);background:var(--hz-bg);color:var(--hz-heading);font:inherit;font-size:16px;transition:border-color .25s,box-shadow .25s;box-sizing:border-box}
.hz-site .hz-field input:focus,.hz-site .hz-field select:focus,.hz-site .hz-field textarea:focus{outline:none;border-color:var(--hz-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--hz-accent) 18%,transparent)}
.hz-hp{position:absolute !important;left:-9999px;width:1px;height:1px;opacity:0}
.hz-form__foot{margin-top:22px;display:grid;gap:10px;justify-items:start}
.hz-form__note{font-size:14px;color:var(--hz-muted);margin:0}
.hz-form__status{margin:0;font-weight:600;color:var(--hz-accent)}

/* About */
.hz-photo{position:relative;border-radius:30px;overflow:hidden;box-shadow:var(--hz-shadow-lg);margin:0 !important;aspect-ratio:9/11}
.hz-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hz-photo::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:var(--hz-grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.hz-skills{display:grid;gap:16px;margin-top:24px !important}
.hz-skill{display:grid;gap:8px}
.hz-skill__top{display:flex;justify-content:space-between;font-weight:600;color:var(--hz-heading);font-size:15px}
.hz-skill__bar{height:8px;border-radius:8px;background:var(--hz-surface-2);overflow:hidden}
.hz-skill__bar i{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--hz-grad);transform:scaleX(0);transform-origin:var(--o,left);transition:transform 1.4s var(--hz-ease)}
html[dir="rtl"] .hz-skill__bar i{--o:right}
.hz-skills.is-in .hz-skill__bar i{transform:scaleX(1)}

/* ---------- 11. Footer & floating ---------- */
.hz-footer{position:relative;overflow:hidden;padding:80px 0 26px;background:var(--hz-bg-2);border-top:1px solid var(--hz-border);margin-top:0}
.hz-footer__glow{position:absolute;width:700px;height:300px;top:-200px;left:50%;transform:translateX(-50%);background:var(--hz-grad);filter:blur(120px);opacity:.25;pointer-events:none}
.hz-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;position:relative}
.hz-footer__brand p{color:var(--hz-muted);margin:18px 0 22px;font-size:15.5px;max-width:360px}
.hz-site .hz-footer__title{font-size:16px;margin:6px 0 18px;color:var(--hz-heading)}
.hz-footer__links,.hz-footer__contact{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hz-footer__links a{color:var(--hz-muted) !important;font-size:15px;display:inline-block;transition:color .25s,transform .3s var(--hz-ease)}
.hz-footer__links a:hover{color:var(--hz-heading) !important;transform:translateX(4px)}
html[dir="rtl"] .hz-footer__links a:hover{transform:translateX(-4px)}
.hz-footer__contact li,.hz-footer__contact a{display:flex;align-items:center;gap:10px;color:var(--hz-muted) !important;font-size:15px}
.hz-footer__contact .hz-ico{color:var(--hz-accent);flex-shrink:0}
.hz-social{display:flex;gap:10px}
.hz-social a{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--hz-border-strong);color:var(--hz-heading) !important;transition:all .3s var(--hz-ease)}
.hz-social a:hover{background:var(--hz-grad);color:#fff !important;border-color:transparent;transform:translateY(-3px)}
.hz-footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:50px;padding-top:22px;border-top:1px solid var(--hz-border);color:var(--hz-muted);font-size:14px;position:relative}
.hz-footer__bottom p{margin:0}
.hz-heart{color:#ec4899;display:inline-block;animation:hz-beat 1.4s ease-in-out infinite}
.hz-wa-float{position:fixed;bottom:22px;inset-inline-end:22px;z-index:990;width:62px;height:62px;border-radius:50%;background:#25d366;color:#fff !important;display:grid;place-items:center;box-shadow:0 14px 34px -8px rgba(37,211,102,.7);transition:transform .4s var(--hz-ease)}
.hz-wa-float:hover{transform:scale(1.1) rotate(-6deg)}
.hz-wa-float svg{position:relative;z-index:1}
.hz-wa-float__pulse{position:absolute;inset:0;border-radius:50%;background:#25d366;animation:hz-pulse 2.2s ease-out infinite}
.hz-wa-float__tip{position:absolute;inset-inline-end:74px;white-space:nowrap;padding:8px 14px;border-radius:12px;background:var(--hz-surface);color:var(--hz-heading);font-weight:600;font-size:14px;box-shadow:var(--hz-shadow);border:1px solid var(--hz-border);opacity:0;transform:translateX(10px);transition:all .35s var(--hz-ease);pointer-events:none}
html[dir="rtl"] .hz-wa-float__tip{transform:translateX(-10px)}
.hz-wa-float:hover .hz-wa-float__tip{opacity:1;transform:none}
.hz-top{position:fixed;bottom:96px;inset-inline-end:31px;z-index:989;width:44px;height:44px;border-radius:50%;border:1px solid var(--hz-border-strong);background:var(--hz-glass);backdrop-filter:blur(10px);color:var(--hz-heading);cursor:pointer;display:grid;place-items:center;opacity:0;transform:translateY(20px);transition:all .4s var(--hz-ease);pointer-events:none;padding:0}
.hz-top.is-visible{opacity:1;transform:none;pointer-events:auto}
.hz-top:hover{border-color:var(--hz-accent);color:var(--hz-accent)}

/* ---------- 12. Animations ---------- */
.hz-js .hz-reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--hz-ease),transform .9s var(--hz-ease);transition-delay:calc(var(--d,0) * 90ms)}
.hz-js .hz-reveal.is-in{opacity:1;transform:none}
.hz-js .hz-reveal--left{transform:translateX(-40px)}.hz-js .hz-reveal--right{transform:translateX(40px)}.hz-js .hz-reveal--zoom{transform:scale(.92)}
@keyframes hz-blob{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(6%,8%) scale(1.08)}66%{transform:translate(-5%,4%) scale(.95)}}
@keyframes hz-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes hz-marquee{to{transform:translateX(-50%)}}
@keyframes hz-caret{50%{opacity:0}}
@keyframes hz-shine{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
@keyframes hz-scroll{0%{opacity:0;transform:translateY(0)}40%{opacity:1}80%{opacity:0;transform:translateY(12px)}100%{opacity:0}}
@keyframes hz-pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.7);opacity:0}}
@keyframes hz-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .hz-js .hz-reveal{opacity:1;transform:none}
  .hz-marquee__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .hz-particles{display:none}
}

/* ---------- 13. Responsive ---------- */
@media (max-width:1180px){
  .hz-nav{display:none}
  .hz-burger{display:block}
  .hz-header__cta{display:none}
}
@media (min-width:1181px){.hz-mobile{display:none}}
@media (max-width:1024px){
  .hz-cards,.hz-quotes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hz-cards--4,.hz-stats,.hz-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hz-steps::before{display:none}
  .hz-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hz-hero__grid,.hz-split,.hz-contact{grid-template-columns:1fr}
  .hz-visual{height:420px;max-width:560px;margin-inline:auto !important;width:100%}
  .hz-footer__grid{grid-template-columns:1fr 1fr}
  .hz-hero{min-height:auto}
  .hz-scroll-hint{display:none}
}
@media (max-width:767px){
  body.hz-site{font-size:16px}
  :root{--hz-header-h:68px}
  .admin-bar .hz-header{top:46px}
  .hz-header__actions{gap:8px}
  .hz-header__actions > .hz-lang{width:42px;padding:0;justify-content:center}
  .hz-header__actions > .hz-lang .hz-lang__short{display:none}
  .hz-header__actions > .hz-theme-toggle{display:none}
  .hz-logo{font-size:18px}
  .hz-cards,.hz-cards--2,.hz-cards--4,.hz-quotes,.hz-grid{grid-template-columns:1fr}
  .hz-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .hz-stat{padding:20px 12px}
  .hz-steps{grid-template-columns:1fr;gap:30px}
  .hz-hero{padding-top:calc(var(--hz-header-h) + 34px);padding-bottom:60px}
  .hz-hero__btns .wp-block-button{flex:1 1 100%}
  .hz-hero__btns .wp-block-button__link{width:100%}
  .hz-visual{height:340px}
  .hz-vcard--code{display:none}
  .hz-vcard--main{inset:10% 2% 16% 2%}
  .hz-form__grid{grid-template-columns:1fr}
  .hz-footer__grid{grid-template-columns:1fr;gap:30px}
  .hz-cta-band{flex-direction:column;align-items:flex-start;border-radius:24px}
  .hz-work__overlay{opacity:1;background:linear-gradient(to top,rgba(6,7,15,.9),transparent 65%)}
  .hz-work__overlay > *{transform:none}
  .hz-work__excerpt{display:none}
  .hz-filters{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:6px;margin-inline:-18px;padding-inline:18px;scrollbar-width:none}
  .hz-filter{flex-shrink:0}
  .hz-wa-float{width:56px;height:56px;bottom:16px;inset-inline-end:16px}
  .hz-top{bottom:84px;inset-inline-end:22px}
  .hz-footer__bottom{flex-direction:column}
  .hz-quote,.hz-card,.hz-price{padding:24px}
}

/* ---------- Fixes after visual QA ---------- */
.hz-split .hz-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.hz-center-btns{justify-content:center;margin-top:36px !important}
.hz-page-hero .hz-center-btns{margin-top:30px !important}
.hz-hero__title,.hz-site h1.hz-hero__title{font-size:clamp(36px,5.4vw,70px)}
.hz-lang-ar h1.hz-hero__title{font-size:clamp(36px,5vw,64px)}
.hz-svc .hz-svc__title,.hz-site .hz-svc h2.hz-svc__title{font-size:24px;margin:18px 0 10px !important}
.hz-svc .wp-block-buttons{margin-top:22px !important}
.hz-about__text > p{color:var(--hz-text);margin:0 0 16px !important}
.hz-why__text > .wp-block-buttons{margin-top:28px !important}
.hz-pricing{display:flex;flex-wrap:wrap;justify-content:center}
.hz-pricing > *{flex:1 1 300px;max-width:380px}

/* =========================================================================
   Logo (HaZeM Design). Site palette unchanged; the logo keeps its own colours.
   ========================================================================= */
:root{--hz-sparkle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c.7 5.6 4.9 9.8 10.5 10.5-5.6.7-9.8 4.9-10.5 10.5C11.3 16.9 7.1 12.7 1.5 12 7.1 11.3 11.3 7.1 12 1.5z'/%3E%3C/svg%3E")}
.hz-logo{gap:0}
.hz-site .hz-logo__img{display:block;height:46px;width:auto;max-width:none;transition:transform .5s var(--hz-ease),height .3s var(--hz-ease)}
.hz-site .hz-logo--footer .hz-logo__img{height:64px}
.hz-logo:hover .hz-logo__img{transform:translateY(-1px) scale(1.03)}
html:not([data-theme="dark"]) .hz-logo__img--dark{display:none}
html[data-theme="dark"] .hz-logo__img--light{display:none}
.hz-site .hz-header.is-scrolled .hz-logo__img{height:40px}
@media (max-width:767px){.hz-site .hz-logo__img{height:38px}.hz-site .hz-header.is-scrolled .hz-logo__img{height:36px}.hz-site .hz-logo--footer .hz-logo__img{height:56px}}
/* Logo sparkle as a subtle decorative shape, in the existing violet/cyan palette */
.hz-eyebrow::before{width:12px;height:12px;border-radius:0;box-shadow:none;-webkit-mask:var(--hz-sparkle) center/contain no-repeat;mask:var(--hz-sparkle) center/contain no-repeat;animation:hz-twinkle 3.2s ease-in-out infinite}
.hz-sparkle{position:absolute;width:var(--s,18px);height:var(--s,18px);background:var(--hz-grad);-webkit-mask:var(--hz-sparkle) center/contain no-repeat;mask:var(--hz-sparkle) center/contain no-repeat;opacity:0;animation:hz-twinkle var(--d,4s) ease-in-out var(--dl,0s) infinite;pointer-events:none}
@keyframes hz-twinkle{0%,100%{opacity:.15;transform:scale(.6) rotate(0)}50%{opacity:.9;transform:scale(1) rotate(45deg)}}
@media (prefers-reduced-motion:reduce){.hz-sparkle,.hz-eyebrow::before{animation:none !important}.hz-sparkle{opacity:.5}}

/* =========================================================================
   Native block markup (hz/* blocks + core blocks) — editable in the block editor
   ========================================================================= */
.hz-ico-block{display:inline-grid;place-items:center;line-height:0;flex-shrink:0}
.hz-ico-block svg{display:block}
/* hero visual cards built from core groups/paragraphs */
.hz-vcard__txt{display:block;min-width:0}
.hz-site .hz-vcard__txt > p,.hz-site p.hz-vcard__b,.hz-site p.hz-vcard__s{margin:0 !important}
.hz-site p.hz-vcard__b{font-size:24px;font-weight:700;color:var(--hz-heading);line-height:1.1}
.hz-site .hz-vcard--order p.hz-vcard__b{font-size:15px;line-height:inherit}
.hz-site p.hz-vcard__s{color:var(--hz-muted);font-size:12.5px;line-height:1.5;line-height:1lh} /* 1lh = parent line-height, like the old inline <small> */
.hz-site pre.wp-block-code.hz-vcard--code{margin:0;white-space:pre;overflow:visible;background:var(--hz-glass);border:1px solid var(--hz-border-strong);border-radius:22px;color:var(--hz-text);font-family:ui-monospace,Menlo,monospace;font-size:12.5px;line-height:1.7;padding:14px 16px;box-shadow:var(--hz-shadow);max-width:none;min-width:0}
.hz-site pre.hz-vcard--code code{display:block;font:inherit;background:none;padding:0;border:0;color:inherit;white-space:inherit;direction:ltr;text-align:left;unicode-bidi:isolate}
.hz-vcard--code strong{color:#22d3ee;font-weight:400}
/* trust avatars (core list) */
.hz-site ul.hz-trust__faces{display:flex;list-style:none;margin:0 !important;padding:0 !important}
.hz-site ul.hz-trust__faces li{width:40px;height:40px;border-radius:50%;border:3px solid var(--hz-bg);margin:0 0 0 0;margin-inline-start:-12px;display:grid;place-items:center;font-weight:700;color:#fff;font-size:14px;line-height:1;padding:0}
.hz-site ul.hz-trust__faces li::before,.hz-site ul.hz-trust__faces li::after{display:none}
.hz-site ul.hz-trust__faces li:first-child{margin-inline-start:0}
.hz-trust__faces li:nth-child(4n+1){background:#8b5cf6}.hz-trust__faces li:nth-child(4n+2){background:#06b6d4}
.hz-trust__faces li:nth-child(4n+3){background:#ec4899}.hz-trust__faces li:nth-child(4n+4){background:#22c55e}
.hz-site p.hz-trust__txt{margin:0 !important}
/* tools marquee source list (JS turns it into the animated marquee; no-JS/editor = static chips) */
.hz-site ul.hz-marquee-list{list-style:none;margin:0 !important;padding:26px 24px !important;display:flex;flex-wrap:wrap;justify-content:center;gap:14px;direction:ltr;border-block:1px solid var(--hz-border)}
.hz-site ul.hz-marquee-list li{display:inline-flex;align-items:center;gap:10px;padding:10px 20px;margin:0;border-radius:999px;background:var(--hz-surface);border:1px solid var(--hz-border);color:var(--hz-heading);font-weight:600;font-size:15.5px;white-space:nowrap;line-height:1.4}
.hz-site ul.hz-marquee-list li::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c,var(--hz-accent));transform:rotate(45deg);flex-shrink:0}
.hz-marquee-list li:nth-child(6n+1){--c:#8b5cf6}.hz-marquee-list li:nth-child(6n+2){--c:#06b6d4}.hz-marquee-list li:nth-child(6n+3){--c:#ec4899}
.hz-marquee-list li:nth-child(6n+4){--c:#22c55e}.hz-marquee-list li:nth-child(6n+5){--c:#f59e0b}.hz-marquee-list li:nth-child(6n+6){--c:#3b82f6}
.hz-marquee-list.is-converted{display:none !important}
/* contact cards (core groups) */
.hz-ccard{position:relative}
.hz-ccard:has(a):hover{transform:translateY(-3px);border-color:var(--hz-accent)}
.hz-ccard__txt{min-width:0}
.hz-site .hz-ccard__txt > p{margin:0 !important}
.hz-site p.hz-ccard__s{display:block;color:var(--hz-muted);font-size:13.5px;line-height:inherit}
.hz-site p.hz-ccard__b{color:var(--hz-heading);font-size:17px;font-weight:700;line-height:inherit}
.hz-site p.hz-ccard__b a{color:inherit !important}
.hz-site p.hz-ccard__b a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.hz-ccard__b a[href^="tel"],.hz-ccard__b a[href*="wa.me"]{direction:ltr;unicode-bidi:isolate}
/* skills (hz/skill) */
.hz-skill__label{min-width:0}
/* Kadence gives .single-content .wp-block-group a bottom margin; the converted decorative cards must not get it */
.hz-site .hz-vcard,.hz-site .hz-ccards > .hz-ccard{margin-block:0 !important}
/* keep the original spacing under the home hero grid (it used to be followed by the scroll-hint block) */
.hz-site .single-content .hz-hero > .hz-hero__grid:last-child{margin-bottom:var(--global-md-spacing)}

/* ===== Real portfolio (portrait posters & logos from work.hazemdesign.com) ===== */
.hz-work{aspect-ratio:4/5}
.hz-work__img{object-position:center top}
@media (max-width:600px){
  .hz-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .hz-work{border-radius:16px}
}
/* touch screens: no hover, so keep a compact title bar visible */
@media (hover:none),(max-width:600px){
  .hz-work__overlay{opacity:1;padding:14px;background:linear-gradient(to top,rgba(6,7,15,.9) 0%,rgba(6,7,15,.35) 32%,transparent 55%)}
  .hz-work__overlay > *{transform:none}
  .hz-work__excerpt,.hz-work__actions{display:none}
  .hz-site .hz-work__title{font-size:15px;margin:0}
  .hz-work__cat{font-size:11.5px;margin-bottom:2px}
}
/* single project: cover fits any ratio; gallery = masonry, wider than the text column */
.hz-project__cover{display:grid;place-items:center;background:var(--hz-surface)}
.hz-project__cover img{width:auto !important;max-width:100%;max-height:min(82vh,900px);height:auto}
.hz-project__meta:empty{display:none}
.hz-project__content .hz-gallery.wp-block-gallery{--hz-gw:min(calc(var(--hz-max) - 64px),calc(100vw - 36px));display:block;columns:3;column-gap:18px;width:var(--hz-gw);max-width:none;margin-block:28px 0 !important;margin-inline:calc((100% - var(--hz-gw)) / 2) !important}
.hz-project__content .hz-gallery.wp-block-gallery > figure.wp-block-image{width:100% !important;margin:0 0 18px !important;break-inside:avoid;display:block;border-radius:18px;overflow:hidden;border:1px solid var(--hz-border);background:var(--hz-surface);box-shadow:var(--hz-shadow)}
.hz-project__content .hz-gallery figure.wp-block-image img{display:block;width:100% !important;height:auto !important;object-fit:contain !important;transition:transform .6s var(--hz-ease)}
.hz-project__content .hz-gallery figure.wp-block-image a{display:block;cursor:zoom-in}
.hz-project__content .hz-gallery figure.wp-block-image:hover img{transform:scale(1.03)}
@media (max-width:900px){.hz-project__content .hz-gallery.wp-block-gallery{columns:2;column-gap:12px}.hz-project__content .hz-gallery.wp-block-gallery > figure.wp-block-image{margin-bottom:12px !important;border-radius:14px}}
/* lightbox gallery navigation */
.hz-lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:none;place-items:center;font-size:26px;line-height:1;z-index:2}
.hz-lightbox.has-nav .hz-lightbox__nav{display:grid}
.hz-lightbox__nav--prev{inset-inline-start:18px}
.hz-lightbox__nav--next{inset-inline-end:18px}
.hz-lightbox__nav:hover{background:var(--hz-grad)}
.hz-lightbox.is-gallery figcaption a{display:none}
.hz-lightbox__count{font-size:14px;opacity:.75;font-weight:400}
@media (max-width:600px){.hz-lightbox__nav{width:42px;height:42px;top:auto;bottom:22px;transform:none}}
html[dir="rtl"] .hz-lightbox__nav{transform:translateY(-50%) scaleX(-1)}
@media (max-width:600px){html[dir="rtl"] .hz-lightbox__nav{transform:scaleX(-1)}}

.hz-project__cover{position:relative;isolation:isolate}
.hz-project__cover::before{content:"";position:absolute;inset:-40px;background:var(--hz-cover) center/cover no-repeat;filter:blur(36px) saturate(1.15);opacity:.55;z-index:-1}
.hz-project__cover img{position:relative;box-shadow:0 30px 60px -20px rgba(0,0,0,.45)}

/* =====================================================================
   Global polish (QA pass): one spacing scale, consistent radii, touch targets
   ===================================================================== */
:root{
  --hz-s1:4px;--hz-s2:8px;--hz-s3:12px;--hz-s4:16px;--hz-s5:24px;--hz-s6:32px;--hz-s7:48px;--hz-s8:64px;
  --hz-section-y:clamp(56px,8vw,112px);      /* vertical padding of every section */
  --hz-head-gap:clamp(32px,4.5vw,56px);      /* section heading -> content */
  --hz-card-pad:clamp(20px,2.3vw,30px);      /* inner padding of cards/panels */
  --hz-gap:clamp(14px,1.8vw,24px);           /* gap inside card grids */
  --hz-radius-lg:28px;--hz-radius-md:18px;   /* + --hz-radius (22) and --hz-radius-sm (14) */
}
.hz-section{padding-block:var(--hz-section-y)}
.hz-head{margin-bottom:var(--hz-head-gap) !important}
.hz-cards,.hz-quotes,.hz-grid,.hz-stats,.hz-pricing,.hz-why__grid{gap:var(--hz-gap)}
.hz-card,.hz-quote,.hz-svc{padding:var(--hz-card-pad)}
.hz-price{padding:calc(var(--hz-card-pad) + 2px) var(--hz-card-pad);border-radius:var(--hz-radius-lg)}
.hz-stat{padding:var(--hz-card-pad) calc(var(--hz-card-pad) - 6px)}
.hz-ccard{padding:calc(var(--hz-card-pad) - 6px) var(--hz-card-pad);border-radius:var(--hz-radius-md)}
.hz-faq .wp-block-details{border-radius:var(--hz-radius-md)}
.hz-faq{gap:var(--hz-s3)}
.hz-project__cover,.hz-cta-band{border-radius:var(--hz-radius-lg)}
@media (max-width:767px){
  .hz-stat{padding:var(--hz-s5) var(--hz-s3)}
  .hz-stats{gap:var(--hz-s3)}
  .hz-cta-band{border-radius:var(--hz-radius)}
}
/* portfolio grid: 2 columns from tablet down (1 column made 4:5 tiles ~900px tall at 600-767px) */
@media (max-width:1024px){.hz-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.hz-work__cat{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}}
/* reduced motion: static marquee shows each tool once */
@media (prefers-reduced-motion:reduce){
  .hz-marquee{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hz-marquee::-webkit-scrollbar{display:none}
  .hz-marquee .hz-marquee__track{flex-wrap:nowrap;width:max-content;margin-inline:auto;padding-inline:8%}
  .hz-marquee__item[aria-hidden="true"]{display:none}
}
/* touch targets >= 40px without changing the visual layout (padding + equal negative margin) */
.hz-card .hz-card__link a,.hz-price__more{padding-block:8px;margin-block:-8px}
.hz-footer__contact a{display:inline-flex}
.hz-theme-toggle{padding-block:5px;margin-block:-5px}
.hz-header .hz-logo{padding-block:4px;margin-block:-4px}
.hz-work__title a,.hz-price__name a{display:inline-block;padding-block:10px;margin-block:-10px}
.hz-crumbs a,.kadence-breadcrumbs a,.hz-mobile__phone{display:inline-block;padding-block:10px;margin-block:-10px}
.woocommerce a.remove,.woocommerce-page a.remove{width:40px !important;height:40px !important;line-height:38px !important;font-size:22px !important}
/* footer lists: real 40px rows instead of 25px links with gaps (no overlapping hit areas) */
.hz-footer__links,.hz-footer__contact{gap:0}
.hz-footer__links a,.hz-footer__contact a{padding-block:8px;margin-block:0}
.hz-footer__contact li{min-height:40px}
/* tile image always fills the 4:5 frame (it used to keep its natural height and spill under the clip) */
.hz-work__media{position:absolute;inset:0;height:auto}
.hz-site .hz-work__img{height:100% !important}
/* 404 */
.hz-404__hero{min-height:min(78vh,760px);display:grid;align-items:center}
.hz-404__code{font-size:clamp(96px,18vw,190px);font-weight:800;line-height:1;margin:0 0 6px !important;background:var(--hz-grad);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.04em;direction:ltr}
.hz-404__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--hz-s3);margin-top:var(--hz-s6) !important}
@media (max-width:480px){.hz-404__actions .hz-btn{flex:1 1 100%}}
.hz-menu-open .hz-header{transform:none !important} /* close button always reachable while the menu is open */
/* pricing badge: title only reserves room on the featured card; badge moves into the flow when cards get narrow */
.hz-site .hz-price__name{padding-inline-end:0}
.hz-site .hz-price.is-featured .hz-price__name,.hz-site .hz-price:has(.hz-price__badge) .hz-price__name{padding-inline-end:120px}
@media (max-width:1024px){
  .hz-price__badge{position:static !important;align-self:flex-start;margin-bottom:var(--hz-s3)}
  .hz-site .hz-price.is-featured .hz-price__name,.hz-site .hz-price:has(.hz-price__badge) .hz-price__name{padding-inline-end:0}
}
/* one check-mark style everywhere (content lists now match the package lists) */
.hz-list li::before{background:var(--hz-grad-soft)}
.hz-list li::after{border-color:var(--hz-accent)}
.hz-list li::before{top:.2em;top:calc(.5lh - 9.5px)}
.hz-list li::after{top:calc(.2em + 5px);top:calc(.5lh - 4.5px)}
.hz-price__list{align-content:start} /* rows no longer stretch apart in shorter cards */
/* QA r2: tile category = first category only on phones (no ellipsis-cut labels); 44px title tap target */
@media (max-width:600px){.hz-work__cat{white-space:normal;overflow:visible;text-overflow:clip}.hz-work__cat-i:not(:first-child),.hz-work__sep{display:none}}
.hz-work__title a{padding-block:10.5px;margin-block:-10.5px}

/* ===== Services: carousel, service landing pages, nav dropdown, legal (task: services) ===== */
.hz-carousel{position:relative;--hz-per:3;--hz-cgap:var(--hz-gap)}
.hz-carousel__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--hz-per) - 1) * var(--hz-cgap)) / var(--hz-per));gap:var(--hz-cgap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:8px 4px 26px;margin:-8px -4px 0;scroll-padding-inline:4px;outline:none;-webkit-overflow-scrolling:touch}
.hz-carousel__track::-webkit-scrollbar{display:none}
.hz-carousel__track:focus-visible{outline:2px solid var(--hz-accent);outline-offset:4px;border-radius:var(--hz-radius)}
.hz-scard{scroll-snap-align:start;display:flex;flex-direction:column;border-radius:var(--hz-radius);background:var(--hz-surface);border:1px solid var(--hz-border);box-shadow:var(--hz-shadow);overflow:hidden;transition:transform .5s var(--hz-ease),box-shadow .5s,border-color .4s;opacity:0;transform:translateY(18px)}
.hz-carousel.is-ready .hz-scard{opacity:1;transform:none;transition:opacity .6s var(--hz-ease),transform .6s var(--hz-ease),box-shadow .5s,border-color .4s}
.hz-carousel.is-ready .hz-scard:nth-child(2){transition-delay:.08s,.08s,0s,0s}.hz-carousel.is-ready .hz-scard:nth-child(3){transition-delay:.16s,.16s,0s,0s}
.hz-scard:hover{transform:translateY(-6px);box-shadow:var(--hz-shadow-lg);border-color:color-mix(in srgb,var(--hz-accent) 35%,transparent)}
.hz-scard.is-featured{border-color:color-mix(in srgb,var(--hz-accent) 45%,transparent)}
.hz-scard__media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--hz-surface-2)}
.hz-scard__img,.hz-scard__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--hz-ease)}
.hz-scard:hover .hz-scard__img,.hz-scard:hover .hz-scard__media img{transform:scale(1.05)}
.hz-scard__badge{position:absolute;top:14px;inset-inline-start:14px;padding:6px 12px;border-radius:999px;background:var(--hz-grad);color:#fff;font-size:12.5px;font-weight:700;box-shadow:0 8px 20px -8px rgba(124,58,237,.8)}
.hz-scard__body{display:flex;flex-direction:column;gap:var(--hz-s3);padding:var(--hz-card-pad);flex:1}
.hz-site p.hz-scard__meta{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:13px;font-weight:600;color:var(--hz-accent)}
html[data-theme="dark"] .hz-site p.hz-scard__meta,html[data-theme="dark"] p.hz-scard__meta{color:#c4b5fd}
.hz-site h3.hz-scard__title{margin:0;font-size:clamp(19px,1.6vw,22px);line-height:1.35}
.hz-scard__title a{color:var(--hz-heading) !important}
.hz-scard__title a:hover{color:var(--hz-accent) !important}
.hz-site p.hz-scard__desc{margin:0;color:var(--hz-muted);font-size:15px;line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hz-scard__foot{margin-top:auto;padding-top:var(--hz-s4);border-top:1px dashed var(--hz-border-strong);display:grid;gap:var(--hz-s4)}
.hz-scard .hz-price__amount{padding:0;margin:0;border:0}
.hz-scard .hz-price__amount strong{font-size:32px}
.hz-scard.is-featured .hz-price__amount strong{background:var(--hz-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hz-scard__actions{display:grid;grid-template-columns:1fr 1.25fr;gap:10px}
.hz-scard__actions .hz-btn{padding:12px 14px;font-size:15px;min-height:46px}
.hz-carousel__nav{display:flex;align-items:center;justify-content:center;gap:var(--hz-s4);margin-top:var(--hz-s2)}
.hz-carousel.is-static .hz-carousel__nav{display:none}
.hz-carousel__btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--hz-border-strong);background:var(--hz-glass);color:var(--hz-heading);display:grid;place-items:center;cursor:pointer;transition:border-color .3s,transform .3s var(--hz-ease),opacity .3s;padding:0}
.hz-carousel__btn:hover{border-color:var(--hz-accent);transform:translateY(-2px)}
.hz-carousel__btn:disabled{opacity:.4;cursor:default;transform:none}
.hz-carousel__btn:focus-visible,.hz-carousel__dot:focus-visible{outline:2px solid var(--hz-accent);outline-offset:3px}
.hz-carousel__btn[data-dir="-1"] svg{transform:scaleX(-1)}
html[dir="rtl"] .hz-carousel__btn[data-dir="-1"] svg{transform:none}
html[dir="rtl"] .hz-carousel__btn[data-dir="1"] svg{transform:scaleX(-1)}
.hz-carousel__dots{display:flex;gap:6px;align-items:center}
.hz-carousel__dot{width:24px;height:24px;border:0;padding:0;background:none;cursor:pointer;display:grid;place-items:center}
.hz-carousel__dot::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--hz-border-strong);transition:width .4s var(--hz-ease),background .3s}
.hz-carousel__dot.is-active::before{width:26px;background:var(--hz-grad)}
.hz-carousel__dot.is-active{width:38px}
@media (max-width:1024px){.hz-carousel{--hz-per:2}}
@media (max-width:640px){.hz-carousel{--hz-per:1}.hz-carousel__track{grid-auto-columns:86%}}
@media (prefers-reduced-motion:reduce){.hz-carousel__track{scroll-behavior:auto}.hz-scard,.hz-carousel.is-ready .hz-scard{opacity:1;transform:none;transition:none}}

/* service landing hero */
.hz-svc-hero{position:relative;overflow:hidden;isolation:isolate;padding:calc(var(--hz-header-h) + clamp(40px,6vw,84px)) 0 clamp(48px,6vw,84px)}
.hz-svc-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.hz-svc-hero__text > *{margin-block:0}
.hz-svc-hero .hz-page-title{margin:18px 0 0 !important;font-size:clamp(32px,4.6vw,56px);line-height:1.2}
.hz-svc-hero .hz-lead{margin-top:var(--hz-s5) !important;max-width:620px}
.hz-svc-hero__btns{margin-top:var(--hz-s6) !important;gap:12px}
.hz-site ul.hz-chips,.hz-chips{list-style:none;padding:0;margin:var(--hz-s5) 0 0 !important;display:flex;flex-wrap:wrap;gap:8px}
.hz-chips li{margin:0;padding:7px 14px;border-radius:999px;border:1px solid var(--hz-border-strong);background:var(--hz-glass);font-size:14px;font-weight:600;color:var(--hz-heading)}
.hz-svc-hero__media{margin:0}
.hz-svc-hero__media .wp-block-image{margin:0}
.hz-svc-hero__media img{width:100%;height:auto;display:block;border-radius:var(--hz-radius-lg);border:1px solid var(--hz-border);box-shadow:var(--hz-shadow-lg);aspect-ratio:4/3;object-fit:cover}
@media (max-width:900px){.hz-svc-hero__grid{grid-template-columns:1fr}.hz-svc-hero__media{max-width:620px}}
/* problem / solution */
.hz-ps{display:grid;grid-template-columns:1fr 1fr;gap:var(--hz-gap)}
.hz-ps__card{padding:var(--hz-card-pad);border-radius:var(--hz-radius);border:1px solid var(--hz-border);background:var(--hz-surface);box-shadow:var(--hz-shadow)}
.hz-ps__card h3{margin:0;font-size:clamp(19px,1.7vw,23px)}
.hz-ps__card--solution{background:linear-gradient(var(--hz-surface),var(--hz-surface)) padding-box,var(--hz-grad) border-box;border:1.5px solid transparent}
.hz-list--x li::before{background:color-mix(in srgb,var(--hz-accent-3) 14%,transparent) !important}
.hz-list--x li::after{width:10px;height:2px;border:0;background:var(--hz-accent-3);transform:rotate(45deg);inset-inline-start:4.5px;top:calc(.5lh - 1px);box-shadow:none}
.hz-list--x li{color:var(--hz-muted)}
.hz-list--x li > :first-child{position:relative}
.hz-list--x li::marker{content:""}
@media (max-width:767px){.hz-ps{grid-template-columns:1fr}}
/* Services page: links strip inside the hero */
.hz-svc-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:var(--hz-s6)}
.hz-svc-link{padding:9px 16px;border-radius:999px;border:1px solid var(--hz-border-strong);background:var(--hz-glass);color:var(--hz-heading) !important;font-weight:600;font-size:14.5px;transition:border-color .3s,transform .3s var(--hz-ease)}
.hz-svc-link:hover{border-color:var(--hz-accent);transform:translateY(-2px)}
/* nav dropdown */
.hz-menu .hz-caret{display:inline-block;vertical-align:middle;margin-inline-start:4px;transition:transform .3s var(--hz-ease)}
.hz-menu > li:hover > a .hz-caret,.hz-menu > li:focus-within > a .hz-caret{transform:rotate(180deg)}
.hz-menu .sub-menu{position:absolute;top:calc(100% + 12px);inset-inline-start:-8px;min-width:250px;list-style:none;margin:0;padding:8px;border-radius:18px;background:var(--hz-surface);border:1px solid var(--hz-border);box-shadow:var(--hz-shadow-lg);display:grid;gap:2px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .35s var(--hz-ease),visibility 0s .35s;z-index:5}
.hz-menu .sub-menu::before{content:"";position:absolute;inset-inline:0;top:-14px;height:14px}
.hz-menu > li:hover > .sub-menu,.hz-menu > li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.hz-menu .sub-menu a{border-radius:12px;padding:10px 14px;font-size:15px;white-space:nowrap}
.hz-menu .sub-menu a::after{display:none}
.hz-menu .sub-menu a:hover,.hz-menu .sub-menu .current-menu-item > a{background:var(--hz-grad-soft)}
.hz-mobile__menu .sub-menu{list-style:none;margin:0;padding:6px 0 12px;display:flex;flex-wrap:wrap;gap:8px}
.hz-mobile__menu .sub-menu li{overflow:visible}
.hz-mobile__menu .sub-menu a{font-size:14.5px;font-weight:600;padding:8px 14px;border:1px solid var(--hz-border-strong);border-radius:999px;background:var(--hz-glass)}
.hz-mobile__menu .sub-menu .hz-mobile__txt{transform:none}
/* footer legal links + legal pages */
.hz-footer__legal{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0}
.hz-footer__legal a{color:var(--hz-muted) !important}.hz-footer__legal a:hover{color:var(--hz-heading) !important}
.hz-legal{max-width:820px;margin-inline:auto}
.hz-legal h2{font-size:clamp(20px,2vw,24px);margin:var(--hz-s6) 0 var(--hz-s3)}
.hz-legal h2:first-child{margin-top:0}
.hz-menu > .current-menu-ancestor > a,.hz-menu > .current-page-ancestor > a{color:var(--hz-heading) !important}
/* services QA: tap targets */
.hz-footer__legal a{display:inline-block;padding-block:9px}
.hz-scard__title a{display:flex;align-items:center;min-height:40px;margin-block:-6px}
.hz-carousel__dots{gap:0}
.hz-carousel__dot{width:40px;height:40px}
.hz-carousel__dot.is-active{width:48px}
.hz-rpost > .hz-ico{color:var(--hz-accent);margin-bottom:var(--hz-s3)}
.hz-site h3.hz-rpost__title{margin:0 0 var(--hz-s2);font-size:clamp(18px,1.6vw,21px);line-height:1.45}
.hz-rpost__title a{color:var(--hz-heading) !important}
.hz-rpost > p:not(.hz-card__link){color:var(--hz-muted);margin:0}
.hz-rpost .hz-card__link{margin-top:var(--hz-s4)}
.hz-rpost .hz-card__link a,.hz-rpost__title a{display:inline-block;padding-block:8px;margin-block:-8px}
/* tools marquee: brand icons (inc/brands.php) — full colour, crisp SVG */
.hz-brand{display:inline-grid;place-items:center;width:var(--hz-logo,34px);height:var(--hz-logo,34px);flex:none;line-height:0;opacity:1;filter:none}
.hz-brand + .hz-brand{margin-inline-start:-2px}
.hz-brand__svg{width:88%;height:88%;display:block;fill:var(--b,currentColor);shape-rendering:geometricPrecision}
.hz-brand--mono .hz-brand__svg{width:100%;height:100%}
.hz-marquee__item.has-brand,.hz-site ul.hz-marquee-list li.has-brand{gap:12px;padding:9px 22px 9px 12px;font-size:16.5px;font-weight:700;color:var(--hz-heading);min-height:56px;box-sizing:border-box}
.hz-marquee .hz-marquee__track{gap:18px}
.hz-site ul.hz-marquee-list li.has-brand::before{display:none}
.hz-marquee__name{line-height:1.2;letter-spacing:-.005em}
/* dark logos stay visible in dark mode: light chip behind dark brand marks, hairline ring around dark tiles */
html[data-theme="dark"] .hz-brand.is-dark:not(.hz-brand--mono){border-radius:10px;background:#f3f4fa}
html[data-theme="dark"] .hz-brand.is-dark:not(.hz-brand--mono) .hz-brand__svg{width:68%;height:68%}
html[data-theme="dark"] .hz-brand--mono.is-dark .hz-brand__svg{border-radius:7px;box-shadow:0 0 0 1px rgba(255,255,255,.28)}
@media (max-width:767px){.hz-marquee{--hz-logo:28px}.hz-marquee__item.has-brand{min-height:48px;padding:8px 18px 8px 10px;font-size:15px;gap:10px}.hz-marquee .hz-marquee__track{gap:12px}}
/* hero browser mock: real project slideshow (hz/deco-window with images) */
.hz-vcard--show .hz-vcard__dots{align-items:center}
.hz-vshow__url{margin-inline-start:12px;flex:1;min-width:0;max-width:62%;height:22px;padding:0 12px;border-radius:999px;background:var(--hz-surface-2);border:1px solid var(--hz-border);color:var(--hz-muted);font-size:11.5px;font-weight:600;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;direction:auto;transition:opacity .4s}
.hz-vcard__screen.hz-vshow{position:relative;display:block;padding:0;background:#0b0d1f;isolation:isolate}
.hz-vshow__slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.2s var(--hz-ease)}
.hz-vshow__slide.is-active{opacity:1;z-index:1}
.hz-vshow__img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transform:scale(1.06);transition:transform 6s ease-out}
.hz-vshow__slide.is-active .hz-vshow__img{transform:scale(1)}
.hz-vshow::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);background:linear-gradient(to top,rgba(6,7,15,.35),transparent 30%)}
.hz-vshow__dots{position:absolute;z-index:3;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
.hz-vshow__dots i{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.55);transition:width .4s var(--hz-ease),background .3s}
.hz-vshow__dots i.is-on{width:20px;background:#fff}
@media (prefers-reduced-motion:reduce){.hz-vshow__img{transform:none !important;transition:none}.hz-vshow__slide{transition:none}}
/* ===== Purchase journey v2 (.hz-journey) — 4 layered glass cards.
   Static (editor / no JS / reduced motion): 2×2 grid (1 column on phones), everything visible.
   .is-stack (JS, desktop ≥901px & tall enough): sticky cards stack on scroll with parallax depth.
   .is-flow (JS, phones/tablets): vertical cards that rise in with light icon parallax. ===== */
.hz-journey{--hzj-top:calc(var(--hz-header-h) + 28px);--hzj-off:22px;position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--hz-gap);counter-reset:jstep;isolation:isolate}
.hz-jstep{--e:1;--d:0;counter-increment:jstep;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ico num" "title title" "text text";align-items:start;column-gap:18px;padding:30px;border-radius:28px;background:linear-gradient(160deg,color-mix(in srgb,var(--hz-surface) 92%,#7c3aed) 0%,var(--hz-surface) 55%);border:1px solid var(--hz-border-strong);box-shadow:var(--hz-shadow);overflow:hidden;isolation:isolate;box-sizing:border-box}
.hz-jstep > *{margin:0 !important}
/* soft gradient rim + corner glow */
.hz-jstep::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(60% 70% at 100% 0%,rgba(124,58,237,.16),transparent 70%),radial-gradient(50% 60% at 0% 100%,rgba(6,182,212,.10),transparent 70%)}
html[dir="rtl"] .hz-jstep::after{background:radial-gradient(60% 70% at 0% 0%,rgba(124,58,237,.16),transparent 70%),radial-gradient(50% 60% at 100% 100%,rgba(6,182,212,.10),transparent 70%)}
/* big outlined step number (gradient stroke: gradient clipped to the glyph, fill painted with the card colour) */
.hz-jstep::before{grid-area:num;justify-self:end;content:"0" counter(jstep);font-family:"Inter",var(--hz-font);font-weight:800;font-size:76px;line-height:.9;letter-spacing:-.04em;color:var(--hz-surface);-webkit-text-stroke:2.5px transparent;background:var(--hz-grad);-webkit-background-clip:text;background-clip:text;opacity:.9;direction:ltr;user-select:none}
.hz-jstep__ico{grid-area:ico;position:relative;width:76px;height:76px;border-radius:24px;display:grid;place-items:center;background:var(--hz-grad);color:#fff;box-shadow:0 18px 36px -16px rgba(124,58,237,.8),inset 0 1px 0 rgba(255,255,255,.25)}
.hz-jstep__ico .hz-ico{width:34px;height:34px;position:relative;z-index:1}
.hz-site h3.hz-jstep__title,.hz-jstep__title{grid-area:title;font-size:22px;line-height:1.35;color:var(--hz-heading);margin-top:22px !important;margin-bottom:8px !important}
.hz-site p.hz-jstep__text,.hz-jstep__text{grid-area:text;color:var(--hz-muted);font-size:15.5px;line-height:1.8;max-width:56ch}
.hz-site .hz-journey__cta{justify-content:center;margin-top:var(--hz-s7) !important}
/* parallax background layer (added by JS) */
.hz-journey__fx{position:absolute;inset:-8% 0;z-index:-1;pointer-events:none}
.hz-journey__fx i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;will-change:transform;transform:translate3d(0,var(--fy,0px),0)}
.hz-journey__fx i:nth-child(1){width:42%;aspect-ratio:1;top:6%;inset-inline-start:0;background:radial-gradient(circle,rgba(124,58,237,.55),transparent 65%)}
.hz-journey__fx i:nth-child(2){width:36%;aspect-ratio:1;top:42%;inset-inline-end:0;background:radial-gradient(circle,rgba(6,182,212,.45),transparent 65%)}
.hz-journey__fx i:nth-child(3){width:28%;aspect-ratio:1;bottom:2%;inset-inline-start:30%;background:radial-gradient(circle,rgba(79,70,229,.45),transparent 65%)}
.hz-journey__fx b{position:absolute;width:6px;height:6px;border-radius:50%;background:#c4b5fd;box-shadow:0 0 12px 2px rgba(167,139,250,.7);opacity:.6;will-change:transform;transform:translate3d(0,var(--fy,0px),0)}
.hz-journey__fx b:nth-of-type(1){top:18%;inset-inline-end:12%}
.hz-journey__fx b:nth-of-type(2){top:58%;inset-inline-start:7%;background:#67e8f9;box-shadow:0 0 12px 2px rgba(34,211,238,.6)}
.hz-journey__fx b:nth-of-type(3){top:84%;inset-inline-end:26%;width:4px;height:4px}
html[data-theme="light"] .hz-journey__fx i{opacity:.32}
html[data-theme="light"] .hz-journey__fx b{opacity:.45}

/* ---------- Desktop: sticky stacking cards ---------- */
@media (min-width:901px){
  .hz-journey.is-stack{display:block;max-width:1040px;margin-inline:auto}
  .hz-journey.is-stack .hz-jstep{position:sticky;top:calc(var(--hzj-top) + var(--k,0) * var(--hzj-off));min-height:min(360px,calc(100vh - var(--hzj-top) - 4 * var(--hzj-off) - 40px));margin:0 !important;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;grid-template-areas:"num ico" "title ico" "text ico";column-gap:clamp(28px,4vw,56px);padding:clamp(30px,3.4vw,46px);background:linear-gradient(160deg,color-mix(in srgb,var(--hz-surface) 90%,#7c3aed) 0%,var(--hz-surface) 60%);box-shadow:0 30px 70px -34px rgba(0,0,0,.55),0 -1px 0 rgba(255,255,255,.06) inset;transform-origin:50% 0;transform:perspective(1400px) rotateX(calc((1 - var(--e)) * 9deg)) scale(calc(1 - var(--d) * .045));will-change:transform}
  html[data-theme="light"] .hz-journey.is-stack .hz-jstep{box-shadow:0 30px 60px -34px rgba(30,27,75,.35),0 2px 8px rgba(30,27,75,.05)}
  /* spacing goes on the NEXT card's top margin: a bottom margin would make earlier cards unstick too soon */
  .hz-journey.is-stack .hz-jstep ~ .hz-jstep{margin-top:26vh !important}
  /* covered cards dim a little so the active card reads first */
  .hz-journey.is-stack .hz-jstep > *,.hz-journey.is-stack .hz-jstep::before{transition:none;opacity:calc(1 - min(var(--d), 1) * .55)}
  .hz-journey.is-stack .hz-jstep::before{justify-self:start;align-self:start;font-size:clamp(84px,9vw,128px);transform:translate3d(0,calc((1 - var(--e)) * 46px),0)}
  .hz-site .hz-journey.is-stack h3.hz-jstep__title{font-size:clamp(24px,2.3vw,32px);margin-top:14px !important;align-self:end;transform:translate3d(0,calc((1 - var(--e)) * 28px),0)}
  .hz-journey.is-stack .hz-jstep__text{font-size:17px;transform:translate3d(0,calc((1 - var(--e)) * 18px),0)}
  /* visual panel: the icon "approaches" (scales up / moves closer) as its card arrives */
  .hz-journey.is-stack .hz-jstep__ico{grid-area:ico;width:100%;height:100%;min-height:240px;border-radius:24px;background:radial-gradient(70% 70% at 50% 45%,rgba(124,58,237,.30),transparent 70%),radial-gradient(60% 60% at 70% 80%,rgba(6,182,212,.18),transparent 70%),linear-gradient(transparent 0 calc(100% - 1px),var(--hz-border) 0) 0 0/100% 32px,linear-gradient(90deg,transparent 0 calc(100% - 1px),var(--hz-border) 0) 0 0/32px 100%,var(--hz-surface-2);border:1px solid var(--hz-border);box-shadow:inset 0 0 60px -20px rgba(124,58,237,.35);color:#fff;overflow:hidden}
  .hz-journey.is-stack .hz-jstep__ico::before{content:"";position:absolute;left:50%;top:50%;width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:38px;background:var(--hz-grad);box-shadow:0 30px 60px -20px rgba(124,58,237,.85),0 0 0 14px rgba(124,58,237,.10),0 0 0 30px rgba(6,182,212,.06),inset 0 1px 0 rgba(255,255,255,.3);transform:scale(calc(.62 + var(--e) * .38)) rotate(calc((1 - var(--e)) * -18deg));will-change:transform}
  .hz-journey.is-stack .hz-jstep__ico::after{content:"";position:absolute;left:50%;top:50%;width:220px;height:220px;margin:-110px 0 0 -110px;border-radius:50%;border:1px dashed color-mix(in srgb,var(--hz-accent-2) 45%,transparent);transform:scale(calc(.7 + var(--e) * .3)) rotate(calc(var(--e) * 90deg));opacity:calc(var(--e) * .9)}
  .hz-journey.is-stack .hz-jstep__ico .hz-ico{width:60px;height:60px;stroke-width:1.6;transform:scale(calc(.55 + var(--e) * .45)) translate3d(0,calc((1 - var(--e)) * 30px),0);filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
}
/* ---------- Phones / tablets: vertical cards, light parallax ---------- */
@media (max-width:900px){
  .hz-journey{grid-template-columns:1fr;max-width:600px;margin-inline:auto;gap:40px}
  /* connector line: hidden behind the cards, visible in the gaps between them */
  .hz-journey::before{content:"";position:absolute;top:48px;bottom:48px;inset-inline-start:55px;width:2px;border-radius:2px;background:linear-gradient(180deg,#7c3aed,#3b82f6 55%,#06b6d4);opacity:.55;z-index:-1}
  .hz-jstep{padding:24px}
  .hz-jstep::before{font-size:62px}
  .hz-jstep__ico{width:64px;height:64px;border-radius:20px}
  .hz-jstep__ico .hz-ico{width:30px;height:30px}
  .hz-site h3.hz-jstep__title,.hz-jstep__title{font-size:20px;margin-top:18px !important}
  .hz-site p.hz-jstep__text,.hz-jstep__text{font-size:15px}
  /* connector between cards */
  .hz-journey.is-flow .hz-jstep{opacity:0;transform:translate3d(0,36px,0) scale(.97);transition:opacity .7s var(--hz-ease),transform .8s var(--hz-ease)}
  .hz-journey.is-flow .hz-jstep.is-in{opacity:1;transform:none}
  .hz-journey.is-flow .hz-jstep__ico{transform:translate3d(0,calc((1 - var(--e)) * 14px),0) scale(calc(.86 + var(--e) * .14));will-change:transform}
  .hz-journey.is-flow .hz-jstep::before{transform:translate3d(0,calc((1 - var(--e)) * -12px),0)}
  .hz-journey__fx i{filter:blur(40px)}
}
@media (prefers-reduced-motion:reduce){
  .hz-jstep,.hz-jstep *,.hz-jstep::before,.hz-jstep__ico::before,.hz-jstep__ico::after{transition:none !important;animation:none !important}
  .hz-journey__fx i,.hz-journey__fx b{transform:none !important}
}
/* ===== Hero visual without floating cards: centred browser mock, slides always fill the screen ===== */
.hz-visual > .hz-vcard--main{inset:8% 2% 10% 2%}
.hz-site figure.hz-vshow__slide,figure.hz-vshow__slide{margin:0 !important;overflow:hidden}
.hz-vshow__slide::before{content:"";position:absolute;inset:-24px;background:var(--hz-bg) center/cover no-repeat;filter:blur(18px) saturate(1.2) brightness(.55);transform:scale(1.1)}
.hz-site .hz-vshow__slide .hz-vshow__img,.hz-vshow__slide .hz-vshow__img{position:relative;width:100%;height:100%;max-width:none;object-fit:contain;object-position:center}
@media (max-width:767px){.hz-visual{height:290px}.hz-visual > .hz-vcard--main{inset:5% 1% 9% 1%}}

/* ---- Hero spacing fix (lead → buttons → trust): the generic `.hz-site p.hz-lead{margin:0 auto}` was zeroing the gap ---- */
.hz-site .hz-hero p.hz-lead{margin:0 0 32px !important}
.hz-site .hz-hero .hz-hero__btns{margin:0 0 28px !important}
.hz-site .hz-hero .hz-trust{margin-top:0 !important}
.hz-site .hz-page-hero > .hz-container > .hz-center-btns{margin-top:30px !important}
.hz-site .hz-page-hero > .hz-container > .hz-center-btns + .hz-svc-links{margin-top:28px !important}
@media (max-width:767px){
  .hz-site .hz-hero p.hz-lead{margin-bottom:24px !important}
  .hz-site .hz-hero .hz-hero__btns{margin-bottom:24px !important}
  .hz-site .hz-page-hero > .hz-container > .hz-center-btns{margin-top:24px !important}
  .hz-site .hz-page-hero > .hz-container > .hz-center-btns + .hz-svc-links{margin-top:24px !important}
}

/* ===== No blue focus/tap box on icon buttons (Kadence's button:hover/:focus/:active fill + browser tap highlight). Keyboard users still get a thin violet ring. ===== */
html,.hz-site{-webkit-tap-highlight-color:transparent}
.hz-site button,.hz-site a,.hz-site [role=button],.hz-site summary{-webkit-tap-highlight-color:transparent}
.hz-site :focus:not(:focus-visible){outline:none}
.hz-site .hz-theme-toggle,.hz-site .hz-theme-toggle:hover,.hz-site .hz-theme-toggle:focus,.hz-site .hz-theme-toggle:active{background:none;box-shadow:none;outline:none;color:inherit;border:0}
.hz-site .hz-burger:is(:hover,:focus,:active){background:var(--hz-glass);box-shadow:none;color:var(--hz-heading)}
.hz-site .hz-carousel__btn:is(:hover,:focus,:active){background:var(--hz-glass);box-shadow:none;color:var(--hz-heading)}
.hz-site .hz-top:is(:hover,:focus,:active){background:var(--hz-glass);box-shadow:none;color:var(--hz-heading)}
.hz-site .hz-lightbox__close:is(:hover,:focus,:active){background:rgba(255,255,255,.08);box-shadow:none;color:#fff}
.hz-site .hz-lightbox__nav:is(:focus,:active):not(:hover){background:rgba(255,255,255,.08);box-shadow:none;color:#fff}
.hz-site .hz-work__btn:is(:focus,:active):not(:hover){background:rgba(255,255,255,.14);box-shadow:none}
.hz-site .hz-lang:is(:focus,:active){box-shadow:none}
/* keyboard ring: thin, rounded, site violet */
.hz-site :focus-visible{outline:2px solid color-mix(in srgb,var(--hz-accent) 75%,transparent);outline-offset:3px;border-radius:10px;box-shadow:none}
.hz-site .hz-theme-toggle:focus-visible{outline:none}
.hz-site .hz-theme-toggle:focus-visible .hz-theme-toggle__track{outline:2px solid color-mix(in srgb,var(--hz-accent) 75%,transparent);outline-offset:3px}

/* ===== Hero e-commerce badge (cart pill) ===== */
.hz-site p.hz-eyebrow--store,.hz-eyebrow--store{--hz-cart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2.5 3.5h2.6l2.4 11.2a1.8 1.8 0 0 0 1.8 1.4h8.4a1.8 1.8 0 0 0 1.7-1.3L21.5 8H6.2'/%3E%3C/svg%3E");
  position:relative;gap:10px;padding:5px 16px 5px 5px;padding-inline:5px 16px;max-width:100%;background:rgba(255,255,255,.78);border:1px solid color-mix(in srgb,var(--hz-accent) 22%,transparent);color:var(--hz-heading);font-size:14.5px;font-weight:600;letter-spacing:0;line-height:1.35;box-shadow:0 6px 22px -10px rgba(79,70,229,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html[data-theme="dark"] .hz-eyebrow--store{background:rgba(255,255,255,.05);border-color:rgba(139,92,246,.35);color:#e9e7ff;box-shadow:0 6px 24px -12px rgba(139,92,246,.6)}
.hz-eyebrow--store::before{content:"";flex:0 0 30px;width:30px;height:30px;border-radius:50%;-webkit-mask:none;mask:none;animation:none;box-shadow:0 4px 12px -4px rgba(79,70,229,.6);
  background:var(--hz-cart) center/16px no-repeat,var(--hz-grad);background-blend-mode:normal}
.hz-eyebrow--store::before{background:var(--hz-grad)}
.hz-eyebrow--store::after{content:"";position:absolute;inset-inline-start:12px;top:50%;width:16px;height:16px;margin-top:-8px;background:#fff;-webkit-mask:var(--hz-cart) center/contain no-repeat;mask:var(--hz-cart) center/contain no-repeat;animation:hz-cart-nudge 3.6s ease-in-out infinite}
@keyframes hz-cart-nudge{0%,70%,100%{transform:translateX(0)}78%{transform:translateX(2px) rotate(-6deg)}86%{transform:translateX(-1px)}}
@media (max-width:767px){.hz-site p.hz-eyebrow--store,.hz-eyebrow--store{font-size:13px;gap:8px;padding-inline:4px 13px}.hz-eyebrow--store::before{flex-basis:26px;width:26px;height:26px}.hz-eyebrow--store::after{inset-inline-start:10px;width:14px;height:14px;margin-top:-7px}}
@media (prefers-reduced-motion:reduce){.hz-eyebrow--store::after{animation:none}}
.hz-site .hz-vcard--cover .hz-vshow__slide .hz-vshow__img,.hz-vcard--cover .hz-vshow__slide .hz-vshow__img{object-fit:cover}
/* ===== Journey cards with real images (.hz-jstep--img): the image replaces the icon panel and glows (violet→cyan halo).
   Glow grows with the card's arrival (--e) and pulses softly while the card is active; static with reduced motion. ===== */
.hz-site figure.hz-jstep__img,.hz-jstep__img{grid-area:img;position:relative;z-index:0;margin:0 0 22px !important;max-width:none;width:100%;aspect-ratio:16/10;border-radius:20px}
.hz-jstep__img img{display:block;width:100% !important;height:100% !important;object-fit:cover;object-position:center top;border-radius:inherit;box-shadow:0 0 0 1px rgba(196,181,253,.28),0 18px 40px -18px rgba(0,0,0,.6)}
.hz-jstep__img::before{content:"";position:absolute;inset:-6px;z-index:-1;border-radius:26px;background:linear-gradient(120deg,#7c3aed,#4f46e5 40%,#3b82f6 65%,#06b6d4);filter:blur(22px);opacity:calc(.35 + var(--e,1) * .4);transform:scale(calc(.92 + var(--e,1) * .08))}
.hz-jstep__img::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(160deg,rgba(255,255,255,.14),transparent 35%,transparent 70%,rgba(6,182,212,.12));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.hz-jstep--img{grid-template-areas:"img img" "ico num" "title title" "text text"}
.hz-jstep--img.is-active .hz-jstep__img::before{animation:hz-jglow 3.2s ease-in-out infinite alternate}
@keyframes hz-jglow{from{opacity:.55}to{opacity:.95}}
html[data-theme="light"] .hz-jstep__img::before{opacity:calc(.22 + var(--e,1) * .3)}
html[data-theme="light"] .hz-jstep__img img{box-shadow:0 0 0 1px rgba(124,58,237,.18),0 18px 40px -20px rgba(30,27,75,.4)}
html[data-theme="light"] .hz-jstep--img.is-active .hz-jstep__img::before{animation-name:hz-jglow-l}
@keyframes hz-jglow-l{from{opacity:.35}to{opacity:.62}}
@media (min-width:901px){
  .hz-journey.is-stack .hz-jstep--img{grid-template-areas:"num img" "title img" "text img"}
  .hz-site .hz-journey.is-stack figure.hz-jstep__img,.hz-journey.is-stack .hz-jstep__img{margin:0 !important;aspect-ratio:auto;height:100%;min-height:250px;align-self:stretch;transform:translate3d(0,calc((1 - var(--e)) * 34px),0) scale(calc(.86 + var(--e) * .14));transform-origin:50% 60%;will-change:transform}
  /* small icon chip sits beside the big step number */
  .hz-journey.is-stack .hz-jstep--img .hz-jstep__ico{grid-area:num;justify-self:end;align-self:start;width:52px;height:52px;min-height:0;border-radius:16px;background:var(--hz-grad);border:0;box-shadow:0 12px 26px -12px rgba(124,58,237,.8);overflow:visible}
  .hz-journey.is-stack .hz-jstep--img .hz-jstep__ico::before,.hz-journey.is-stack .hz-jstep--img .hz-jstep__ico::after{content:none}
  .hz-journey.is-stack .hz-jstep--img .hz-jstep__ico .hz-ico{width:24px;height:24px;transform:none;filter:none}
}
@media (max-width:900px){
  .hz-journey.is-flow .hz-jstep__img{transform:translate3d(0,calc((1 - var(--e)) * 18px),0) scale(calc(.94 + var(--e) * .06))}
  .hz-jstep--img .hz-jstep__ico{width:52px;height:52px;border-radius:16px}
  .hz-jstep--img .hz-jstep__ico .hz-ico{width:24px;height:24px}
  .hz-jstep--img::before{font-size:54px}
}
@media (prefers-reduced-motion:reduce){.hz-jstep__img::before{animation:none !important}.hz-jstep__img{transform:none !important}}
/* ===== Home: aurora background linking the sections (.hz-flow, built by main.js on the front page).
   Large soft mesh-gradient blobs (violet / indigo / cyan) float + morph continuously (CSS transforms only) and drift with
   scroll (parallax). Bands sit on section boundaries so colour flows from one section into the next.
   Paused off-screen and in hidden tabs; static with reduced motion. Decorative only, behind the content. ===== */
.hz-flow{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:clip}
.hz-flow-on .hz-section--alt{background:linear-gradient(180deg,transparent 0,color-mix(in srgb,var(--hz-bg-2) 60%,transparent) 180px,color-mix(in srgb,var(--hz-bg-2) 60%,transparent) calc(100% - 180px),transparent 100%)}
.hz-aurora{position:absolute;left:0;right:0;height:var(--h,900px);margin-top:calc(var(--h,900px) / -2);will-change:transform;transform:translate3d(0,var(--fy,0px),0)}
.hz-aurora i{position:absolute;display:block;border-radius:50%;will-change:transform;animation:hz-au1 18s ease-in-out infinite alternate;opacity:.85}
.hz-aurora i:nth-child(1){width:58%;height:62%;top:8%;left:-8%;background:radial-gradient(closest-side,rgba(124,58,237,.6),rgba(124,58,237,.2) 55%,transparent)}
.hz-aurora i:nth-child(2){width:50%;height:56%;top:30%;right:-6%;background:radial-gradient(closest-side,rgba(6,182,212,.48),rgba(6,182,212,.14) 55%,transparent);animation-name:hz-au2;animation-duration:23s}
.hz-aurora i:nth-child(3){width:42%;height:46%;top:44%;left:26%;background:radial-gradient(closest-side,rgba(79,70,229,.5),rgba(59,130,246,.14) 55%,transparent);animation-name:hz-au3;animation-duration:15s;opacity:.7}
.hz-aurora.is-flip i:nth-child(1){left:auto;right:-8%}
.hz-aurora.is-flip i:nth-child(2){right:auto;left:-6%}
.hz-aurora.is-paused i,.hz-flow.is-hidden i{animation-play-state:paused}
@keyframes hz-au1{0%{transform:translate3d(0,0,0) rotate(0deg) scale(1,1)}50%{transform:translate3d(9vw,50px,0) rotate(18deg) scale(1.18,.86)}100%{transform:translate3d(3vw,-60px,0) rotate(-12deg) scale(.9,1.12)}}
@keyframes hz-au2{0%{transform:translate3d(0,0,0) rotate(0deg) scale(1,1)}50%{transform:translate3d(-10vw,-50px,0) rotate(-22deg) scale(.86,1.2)}100%{transform:translate3d(-4vw,70px,0) rotate(14deg) scale(1.15,.9)}}
@keyframes hz-au3{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-7vw,60px,0) scale(1.3,.95)}100%{transform:translate3d(8vw,-40px,0) scale(.85,1.15)}}
html[data-theme="light"] .hz-flow-on .hz-section--alt{background:linear-gradient(180deg,transparent 0,color-mix(in srgb,var(--hz-bg-2) 70%,transparent) 180px,color-mix(in srgb,var(--hz-bg-2) 70%,transparent) calc(100% - 180px),transparent 100%)}
html[data-theme="light"] .hz-aurora i{opacity:.42}
html[data-theme="light"] .hz-aurora i:nth-child(1){background:radial-gradient(closest-side,rgba(167,139,250,.6),rgba(196,181,253,.2) 55%,transparent)}
html[data-theme="light"] .hz-aurora i:nth-child(2){background:radial-gradient(closest-side,rgba(103,232,249,.55),rgba(165,243,252,.18) 55%,transparent)}
html[data-theme="light"] .hz-aurora i:nth-child(3){background:radial-gradient(closest-side,rgba(129,140,248,.5),rgba(191,219,254,.18) 55%,transparent);opacity:.26}
@media (max-width:900px){
  .hz-aurora i{opacity:.7}
  .hz-aurora i:nth-child(1){width:110%;left:-30%}
  .hz-aurora i:nth-child(2){width:100%;right:-30%}
  .hz-aurora i:nth-child(3){display:none}
  .hz-aurora.is-flip i:nth-child(1){right:-30%}
  .hz-aurora.is-flip i:nth-child(2){left:-30%}
}
@media (prefers-reduced-motion:reduce){.hz-aurora i{animation:none !important}.hz-aurora{transform:none !important}}
/* gradient fills on bordered elements: paint from the border box so the repeated tile never peeks through the transparent border */
.hz-filter.is-active,.hz-nav__pill{background-origin:border-box;background-repeat:no-repeat}
/* ===== Journey on phones/tablets (≤900px): horizontal swipe carousel. Pure CSS scroll-snap (works without JS);
   JS adds .is-carousel (active-card glow, dim others) and the dots/arrows row (.hz-jcar-nav). RTL: step 1 on the right. ===== */
@media (max-width:900px){
  .hz-journey{--hzj-pad:clamp(18px,4vw,32px);display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(85%,440px);align-items:stretch;gap:14px;max-width:none;margin-inline:calc(var(--hzj-pad) * -1);padding:14px var(--hzj-pad) 22px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--hzj-pad);overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hz-journey::-webkit-scrollbar{display:none}
  .hz-journey::before,.hz-journey__fx{display:none}
  .hz-journey > .hz-jstep{scroll-snap-align:start;scroll-snap-stop:always;margin:0 !important}
  .hz-journey.is-carousel .hz-jstep{--e:1 !important;transform:none !important;transition:opacity .45s var(--hz-ease)}
  .hz-journey.is-carousel .hz-jstep:not(.is-active){opacity:.62}
  .hz-journey.is-carousel .hz-jstep:not(.is-active) .hz-jstep__img::before{opacity:.22;animation:none}
  .hz-journey.is-carousel .hz-jstep__img{transform:none !important}
  .hz-jcar-nav{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:6px}
  .hz-jcar-dots{display:flex;gap:0;align-items:center}
  .hz-jcar-dot{min-width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
  .hz-jcar-dot::before{content:"";display:block;width:8px;height:8px;border-radius:999px;background:var(--hz-border-strong);transition:width .35s var(--hz-ease),background .3s}
  .hz-jcar-dot.is-on::before{width:26px;background:var(--hz-grad)}
  .hz-jcar-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;padding:0;border:1px solid var(--hz-border-strong);background:var(--hz-glass);color:var(--hz-heading);cursor:pointer;transition:opacity .3s,border-color .3s}
  .hz-jcar-btn:disabled{opacity:.35;cursor:default}
  .hz-site .hz-jcar-btn:hover,.hz-site .hz-jcar-btn:focus,.hz-site .hz-jcar-btn:active{background:var(--hz-glass);color:var(--hz-heading);border-color:var(--hz-accent)}
  .hz-jcar-btn:focus:not(:focus-visible){outline:none;border-color:var(--hz-border-strong)}
  .hz-jcar-next svg{transform:scaleX(-1)}
  html[dir="rtl"] .hz-jcar-prev svg{transform:scaleX(-1)}
  html[dir="rtl"] .hz-jcar-next svg{transform:none}
  .hz-site .hz-jcar-nav + .hz-journey__cta{margin-top:var(--hz-s5) !important}
}
@media (min-width:901px){.hz-jcar-nav{display:none !important}}
@media (prefers-reduced-motion:reduce){.hz-jstep,.hz-jcar-dot::before{transition:none !important}}

/* === Service cards: stock photo backgrounds === */
.hz-card:has(.hz-card__link a[href*="website-design"]){--svc-img:url(../img/svc/web.webp)}
.hz-card:has(.hz-card__link a[href*="ecommerce"]){--svc-img:url(../img/svc/shop.webp)}
.hz-card:has(.hz-card__link a[href*="branding"]){--svc-img:url(../img/svc/brand.webp)}
.hz-card:has(.hz-card__link a[href*="ui-ux"]){--svc-img:url(../img/svc/uiux.webp)}
.hz-card:has(.hz-card__link a[href*="seo-services"]){--svc-img:url(../img/svc/seo.webp)}
.hz-card:has(.hz-card__link a[href$="/services/"]),.hz-card:has(.hz-card__link a[href$="/web-design-services/"]){--svc-img:url(../img/svc/support.webp)}
.hz-card{--svc-ov1:rgba(11,16,38,.80);--svc-ov2:rgba(11,16,38,.94)}
html[data-theme="light"] .hz-card{--svc-ov1:rgba(255,255,255,.80);--svc-ov2:rgba(255,255,255,.95)}
.hz-card:has(.hz-card__link a[href*="services"])::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
 background:linear-gradient(180deg,var(--svc-ov1),var(--svc-ov2)),var(--svc-img) center/cover no-repeat;
 transform:scale(1.02);transition:transform .9s var(--hz-ease),filter .6s;filter:saturate(.85)}
.hz-card:has(.hz-card__link a[href*="services"]):hover::after{transform:scale(1.09);filter:saturate(1.05) brightness(1.12)}
.hz-card:has(.hz-card__link a[href*="services"])::before{z-index:1}
.hz-card:has(.hz-card__link a[href*="services"]) > *{z-index:2}
.hz-card:has(.hz-card__link a[href*="services"]) p{color:color-mix(in srgb,var(--hz-text,currentColor) 82%,transparent)}
@media (prefers-reduced-motion:reduce){.hz-card::after{transition:none!important;transform:none!important}}

/* ===== Stats v2 (2026-10-17) ===== */
.hz-stats{align-items:stretch}
.hz-stat{--hz-ico:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:100%;min-height:168px;box-sizing:border-box;
 background:linear-gradient(var(--hz-surface),var(--hz-surface)) padding-box,linear-gradient(140deg,rgba(139,92,246,.55),rgba(34,211,238,.25) 45%,rgba(139,92,246,.08)) border-box;
 border:1px solid transparent !important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
 box-shadow:0 10px 30px -18px rgba(79,70,229,.45);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
html[data-theme="dark"] .hz-stat{background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02)) padding-box,linear-gradient(140deg,rgba(139,92,246,.7),rgba(34,211,238,.3) 45%,rgba(255,255,255,.06)) border-box}
.hz-stat::before{content:"";width:40px;height:40px;flex:0 0 40px;border-radius:12px;margin-bottom:6px;
 background:var(--hz-ico) center/20px no-repeat,linear-gradient(140deg,rgba(139,92,246,.18),rgba(34,211,238,.14));border:1px solid rgba(139,92,246,.25)}
.hz-stat:nth-child(1){--hz-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 18v3M8 10l2 2 4-4'/%3E%3C/svg%3E")}
.hz-stat:nth-child(2){--hz-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0M16 4.5a3.5 3.5 0 0 1 0 7M18 14.5a6 6 0 0 1 3.5 5.5'/%3E%3C/svg%3E")}
.hz-stat:nth-child(3){--hz-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M8.5 14 7 22l5-3 5 3-1.5-8'/%3E%3C/svg%3E")}
.hz-stat:nth-child(4){--hz-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z'/%3E%3C/svg%3E")}
.hz-stat::after{inset-inline:22% !important;height:2px !important;background:linear-gradient(90deg,transparent,#8b5cf6 30%,#22d3ee 70%,transparent) !important;opacity:.85;transition:inset-inline .4s,opacity .4s}
.hz-stat .hz-counter{text-align:center;width:100%}
.hz-stat p:last-child{line-height:1.4;min-height:2.8em;display:flex;align-items:center;justify-content:center;text-align:center}
.hz-stat:hover,.hz-stat:active,.hz-stat:focus-within{transform:translateY(-6px);box-shadow:0 22px 44px -18px rgba(139,92,246,.55),0 0 0 1px rgba(139,92,246,.35),0 0 32px -8px rgba(34,211,238,.35)}
.hz-stat:hover::after,.hz-stat:active::after{inset-inline:8% !important;opacity:1}
@media (max-width:767px){.hz-stat{min-height:150px;padding:18px 10px !important}.hz-stat::before{width:34px;height:34px;flex-basis:34px;background-size:17px,auto}.hz-stat p:last-child{font-size:13.5px}}
@media (prefers-reduced-motion:reduce){.hz-stat{transition:none}.hz-stat:hover{transform:none}}
html[data-theme="dark"] .hz-stat{background:linear-gradient(160deg,#171a33,#0e1124) padding-box,linear-gradient(140deg,rgba(139,92,246,.75),rgba(34,211,238,.35) 45%,rgba(255,255,255,.06)) border-box}
html:not([data-theme="dark"]) .hz-stat{background:linear-gradient(160deg,#fff,#f7f6ff) padding-box,linear-gradient(140deg,rgba(139,92,246,.55),rgba(34,211,238,.3) 45%,rgba(139,92,246,.1)) border-box}
.hz-stat{background-clip:padding-box,border-box !important;background-origin:padding-box,border-box !important}

/* SEO2: related-services chips + platform comparison on service pages */
.hz-svc-rel__title{text-align:center;margin:32px 0 14px;font-size:1.05rem}
.hz-svc-rel{justify-content:center}
.hz-svc-compare{margin-top:clamp(48px,7vw,80px)}