/* ==========================================================================
   Zywin Technologies — Design System
   Palette derived directly from the logo mark (crimson wedge / violet wedge).
   Signature motif: the triangular wedge, repeated as eyebrow, corner cut,
   hover sweep and ambient background field.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand — sampled from logo.png */
  --zy-crimson:      #E53946;
  --zy-crimson-deep: #C22233;
  --zy-violet:       #782AB2;
  --zy-violet-deep:  #4E1580;

  /* Neutrals — violet-tinted, never pure grey */
  --zy-ink:    #0C0714;
  --zy-ink-2:  #1A1226;
  --zy-slate:  #6B6478;
  --zy-mute:   #938CA3;
  --zy-line:   #E8E4EF;
  --zy-mist:   #F7F5FB;
  --zy-paper:  #FFFFFF;

  /* Gradients */
  --zy-grad:      linear-gradient(115deg, var(--zy-crimson) 0%, var(--zy-violet) 100%);
  --zy-grad-soft: linear-gradient(115deg, rgba(229,57,70,.12), rgba(120,42,178,.12));
  --zy-grad-deep: linear-gradient(150deg, #1A1226 0%, #2A0F3D 45%, #4E1580 100%);

  /* Type */
  --zy-display: 'Bricolage Grotesque', 'Helvetica Neue', sans-serif;
  --zy-body:    'Instrument Sans', system-ui, -apple-system, sans-serif;
  --zy-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Scale */
  --zy-r-sm: 10px;
  --zy-r:    18px;
  --zy-r-lg: 28px;

  --zy-shadow-sm: 0 2px 10px rgba(12, 7, 20, .06);
  --zy-shadow:    0 18px 40px -20px rgba(12, 7, 20, .28);
  --zy-shadow-lg: 0 40px 80px -32px rgba(78, 21, 128, .45);

  --zy-ease: cubic-bezier(.22, 1, .36, 1);
  --zy-nav-h: 82px;
}

/* ---------- 2. Reset / base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--zy-nav-h) + 20px); overflow-x: hidden; overflow-x: clip; max-width: 100%; scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--zy-paper);
  color: var(--zy-ink);
  font-family: var(--zy-body);
  font-size: 1.0125rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
  position: relative;
}

/* Belt-and-suspenders: nothing on the page — including third-party
   embeds like the Google Reviews widget, which can render at an
   intrinsic width before it finishes sizing itself — is ever allowed
   to force horizontal scroll or a right-side gap on mobile/tablet. */
img, video, iframe, table, .elfsight-app-d3adb31e-cc55-45fd-b568-50ed30f7a296 {
  max-width: 100%;
}

h1, h2, h3, h4, h5 {
  font-family: var(--zy-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.028em;
  color: var(--zy-ink);
  margin: 0 0 .5rem;
}

h1 { font-size: clamp(2.6rem, 6.2vw, 5rem); font-weight: 800; }
h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
h4 { font-size: 1.2rem; }

p { margin: 0 0 1rem; color: var(--zy-slate); }

a { color: var(--zy-violet); text-decoration: none; transition: color .25s var(--zy-ease); }
a:hover { color: var(--zy-crimson); }

img { max-width: 100%; height: auto; }

::selection { background: var(--zy-violet); color: #fff; }

:focus-visible {
  outline: 2px solid var(--zy-violet);
  outline-offset: 3px;
  border-radius: 4px;
}

.zy-shell { width: min(1200px, 92%); margin-inline: auto; }
.zy-section { padding: clamp(72px, 9vw, 130px) 0; }
.zy-section--mist { background: var(--zy-mist); }
.zy-section--ink  { background: var(--zy-grad-deep); color: #fff; }
.zy-section--ink h1, .zy-section--ink h2, .zy-section--ink h3 { color: #fff; }
.zy-section--ink p { color: rgba(255,255,255,.72); }

.zy-grad-text {
  background: var(--zy-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- 3. Signature: the wedge ---------- */
/* Eyebrow label — a small crimson triangle + mono caps. Used above every
   section heading so the logo's geometry repeats down the page. */
.zy-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--zy-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--zy-violet);
  margin-bottom: 1rem;
}
.zy-eyebrow::before {
  content: '';
  width: 11px; height: 10px;
  background: var(--zy-crimson);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  animation: zy-wedge-tick 3.6s var(--zy-ease) infinite;
}
.zy-section--ink .zy-eyebrow { color: #fff; }

@keyframes zy-wedge-tick {
  0%, 78%, 100% { transform: translateY(0) rotate(0); }
  86%           { transform: translateY(-3px) rotate(-8deg); }
}

/* Ambient drifting wedge field — hero + dark sections only */
.zy-wedges { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.zy-wedges span {
  position: absolute;
  width: var(--s, 90px);
  aspect-ratio: 1 / .88;
  background: var(--zy-grad);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  opacity: .16;
  filter: blur(.4px);
  animation: zy-drift var(--d, 22s) ease-in-out infinite alternate;
}
@keyframes zy-drift {
  from { transform: translate3d(0,0,0) rotate(0deg); }
  to   { transform: translate3d(30px, -46px, 0) rotate(24deg); }
}

/* ---------- 4. Buttons ---------- */
.zy-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.9rem;
  border: 0;
  border-radius: 999px;
  font-family: var(--zy-body);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--zy-ease), box-shadow .35s var(--zy-ease);
}
.zy-btn i { transition: transform .35s var(--zy-ease); }
.zy-btn:hover i { transform: translateX(4px); }

.zy-btn--solid {
  background: var(--zy-grad);
  color: #fff;
  box-shadow: 0 12px 28px -12px rgba(120, 42, 178, .75);
}
.zy-btn--solid:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 20px 40px -14px rgba(229,57,70,.6); }

/* Wedge sweep — a triangle of light crosses the button on hover */
.zy-btn--solid::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-22deg);
  transition: left .6s var(--zy-ease);
  z-index: -1;
}
.zy-btn--solid:hover::after { left: 115%; }

.zy-btn--ghost {
  background: transparent;
  color: var(--zy-ink);
  box-shadow: inset 0 0 0 1.5px var(--zy-line);
}
.zy-btn--ghost:hover {
  color: #fff;
  background: var(--zy-ink);
  box-shadow: inset 0 0 0 1.5px var(--zy-ink);
  transform: translateY(-3px);
}
.zy-section--ink .zy-btn--ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); }
.zy-section--ink .zy-btn--ghost:hover { background: #fff; color: var(--zy-ink); }

/* Text link with animated underline */
.zy-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; color: var(--zy-violet);
  background-image: linear-gradient(var(--zy-crimson), var(--zy-crimson));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .4s var(--zy-ease), color .3s;
  padding-bottom: 2px;
}
.zy-link:hover { background-size: 100% 1.5px; color: var(--zy-crimson); }

/* ---------- 5. Navigation ---------- */
.zy-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  height: var(--zy-nav-h);
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: height .4s var(--zy-ease), background .4s, border-color .4s;
}
.zy-nav.is-stuck { height: 64px; background: rgba(255,255,255,.94); border-bottom-color: var(--zy-line); }

.zy-nav__inner { width: 100%; max-width: none; padding-inline: clamp(10px, 1.8vw, 24px); margin-inline: 0; display: flex; align-items: center; gap: 1rem; }

.zy-nav__brand { display: flex; align-items: center; margin-right: auto; }
.zy-nav__brand img { width: 158px; transition: width .4s var(--zy-ease); }
.zy-nav.is-stuck .zy-nav__brand img { width: 128px; }

.zy-nav__actions { display: flex; align-items: center; gap: .7rem; }

/* Scroll progress hairline */
.zy-progress {
  position: absolute; bottom: -1px; left: 0; height: 2px; width: 0;
  background: var(--zy-grad);
  transition: width .1s linear;
}

/* Hamburger — animates into an X */
.zy-burger {
  width: 46px; height: 46px;
  display: grid; place-content: center; gap: 5px;
  border: 0; border-radius: 50%;
  background: var(--zy-grad);
  cursor: pointer;
  transition: transform .3s var(--zy-ease), box-shadow .3s;
}
.zy-burger:hover { transform: scale(1.07); box-shadow: 0 10px 24px -10px rgba(120,42,178,.9); }
.zy-burger span {
  display: block; width: 19px; height: 2px; border-radius: 2px; background: #fff;
  transition: transform .4s var(--zy-ease), opacity .25s;
}
.zy-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.zy-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.zy-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 6. Full-screen menu ---------- */
.zy-menu {
  position: fixed; inset: 0; z-index: 899;
  background: var(--zy-grad-deep);
  clip-path: circle(0% at calc(100% - 70px) 48px);
  transition: clip-path .8s var(--zy-ease);
  overflow-y: auto;
  visibility: hidden;
}
.zy-menu.is-open { clip-path: circle(150% at calc(100% - 70px) 48px); visibility: visible; }

.zy-menu__inner {
  width: min(1200px, 92%);
  margin-inline: auto;
  padding: calc(var(--zy-nav-h) + 48px) 0 64px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 48px;
  position: relative; z-index: 2;
}

.zy-menu__group { opacity: 0; transform: translateY(24px); }
.zy-menu.is-open .zy-menu__group { animation: zy-menu-in .7s var(--zy-ease) forwards; }
.zy-menu.is-open .zy-menu__group:nth-child(1) { animation-delay: .18s; }
.zy-menu.is-open .zy-menu__group:nth-child(2) { animation-delay: .28s; }
.zy-menu.is-open .zy-menu__group:nth-child(3) { animation-delay: .38s; }
@keyframes zy-menu-in { to { opacity: 1; transform: none; } }

.zy-menu__label {
  font-family: var(--zy-mono);
  font-size: .7rem; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
  padding-bottom: .9rem; margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
  display: block;
}

.zy-menu a {
  position: relative;
  display: block;
  padding: .34rem 0 .34rem 0;
  color: rgba(255,255,255,.82);
  font-family: var(--zy-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -.01em;
  transition: color .3s var(--zy-ease), padding-left .3s var(--zy-ease);
}
.zy-menu a::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 0; height: 8px;
  margin-top: -4px;
  background: var(--zy-crimson);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: width .3s var(--zy-ease);
}
.zy-menu a:hover { color: #fff; padding-left: 18px; }
.zy-menu a:hover::before { width: 9px; }

.zy-menu__lead { font-size: 1.4rem; font-weight: 700; }

/* ---------- 7. Hero ---------- */
.zy-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: calc(var(--zy-nav-h) + 60px) 0 80px;
  background: var(--zy-grad-deep);
  overflow: hidden;
  color: #fff;
}
.zy-hero__media {
  position: absolute; inset: 0;
  object-fit: cover; width: 100%; height: 100%;
  opacity: .26;
  transform: scale(1.08);
  animation: zy-kenburns 22s ease-in-out infinite alternate;
}
@keyframes zy-kenburns {
  from { transform: scale(1.08) translate3d(0,0,0); }
  to   { transform: scale(1.18) translate3d(-2%, -2%, 0); }
}
.zy-hero__inner { position: relative; z-index: 3; width: min(1200px, 92%); margin-inline: auto; }
.zy-hero h1 { color: #fff; max-width: 16ch; }
.zy-hero p  { color: rgba(255,255,255,.76); max-width: 52ch; font-size: 1.12rem; }
.zy-hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* Rotating word in the headline */
.zy-rotator { display: inline-grid; vertical-align: bottom; }
.zy-rotator > span {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(.4em) rotateX(-45deg);
  animation: zy-rotate 9s var(--zy-ease) infinite;
  background: var(--zy-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.zy-rotator > span:nth-child(2) { animation-delay: 3s; }
.zy-rotator > span:nth-child(3) { animation-delay: 6s; }
@keyframes zy-rotate {
  0%           { opacity: 0; transform: translateY(.45em) rotateX(-55deg); }
  4%, 30%      { opacity: 1; transform: none; }
  34%, 100%    { opacity: 0; transform: translateY(-.45em) rotateX(55deg); }
}

/* Load sequence — hero children rise in order */
.zy-rise { opacity: 0; transform: translateY(28px); animation: zy-rise .9s var(--zy-ease) forwards; }
.zy-rise--1 { animation-delay: .15s; }
.zy-rise--2 { animation-delay: .3s; }
.zy-rise--3 { animation-delay: .45s; }
.zy-rise--4 { animation-delay: .6s; }
@keyframes zy-rise { to { opacity: 1; transform: none; } }

/* Scroll hint */
.zy-scroll-hint {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 4;
  font-family: var(--zy-mono); font-size: .66rem; letter-spacing: .24em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
  display: grid; justify-items: center; gap: .6rem;
  text-decoration: none; cursor: pointer; padding: 6px 10px;
  transition: color .3s var(--zy-ease), transform .3s var(--zy-ease);
}
.zy-scroll-hint:hover { color: #fff; transform: translateX(-50%) translateY(3px); }
.zy-scroll-hint:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 6px; }
.zy-scroll-hint::after {
  content: ''; width: 1px; height: 42px;
  background: linear-gradient(rgba(255,255,255,.6), transparent);
  animation: zy-hint 2.2s ease-in-out infinite;
}
@keyframes zy-hint { 0%,100% { opacity: .3; transform: scaleY(.6); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

/* ---------- 8. Page header (inner pages) ---------- */
.zy-pagehead {
  position: relative;
  padding: calc(var(--zy-nav-h) + 90px) 0 90px;
  background: var(--zy-grad-deep);
  overflow: hidden;
  color: #fff;
}
.zy-pagehead--sm { padding: calc(var(--zy-nav-h) + 40px) 0 40px; }
.zy-pagehead__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .2; }
.zy-pagehead__inner { position: relative; z-index: 3; width: min(1200px, 92%); margin-inline: auto; }
.zy-pagehead h1 { color: #fff; }
.zy-crumb {
  display: flex; gap: .55rem; align-items: center; flex-wrap: wrap;
  font-family: var(--zy-mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
}
.zy-crumb a { color: rgba(255,255,255,.8); }
.zy-crumb a:hover { color: var(--zy-crimson); }
.zy-crumb span::before { content: '/'; margin-right: .55rem; opacity: .5; }

/* ---------- 9. Cards ---------- */
.zy-grid { display: grid; gap: 26px; }
.zy-grid--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.zy-grid--cap { grid-template-columns: repeat(auto-fit, minmax(290px, 380px)); justify-content: start; }
.zy-grid--2 { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
.zy-grid--4 { grid-template-columns: repeat(4, 1fr); }

.zy-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--zy-paper);
  border: 1px solid var(--zy-line);
  border-radius: var(--zy-r);
  padding: 34px 30px;
  overflow: hidden;
  isolation: isolate;
  transition: transform .5s var(--zy-ease), box-shadow .5s var(--zy-ease), border-color .5s;
}
/* Wedge fills from the corner on hover — the logo mark, animated */
.zy-card::before {
  content: '';
  position: absolute; top: 0; right: 0;
  background: var(--zy-grad);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  width: 56px; aspect-ratio: 1;
  transform: translate(60%, -60%) scale(.7);
  opacity: 0;
  transition: transform .55s var(--zy-ease), opacity .4s;
  z-index: -1;
}
.zy-card:hover {
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow: var(--zy-shadow-lg);
}
.zy-card:hover::before { transform: translate(0,0) scale(1); opacity: 1; }

.zy-card__icon {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--zy-grad-soft);
  color: var(--zy-violet);
  font-size: 1.3rem;
  margin-bottom: 1.2rem;
  transition: background .45s var(--zy-ease), color .45s, transform .45s var(--zy-ease);
}
.zy-card:hover .zy-card__icon { background: var(--zy-grad); color: #fff; transform: rotate(-6deg) scale(1.06); }
.zy-card h3 { margin-bottom: .6rem; }
.zy-card p { margin-bottom: 0; font-size: .96rem; }

/* Numbered card — only where order genuinely matters (our process) */
.zy-step__n {
  font-family: var(--zy-mono);
  font-size: .78rem; letter-spacing: .12em;
  color: var(--zy-crimson);
  margin-bottom: .9rem; display: block;
}

/* Media card (courses, industries, portfolio) */
.zy-mcard {
  display: flex; flex-direction: column;
  background: var(--zy-paper);
  border: 1px solid var(--zy-line);
  border-radius: var(--zy-r);
  overflow: hidden;
  transition: transform .5s var(--zy-ease), box-shadow .5s var(--zy-ease), border-color .4s;
}
.zy-mcard:hover { transform: translateY(-8px); border-color: transparent; box-shadow: var(--zy-shadow-lg); }
.zy-mcard__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--zy-mist); }
.zy-mcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--zy-ease); }
.zy-mcard:hover .zy-mcard__img img { transform: scale(1.07); }
/* No diagonal colour wipe on card images — the whole card lifts together instead */

.zy-mcard__body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.zy-mcard__meta {
  font-family: var(--zy-mono); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--zy-mute); margin-bottom: .7rem;
}
.zy-mcard h3 { font-size: 1.25rem; margin-bottom: .55rem; }
.zy-mcard p { font-size: .93rem; flex: 1; }

.zy-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- 10. Stats ---------- */
.zy-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 2px; background: rgba(255,255,255,.1); border-radius: var(--zy-r); overflow: hidden; }
.zy-stat { background: var(--zy-ink-2); padding: 34px 26px; }
.zy-stat b {
  display: block;
  font-family: var(--zy-display);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800; line-height: 1;
  letter-spacing: -.04em;
  background: var(--zy-grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.zy-stat small { font-family: var(--zy-mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* ---------- 11. Marquee ---------- */
.zy-marquee { overflow: hidden; padding: 20px 0; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.zy-marquee__track { display: flex; gap: 3.2rem; width: max-content; animation: zy-marquee 34s linear infinite; }
.zy-marquee:hover .zy-marquee__track { animation-play-state: paused; }
.zy-marquee a {
  font-family: var(--zy-display); font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2.3rem);
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 1px var(--zy-line);
  display: flex; align-items: center; gap: 3.2rem;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color .4s, -webkit-text-stroke-color .4s;
}
.zy-marquee a:hover,
.zy-marquee a:focus-visible { color: var(--zy-mq, var(--zy-violet)); -webkit-text-stroke-color: transparent; }
.zy-marquee a::after {
  content: ''; width: 12px; height: 11px; flex: none;
  background: var(--zy-crimson);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  -webkit-text-stroke: 0;
}
@keyframes zy-marquee { to { transform: translateX(-50%); } }

/* ---------- 12. Testimonials ---------- */
.zy-quote {
  background: var(--zy-paper);
  border: 1px solid var(--zy-line);
  border-radius: var(--zy-r);
  padding: 32px;
  position: relative;
  transition: transform .5s var(--zy-ease), box-shadow .5s var(--zy-ease);
}
.zy-quote:hover { transform: translateY(-6px); box-shadow: var(--zy-shadow); }
.zy-quote__mark {
  font-family: var(--zy-display); font-size: 3.4rem; line-height: 1;
  background: var(--zy-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.zy-quote p { color: var(--zy-ink); font-size: 1rem; }
.zy-quote footer { display: flex; align-items: center; gap: .8rem; margin-top: 1.2rem; }
.zy-quote footer div strong { display: block; font-family: var(--zy-display); font-size: .98rem; }
.zy-quote footer div small { color: var(--zy-mute); font-size: .82rem; }
.zy-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--zy-grad); color: #fff;
  font-family: var(--zy-display); font-weight: 700; font-size: .95rem;
  flex: none;
}

/* ---------- Google Reviews CTA (replaces invented testimonials) ---------- */
.zy-google-reviews {
  display: flex; align-items: center; justify-content: space-between; gap: 1.6rem;
  flex-wrap: wrap;
  background: var(--zy-paper);
  border: 1px solid var(--zy-line);
  border-radius: var(--zy-r-lg);
  padding: 2rem 2.4rem;
  box-shadow: var(--zy-shadow);
}
.zy-google-reviews__badge { display: flex; align-items: center; gap: 1rem; }
.zy-google-reviews__badge strong { display: block; font-family: var(--zy-display); font-size: 1.05rem; color: var(--zy-ink); }
.zy-google-reviews__badge p { margin: .2rem 0 0; color: var(--zy-mute); font-size: .92rem; max-width: 42ch; }
@media (max-width: 640px) {
  .zy-google-reviews { flex-direction: column; align-items: flex-start; padding: 1.6rem; }
}

/* ---------- 13. Article / long-form service pages ---------- */
.zy-article {
  background: var(--zy-paper);
  border: 1px solid var(--zy-line);
  border-radius: var(--zy-r-lg);
  padding: clamp(28px, 5vw, 64px);
  box-shadow: var(--zy-shadow-sm);
  position: relative;
  overflow: hidden;
}
.zy-article::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--zy-grad);
}
.zy-article__hero { border-radius: var(--zy-r); overflow: hidden; margin-bottom: 2.4rem; aspect-ratio: 21/9; }
.zy-article__hero img { width: 100%; height: 100%; object-fit: cover; }
.zy-article h2 { margin-top: 0; }
.zy-article h3 { margin-top: 2.6rem; padding-left: 1rem; border-left: 3px solid transparent; border-image: var(--zy-grad) 1; }
.zy-article ul { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.zy-article ul li {
  position: relative; padding-left: 1.6rem; margin-bottom: .55rem; color: var(--zy-slate);
}
.zy-article ul li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 9px; height: 8px; background: var(--zy-crimson);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.zy-article ol { counter-reset: zy; list-style: none; padding: 0; }
.zy-article ol > li {
  counter-increment: zy;
  position: relative;
  padding: 1.4rem 0 1.4rem 3.4rem;
  border-top: 1px solid var(--zy-line);
}
.zy-article ol > li::before {
  content: counter(zy, decimal-leading-zero);
  position: absolute; left: 0; top: 1.5rem;
  font-family: var(--zy-mono); font-size: .8rem; letter-spacing: .1em;
  color: var(--zy-crimson);
}
.zy-article ol > li > strong { font-family: var(--zy-display); font-size: 1.12rem; display: block; margin-bottom: .4rem; color: var(--zy-ink); }
.zy-article em { color: var(--zy-violet); font-style: normal; font-weight: 500; }

/* Chip row */
.zy-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.6rem; }
.zy-chip {
  font-family: var(--zy-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .45rem .9rem; border-radius: 999px;
  background: var(--zy-mist); color: var(--zy-violet);
  border: 1px solid var(--zy-line);
  transition: transform .3s var(--zy-ease), background .3s, color .3s;
}
.zy-chip:hover { transform: translateY(-2px); background: var(--zy-grad); color: #fff; border-color: transparent; }

/* ---------- 14. CTA band ---------- */
.zy-cta {
  position: relative;
  border-radius: var(--zy-r-lg);
  background: var(--zy-grad);
  padding: clamp(40px, 6vw, 76px);
  overflow: hidden;
  color: #fff;
  text-align: center;
}
.zy-cta h2 { color: #fff; }
.zy-cta p { color: rgba(255,255,255,.85); max-width: 52ch; margin-inline: auto; }
.zy-cta::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 120%, rgba(255,255,255,.28), transparent 55%);
  pointer-events: none;
}
.zy-cta > * { position: relative; z-index: 2; }

/* ---------- 15. Footer ---------- */
.zy-footer { background: var(--zy-ink); color: rgba(255,255,255,.62); padding: 84px 0 0; }
.zy-footer h5 {
  font-family: var(--zy-mono); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: #fff; margin-bottom: 1.4rem; font-weight: 500;
}
.zy-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 44px; }
.zy-footer a { color: rgba(255,255,255,.62); display: block; padding: .3rem 0; font-size: .93rem; transition: color .3s, transform .3s var(--zy-ease); }
.zy-footer a:hover { color: #fff; transform: translateX(5px); }
.zy-footer__logo { width: 168px; margin-bottom: 1.2rem; }
.zy-footer__contact li { list-style: none; display: flex; gap: .8rem; margin-bottom: .8rem; font-size: .93rem; line-height: 1.6; }
.zy-footer__contact { padding: 0; margin: 0; }
.zy-footer__contact i { color: var(--zy-crimson); margin-top: .35rem; }
.zy-social { display: flex; gap: .6rem; margin-top: 1.4rem; }
.zy-social a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.16);
  transition: background .35s var(--zy-ease), transform .35s var(--zy-ease), border-color .35s;
}
.zy-social a:hover { background: var(--zy-grad); border-color: transparent; transform: translateY(-4px) rotate(6deg); }
.zy-footer__bar {
  margin-top: 64px; padding: 26px 0;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--zy-mono); font-size: .72rem; letter-spacing: .1em; color: rgba(255,255,255,.42);
}

/* ---------- 16. Floating WhatsApp / Call buttons ---------- */
.zy-fab-stack {
  position: fixed;
  right: max(24px, env(safe-area-inset-right, 0px) + 16px);
  bottom: max(24px, env(safe-area-inset-bottom, 0px) + 16px);
  z-index: 950;
  display: flex; flex-direction: column; gap: 14px;
  align-items: center;
}
.zy-fab {
  width: 52px; height: 52px; min-width: 52px; min-height: 52px;
  border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-size: 1.35rem; text-decoration: none;
  box-shadow: 0 14px 30px -12px rgba(12, 7, 20, .55);
  transition: transform .25s var(--zy-ease), box-shadow .25s var(--zy-ease);
}
.zy-fab:hover { transform: translateY(-4px) scale(1.06); color: #fff; }
.zy-fab--whatsapp { background: #25D366; box-shadow: 0 14px 30px -12px rgba(37,211,102,.75); }
.zy-fab--call { background: var(--zy-grad); box-shadow: 0 14px 30px -12px rgba(120,42,178,.9); }

@media (max-width: 480px) {
  .zy-fab-stack { right: max(16px, env(safe-area-inset-right, 0px) + 12px); bottom: max(16px, env(safe-area-inset-bottom, 0px) + 12px); gap: 12px; }
  .zy-fab { width: 46px; height: 46px; min-width: 46px; min-height: 46px; font-size: 1.2rem; }
}

/* ---------- 17. Loader ---------- */
.zy-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--zy-ink);
  display: grid; place-items: center;
  transition: opacity .6s var(--zy-ease), visibility .6s;
}
.zy-loader.is-done { opacity: 0; visibility: hidden; }
.zy-loader__mark {
  width: 62px; aspect-ratio: 1 / .9;
  background: var(--zy-grad);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  animation: zy-load 1.15s var(--zy-ease) infinite;
}
@keyframes zy-load {
  0%   { transform: scale(.7) rotate(0deg); opacity: .4; }
  50%  { transform: scale(1) rotate(180deg); opacity: 1; }
  100% { transform: scale(.7) rotate(360deg); opacity: .4; }
}

/* ---------- 18. Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.5s var(--zy-ease), transform 1.5s var(--zy-ease);
  transition-delay: var(--delay, 0s);
}
[data-reveal="left"]  { transform: translateX(-34px); }
[data-reveal="right"] { transform: translateX(34px); }
[data-reveal="zoom"]  { transform: scale(.94); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- 19. Forms ---------- */
.zy-field { width: 100%; }
.zy-field input, .zy-field select, .zy-field textarea {
  width: 100%;
  padding: .95rem 1.1rem;
  border: 1.5px solid var(--zy-line);
  border-radius: var(--zy-r-sm);
  background: var(--zy-paper);
  font-family: var(--zy-body); font-size: .96rem; color: var(--zy-ink);
  transition: border-color .3s, box-shadow .3s;
}
.zy-field input:focus, .zy-field select:focus, .zy-field textarea:focus {
  outline: none;
  border-color: var(--zy-violet);
  box-shadow: 0 0 0 4px rgba(120,42,178,.12);
}
.zy-field label {
  display: block; margin-bottom: .4rem;
  font-family: var(--zy-mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--zy-mute);
}

/* ---------- 20. Utilities ---------- */
.zy-lead { font-size: 1.1rem; max-width: 58ch; }
.zy-center { text-align: center; }
.zy-center .zy-lead { margin-inline: auto; }
.zy-mb-0 { margin-bottom: 0; }
.zy-mt-2 { margin-top: 2rem; }
.zy-max { max-width: 62ch; }
.zy-empty {
  padding: 60px; text-align: center; border: 1.5px dashed var(--zy-line);
  border-radius: var(--zy-r); color: var(--zy-mute);
  font-family: var(--zy-mono); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase;
}

/* ---------- 21. Responsive ---------- */
@media (max-width: 900px) {
  .zy-footer__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .zy-nav__brand img { width: 132px; }
  .zy-grid--2 { grid-template-columns: 1fr; }
  .zy-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  :root { --zy-nav-h: 68px; }
  .zy-footer__grid { grid-template-columns: 1fr; }
  .zy-hero { min-height: auto; padding-top: calc(var(--zy-nav-h) + 48px); }
  .zy-menu__inner { gap: 30px; }
  .zy-btn { padding: .85rem 1.4rem; font-size: .9rem; }
  .zy-grid--4 { grid-template-columns: 1fr; }
}

/* ---------- 22. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .zy-rise { opacity: 1; transform: none; }
}

/* ==========================================================================
   LEGACY COMPATIBILITY LAYER
   Re-skins the original Bootstrap-based inner pages to the Zywin design
   system without rewriting each page body. Loaded after bootstrap/style.css.
   ========================================================================== */

/* Kill the old Bootstrap-template spinner + back-to-top button; the site
   no longer shows any back-to-top control at all. */
#spinner { display: none !important; }
.back-to-top { display: none !important; }

/* Old .page-header -> new dark gradient page head, offset below the fixed nav */
.page-header {
  position: relative !important;
  background: var(--zy-grad-deep) !important;
  padding: calc(var(--zy-nav-h) + 92px) 0 84px !important;
  overflow: hidden;
}
.page-header::after {                      /* a drifting wedge for texture */
  content: ''; position: absolute; right: 8%; top: 30%;
  width: 120px; aspect-ratio: 1 / .88;
  background: var(--zy-grad); opacity: .14;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  animation: zy-drift 20s ease-in-out infinite alternate;
}
.page-header .container { position: relative; z-index: 2; }
.page-header h1, .page-header .display-3 {
  color: #fff !important;
  font-family: var(--zy-display);
  font-weight: 800; letter-spacing: -.028em;
}
.page-header .breadcrumb {
  margin: 0; padding: 0; background: transparent;
  font-family: var(--zy-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
}
.page-header .breadcrumb-item, .page-header .breadcrumb-item a { color: rgba(255,255,255,.7) !important; }
.page-header .breadcrumb-item a:hover { color: var(--zy-crimson) !important; }
.page-header .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.4); }

/* Legacy gradient text helpers */
.text-gradient, .gradient-text, .gradient-text-secondary {
  background: var(--zy-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Legacy buttons -> gradient pill */
.btn-primary, .btn-outline-primary, .btn-lg-square, .btn-square {
  background: var(--zy-grad) !important;
  border: none !important; color: #fff !important;
  border-radius: 999px !important;
  font-family: var(--zy-body); font-weight: 600;
  transition: transform .35s var(--zy-ease), box-shadow .35s var(--zy-ease) !important;
}
.btn-primary:hover, .btn-outline-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px -16px rgba(120,42,178,.7);
  color: #fff !important;
}

/* Legacy accent colours */
.text-primary { color: var(--zy-violet) !important; }
.bg-primary { background: var(--zy-grad) !important; }

/* Section eyebrow / small headings */
.section-title h6 { color: var(--zy-violet) !important; font-family: var(--zy-mono); letter-spacing: .1em; text-transform: uppercase; }

/* Common card containers -> soften + lift */
.service-item, .feature-item, .team-item, .testimonial-item, .blog-item,
.course-item, .industry-item, .bg-light, .rounded, .card {
  border-radius: var(--zy-r) !important;
}
.service-item, .feature-item, .team-item, .course-item, .industry-item, .card {
  transition: transform .5s var(--zy-ease), box-shadow .5s var(--zy-ease) !important;
}
.service-item:hover, .feature-item:hover, .team-item:hover,
.course-item:hover, .industry-item:hover, .card:hover {
  transform: translateY(-8px);
  box-shadow: var(--zy-shadow-lg) !important;
}

/* Content imagery in long-form pages */
.container-xxl img.img-fluid, .container img.img-fluid { border-radius: var(--zy-r); }
.content-text, .container-xxl p, .container p { color: var(--zy-slate); }

/* Old footer widgets (if any legacy footer markup remains) sit fine on dark */

/* Make legacy sections breathe a little more */
.container-xxl { padding-top: clamp(56px, 8vw, 110px); padding-bottom: clamp(56px, 8vw, 110px); }


/* ==========================================================================
   SHIVU MASCOT — site-wide floating greeter
   ========================================================================== */
.zy-mascot {
  position: fixed; left: 22px; bottom: 16px; z-index: 2147483002;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}
.zy-mascot.is-hidden-for-popup { opacity: 0; visibility: hidden; pointer-events: none; }
.zy-mascot__fig {
  pointer-events: auto; position: relative;
  border: 0; background: none; padding: 0; cursor: pointer;
  width: 104px; line-height: 0;
  opacity: 1;                                   /* visible at rest — never gated by the animation */
  /* layered drop shadow for a grounded, real look */
  filter: drop-shadow(0 20px 22px rgba(20,10,35,.34)) drop-shadow(0 6px 8px rgba(20,10,35,.24));
  animation: zy-mascot-in .9s var(--zy-ease);
}
/* soft contact shadow on the ground under her feet */
.zy-mascot__fig::after {
  content: ''; position: absolute; left: 50%; bottom: 3px; z-index: -1;
  width: 72%; height: 16px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(20,10,35,.42), rgba(20,10,35,0) 72%);
  filter: blur(5px);
  animation: zy-shadow-pulse 4.6s ease-in-out infinite;
}
.zy-mascot__fig img { width: 100%; height: auto; display: block; transform-origin: 50% 100%; animation: zy-mascot-float 4.6s ease-in-out infinite; }
.zy-mascot__fig:hover img { animation: zy-mascot-wave .7s var(--zy-ease); }
@keyframes zy-mascot-in   { from { transform: translateY(34px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes zy-mascot-float{ 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(-1.6deg); } }
@keyframes zy-mascot-wave { 0%,100% { transform: rotate(0); } 25% { transform: rotate(5deg) translateY(-4px); } 75% { transform: rotate(-5deg); } }

.zy-mascot__bubble {
  pointer-events: auto;
  position: relative;
  max-width: 244px;
  background: var(--zy-paper);
  border: 1px solid var(--zy-line);
  border-radius: 16px 16px 16px 4px;
  box-shadow: var(--zy-shadow);
  padding: 14px 34px 14px 16px;
  font-family: var(--zy-body);
  font-size: .9rem; line-height: 1.5; color: var(--zy-ink);
  transform: translateY(12px) scale(.92); transform-origin: 0 100%;
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--zy-ease), transform .4s var(--zy-ease), visibility .4s;
}
.zy-mascot__bubble::before {
  content: ''; position: absolute; left: 16px; top: -1px; width: 34px; height: 4px;
  background: var(--zy-grad); border-radius: 2px;
}
.zy-mascot__bubble::after {
  content: ''; position: absolute; left: 16px; bottom: -8px;
  width: 15px; height: 15px; background: var(--zy-paper);
  border-right: 1px solid var(--zy-line); border-bottom: 1px solid var(--zy-line);
  transform: rotate(45deg);
}
.zy-mascot.is-greeting .zy-mascot__bubble { opacity: 1; visibility: visible; transform: none; }
.zy-mascot__bubble p { margin: 0; color: var(--zy-ink); }
.zy-mascot__bubble strong { font-family: var(--zy-display); color: var(--zy-violet); }
.zy-mascot__close {
  position: absolute; top: 5px; right: 8px;
  border: 0; background: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--zy-mute);
}
.zy-mascot__close:hover { color: var(--zy-crimson); }

/* While the chat is open, tuck the mascot down/smaller just enough to
   clear the panel's input box (footer + input row + quick buttons stack
   to ~145px from the panel's bottom edge). Reverts on close. */
.zy-mascot.is-chat-open { bottom: 0; }
.zy-mascot.is-chat-open .zy-mascot__fig { width: 108px; }
@media (max-width: 640px) {
  .zy-mascot.is-chat-open { bottom: 12px; }
  .zy-mascot.is-chat-open .zy-mascot__fig { width: 84px; }
}

@media (max-width: 640px) {
  .zy-mascot { left: 12px; bottom: 12px; }
  .zy-mascot__fig { width: 92px; }
  .zy-mascot__bubble { max-width: 188px; font-size: .82rem; padding: 12px 30px 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .zy-mascot__fig { animation: none !important; opacity: 1; transform: none; }
  .zy-mascot__fig img { animation: none !important; }
}


/* ==========================================================================
   INLINE NAV (replaces the hamburger + full-screen menu)
   ========================================================================== */
.zy-nav__brand img { height: 46px; width: auto; }
.zy-nav.is-stuck .zy-nav__brand img { height: 38px; width: auto; }

.zy-nav__links { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; margin-inline: auto; }
.zy-nav__links > a, .zy-drop__t {
  font-family: var(--zy-body); font-weight: 600; font-size: .94rem;
  color: var(--zy-ink); background: none; border: 0; cursor: pointer;
  padding: .5rem .8rem; border-radius: 999px; line-height: 1;
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  transition: color .25s var(--zy-ease), background .25s var(--zy-ease);
}
.zy-nav__links > a:hover, .zy-drop__t:hover,
.zy-nav__links > a[aria-current="page"] { color: var(--zy-violet); background: var(--zy-grad-soft); }

.zy-drop { position: relative; }
.zy-drop__t i { font-size: .68rem; transition: transform .3s var(--zy-ease); }
.zy-drop.is-open .zy-drop__t { color: var(--zy-violet); background: var(--zy-grad-soft); }
.zy-drop.is-open .zy-drop__t i { transform: rotate(180deg); }
.zy-drop__m {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 256px;
  background: var(--zy-paper); border: 1px solid var(--zy-line);
  border-radius: var(--zy-r); box-shadow: var(--zy-shadow); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s var(--zy-ease), transform .3s var(--zy-ease), visibility .3s;
  z-index: 60;
}
.zy-drop.is-open .zy-drop__m { opacity: 1; visibility: visible; transform: none; }
.zy-drop__m a {
  display: block; padding: .6rem .85rem; border-radius: 10px;
  color: var(--zy-slate); font-size: .9rem; font-weight: 500; white-space: nowrap;
  transition: background .25s, color .25s, padding-left .25s var(--zy-ease);
}
.zy-drop__m a:hover { background: var(--zy-grad-soft); color: var(--zy-violet); padding-left: 1.15rem; }

@media (max-width: 1120px) {
  .zy-nav__links { gap: .05rem; }
  .zy-nav__links > a, .zy-drop__t { padding: .5rem .56rem; font-size: .87rem; }
}
@media (max-width: 520px) {
  .zy-nav__cta { display: none; }
  .zy-drop__m { left: 50%; transform: translate(-50%, 10px); }
  .zy-drop.is-open .zy-drop__m { transform: translate(-50%, 0); }
}

/* ==========================================================================
   HERO ghost button — legible on the dark hero
   ========================================================================== */
.zy-hero .zy-btn--ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); }
.zy-hero .zy-btn--ghost:hover { color: var(--zy-ink); background: #fff; box-shadow: inset 0 0 0 1.5px #fff; }

/* ==========================================================================
   SHIVU in the hero
   ========================================================================== */
.zy-hero__inner { position: relative; z-index: 3; }
.zy-hero p { max-width: 44ch; }
.zy-hero__figure { position: absolute; right: 2%; top: calc(var(--zy-nav-h) + 18px); bottom: auto; z-index: 2; width: min(38vw, 450px); }
/* realistic contact shadow on the ground beneath her feet */
.zy-hero__figure::after {
  content: ''; position: absolute; left: 50%; bottom: -10px; z-index: -1;
  width: 56%; height: 30px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,0,0,.55), rgba(0,0,0,0) 70%);
  filter: blur(9px);
  animation: zy-shadow-pulse 5s ease-in-out 1.6s infinite;
}
.zy-hero__mascot {
  width: 100%; height: auto; display: block;
  opacity: 1;                                   /* visible at rest — never gated by the animation */
  /* layered drop shadow: soft ambient + tighter contact = grounded, 3D look */
  filter: drop-shadow(0 26px 30px rgba(0,0,0,.42)) drop-shadow(0 8px 10px rgba(0,0,0,.3));
  transform-origin: 50% 100%;
  animation: zy-hero-mascot-in 1s var(--zy-ease), zy-mascot-float 5s ease-in-out 1.6s infinite;
}
@keyframes zy-hero-mascot-in { from { opacity: 0; transform: translateY(46px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes zy-shadow-pulse { 0%,100% { opacity: .55; transform: translateX(-50%) scale(1); } 50% { opacity: .38; transform: translateX(-50%) scale(.82); } }
.zy-hero__badge {
  position: absolute; left: -8%; top: 14%; z-index: 4;
  background: var(--zy-paper); color: var(--zy-ink);
  font-family: var(--zy-body); font-weight: 600; font-size: .9rem;
  padding: .55rem .95rem; border-radius: 15px 15px 15px 3px;
  box-shadow: var(--zy-shadow); white-space: nowrap;
  animation: zy-rise .8s var(--zy-ease) 1.3s both, zy-mascot-float 5s ease-in-out 1.9s infinite;
}
.zy-hero__badge > span { color: var(--zy-crimson); }
.zy-hero__badge::before { content: ''; position: absolute; left: 15px; top: -1px; width: 26px; height: 3px; background: var(--zy-grad); border-radius: 2px; }

/* Every page: the corner Zyra fades in once you scroll past the page's top
   section (hero on the homepage, page header elsewhere), instead of landing
   on top of content that starts near the bottom-left of the first viewport
   (e.g. the first card in a listing grid). On the homepage this also hands
   off from the BIG hero Zyra to the small corner one. */
.zy-mascot {
  opacity: 0; visibility: hidden; transform: translateY(26px) scale(.9);
  transition: opacity .5s var(--zy-ease), transform .5s var(--zy-ease), visibility .5s;
}
.zy-past-hero .zy-mascot {
  opacity: 1; visibility: visible; transform: none;
}

@media (max-width: 1024px) {
  /* On phones and tablets, don't make visitors scroll before they can even
     see Zyra — show the corner mascot immediately on every page, not just
     the homepage. (No room for the big hero figure beside the headline
     here either, so that stays hidden.) */
  .zy-hero__figure { display: none; }
  .zy-mascot { opacity: 1; visibility: visible; transform: none; }
}


/* ==========================================================================
   ANIMATED PROBLEM CARDS (looping motion-graphic panels)
   ========================================================================== */
.zy-pcard { background: var(--zy-paper); border: 1px solid var(--zy-line); border-radius: var(--zy-r); padding: 22px; display: flex; flex-direction: column; overflow: hidden; transition: transform .5s var(--zy-ease), box-shadow .5s var(--zy-ease), border-color .5s; }
.zy-pcard:hover { transform: translateY(-8px); border-color: transparent; box-shadow: var(--zy-shadow-lg); }
.zy-pcard__n { font-family: var(--zy-mono); font-size: .78rem; letter-spacing: .16em; color: var(--zy-crimson); margin: 1.1rem 0 .3rem; }
.zy-pcard h3 { margin: 0 0 .5rem; font-size: 1.25rem; }
.zy-pcard p { margin: 0; font-size: .93rem; }

.zy-stage { position: relative; height: 158px; border-radius: 14px; background: var(--zy-grad-deep); overflow: hidden; }

/* -- 01 walker -- */
.zy-ground { position: absolute; left: 8%; right: 8%; bottom: 44px; height: 2px; background: rgba(255,255,255,.16); }
.zy-walker { position: absolute; bottom: 47px; left: 8%; color: #C89BF0; font-size: 1.7rem; line-height: 1; animation: zy-walk-x 4.5s linear infinite; }
.zy-walker i { display: block; animation: zy-walk-bob .5s ease-in-out infinite; }
@keyframes zy-walk-x { 0% { left: 8%; } 100% { left: 76%; } }
@keyframes zy-walk-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.zy-stations { position: absolute; left: 8%; right: 8%; bottom: 16px; display: flex; justify-content: space-between; font-family: var(--zy-mono); font-size: .58rem; letter-spacing: .12em; }
.zy-stations span { color: rgba(255,255,255,.45); }
.zy-stations span:nth-child(1) { animation: zy-flash 4.5s linear infinite; }
.zy-stations span:nth-child(2) { animation: zy-flash 4.5s linear infinite 1.5s; }
.zy-stations span:nth-child(3) { color: rgba(229,57,70,.7); animation: zy-flash-r 4.5s linear infinite 3s; }
@keyframes zy-flash   { 0%,4% { color: #fff; } 30%,100% { color: rgba(255,255,255,.45); } }
@keyframes zy-flash-r { 0%,4% { color: #fff; } 30%,100% { color: rgba(229,57,70,.7); } }

/* -- 02 bottleneck -- */
.zy-stage--bottleneck { display: grid; place-items: center; }
.zy-founder { position: relative; z-index: 3; display: grid; place-items: center; gap: 5px; }
.zy-founder > i { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--zy-crimson); color: #fff; font-size: 1.5rem; animation: zy-pulse 2s ease-out infinite; }
.zy-founder span { font-family: var(--zy-mono); font-size: .5rem; letter-spacing: .16em; color: #fff; background: rgba(255,255,255,.14); padding: 2px 7px; border-radius: 5px; }
@keyframes zy-pulse { 0% { box-shadow: 0 0 0 0 rgba(229,57,70,.45); } 100% { box-shadow: 0 0 0 24px rgba(229,57,70,0); } }
.zy-orbit { position: absolute; top: 50%; left: 50%; color: #fff; font-size: .95rem; opacity: 0; }
.zy-orbit--1 { --tx: -66px; --ty: -30px; animation: zy-orbpop 3s ease-in-out infinite 0s; }
.zy-orbit--2 { --tx:  66px; --ty: -34px; animation: zy-orbpop 3s ease-in-out infinite .6s; }
.zy-orbit--3 { --tx: -72px; --ty:  22px; animation: zy-orbpop 3s ease-in-out infinite 1.2s; }
.zy-orbit--4 { --tx:  70px; --ty:  26px; animation: zy-orbpop 3s ease-in-out infinite 1.8s; }
.zy-orbit--5 { --tx:   0px; --ty: -54px; animation: zy-orbpop 3s ease-in-out infinite 2.4s; }
@keyframes zy-orbpop {
  0%   { transform: translate(-50%,-50%) scale(.2); opacity: 0; }
  28%, 55% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1); opacity: .95; }
  82%, 100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.4); opacity: 0; }
}

/* -- 03 lead funnel -- */
.zy-stage--funnel { display: grid; place-items: center; }
.zy-stage__label { position: absolute; top: 14px; left: 0; right: 0; text-align: center; font-family: var(--zy-mono); font-size: .56rem; letter-spacing: .18em; color: rgba(255,255,255,.55); }
.zy-funnel { width: 100px; height: 58px; background: linear-gradient(180deg, rgba(120,42,178,.55), rgba(229,57,70,.55)); clip-path: polygon(0 0, 100% 0, 63% 100%, 37% 100%); border-top: 2px solid rgba(255,255,255,.32); }
.zy-stage__closed { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-family: var(--zy-mono); font-size: .58rem; letter-spacing: .16em; color: #7DE0A6; }
.zy-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; }
.zy-dot--in { background: #7DE0A6; left: 50%; margin-left: -4px; animation: zy-fall 2.4s ease-in infinite; }
.zy-dot--d1 { animation-delay: 0s; }
.zy-dot--d2 { left: 44%; animation-delay: .8s; }
.zy-dot--d3 { left: 56%; animation-delay: 1.6s; }
@keyframes zy-fall { 0% { top: 40px; opacity: 0; transform: scale(.6); } 16% { opacity: 1; } 70% { top: 104px; opacity: 1; transform: scale(1); } 100% { top: 120px; opacity: 0; } }
.zy-dot--leak { background: var(--zy-crimson); top: 78px; }
.zy-dot--l1 { left: 30%; animation: zy-leak-l 3s ease-in infinite 1s; }
.zy-dot--l2 { right: 30%; animation: zy-leak-r 3s ease-in infinite 2.2s; }
@keyframes zy-leak-l { 0% { opacity: 0; top: 74px; transform: translateX(0); } 25% { opacity: 1; } 100% { opacity: 0; top: 112px; transform: translateX(-34px); } }
@keyframes zy-leak-r { 0% { opacity: 0; top: 74px; transform: translateX(0); } 25% { opacity: 1; } 100% { opacity: 0; top: 112px; transform: translateX(34px); } }

/* ==========================================================================
   POPUP LEAD FORM (site-wide)
   ========================================================================== */
.zy-pop { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .4s var(--zy-ease), visibility .4s; isolation: isolate; }
.zy-pop.is-open { opacity: 1; visibility: visible; }
.zy-pop__overlay { position: absolute; inset: 0; background: rgba(12,7,20,.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.zy-pop__card { position: relative; z-index: 2; width: min(440px, 100%); max-height: 92vh; overflow-y: auto; overflow-x: hidden; background: var(--zy-paper); border-radius: var(--zy-r-lg); padding: 34px 30px 26px; box-shadow: var(--zy-shadow-lg); transform: translateY(28px) scale(.94); transition: transform .55s var(--zy-ease); }
.zy-pop.is-open .zy-pop__card { transform: none; }
.zy-pop__card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--zy-grad); }
.zy-pop__wedge { position: absolute; top: -34px; right: -30px; width: 120px; aspect-ratio: 1 / .88; background: var(--zy-grad); opacity: .12; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.zy-pop__close { position: absolute; top: 12px; right: 14px; z-index: 3; border: 0; background: none; font-size: 25px; line-height: 1; color: var(--zy-mute); cursor: pointer; }
.zy-pop__close:hover { color: var(--zy-crimson); }
.zy-pop__card h3 { margin: .35rem 0 .4rem; }
.zy-pop__sub { font-size: .92rem; margin-bottom: 1.2rem; }
.zy-pop__form { display: flex; flex-direction: column; gap: .7rem; }
.zy-pop__note { text-align: center; color: var(--zy-mute); font-size: .76rem; margin-top: .3rem; }

/* reduced motion: freeze the looping panels */
@media (prefers-reduced-motion: reduce) {
  .zy-walker, .zy-walker i, .zy-orbit, .zy-founder > i, .zy-dot, .zy-stations span { animation: none !important; }
  .zy-orbit { opacity: .8; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))); }
}


/* Clickable service cards -> link straight to each service page */
a.zy-card { color: inherit; text-decoration: none; cursor: pointer; }
a.zy-card:hover { color: inherit; }
a.zy-card h3 { color: var(--zy-ink); }
a.zy-card:hover .zy-link { background-size: 100% 1.5px; color: var(--zy-crimson); }


/* ========== Client logos (admin-driven marquee) ========== */
.zy-logos { overflow: hidden; padding: 16px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.zy-logos__track { display: flex; gap: 2.4rem; width: max-content; animation: zy-logos-scroll 42s linear infinite; }
.zy-logos:hover .zy-logos__track { animation-play-state: paused; }
@keyframes zy-logos-scroll { to { transform: translateX(-50%); } }
.zy-client { display: flex; flex-direction: column; align-items: center; gap: .7rem; flex: none; }
.zy-client__box { width: 180px; height: 108px; overflow: hidden; display: grid; place-items: center; padding: 18px 22px; background: #fff; border: 1px solid var(--zy-line); border-radius: var(--zy-r); transition: transform .4s var(--zy-ease), box-shadow .4s var(--zy-ease), border-color .4s; }
/* min-width/height:0 lets any uploaded logo (tall, wide, huge) scale DOWN to fit — grid items otherwise refuse to shrink below their intrinsic size and overflow the box */
.zy-client__box img { width: auto; height: auto; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; object-fit: contain; opacity: 1; transition: transform .4s var(--zy-ease); }
.zy-client:hover .zy-client__box { transform: translateY(-5px); box-shadow: var(--zy-shadow); border-color: transparent; }
.zy-client:hover .zy-client__box img { transform: scale(1.05); }
.zy-client span { font-size: .9rem; color: var(--zy-ink); font-weight: 600; text-align: center; max-width: 180px; }
@media (prefers-reduced-motion: reduce) { .zy-logos__track { animation: none; flex-wrap: wrap; justify-content: center; } }


/* ==========================================================================
   CROSS-PAGE COLOUR UNIFICATION + branded page-header image
   ========================================================================== */
:root {
  --primary-teal: #E53946; --primary-blue: #782AB2; --primary-dark-blue: #4E1580;
  --zywin-blue: #E53946; --zywin-teal: #E53946; --zywin-purple: #6A1B9A;
  --gradient-primary: var(--zy-grad); --gradient-secondary: var(--zy-grad); --zywin-gradient: var(--zy-grad);
}
/* the branded header image sits clean directly below the fixed nav */
.page-header:has(img) { padding: var(--zy-nav-h) 0 0 !important; background: var(--zy-ink) !important; }
.page-header:has(img)::after { display: none !important; }
.page-header img { border-radius: 0; }


/* ---- Nav brand lockup: triangle mark + Zywin Technologies wordmark ---- */
.zy-nav__brand { gap: 12px; }
.zy-nav__brand .zy-nav__mark { height: 46px; width: auto; }
.zy-nav__brand .zy-nav__wordmark { height: 38px; width: auto; }
.zy-nav.is-stuck .zy-nav__brand .zy-nav__mark { height: 38px; }
.zy-nav.is-stuck .zy-nav__brand .zy-nav__wordmark { height: 31px; }
@media (max-width: 400px) { .zy-nav__brand .zy-nav__wordmark { display: none; } }


/* ==========================================================================
   VISUAL FX + MOTION GRAPHICS  (self-contained, reduced-motion aware)
   ========================================================================== */

/* --- Aurora: drifting gradient light-field on dark surfaces --- */
.zy-hero::before,
.zy-section--ink::before,
.zy-cta::before {
  content: ''; position: absolute; inset: -25%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 38% at 22% 28%, rgba(229,57,70,.50), transparent 70%),
    radial-gradient(42% 42% at 80% 18%, rgba(120,42,178,.55), transparent 72%),
    radial-gradient(48% 48% at 62% 88%, rgba(78,21,128,.55), transparent 72%);
  filter: blur(30px);
  animation: zy-aurora 22s ease-in-out infinite alternate;
}
@keyframes zy-aurora {
  0%   { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
  50%  { transform: translate3d(2.5%,-3%,0) scale(1.12) rotate(4deg); }
  100% { transform: translate3d(-2.5%,2.5%,0) scale(1.06) rotate(-3deg); }
}
/* keep content above the aurora */
.zy-hero__media { z-index: 1; }
.zy-hero .zy-wedges, .zy-section--ink .zy-wedges { z-index: 1; }
.zy-cta > * { position: relative; z-index: 2; }

/* --- Fine film grain over the hero --- */
.zy-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* --- Gradient-text shimmer (numbers, gradient headings) --- */
.zy-stat b, .text-gradient, .gradient-text, .gradient-text-secondary, .zy-grad-text {
  background: linear-gradient(115deg, var(--zy-crimson), var(--zy-violet), var(--zy-crimson)) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  animation: zy-textshimmer 6s linear infinite;
}
@keyframes zy-textshimmer { to { background-position: 220% 0; } }

/* --- Pulsing glow on the hero primary CTA --- */
.zy-hero .zy-btn--solid { animation: zy-cta-glow 3.2s ease-in-out infinite; }
@keyframes zy-cta-glow {
  0%, 100% { box-shadow: 0 12px 28px -12px rgba(120,42,178,.75); }
  50%      { box-shadow: 0 18px 44px -10px rgba(229,57,70,.9); }
}

/* --- Cards get GPU hint for smooth tilt --- */
.zy-card, .zy-pcard { transform-style: preserve-3d; will-change: transform; }

/* --- Respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .zy-hero::before, .zy-section--ink::before, .zy-cta::before,
  .zy-stat b, .text-gradient, .gradient-text, .gradient-text-secondary, .zy-grad-text,
  .zy-hero .zy-btn--solid { animation: none !important; }
}


/* ==========================================================================
   AURORA on inner pages (page headers + footer)
   ========================================================================== */
.page-header, .zy-footer { position: relative !important; overflow: hidden; }

.page-header::before,
.zy-footer::before {
  content: ''; position: absolute; inset: -25%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 38% at 22% 28%, rgba(229,57,70,.26), transparent 72%),
    radial-gradient(42% 42% at 80% 18%, rgba(120,42,178,.30), transparent 74%),
    radial-gradient(48% 48% at 62% 88%, rgba(78,21,128,.28), transparent 74%);
  filter: blur(46px);
  opacity: .5;
  animation: zy-aurora 34s ease-in-out infinite alternate;
}
.zy-footer::before { opacity: .28; }

/* keep all header/footer content above the aurora */
.page-header > *, .zy-footer > * { position: relative; z-index: 2; }

/* on photo headers, keep the branded image dominant with just a hint of glow */
.page-header:has(img) img { opacity: .82; }

@media (prefers-reduced-motion: reduce) {
  .page-header::before, .zy-footer::before { animation: none !important; }
}

/* ==========================================================================
   MOBILE MENU  (burger <= 940px; inline links on desktop)
   ========================================================================== */
.zy-burger { display: none; }
.zy-nav__label { display: none; }
.zy-nav__scrim { display: none; }

@media (max-width: 940px) {
  .zy-nav { height: var(--zy-nav-h); padding: 0; }
  .zy-nav__inner { flex-wrap: nowrap; row-gap: 0; }
  .zy-nav__cta { display: none; }

  .zy-burger {
    display: grid; place-content: center; gap: 5px;
    width: 46px; height: 46px; flex: none;
    border: 0; border-radius: 50%; background: var(--zy-grad); cursor: pointer;
    transition: transform .3s var(--zy-ease), box-shadow .3s;
  }
  .zy-burger span { display: block; width: 19px; height: 2px; border-radius: 2px; background: #fff;
                    transition: transform .35s var(--zy-ease), opacity .2s; }
  .zy-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .zy-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .zy-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* the links become a slide-in panel listing every page name */
  .zy-nav__links {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(330px, 86vw);
    margin: 0; order: 0;
    display: block; overflow-y: auto;
    padding: calc(var(--zy-nav-h) + 18px) 24px 40px;
    background: var(--zy-grad-deep);
    box-shadow: -24px 0 60px -30px rgba(12,7,20,.9);
    transform: translateX(102%);
    transition: transform .45s var(--zy-ease);
    z-index: 950;
  }
  .zy-nav.is-menu-open .zy-nav__links { transform: none; }

  .zy-nav__label {
    display: block;
    font-family: var(--zy-mono); font-size: .66rem; letter-spacing: .24em; text-transform: uppercase;
    color: rgba(255,255,255,.45);
    padding-bottom: .7rem; margin-bottom: .6rem;
    border-bottom: 1px solid rgba(255,255,255,.14);
  }
  .zy-nav__label--sub { margin-top: 1.4rem; }

  .zy-nav__links > a {
    display: block; width: 100%;
    padding: .78rem 0; border-radius: 0;
    font-family: var(--zy-display); font-size: 1.12rem; font-weight: 600;
    color: rgba(255,255,255,.86); background: none;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .zy-nav__links > a:hover,
  .zy-nav__links > a[aria-current="page"] { color: #fff; background: none; padding-left: 10px; }

  /* dropdown flattens: its page names are always visible in the menu */
  .zy-drop { position: static; }
  .zy-drop__t { display: none; }
  .zy-drop__m {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding: 0; margin: 0;
    background: none; border: 0; box-shadow: none;
  }
  .zy-drop__m a {
    display: block; padding: .62rem 0; border-radius: 0;
    color: rgba(255,255,255,.68); font-size: .95rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .zy-drop__m a:hover { background: none; color: #fff; padding-left: 10px; }

  .zy-nav__scrim {
    display: block; position: fixed; inset: 0; z-index: 940;
    background: rgba(12,7,20,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden; transition: opacity .4s var(--zy-ease), visibility .4s;
  }
  .zy-nav.is-menu-open .zy-nav__scrim { opacity: 1; visibility: visible; }
}

/* ==========================================================================
   SERVICE CARDS WITH IMAGERY
   ========================================================================== */
/* Service detail page hero image: the box's aspect-ratio matches the
   image's own native ratio exactly, so nothing is ever cropped AND
   there is never an empty letterbox/pillarbox gap around it. Most of
   these images share a native 16:9 ratio; the handful that don't get
   a page-specific override below (each matched to its own image). */
.zy-svc-hero-img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover; object-position: center;
  margin: 0 auto;
  border-radius: .75rem;
}

/* Per-page overrides for hero images with a different native ratio */
.zy-svc-hero-img--square   { aspect-ratio: 1 / 1; }   /* mobile-app-development.avif (500x500) */
.zy-svc-hero-img--wide     { aspect-ratio: 1250 / 650; } /* app-design-development.avif */
.zy-svc-hero-img--classic  { aspect-ratio: 3 / 2; }   /* b2b-lead.avif, business-consultation.avif (1536x1024) */

a.zy-mcard { color: inherit; text-decoration: none; }
a.zy-mcard h3 { color: var(--zy-ink); }
a.zy-mcard:hover .zy-link { background-size: 100% 1.5px; color: var(--zy-crimson); }
.zy-svc .zy-mcard__img { aspect-ratio: 16 / 9; }
/* No diagonal colour wipe on service card images — the whole card lifts together instead */
.zy-svc .zy-mcard__img::after { content: none; }
.zy-svc__icon {
  width: 46px; height: 46px; margin: -46px 0 .9rem; position: relative; z-index: 2;
  display: grid; place-items: center; border-radius: 13px;
  background: var(--zy-grad); color: #fff; font-size: 1.15rem;
  box-shadow: 0 12px 26px -12px rgba(120,42,178,.8);
}
/* Icon, title and description all move together with the card lift on hover —
   no separate/independent animation on just the icon or title */

/* ==========================================================================
   BLOG: cards + reader modal
   ========================================================================== */
.zy-post { cursor: pointer; }
/* Match the service-card image proportions so blog cards are the same size */
.zy-post .zy-mcard__img { aspect-ratio: 16 / 9; }
.zy-post .zy-mcard__img video { width: 100%; height: 100%; object-fit: cover; }
.zy-post__play {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  color: #fff; font-size: 1.5rem; pointer-events: none;
}
.zy-post__play i {
  width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(12,7,20,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255,255,255,.5);
}
.zy-post:focus-visible { outline: 2px solid var(--zy-violet); outline-offset: 3px; }

.zy-reader {
  position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 20px;
  opacity: 0; visibility: hidden; transition: opacity .35s var(--zy-ease), visibility .35s;
}
.zy-reader.is-open { opacity: 1; visibility: visible; }
.zy-reader__overlay { position: absolute; inset: 0; background: rgba(12,7,20,.66);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.zy-reader__card {
  position: relative; z-index: 2; width: min(900px, 94vw); max-height: 92vh; overflow-y: auto;
  background: var(--zy-paper); border-radius: var(--zy-r-lg); box-shadow: var(--zy-shadow-lg);
  transform: translateY(26px) scale(.96); transition: transform .5s var(--zy-ease);
}
.zy-reader.is-open .zy-reader__card { transform: none; }
.zy-reader__close {
  position: absolute; top: 12px; right: 14px; z-index: 4;
  width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(12,7,20,.55); color: #fff; font-size: 22px; line-height: 1;
}
.zy-reader__close:hover { background: var(--zy-crimson); }
.zy-reader__media { background: var(--zy-mist); }
.zy-reader__media img, .zy-reader__media video { width: 100%; max-height: 46vh; object-fit: cover; display: block; }
.zy-reader__body { padding: clamp(22px, 4vw, 38px); }
.zy-reader__body h2 { margin: .3rem 0 .8rem; }


/* aurora on the design-system page head too (blog page) */
.zy-pagehead { position: relative; overflow: hidden; }
.zy-pagehead::before {
  content: ''; position: absolute; inset: -25%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 38% at 22% 28%, rgba(229,57,70,.26), transparent 72%),
    radial-gradient(42% 42% at 80% 18%, rgba(120,42,178,.30), transparent 74%),
    radial-gradient(48% 48% at 62% 88%, rgba(78,21,128,.28), transparent 74%);
  filter: blur(46px); opacity: .5;
  animation: zy-aurora 34s ease-in-out infinite alternate;
}
.zy-pagehead__inner { position: relative; z-index: 3; }
@media (prefers-reduced-motion: reduce) { .zy-pagehead::before { animation: none !important; } }


/* ---- Case study cards ---- */
.zy-case .zy-mcard__img { aspect-ratio: 16 / 9; }
.zy-case__tag {
  position: absolute; left: 14px; bottom: 14px; z-index: 3;
  font-family: var(--zy-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: rgba(12,7,20,.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.25);
  padding: .4rem .7rem; border-radius: 999px;
  max-width: calc(100%% - 28px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zy-case .zy-mcard__meta { color: var(--zy-crimson); }


/* ==========================================================================
   FIX: backdrop-filter on .zy-nav made it a containing block for its
   position:fixed children, trapping the mobile menu + scrim inside the
   68px nav bar. Drop the blur at mobile widths so they fix to the viewport.
   ========================================================================== */
@media (max-width: 940px) {
  .zy-nav {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(255,255,255,.97) !important;
  }
  .zy-nav.is-stuck { background: #fff !important; }
  .zy-nav__links { height: 100dvh; }
  .zy-nav__scrim { height: 100dvh; }
}


/* compact the mobile menu so every page name fits without scrolling */
@media (max-width: 940px) {
  .zy-nav__links { padding: calc(var(--zy-nav-h) + 10px) 22px 28px; }
  .zy-nav__links > a { padding: .58rem 0; font-size: 1.05rem; }
  .zy-drop__m a { padding: .48rem 0; font-size: .92rem; }
  .zy-nav__label { padding-bottom: .5rem; margin-bottom: .45rem; }
  .zy-nav__label--sub { margin-top: 1rem; }
}

/* ==========================================================================
   FORM VALIDATION STATES + reacting Zyra in the popup
   ========================================================================== */
.zy-field input.is-invalid, .zy-field select.is-invalid { border-color: var(--zy-crimson) !important; box-shadow: 0 0 0 3px rgba(229,57,70,.16) !important; }
.zy-field input.is-valid,   .zy-field select.is-valid   { border-color: #1f9d63 !important; }
.form-control.is-invalid { border: 1px solid var(--zy-crimson) !important; box-shadow: 0 0 0 3px rgba(229,57,70,.14) !important; }
.form-control.is-valid   { border: 1px solid #1f9d63 !important; }
.zy-err { display: block; margin-top: 5px; font-size: .76rem; font-weight: 600; color: var(--zy-crimson); }
.form-floating .zy-err { margin: 4px 0 0 4px; }

/* Zyra greeting inside the popup, reacting as the form is filled */
.zy-pop__mascot { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; min-width: 0; }
.zy-pop__mascot img { width: 56px; height: auto; flex: none; transform-origin: 50% 100%; filter: drop-shadow(0 8px 12px rgba(20,10,35,.3)); }
.zy-pop__mascot.zy-wave img { animation: zy-mascot-wave .7s var(--zy-ease); }
.zy-pop__cheer {
  background: var(--zy-ink); color: #fff; font-family: var(--zy-body);
  font-size: .78rem; font-weight: 500; line-height: 1.35;
  padding: .5rem .78rem; border-radius: 13px 13px 13px 3px; box-shadow: var(--zy-shadow);
  transition: transform .3s var(--zy-ease); max-width: 15rem; min-width: 0;
}
.zy-pop__cheer span { color: #ff9aa5; }
@media (prefers-reduced-motion: reduce) { .zy-pop__mascot.zy-wave img { animation: none; } }


/* ---- Blog article page ---- */
.zy-article { width: 100%; margin: 0 auto; }
.zy-article__hero { border-radius: var(--zy-r-lg); overflow: hidden; margin-bottom: 2rem; box-shadow: var(--zy-shadow-lg); }
.zy-article__hero img { width: 100%; height: auto; display: block; max-height: 460px; object-fit: cover; }
.zy-article__lead { font-size: 1.2rem; color: var(--zy-slate); margin-bottom: 1.6rem; }
.zy-article__body { font-size: 1.05rem; line-height: 1.78; color: var(--zy-ink); }
.zy-article__body p { margin: 0 0 1.2rem; }
.zy-article__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--zy-line); }


/* ---- Long-form blog article: FAQ / conclusion / related links ---- */
.zy-article__faq { margin-top: 2.6rem; padding-top: 2rem; border-top: 1px solid var(--zy-line); }
.zy-article__faq h2 { margin-bottom: 1.2rem; }
.zy-article__faq h3 { font-size: 1.05rem; margin: 1.4rem 0 .4rem; padding-left: 0; border-left: 0; }
.zy-article__faq p { margin: 0 0 .2rem; color: var(--zy-slate); line-height: 1.7; }

/* Clickable FAQ accordion cards — self-contained (doesn't rely on Bootstrap
   utility classes, since pages using head-assets.php don't load Bootstrap). */
.zy-article__faq details {
  background: #fff;
  border-left: 4px solid var(--zy-purple, #6A1B9A);
  border-radius: 14px;
  box-shadow: 0 4px 18px -8px rgba(20, 10, 35, .18);
  padding: 1.25rem 1.4rem;
  margin-bottom: .9rem;
}
.zy-article__faq details:last-child { margin-bottom: 0; }
.zy-article__faq summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--zy-ink);
  list-style: none;
}
.zy-article__faq summary::-webkit-details-marker { display: none; }
.zy-article__faq summary::after {
  content: '+';
  float: right;
  font-weight: 400;
  color: var(--zy-purple, #6A1B9A);
  transition: transform .25s ease;
}
.zy-article__faq details[open] summary::after { transform: rotate(45deg); }
.zy-article__faq details p.mt-3 {
  margin: .9rem 0 0;
  color: var(--zy-mute);
  line-height: 1.7;
}
.zy-article__conclusion { margin-top: 2.2rem; padding-top: 2rem; border-top: 1px solid var(--zy-line); }
.zy-article__conclusion h2 { margin-bottom: .8rem; }
.zy-article__links { margin-top: 2.2rem; padding: 1.4rem 1.6rem; background: var(--zy-mist); border-radius: var(--zy-r); }
.zy-article__links h3 { font-size: .92rem; text-transform: uppercase; letter-spacing: .06em; color: var(--zy-mute); margin: 1rem 0 .5rem; padding-left: 0; border-left: 0; }
.zy-article__links h3:first-child { margin-top: 0; }
.zy-article__links ul { list-style: none; margin: 0 0 .4rem; padding: 0; }
.zy-article__links li { margin-bottom: .4rem; }

/* ==========================================================================
   NAV: B2B group inside the Services dropdown + compact single-line CTA
   ========================================================================== */

/* small caption that splits the Services menu into two groups */
.zy-drop__sep {
  display: block;
  margin: .5rem .85rem .25rem;
  padding-top: .55rem;
  border-top: 1px solid var(--zy-line);
  font-family: var(--zy-mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--zy-mute);
}

/* the Services menu now holds 15 links — give it room and let it scroll
   rather than run off the bottom of short screens */
.zy-drop__m { max-height: min(72vh, 620px); overflow-y: auto; }

/* CTA: never wrap to a second line, and sit tighter in the bar */
.zy-nav__cta {
  flex: none;
  white-space: nowrap;
  padding: .62rem 1.15rem;
  font-size: .88rem;
  gap: .45rem;
}
.zy-nav__cta i { font-size: .82rem; }

/* keep the three nav areas on one row and let the links flex, not the CTA */
.zy-nav__inner { flex-wrap: nowrap; }
.zy-nav__links { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; }

@media (max-width: 1240px) {
  .zy-nav__links > a, .zy-drop__t { padding: .5rem .5rem; font-size: .86rem; }
  .zy-nav__cta { padding: .58rem 1rem; font-size: .84rem; }
}
@media (max-width: 1080px) {
  .zy-nav__links > a, .zy-drop__t { padding: .5rem .38rem; font-size: .82rem; }
  .zy-nav__cta { padding: .55rem .9rem; font-size: .8rem; }
}
/* below this the burger menu takes over, so the row can wrap again */
@media (max-width: 940px) {
  .zy-nav__inner { flex-wrap: nowrap; }
  .zy-nav__links { flex: none; }
  .zy-drop__sep { color: rgba(255,255,255,.45); border-top-color: rgba(255,255,255,.14); margin-left: 0; margin-right: 0; }
  .zy-drop__m { max-height: none; overflow-y: visible; }
}
/* FINAL NAV POSITION */
@media (min-width: 941px) {
  .zy-nav__inner {
    display: flex !important;
    align-items: center !important;
  }

  .zy-nav__brand {
    margin-right: 0 !important;
    flex-shrink: 0 !important;
  }

  .zy-nav__links {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    margin-right: 2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 1.8rem !important;
    flex-wrap: nowrap !important;
  }

  .zy-nav__actions {
    flex-shrink: 0 !important;
  }
}