/* =========================================================
   ANIMAZE GRAPHIC — WEB DESIGN & DEVELOPMENT PAGE
   Artwork: image/wd-*.webp
   Below 1000px: single column. 1000px and wider: content left, artwork right.
========================================================= */

:root {
  --bg: #0b0b0b;
  --border: #222222;
  --text: #ffffff;
  --accent: #ff6b00;
  --blue: #2f7bff;
  --purple: #8a4dff;
  --teal: #14b8a6;
  --pink: #ff3d81;

  --display: 'Archivo', sans-serif;
  --body: 'Inter Tight', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --gutter: 24px;
  --edge: var(--gutter);
}

@media (min-width: 1000px) {
  :root { --edge: 7.5vw; }
}

/* ---------- base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body.website-page {
  background: #050b1c;
  color: var(--text);
  font-family: var(--body);
  line-height: 1.6;
  overflow-x: clip;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }

.skip { position: absolute; left: -9999px; z-index: 999; }
.skip:focus { left: 50%; transform: translateX(-50%); top: 20px; background: var(--accent); padding: 10px; color: #000; }

.hl { color: var(--accent); }

/* ---------- shared pieces ---------- */
.wd-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #c9d1e0;
  margin-bottom: 18px;
}
.wd-dash { width: 48px; height: 2px; background: var(--accent); flex-shrink: 0; }

.wd-title {
  font-family: var(--display);     /* Archivo 800, same as the other pages */
  font-size: clamp(1.9rem, 6.5vw, 2.8rem);
  font-weight: 800;
  line-height: 1.12;
  color: #fff;
  margin-bottom: 18px;
}
.wd-title--xl { font-size: clamp(2.1rem, 7vw, 3.4rem); line-height: 1.08; }

.wd-lead {
  font-size: 1.08rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  max-width: 600px;
  margin-bottom: 14px;
}

/* artwork */
.wd-art {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  object-fit: cover;
}

/* buttons */
.wd-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.wd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 30px;
  border-radius: 999px;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wd-btn:hover { transform: translateY(-2px); }
.wd-btn--primary { background: linear-gradient(90deg, #ff6b00, #ff8a1f); box-shadow: 0 8px 26px rgba(255, 107, 0, 0.45); }
.wd-btn--ghost { background: rgba(10, 20, 60, 0.55); border: 2px solid rgba(90, 140, 255, 0.7); box-shadow: 0 0 18px rgba(60, 120, 255, 0.35); }
.wd-btn--solo { margin-top: 26px; }

/* ---------- section shell ---------- */
.wd-sect {
  position: relative;
  overflow: hidden;
  padding: 72px 0;
  background:
    radial-gradient(ellipse 60% 55% at 0% 0%, rgba(30, 70, 170, 0.35), transparent 70%),
    radial-gradient(ellipse 50% 45% at 100% 100%, rgba(255, 107, 0, 0.10), transparent 70%),
    #050b1c;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.wd-sect:nth-of-type(even) {
  background:
    radial-gradient(ellipse 55% 50% at 100% 0%, rgba(30, 80, 190, 0.32), transparent 70%),
    radial-gradient(ellipse 45% 45% at 0% 100%, rgba(255, 107, 0, 0.09), transparent 70%),
    #040918;
}

.wd-inner { position: relative; z-index: 2; padding: 0 var(--edge); }
.wd-body { position: relative; z-index: 2; }

/* phones/tablets: artwork faded behind the top of each section */
.wd-sect > .wd-art,
.wd-hero > .wd-art {
  top: 0;
  right: 0;
  width: 100%;
  height: 300px;
  opacity: 0.22;
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 20%, transparent 100%);
}

/* ---------- cards ---------- */
.wd-grid { display: grid; gap: 14px; margin-top: 30px; grid-template-columns: 1fr; }

.wd-card {
  --c: var(--accent);
  --c-rgb: 255, 107, 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1.5px solid rgba(var(--c-rgb), 0.85);
  background: linear-gradient(160deg, rgba(var(--c-rgb), 0.16), rgba(6, 10, 26, 0.95) 62%);
  box-shadow: 0 0 20px rgba(var(--c-rgb), 0.28), inset 0 0 22px rgba(var(--c-rgb), 0.06);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wd-card:hover { transform: translateY(-4px); box-shadow: 0 0 30px rgba(var(--c-rgb), 0.5), inset 0 0 22px rgba(var(--c-rgb), 0.1); }

.wd-card--orange { --c: #ff6b00; --c-rgb: 255, 107, 0; }
.wd-card--blue   { --c: #2f7bff; --c-rgb: 47, 123, 255; }
.wd-card--purple { --c: #8a4dff; --c-rgb: 138, 77, 255; }
.wd-card--teal   { --c: #14b8a6; --c-rgb: 20, 184, 166; }
.wd-card--pink   { --c: #ff3d81; --c-rgb: 255, 61, 129; }

.wd-card__icon {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-size: 1.45rem;
  color: #fff;
  background: linear-gradient(145deg, rgba(var(--c-rgb), 1), rgba(var(--c-rgb), 0.55));
  box-shadow: 0 6px 18px rgba(var(--c-rgb), 0.45);
}
.wd-card__text h3 { font-family: var(--display); font-size: 1.02rem; font-weight: 700; line-height: 1.2; color: #fff; margin-bottom: 4px; }
.wd-card__text p { font-size: 0.92rem; line-height: 1.4; color: rgba(255, 255, 255, 0.82); }

.wd-card__num {
  position: absolute;
  top: 8px;
  left: 14px;
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--c);
}
.wd-card__num + .wd-card__icon { margin-top: 12px; }
.wd-card__num ~ .wd-card__text { margin-top: 12px; }

/* callout bar */
.wd-callout,
.wd-flowbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  padding: 16px 22px;
  border-radius: 16px;
  border: 1.5px solid rgba(255, 107, 0, 0.7);
  background: linear-gradient(90deg, rgba(255, 107, 0, 0.12), rgba(6, 10, 26, 0.95));
  box-shadow: 0 0 22px rgba(255, 107, 0, 0.25);
  font-family: var(--body);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
}
.wd-callout > i,
.wd-flowbar > i:first-child { font-size: 2rem; color: var(--accent); flex-shrink: 0; }
.wd-callout__bar { width: 1px; align-self: stretch; background: rgba(255, 255, 255, 0.25); flex-shrink: 0; }

/* =========================================================
   HERO
========================================================= */
.wd-hero {
  position: relative;
  overflow: hidden;
  padding: 130px 0 56px;
  background:
    radial-gradient(ellipse 60% 70% at 0% 20%, rgba(25, 60, 170, 0.45), transparent 70%),
    radial-gradient(ellipse 40% 50% at 100% 100%, rgba(255, 107, 0, 0.14), transparent 70%),
    #040a1a;
}
.wd-hero__content { position: relative; z-index: 2; max-width: 640px; }
.wd-eyebrow--h1 { margin-bottom: 22px; }

.wd-hero__title {
  font-family: var(--display);
  font-size: clamp(2.3rem, 9vw, 3.6rem);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 20px;
}
.wd-hero__sub { font-size: 1.12rem; line-height: 1.6; color: rgba(255, 255, 255, 0.88); max-width: 480px; }

.wd-hero__bar {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 10px;
  margin-top: 44px;
  padding: 18px 12px;
  border-radius: 20px;
  border: 1.5px solid rgba(60, 130, 255, 0.55);
  background: rgba(6, 14, 40, 0.78);
  box-shadow: 0 0 26px rgba(47, 123, 255, 0.25);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.wd-hero__bar li {
  flex: 1 1 42%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 0.98rem;
  font-weight: 500;
}
.wd-hero__bar i { font-size: 1.55rem; color: #3b9bff; }
.wd-hero__bar li:nth-child(even) i { color: var(--accent); }
.wd-hero__bar li:nth-child(3) i { color: #8a6bff; }

/* =========================================================
   HOW WE WORK
========================================================= */
.wd-steps { display: grid; grid-template-columns: 1fr; gap: 36px; margin-top: 44px; }
.wd-step {
  --c: #2f7bff;
  --c-rgb: 47, 123, 255;
  position: relative;
  padding: 44px 20px 24px;
  text-align: center;
  border-radius: 20px;
  border: 1.5px solid rgba(var(--c-rgb), 0.85);
  background: linear-gradient(180deg, rgba(var(--c-rgb), 0.18), rgba(6, 10, 26, 0.96));
  box-shadow: 0 0 24px rgba(var(--c-rgb), 0.35), inset 0 0 22px rgba(var(--c-rgb), 0.08);
}
.wd-step--orange { --c: #ff6b00; --c-rgb: 255, 107, 0; }
.wd-step__num {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.95rem;
  color: #fff;
  background: var(--c);
  border: 3px solid #050b1c;
  box-shadow: 0 0 18px rgba(var(--c-rgb), 0.8);
}
.wd-step__icon { font-size: 2.4rem; color: #fff; margin-bottom: 14px; filter: drop-shadow(0 0 10px rgba(var(--c-rgb), 0.9)); }
.wd-step--orange .wd-step__icon { color: #ffb067; }
.wd-step h3 { font-family: var(--display); font-size: 1.1rem; font-weight: 800; text-transform: uppercase; color: #fff; margin-bottom: 10px; }
.wd-step p { font-size: 0.92rem; line-height: 1.5; color: rgba(255, 255, 255, 0.85); }
.wd-step__rule { display: block; width: 30px; height: 2px; margin: 16px auto 0; background: var(--c); box-shadow: 0 0 10px var(--c); }

.wd-flowbar { flex-wrap: wrap; gap: 10px 16px; margin-top: 34px; font-family: var(--display); font-size: 1.1rem; font-weight: 600; }
.wd-flowbar > i:not(:first-child) { color: var(--accent); font-size: 0.95rem; }

/* =========================================================
   FAQ
========================================================= */
.wd-faq__sub { font-family: var(--body); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 500; color: #fff; }
.wd-faq__list { display: grid; gap: 10px; margin-top: 34px; }

.wd-faq__item {
  border-radius: 14px;
  background: rgba(244, 247, 255, 0.96);
  color: #0c1634;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.wd-faq__item summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
}
.wd-faq__item summary::-webkit-details-marker { display: none; }
.wd-faq__num {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.9rem;
  color: #fff;
  background: linear-gradient(145deg, #2f7bff, #1442b8);
}
.wd-faq__q { flex: 1; }
.wd-faq__item summary i { color: #4b5b82; transition: transform 0.25s ease; }
.wd-faq__item[open] summary i { transform: rotate(180deg); }
.wd-faq__item[open] .wd-faq__num { background: linear-gradient(145deg, #ff8a2a, #ff5a00); }
.wd-faq__item p { padding: 0 20px 18px 72px; font-size: 0.95rem; line-height: 1.6; color: #2b3a63; }

/* =========================================================
   CTA
========================================================= */
.wd-signoff { margin-top: 34px; }
.wd-signoff img { width: min(260px, 70%); height: auto; margin-bottom: 8px; }
.wd-signoff p {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.8);
}
.wd-signoff p::after { content: ""; display: block; width: 36px; height: 2px; margin-top: 12px; background: var(--accent); }

/* =========================================================
   TABLET (640 – 999)
========================================================= */
@media (min-width: 640px) {
  .wd-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .wd-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .wd-steps { grid-template-columns: repeat(2, 1fr); }
  .wd-hero__bar li { flex: 1 1 18%; }
}

/* =========================================================
   DESKTOP (1000+)
========================================================= */
@media (min-width: 1000px) {
  .wd-sect { padding: 88px 0; }
  .wd-title { font-size: clamp(2rem, 3.5vw, 2.8rem); }          /* 45px / 50px on a laptop */
  .wd-title--xl { font-size: clamp(2.4rem, 4.2vw, 3.6rem); }

  /* content column on the left, artwork on the right */
  .wd-body { max-width: 52vw; }
  .wd-body--wide { max-width: none; }
  .wd-lead { max-width: 560px; }

  .wd-sect > .wd-art--right,
  .wd-hero > .wd-art--hero {
    top: 0;
    bottom: 0;
    right: 0;
    left: auto;
    width: 52%;
    height: 100%;
    opacity: 1;
    object-position: left center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 32%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 32%);
  }

  .wd-hero { padding: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
  .wd-hero .wd-inner { width: 100%; padding-top: 120px; padding-bottom: 40px; }
  .wd-hero__title { font-size: clamp(2.8rem, 4.2vw, 4rem); }
  .wd-hero__bar { margin-top: 56px; flex-wrap: nowrap; padding: 20px 28px; }
  .wd-hero__bar li { flex: 1 1 auto; position: relative; }
  .wd-hero__bar li + li::before { content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 1px; background: rgba(255, 255, 255, 0.22); }

  /* three-column card rows (performance) are slightly wider */
  .wd-sect--compact .wd-body { max-width: 56vw; }
  .wd-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .wd-sect--compact .wd-card { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 16px; }

  /* process: artwork across the top right, steps full width */
  .wd-sect > .wd-art--top {
    top: 0;
    right: 0;
    left: auto;
    width: 56%;
    height: auto;
    opacity: 1;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%), linear-gradient(180deg, #000 60%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 30%), linear-gradient(180deg, #000 60%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
  .wd-steps { grid-template-columns: repeat(5, 1fr); gap: 22px; margin-top: 70px; }
  .wd-step { padding: 46px 14px 22px; }

  /* FAQ: heading + artwork left, accordion right */
  .wd-faq__inner { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 3vw; align-items: start; }
  .wd-faq__list { margin-top: 0; }
  .wd-sect > .wd-art--left {
    top: auto;
    bottom: 0;
    left: 0;
    right: auto;
    width: 46%;
    height: auto;
    opacity: 1;
    -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 26%), linear-gradient(0deg, #000 65%, transparent 100%);
            mask-image: linear-gradient(270deg, transparent 0%, #000 26%), linear-gradient(0deg, #000 65%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
}

@media (min-width: 1000px) and (max-width: 1199px) {
  .wd-card { padding: 16px; gap: 12px; }
  .wd-card__icon { flex-basis: 46px; width: 46px; height: 46px; font-size: 1.2rem; }
}

@media (max-width: 999px) {
  .wd-sect > .wd-art--left { top: 0; bottom: auto; left: 0; right: auto; width: 100%; height: 300px; }
  .wd-faq__inner { display: block; }
  .wd-sect--compact .wd-body { max-width: none; }
}

@media (max-width: 639px) {
  .wd-sect { padding: 56px 0; }
  .wd-card { padding: 16px; }
  .wd-callout, .wd-flowbar { padding: 14px 16px; font-size: 0.98rem; }
  .wd-callout > i { font-size: 1.6rem; }
  .wd-faq__item p { padding-left: 20px; }
  .wd-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wd-card, .wd-btn, .wd-faq__item summary i { transition: none; }
}

/* =========================================================
   HERO BACKGROUND FIX  (must stay at the end of this file)
   The whole picture now fills the hero: monitor, phone and tablet are all visible.
   Before, the picture was a 58%-wide box that cropped the monitor and tablet off.
========================================================= */
.wd-hero > .wd-art--hero {
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 1;
  object-fit: cover;
  object-position: center;
  -webkit-mask-image: none;
          mask-image: none;
}

/* soft dark layer on the left so the heading stays readable over the picture */
.wd-hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 10, 26, .85) 0%, rgba(4, 10, 26, .55) 30%, rgba(4, 10, 26, 0) 58%),
    linear-gradient(0deg, rgba(4, 10, 26, .55) 0%, rgba(4, 10, 26, 0) 24%);
}

/* tablet + phone: picture behind everything, darker so the text stays clear */
@media (max-width: 999px) {
  .wd-hero > .wd-art--hero { object-position: 68% center; }
  .wd-hero::after { background: linear-gradient(180deg, rgba(4, 10, 26, .78) 0%, rgba(4, 10, 26, .55) 55%, rgba(4, 10, 26, .82) 100%); }
}

/* =========================================================
   HERO BOTTOM BAR  (Web Design | Development | UI/UX | SEO | Performance)
   Neon outline bar, thin outline icons, clear white dividers.
   Needs the new <ul class="wd-hero__bar"> markup (website-hero-bar.html).
========================================================= */
.wd-hero__bar {
  border: 1.5px solid transparent;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(6, 18, 52, .86), rgba(3, 9, 28, .92)) padding-box,
    linear-gradient(90deg, #22c7ff 0%, #3a7bff 55%, #8a4dff 100%) border-box;
  box-shadow: 0 0 26px rgba(30, 160, 255, .45), 0 0 60px rgba(40, 110, 255, .18), inset 0 0 26px rgba(30, 120, 255, .12);
}
.wd-hero__bar li { gap: clamp(12px, 1.2vw, 20px); font-size: clamp(.95rem, 1.15vw, 1.1rem); font-weight: 500; }
.wd-hero__bar li svg {
  flex: none;
  width: clamp(34px, 3vw, 48px);
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px currentColor);
  transition: transform .3s ease;
}
.wd-hero__bar li:hover svg { transform: translateY(-3px) scale(1.08); }
.wd-bar--cyan   { --ic: #19c2ff; }
.wd-bar--orange { --ic: #ff6b00; }
.wd-bar--purple { --ic: #8a5bff; }
.wd-hero__bar li svg { color: var(--ic, #19c2ff); }
@media (min-width: 1000px) {
  .wd-hero__bar li + li::before { top: 14%; bottom: 14%; width: 1.5px; background: rgba(255, 255, 255, .78); }
}
@media (prefers-reduced-motion: reduce) { .wd-hero__bar li svg { transition: none; } }

/* =========================================================
   SECTIONS 2 - LAST: ONE SCREEN TALL (+15px) ON LAPTOP / DESKTOP
   height = visible window height - menu height + 15px.
   The window and menu heights are measured by a small script (website-fit-script.html); these are the fallbacks.
   Sections with more content than fits simply grow, so nothing is cut off. The hero is not touched.
========================================================= */
:root { --wd-menu: 72px; --wd-more: 15px; }   /* 72px = the compact (scrolled) menu bar from menu.css */

/* tablet + phone: keep the natural height, just +15px in total (7.5px top, 7.5px bottom) */
.wd-sect { padding-top: calc(72px + var(--wd-more) / 2); padding-bottom: calc(72px + var(--wd-more) / 2); }
@media (max-width: 639px) { .wd-sect { padding-top: calc(56px + var(--wd-more) / 2); padding-bottom: calc(56px + var(--wd-more) / 2); } }

/* laptop + desktop: exactly one screen, content centred */
@media (min-width: 1000px) {
  .wd-sect {
    display: flex; flex-direction: column; justify-content: center;
    min-height: calc(100vh - var(--wd-menu) + var(--wd-more));
    min-height: calc(100svh - var(--wd-menu) + var(--wd-more));
    min-height: calc(var(--wd-vh, 100svh) - var(--wd-menu) + var(--wd-more));
    padding-top: clamp(28px, 5vh, 64px); padding-bottom: clamp(28px, 5vh, 64px);
  }
}

/* =========================================================
   SECTION PICTURES: the whole picture fills the section (laptop / desktop)
   Before, each picture was a box about 52% wide, so the phones, laptop and tablet at the right edge were cut off.
   The text stays on the left over a soft dark layer; the devices show fully on the right.
========================================================= */
@media (min-width: 1000px) {
  .wd-sect > .wd-art--right {
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 1;
    object-fit: cover;
    object-position: center;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .wd-sect:has(> .wd-art--right)::after {
    content: '';
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      linear-gradient(90deg, rgba(4, 9, 24, .82) 0%, rgba(4, 9, 24, .5) 36%, rgba(4, 9, 24, 0) 62%),
      linear-gradient(0deg, rgba(4, 9, 24, .45) 0%, rgba(4, 9, 24, 0) 22%);
  }
}

/* footer logo text (footer.html uses .logotype; website.css is loaded without index.css) */
.logotype { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 1.25rem; letter-spacing: .01em; color: #fff; }
.logotype__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(255, 107, 0, .7); flex: none; }

/* =========================================================
   FAQ SECTION: whole picture visible bottom-left, 10 questions fit one screen
   (picture = image/wd-faq.webp: laptop, monitor, man and the "?" bubble)
========================================================= */
@media (min-width: 1000px) {
  .wd-sect > .wd-art--left {
    top: auto; bottom: 0; left: 0; right: auto;
    width: 52%; height: auto;
    opacity: 1;
    object-fit: contain;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%), linear-gradient(90deg, #000 90%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 22%), linear-gradient(90deg, #000 90%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
  /* slimmer question rows so all ten fit on one screen */
  .wd-faq__list { gap: clamp(6px, 1vh, 10px); }
  .wd-faq__item summary { padding: clamp(8px, 1.3vh, 14px) 18px; font-size: clamp(.9rem, min(1.1vw, 2.1vh), 1rem); }
  .wd-faq__num { flex-basis: clamp(32px, 4.2vh, 38px); width: clamp(32px, 4.2vh, 38px); height: clamp(32px, 4.2vh, 38px); font-size: .85rem; }
  .wd-faq__item p { padding-bottom: clamp(12px, 2vh, 18px); font-size: clamp(.86rem, min(1vw, 1.9vh), .95rem); }
}

/* =========================================================
   FAQ SECTION — SAME AS THE OTHER SECTIONS: picture fills the whole section,
   heading + the 10 questions sit on the left, the man / "?" bubble / monitor stay visible on the right.
========================================================= */
@media (min-width: 1000px) {
  .wd-sect > .wd-art--left {
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 1;
    object-fit: cover;
    object-position: center;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .wd-faq::after {
    content: '';
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      linear-gradient(90deg, rgba(4, 9, 24, .72) 0%, rgba(4, 9, 24, .38) 40%, rgba(4, 9, 24, 0) 62%),
      linear-gradient(0deg, rgba(4, 9, 24, .4) 0%, rgba(4, 9, 24, 0) 20%);
  }
  /* one column on the left (heading, then the questions) */
  .wd-faq__inner { display: block; }
  .wd-faq__head, .wd-faq__list { max-width: min(50vw, 780px); }
  .wd-faq__head { margin-bottom: clamp(12px, 2vh, 22px); }
  .wd-faq .wd-eyebrow { margin-bottom: 10px; }
  .wd-faq .wd-title--xl { font-size: clamp(2rem, min(3.6vw, 6vh), 3.2rem); margin-bottom: 6px; }
  .wd-faq__sub { font-size: clamp(1.1rem, min(1.8vw, 3vh), 1.5rem); }
  .wd-faq__list { margin-top: 0; gap: clamp(5px, .8vh, 8px); }
  .wd-faq__item summary { padding: clamp(7px, 1.1vh, 12px) 16px; font-size: clamp(.88rem, min(1vw, 2vh), .98rem); }
  .wd-faq__num { flex-basis: clamp(30px, 3.8vh, 36px); width: clamp(30px, 3.8vh, 36px); height: clamp(30px, 3.8vh, 36px); font-size: .8rem; }
  .wd-faq__item p { padding: 0 20px clamp(10px, 1.6vh, 16px) 64px; font-size: clamp(.84rem, min(.95vw, 1.8vh), .94rem); }
}

/* =========================================================
   FAQ SECTION — FINAL LAYOUT (new picture: man + monitor + laptop on the LEFT, empty blue on the RIGHT)
   picture = image/wd-faq.webp, fills the whole section.
   Heading top-left, the 10 questions on the right, devices + "?" bubble visible below the heading.
========================================================= */
@media (min-width: 1000px) {
  .wd-faq__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); gap: 4vw; align-items: center; }
  .wd-faq__head { max-width: none; align-self: start; padding-top: clamp(0px, 1vh, 12px); }
  .wd-faq__list { max-width: none; align-self: center; }
  .wd-faq .wd-title--xl { font-size: clamp(2.2rem, min(4vw, 6.6vh), 3.8rem); line-height: 1.05; margin-bottom: 8px; }
  .wd-faq__sub { font-size: clamp(1.4rem, min(2.2vw, 4vh), 2.1rem); }
  /* only a light dark layer behind the heading; the right side of the picture stays bright */
  .wd-faq::after { background: linear-gradient(90deg, rgba(4, 9, 24, .5) 0%, rgba(4, 9, 24, 0) 42%), linear-gradient(0deg, rgba(4, 9, 24, .3) 0%, rgba(4, 9, 24, 0) 18%); }
  .wd-faq__item summary { padding: clamp(8px, 1.3vh, 14px) 16px; font-size: clamp(.9rem, min(1.05vw, 2.1vh), 1.02rem); font-weight: 700; }
  .wd-faq__item p { padding: 0 20px clamp(10px, 1.6vh, 16px) 66px; }
}

/* FAQ: heading moved up and made a little smaller so it stays above the monitor and laptop in the picture */
@media (min-width: 1000px) {
  .wd-faq { justify-content: flex-start; padding-top: clamp(16px, 2.6vh, 34px); }
  .wd-faq__inner { align-items: start; }
  .wd-faq__head { padding-top: 0; }
  .wd-faq .wd-eyebrow { margin-bottom: 8px; }
  .wd-faq .wd-title--xl { font-size: clamp(2rem, min(3.4vw, 5.4vh), 3.4rem); margin-bottom: 4px; }
  .wd-faq__sub { font-size: clamp(1.2rem, min(1.9vw, 3.4vh), 1.8rem); }
}

/* =========================================================
   SECTION PICTURES: fill the section, anchored to the RIGHT (laptop / desktop)
   The pictures are wider than the sections, so "cover" trimmed both sides and cut off
   the laptop / tablet / panels on the right. Now only the left side is trimmed
   (it sits behind the text and the dark shade), so the devices show fully.
========================================================= */
@media (min-width: 1000px) {
  .wd-sect > .wd-art--right {
    object-fit: cover;
    object-position: right center;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* =========================================================
   RESPONSIVE DESIGN ICON FIX
   "laptop-mobile" is a Font Awesome PRO icon, so the free version showed an empty box.
   This draws the free "mobile-screen-button" icon in its place (Design + Features sections),
   no change needed in website.php.
========================================================= */
.fa-laptop-mobile::before { content: "\f3cd"; }

/* =========================================================
   ALTERNATING SECTIONS: picture / black / picture / black ...
   Sections with class "wd-sect--plain" have no picture and a black background.
   Order: Hero (picture) > Why (black) > Solutions (picture) > Business types (black)
   > Design (picture) > Technology (black) > Performance (picture) > Process (black)
   > Features (picture) > Industries (black) > Support (picture) > FAQ (black) > CTA (picture)
   To switch a section, add or remove 'plain'=>true in website.php.
========================================================= */
.wd-sect--plain > .wd-art { display: none; }

/* dark navy base with coloured glows (not flat black) */
.wd-sect.wd-sect--plain,
.wd-sect.wd-sect--plain:nth-of-type(even) {
  --glow-a: 47, 123, 255;     /* blue   */
  --glow-b: 255, 107, 0;      /* orange */
  background:
    linear-gradient(90deg, transparent 5%, rgba(var(--glow-b), .55) 50%, transparent 95%) top / 100% 1px no-repeat,
    radial-gradient(ellipse 55% 60% at 0% 0%, rgba(var(--glow-a), .30), transparent 70%),
    radial-gradient(ellipse 45% 55% at 100% 100%, rgba(var(--glow-b), .16), transparent 70%),
    radial-gradient(ellipse 40% 40% at 85% 25%, rgba(138, 77, 255, .14), transparent 70%),
    #040815;
  isolation: isolate;
}

/* layer 1: fine tech grid that fades out towards the edges */
.wd-sect.wd-sect--plain::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(120, 160, 255, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 160, 255, .09) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 15%, transparent 80%);
          mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 15%, transparent 80%);
}

/* layer 2: a big glowing ring in the corner */
.wd-sect.wd-sect--plain::after {
  content: '';
  position: absolute; z-index: 0; pointer-events: none;
  top: -180px; right: -180px; left: auto; bottom: auto; inset: -180px -180px auto auto;
  width: 560px; height: 560px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--glow-a), .35);
  background: radial-gradient(circle, rgba(var(--glow-a), .22) 0%, rgba(var(--glow-a), .06) 45%, transparent 70%);
  box-shadow: 0 0 80px rgba(var(--glow-a), .25), inset 0 0 80px rgba(var(--glow-a), .15);
}

/* every black section uses the same look as the "First Impressions Matter" section:
   blue + orange glow, grid, ring in the top-right corner */

/* phones: smaller ring */
@media (max-width: 639px) {
  .wd-sect.wd-sect--plain::after { width: 340px; height: 340px; }
  .wd-sect.wd-sect--plain::before { background-size: 40px 40px; }
}

/* no picture on the right, so the content uses the full width */
@media (min-width: 1000px) {
  .wd-sect--plain .wd-body { max-width: none; }
  .wd-sect--plain .wd-lead { max-width: 720px; }
  .wd-sect--plain .wd-grid--2 { grid-template-columns: repeat(3, 1fr); }
  /* 4 or 8 cards: 4 per row */
  .wd-sect--plain .wd-grid:has(> :nth-child(4):last-child),
  .wd-sect--plain .wd-grid:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, 1fr); }
  .wd-sect--plain .wd-callout { max-width: 900px; }

  /* FAQ on black: centred vertically like the other sections */
  .wd-faq.wd-sect--plain { justify-content: center; padding-top: clamp(28px, 5vh, 64px); }
  .wd-faq.wd-sect--plain .wd-faq__inner { align-items: center; }
}
@media (min-width: 1000px) and (max-width: 1199px) {
  .wd-sect--plain .wd-grid:has(> :nth-child(4):last-child),
  .wd-sect--plain .wd-grid:has(> :nth-child(8):last-child) { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   SHOWCASE SECTION ("First Impressions Matter")
   Pure black, orange glow + dot patterns, centred heading,
   big cards with a check list, centred callout.
   Font sizes are NOT changed: they stay the same as the rest of the page.
========================================================= */
.wd-sect.wd-sect--showcase,
.wd-sect.wd-sect--showcase:nth-of-type(even) {
  background:
    radial-gradient(ellipse 30% 45% at 100% 0%, rgba(255, 107, 0, .20), transparent 70%),
    radial-gradient(ellipse 25% 40% at 0% 100%, rgba(255, 107, 0, .14), transparent 70%),
    radial-gradient(ellipse 22% 40% at 0% 35%, rgba(255, 107, 0, .08), transparent 70%),
    #000;
}
.wd-sect.wd-sect--showcase::before,
.wd-sect.wd-sect--showcase::after { content: none; }

/* ---- decorations ---- */
.wd-deco { position: absolute; z-index: 0; pointer-events: none; }

.wd-deco--dots {
  background-image: radial-gradient(circle, rgba(255, 107, 0, .9) 1.6px, transparent 2.3px);
  background-size: 27px 27px;
  animation: wd-dots-twinkle 3.5s ease-in-out infinite alternate;
}
.wd-deco--dots-tl { top: 18px; left: 100px; width: 216px; height: 81px;
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent); mask-image: linear-gradient(90deg, #000 40%, transparent); }
.wd-deco--dots-r  { top: 30%; right: 18px; width: 135px; height: 81px; animation-delay: -1.2s;
  -webkit-mask-image: linear-gradient(270deg, #000 40%, transparent); mask-image: linear-gradient(270deg, #000 40%, transparent); }
.wd-deco--dots-br { bottom: 40px; right: 40px; width: 162px; height: 81px; animation-delay: -2.4s;
  -webkit-mask-image: linear-gradient(270deg, #000 40%, transparent); mask-image: linear-gradient(270deg, #000 40%, transparent); }

@keyframes wd-dots-twinkle {
  from { opacity: .35; }
  to   { opacity: 1; }
}

/* ---- centred heading ---- */
.wd-sect--showcase .wd-body { max-width: 1520px; margin: 0 auto; text-align: center; }
.wd-sect--showcase .wd-eyebrow { justify-content: center; }
.wd-sect--showcase .wd-lead { max-width: 820px; margin-left: auto; margin-right: auto; }

/* ---- cards with a check list ---- */
.wd-sect--showcase .wd-grid { text-align: left; gap: 22px; margin-top: 36px; }
@media (min-width: 1200px) { .wd-sect--showcase .wd-grid { grid-template-columns: repeat(4, 1fr); } }

.wd-card--rich {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 26px 24px 24px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(var(--c-rgb), .20), rgba(4, 6, 16, .96) 58%);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.wd-card__top { display: flex; align-items: flex-start; gap: 18px; }
.wd-card--rich .wd-card__icon {
  flex-basis: 62px; width: 62px; height: 62px; border-radius: 16px;
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease;
}
.wd-card__list {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(var(--c-rgb), .28);
  display: grid;
  gap: 12px;
}
.wd-card__list li {
  display: flex; align-items: center; gap: 12px;
  font-size: .92rem;               /* same size as the card text */
  line-height: 1.4;
  color: rgba(255, 255, 255, .9);
  transition: transform .3s ease;
}
.wd-check {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: .68rem;
  color: #fff;
  background: var(--c);
  box-shadow: 0 0 10px rgba(var(--c-rgb), .6);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
}

/* light sweep that runs across the card on hover */
.wd-card--rich::before {
  content: '';
  position: absolute; top: 0; left: -70%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .13), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left .8s ease;
}

/* ---- hover ---- */
.wd-card--rich:hover {
  transform: translateY(-8px);
  border-color: rgba(var(--c-rgb), 1);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 38px rgba(var(--c-rgb), .55), inset 0 0 30px rgba(var(--c-rgb), .12);
}
.wd-card--rich:hover::before { left: 130%; }
.wd-card--rich:hover .wd-card__icon { transform: rotate(-8deg) scale(1.1); box-shadow: 0 10px 28px rgba(var(--c-rgb), .75); }
.wd-card--rich:hover .wd-card__list li { transform: translateX(5px); }
.wd-card--rich:hover .wd-check { transform: scale(1.18); box-shadow: 0 0 16px rgba(var(--c-rgb), .9); }
.wd-card--rich:hover .wd-card__list li:nth-child(2),
.wd-card--rich:hover .wd-card__list li:nth-child(2) .wd-check { transition-delay: .06s; }
.wd-card--rich:hover .wd-card__list li:nth-child(3),
.wd-card--rich:hover .wd-card__list li:nth-child(3) .wd-check { transition-delay: .12s; }

/* ---- callout, centred under the cards ---- */
.wd-sect--showcase .wd-callout {
  max-width: 1000px;
  margin: 34px auto 0;
  justify-content: center;
  text-align: left;
  transition: box-shadow .35s ease, border-color .35s ease, transform .35s ease;
}
.wd-sect--showcase .wd-callout > i { animation: wd-target-pulse 2.4s ease-in-out infinite; }
.wd-sect--showcase .wd-callout:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 107, 0, 1);
  box-shadow: 0 0 36px rgba(255, 107, 0, .5);
}
@keyframes wd-target-pulse {
  0%, 100% { transform: scale(1);    text-shadow: 0 0 0 rgba(255, 107, 0, 0); }
  50%      { transform: scale(1.12); text-shadow: 0 0 18px rgba(255, 107, 0, .9); }
}

/* ---- entrance animation (only when the script runs) ----
   uses "translate" so it never fights with the hover "transform" */
.wd-js-anim .wd-sect--showcase .wd-eyebrow,
.wd-js-anim .wd-sect--showcase .wd-title,
.wd-js-anim .wd-sect--showcase .wd-lead,
.wd-js-anim .wd-sect--showcase .wd-card,
.wd-js-anim .wd-sect--showcase .wd-callout {
  opacity: 0;
  translate: 0 30px;
}
.wd-js-anim .wd-sect--showcase .wd-dash { width: 0; transition: width .8s ease .2s; }

.wd-js-anim .wd-sect--showcase.is-in .wd-eyebrow,
.wd-js-anim .wd-sect--showcase.is-in .wd-title,
.wd-js-anim .wd-sect--showcase.is-in .wd-lead,
.wd-js-anim .wd-sect--showcase.is-in .wd-card,
.wd-js-anim .wd-sect--showcase.is-in .wd-callout {
  opacity: 1;
  translate: 0 0;
}
.wd-js-anim .wd-sect--showcase.is-in .wd-dash { width: 48px; }

.wd-js-anim .wd-sect--showcase .wd-eyebrow,
.wd-js-anim .wd-sect--showcase .wd-title,
.wd-js-anim .wd-sect--showcase .wd-lead { transition: opacity .7s ease var(--d, 0s), translate .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
.wd-js-anim .wd-sect--showcase .wd-card,
.wd-js-anim .wd-sect--showcase .wd-callout {
  transition: opacity .7s ease var(--d, 0s), translate .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s),
              transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.wd-sect--showcase .wd-title { --d: .1s; }
.wd-sect--showcase .wd-lead  { --d: .2s; }
.wd-sect--showcase .wd-card:nth-child(1) { --d: .3s; }
.wd-sect--showcase .wd-card:nth-child(2) { --d: .42s; }
.wd-sect--showcase .wd-card:nth-child(3) { --d: .54s; }
.wd-sect--showcase .wd-card:nth-child(4) { --d: .66s; }
.wd-sect--showcase .wd-callout { --d: .8s; }

/* ---- tablet + phone ---- */
@media (max-width: 999px) {
  .wd-deco--dots-tl { left: 20px; }
  .wd-deco--dots-r, .wd-deco--dots-br { display: none; }
}
@media (max-width: 639px) {
  .wd-sect--showcase .wd-callout { justify-content: flex-start; }
  .wd-card--rich { padding: 22px 18px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .wd-deco--dots, .wd-sect--showcase .wd-callout > i { animation: none; }
  .wd-card--rich, .wd-card--rich::before, .wd-card--rich .wd-card__icon,
  .wd-card__list li, .wd-check, .wd-sect--showcase .wd-callout { transition: none; }
}

/* =========================================================
   TILES SECTION ("Different Businesses. Different Digital Solutions.")
   Dark navy, blue + orange corner glow, faint grid, dots. No circles.
   3 x 2 neon tiles with a coloured line, centred callout.
   Font sizes are NOT changed.
========================================================= */
.wd-sect.wd-sect--tiles,
.wd-sect.wd-sect--tiles:nth-of-type(even) {
  background:
    radial-gradient(ellipse 40% 50% at 0% 0%, rgba(47, 123, 255, .26), transparent 70%),
    radial-gradient(ellipse 32% 45% at 100% 0%, rgba(255, 107, 0, .22), transparent 70%),
    radial-gradient(ellipse 30% 40% at 100% 100%, rgba(255, 107, 0, .16), transparent 70%),
    #040815;
}
.wd-sect.wd-sect--tiles::after { content: none; }          /* no ring / circle */

.wd-deco--dots-tr { top: 40px; right: 90px; width: 245px; height: 108px;
  -webkit-mask-image: linear-gradient(270deg, #000 45%, transparent); mask-image: linear-gradient(270deg, #000 45%, transparent); }
.wd-deco--dots-bl { bottom: 40px; left: 0; width: 160px; height: 108px; animation-delay: -1.8s;
  background-image: radial-gradient(circle, rgba(60, 130, 255, .9) 1.6px, transparent 2.3px);
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent); mask-image: linear-gradient(90deg, #000 45%, transparent); }

/* centred heading + callout */
.wd-sect--tiles .wd-body { max-width: 1520px; margin: 0 auto; text-align: center; }
.wd-sect--tiles .wd-eyebrow { justify-content: center; }
.wd-sect--tiles .wd-grid { text-align: left; gap: 22px 26px; margin-top: 34px; }
.wd-sect--tiles .wd-callout {
  max-width: 1000px; margin: 32px auto 0;
  justify-content: center; text-align: left;
  transition: box-shadow .35s ease, border-color .35s ease, transform .35s ease;
}
.wd-sect--tiles .wd-callout > i { animation: wd-target-pulse 2.4s ease-in-out infinite; }
.wd-sect--tiles .wd-callout:hover { transform: translateY(-3px); border-color: rgba(255, 107, 0, 1); box-shadow: 0 0 36px rgba(255, 107, 0, .5); }

/* tiles */
.wd-sect--tiles .wd-card {
  align-items: flex-start;
  gap: 20px;
  padding: 30px 28px 30px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(var(--c-rgb), .22), rgba(5, 8, 22, .95) 60%);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.wd-sect--tiles .wd-card__icon {
  flex-basis: 62px; width: 62px; height: 62px; border-radius: 16px;
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease;
}
.wd-sect--tiles .wd-card__text h3 { margin-bottom: 6px; }
.wd-sect--tiles .wd-card__text::after {        /* short coloured line under the text */
  content: '';
  display: block;
  width: 56px; height: 3px;
  margin-top: 24px;
  margin-left: -82px;                            /* lines up under the icon, like the design */
  border-radius: 3px;
  background: var(--c);
  box-shadow: 0 0 10px rgba(var(--c-rgb), .8);
  transition: width .45s ease;
}
/* light sweep on hover */
.wd-sect--tiles .wd-card::before {
  content: '';
  position: absolute; top: 0; left: -70%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .12), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left .8s ease;
}

/* hover */
.wd-sect--tiles .wd-card:hover {
  transform: translateY(-8px);
  border-color: rgba(var(--c-rgb), 1);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 38px rgba(var(--c-rgb), .55), inset 0 0 30px rgba(var(--c-rgb), .12);
}
.wd-sect--tiles .wd-card:hover::before { left: 130%; }
.wd-sect--tiles .wd-card:hover .wd-card__icon { transform: rotate(-8deg) scale(1.1); box-shadow: 0 10px 28px rgba(var(--c-rgb), .75); }
.wd-sect--tiles .wd-card:hover .wd-card__text::after { width: 120px; }

/* desktop: 3 per row; tablet: 2; phone: 1 (from the base grid) */
@media (min-width: 1000px) {
  .wd-sect--tiles .wd-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) and (max-width: 1199px) {
  .wd-sect--tiles .wd-card { padding: 24px 20px; gap: 16px; }
  .wd-sect--tiles .wd-card__icon { flex-basis: 52px; width: 52px; height: 52px; }
  .wd-sect--tiles .wd-card__text::after { margin-left: -68px; }
}
@media (max-width: 999px) {
  .wd-deco--dots-tr { right: 20px; width: 150px; }
  .wd-deco--dots-bl { display: none; }
}
@media (max-width: 639px) {
  .wd-sect--tiles .wd-card { padding: 22px 18px; }
  .wd-sect--tiles .wd-card__text::after { margin-left: 0; margin-top: 18px; }
  .wd-sect--tiles .wd-callout { justify-content: flex-start; }
}

/* entrance animation (same system as the showcase section) */
.wd-js-anim .wd-sect--tiles .wd-eyebrow,
.wd-js-anim .wd-sect--tiles .wd-title,
.wd-js-anim .wd-sect--tiles .wd-card,
.wd-js-anim .wd-sect--tiles .wd-callout { opacity: 0; translate: 0 30px; }
.wd-js-anim .wd-sect--tiles .wd-dash { width: 0; transition: width .8s ease .2s; }
.wd-js-anim .wd-sect--tiles.is-in .wd-eyebrow,
.wd-js-anim .wd-sect--tiles.is-in .wd-title,
.wd-js-anim .wd-sect--tiles.is-in .wd-card,
.wd-js-anim .wd-sect--tiles.is-in .wd-callout { opacity: 1; translate: 0 0; }
.wd-js-anim .wd-sect--tiles.is-in .wd-dash { width: 48px; }
.wd-js-anim .wd-sect--tiles .wd-eyebrow,
.wd-js-anim .wd-sect--tiles .wd-title { transition: opacity .7s ease var(--d, 0s), translate .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
.wd-js-anim .wd-sect--tiles .wd-card,
.wd-js-anim .wd-sect--tiles .wd-callout {
  transition: opacity .7s ease var(--d, 0s), translate .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s),
              transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.wd-sect--tiles .wd-title { --d: .1s; }
.wd-sect--tiles .wd-card:nth-child(1) { --d: .25s; }
.wd-sect--tiles .wd-card:nth-child(2) { --d: .35s; }
.wd-sect--tiles .wd-card:nth-child(3) { --d: .45s; }
.wd-sect--tiles .wd-card:nth-child(4) { --d: .55s; }
.wd-sect--tiles .wd-card:nth-child(5) { --d: .65s; }
.wd-sect--tiles .wd-card:nth-child(6) { --d: .75s; }
.wd-sect--tiles .wd-callout { --d: .9s; }

@media (prefers-reduced-motion: reduce) {
  .wd-sect--tiles .wd-callout > i { animation: none; }
  .wd-sect--tiles .wd-card, .wd-sect--tiles .wd-card::before, .wd-sect--tiles .wd-card__icon,
  .wd-sect--tiles .wd-card__text::after, .wd-sect--tiles .wd-callout { transition: none; }
}

/* =========================================================
   SPACING FOR EVERY SCREEN (Windows laptops, MacBooks, iPad, phones)
   Spacing now follows the real screen HEIGHT as well as the width.
   MacBooks have shorter browser windows than most Windows laptops
   (e.g. 1440 x ~790 on a MacBook Air vs 1920 x ~950 on a Full-HD laptop),
   so the gaps shrink a little on short screens and grow on tall ones,
   instead of using the same fixed gaps everywhere. Font sizes are not changed.
========================================================= */

/* iPhone / iPad: stop Safari from enlarging text when the phone is turned sideways */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* phones in landscape with a notch: keep content away from the notch */
.wd-inner {
  padding-left: max(var(--edge), env(safe-area-inset-left, 0px));
  padding-right: max(var(--edge), env(safe-area-inset-right, 0px));
}

/* very wide screens (27" iMac, big monitors): the centred sections don't stretch too wide */
.wd-sect--showcase .wd-inner,
.wd-sect--tiles .wd-inner { max-width: 1760px; margin-left: auto; margin-right: auto; width: 100%; }

/* laptops + desktops: section gaps follow the screen height */
@media (min-width: 1000px) {
  .wd-sect { padding-top: clamp(40px, 8vh, 96px); padding-bottom: clamp(40px, 8vh, 96px); }
  .wd-sect .wd-grid { margin-top: clamp(20px, 3.6vh, 40px); }
  .wd-sect .wd-callout { margin-top: clamp(18px, 3.2vh, 34px); }
  .wd-sect:not(.wd-faq) .wd-title { margin-bottom: clamp(10px, 1.8vh, 18px); }
  .wd-sect:not(.wd-faq) .wd-eyebrow { margin-bottom: clamp(10px, 1.8vh, 18px); }
  .wd-steps { margin-top: clamp(40px, 7vh, 70px); }
}

/* short laptop screens: MacBook Air / Pro 13-14", 1366 x 768 laptops, browsers with big toolbars */
@media (min-width: 1000px) and (max-height: 860px) {
  .wd-sect { padding-top: clamp(32px, 6vh, 56px); padding-bottom: clamp(32px, 6vh, 56px); }
  .wd-grid { gap: 14px 18px; }
  .wd-sect--showcase .wd-grid,
  .wd-sect--tiles .wd-grid { gap: 16px 20px; }
  .wd-card { padding-top: 14px; padding-bottom: 14px; }
  .wd-card--rich { padding: 20px 20px 18px; }
  .wd-card__list { margin-top: 14px; padding-top: 12px; gap: 9px; }
  .wd-sect--tiles .wd-card { padding: 22px 24px; }
  .wd-sect--tiles .wd-card__text::after { margin-top: 16px; }
  .wd-callout { padding-top: 12px; padding-bottom: 12px; }
  .wd-step { padding-top: 38px; padding-bottom: 18px; }
}

/* very short windows (browser not full-screen, small laptops) */
@media (min-width: 1000px) and (max-height: 720px) {
  .wd-sect { padding-top: 28px; padding-bottom: 28px; }
  .wd-card--rich .wd-card__icon,
  .wd-sect--tiles .wd-card__icon { flex-basis: 50px; width: 50px; height: 50px; }
  .wd-sect--tiles .wd-card__text::after { margin-left: -70px; }
}

/* tall screens (MacBook Pro 16", iMac, 1440p+ monitors): a little more air */
@media (min-width: 1000px) and (min-height: 1050px) {
  .wd-sect--showcase .wd-grid,
  .wd-sect--tiles .wd-grid { gap: 28px 30px; }
}

/* iPad landscape (1024 - 1366 wide, touch screen): no one-screen squeeze, natural height */
@media (min-width: 1000px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  .wd-sect { min-height: 0; padding-top: 64px; padding-bottom: 64px; }
}

/* iPad portrait + small tablets */
@media (min-width: 640px) and (max-width: 999px) {
  .wd-sect { padding-top: 64px; padding-bottom: 64px; }
  :root { --edge: 40px; }
}

/* phones */
@media (max-width: 639px) {
  :root { --edge: 20px; }
  .wd-sect { padding-top: 52px; padding-bottom: 52px; }
}

/* =========================================================
   TECHNOLOGY SECTION ("Built to Perform. Engineered to Evolve.")
   Same neon tiles layout as "Different Businesses", no half circles.
   Colours swapped like the design: orange glow top-left, blue glow top-right,
   orange dots top-left, blue dots on the right.
========================================================= */
/* tiles sections that have an intro paragraph: centre it and animate it */
.wd-sect--tiles .wd-lead { max-width: 820px; margin-left: auto; margin-right: auto; }
.wd-js-anim .wd-sect--tiles .wd-lead { opacity: 0; translate: 0 30px;
  transition: opacity .7s ease var(--d, 0s), translate .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
.wd-js-anim .wd-sect--tiles.is-in .wd-lead { opacity: 1; translate: 0 0; }
.wd-sect--tiles .wd-lead { --d: .18s; }

#technology.wd-sect--tiles,
#technology.wd-sect--tiles:nth-of-type(even) {
  background:
    radial-gradient(ellipse 34% 48% at 0% 0%, rgba(255, 107, 0, .22), transparent 70%),
    radial-gradient(ellipse 36% 50% at 100% 0%, rgba(47, 123, 255, .28), transparent 70%),
    radial-gradient(ellipse 30% 40% at 0% 100%, rgba(47, 123, 255, .16), transparent 70%),
    radial-gradient(ellipse 28% 38% at 100% 100%, rgba(255, 107, 0, .10), transparent 70%),
    #040815;
}
/* orange dots top-left */
#technology .wd-deco--dots-tr {
  top: 40px; right: auto; left: 40px; width: 150px; height: 108px;
  background-image: radial-gradient(circle, rgba(255, 107, 0, .9) 1.6px, transparent 2.3px);
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent); mask-image: linear-gradient(90deg, #000 45%, transparent);
}
/* blue dots on the right */
#technology .wd-deco--dots-bl {
  bottom: auto; top: 22%; left: auto; right: 60px; width: 135px; height: 108px;
  background-image: radial-gradient(circle, rgba(60, 130, 255, .9) 1.6px, transparent 2.3px);
  -webkit-mask-image: linear-gradient(270deg, #000 45%, transparent); mask-image: linear-gradient(270deg, #000 45%, transparent);
}
@media (max-width: 999px) {
  #technology .wd-deco--dots-tr { left: 16px; width: 110px; }
}

/* =========================================================
   HOW WE WORK ("From First Idea. To Final Launch.")
   Same look as the other redesigned sections: no half circle,
   centred heading, dots, glowing line joining the 5 steps,
   hover + scroll animation. Font sizes are NOT changed.
========================================================= */
.wd-process .wd-body--wide { max-width: 1520px; }

/* glowing line that joins the step numbers (laptop / desktop) */
.wd-process .wd-steps { position: relative; }
@media (min-width: 1000px) {
  .wd-process .wd-steps::before {
    content: '';
    position: absolute; z-index: 0;
    top: 0; left: 10%; right: 10%;
    height: 2px;
    background: linear-gradient(90deg, #2f7bff, #ff6b00, #2f7bff, #ff6b00, #2f7bff);
    background-size: 200% 100%;
    box-shadow: 0 0 12px rgba(255, 107, 0, .5);
    opacity: .7;
    animation: wd-line-flow 6s linear infinite;
  }
}
@keyframes wd-line-flow { from { background-position: 0 0; } to { background-position: 200% 0; } }

.wd-process .wd-step {
  z-index: 1;
  overflow: visible;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.wd-process .wd-step__num { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease; }
.wd-process .wd-step__icon { display: inline-block; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), filter .35s ease; }
.wd-process .wd-step__rule { transition: width .45s ease; }

/* soft pulse on the number badges, one after another */
.wd-process .wd-step__num { animation: wd-num-pulse 3s ease-in-out infinite; }
.wd-process .wd-step:nth-child(2) .wd-step__num { animation-delay: .6s; }
.wd-process .wd-step:nth-child(3) .wd-step__num { animation-delay: 1.2s; }
.wd-process .wd-step:nth-child(4) .wd-step__num { animation-delay: 1.8s; }
.wd-process .wd-step:nth-child(5) .wd-step__num { animation-delay: 2.4s; }
@keyframes wd-num-pulse {
  0%, 70%, 100% { box-shadow: 0 0 18px rgba(var(--c-rgb), .8); }
  35%           { box-shadow: 0 0 0 8px rgba(var(--c-rgb), .18), 0 0 30px rgba(var(--c-rgb), 1); }
}

/* hover */
.wd-process .wd-step:hover {
  transform: translateY(-8px);
  border-color: rgba(var(--c-rgb), 1);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 38px rgba(var(--c-rgb), .6), inset 0 0 30px rgba(var(--c-rgb), .14);
}
.wd-process .wd-step:hover .wd-step__num { transform: translateX(-50%) scale(1.15); }
.wd-process .wd-step:hover .wd-step__icon { transform: translateY(-4px) scale(1.15); filter: drop-shadow(0 0 16px rgba(var(--c-rgb), 1)); }
.wd-process .wd-step:hover .wd-step__rule { width: 70px; }

/* flow bar centred, arrows gently moving */
.wd-process .wd-flowbar {
  max-width: 1000px; margin-left: auto; margin-right: auto;
  justify-content: center;
  transition: box-shadow .35s ease, border-color .35s ease, transform .35s ease;
}
.wd-process .wd-flowbar > i:first-child { animation: wd-target-pulse 2.4s ease-in-out infinite; }
.wd-process .wd-flowbar > i:not(:first-child) { animation: wd-arrow-nudge 1.6s ease-in-out infinite; }
.wd-process .wd-flowbar:hover { transform: translateY(-3px); border-color: rgba(255, 107, 0, 1); box-shadow: 0 0 36px rgba(255, 107, 0, .5); }
@keyframes wd-arrow-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

/* scroll-in animation (steps come in one by one) */
.wd-js-anim .wd-process .wd-step,
.wd-js-anim .wd-process .wd-flowbar { opacity: 0; translate: 0 30px;
  transition: opacity .7s ease var(--d, 0s), translate .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s),
              transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.wd-js-anim .wd-process.is-in .wd-step,
.wd-js-anim .wd-process.is-in .wd-flowbar { opacity: 1; translate: 0 0; }
.wd-js-anim .wd-process .wd-steps::before { transform: scaleX(0); transform-origin: left; transition: transform 1.2s ease .3s; }
.wd-js-anim .wd-process.is-in .wd-steps::before { transform: scaleX(1); }
.wd-process .wd-step:nth-child(1) { --d: .25s; }
.wd-process .wd-step:nth-child(2) { --d: .37s; }
.wd-process .wd-step:nth-child(3) { --d: .49s; }
.wd-process .wd-step:nth-child(4) { --d: .61s; }
.wd-process .wd-step:nth-child(5) { --d: .73s; }
.wd-process .wd-flowbar { --d: .9s; }

@media (max-width: 639px) {
  .wd-process .wd-flowbar { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .wd-process .wd-steps::before, .wd-process .wd-step__num,
  .wd-process .wd-flowbar > i { animation: none; }
  .wd-process .wd-step, .wd-process .wd-step__num, .wd-process .wd-step__icon,
  .wd-process .wd-step__rule, .wd-process .wd-flowbar { transition: none; }
}

/* =========================================================
   HOW WE WORK, NEW DESIGN (wd-process--v2)
   Black background, round glowing icon on top of each card,
   big faded number, title + coloured subtitle + text,
   arrows between the cards, centred callout. No half circles.
========================================================= */
.wd-process--v2.wd-sect--tiles,
.wd-process--v2.wd-sect--tiles:nth-of-type(even) {
  background:
    radial-gradient(ellipse 32% 45% at 100% 0%, rgba(255, 107, 0, .18), transparent 70%),
    radial-gradient(ellipse 30% 42% at 0% 100%, rgba(255, 107, 0, .14), transparent 70%),
    radial-gradient(ellipse 40% 45% at 50% 60%, rgba(47, 123, 255, .08), transparent 70%),
    #000;
}
.wd-process--v2 .wd-deco--dots-bl { background-image: radial-gradient(circle, rgba(255, 107, 0, .9) 1.6px, transparent 2.3px); }
.wd-process--v2 .wd-steps::before { content: none; }         /* old joining line not used */

.wd-process--v2 .wd-steps {
  grid-template-columns: 1fr;
  gap: 62px 34px;
  margin-top: clamp(56px, 9vh, 92px);
}
@media (min-width: 640px)  { .wd-process--v2 .wd-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .wd-process--v2 .wd-steps { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .wd-process--v2 .wd-steps { grid-template-columns: repeat(5, 1fr); } }

/* card */
.wd-process--v2 .wd-step {
  text-align: left;
  padding: 50px 22px 24px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(var(--c-rgb), .24), rgba(4, 6, 16, .96) 72%);
}
.wd-process--v2 .wd-step--blue .wd-step__sub { color: #5a9bff; }

/* round glowing icon on top */
.wd-step__badge {
  position: absolute;
  top: -36px; left: 50%;
  width: 70px; height: 70px; margin-left: -35px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 1.5rem;
  color: #fff;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .35), rgba(var(--c-rgb), 1) 45%, rgba(var(--c-rgb), .75));
  border: 3px solid #000;
  box-shadow: 0 0 22px rgba(var(--c-rgb), .85);
  animation: wd-num-pulse 3s ease-in-out infinite;
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.wd-step__badge::after {
  content: ''; position: absolute; inset: -9px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--c-rgb), .45);
}
.wd-process--v2 .wd-step:nth-child(2) .wd-step__badge { animation-delay: .6s; }
.wd-process--v2 .wd-step:nth-child(3) .wd-step__badge { animation-delay: 1.2s; }
.wd-process--v2 .wd-step:nth-child(4) .wd-step__badge { animation-delay: 1.8s; }
.wd-process--v2 .wd-step:nth-child(5) .wd-step__badge { animation-delay: 2.4s; }

/* big faded number */
.wd-step__big {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.8rem;
  line-height: 1;
  margin-bottom: 4px;
  color: rgba(var(--c-rgb), .16);
  -webkit-text-stroke: 1px rgba(var(--c-rgb), .45);
  transition: color .4s ease;
}

/* text (same font sizes as before) */
.wd-process--v2 .wd-step h3 { margin-bottom: 2px; }
.wd-process--v2 .wd-step__sub { font-weight: 700; color: var(--c); margin-bottom: 12px; }
.wd-process--v2 .wd-step__desc { color: rgba(255, 255, 255, .82); }
.wd-process--v2 .wd-step__rule { margin: 18px 0 0; }

/* arrow between cards (only when all 5 are in one row) */
.wd-step__arrow { display: none; }
@media (min-width: 1280px) {
  .wd-step__arrow {
    position: absolute; z-index: 3;
    top: -15px; right: -32px;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 50%;
    font-size: .75rem;
    color: #fff;
    background: #000;
    border: 1.5px solid rgba(var(--c-rgb), .9);
    box-shadow: 0 0 12px rgba(var(--c-rgb), .6);
  }
  .wd-step__arrow i { animation: wd-arrow-nudge 1.6s ease-in-out infinite; }
}

/* hover */
.wd-process--v2 .wd-step:hover .wd-step__badge { transform: scale(1.12) rotate(-10deg); }
.wd-process--v2 .wd-step:hover .wd-step__big { color: rgba(var(--c-rgb), .45); }
.wd-process--v2 .wd-step:hover .wd-step__rule { width: 80px; }

/* scroll-in: icon pops in after its card */
.wd-js-anim .wd-process--v2 .wd-step__badge { scale: 0; transition: scale .6s cubic-bezier(.34, 1.56, .64, 1) calc(var(--d, 0s) + .25s), transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.wd-js-anim .wd-process--v2.is-in .wd-step__badge { scale: 1; }
.wd-process--v2 .wd-callout { --d: .9s; }

/* short laptop screens (MacBook 13-14") */
@media (min-width: 1000px) and (max-height: 860px) {
  .wd-process--v2 .wd-steps { margin-top: 56px; }
  .wd-process--v2 .wd-step { padding: 44px 18px 18px; }
  .wd-step__big { font-size: 2.3rem; }
}
@media (max-width: 639px) {
  .wd-process--v2 .wd-step { padding: 48px 20px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .wd-step__badge, .wd-step__arrow i { animation: none; }
  .wd-step__badge, .wd-step__big { transition: none; }
}

/* =========================================================
   INDUSTRIES ("Every Industry. A Better Digital Experience.")
   Neon tiles, 4 per row, no line under the text, no half circles.
========================================================= */
#industries.wd-sect--tiles,
#industries.wd-sect--tiles:nth-of-type(even) {
  background:
    radial-gradient(ellipse 32% 45% at 0% 0%, rgba(255, 107, 0, .20), transparent 70%),
    radial-gradient(ellipse 36% 50% at 100% 0%, rgba(47, 123, 255, .26), transparent 70%),
    radial-gradient(ellipse 30% 40% at 100% 100%, rgba(255, 107, 0, .16), transparent 70%),
    #040815;
}
/* short line on BOTH sides of the eyebrow, like the design */
#industries .wd-eyebrow::after {
  content: ''; width: 48px; height: 2px; flex-shrink: 0;
  background: linear-gradient(90deg, #ff6b00, #ff9db4);
}
#industries .wd-card { align-items: center; padding: 24px 22px; }
#industries .wd-card__text::after { content: none; }
@media (min-width: 1000px) and (max-width: 1199px) { #industries.wd-sect--tiles .wd-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { #industries.wd-sect--tiles .wd-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) and (max-height: 860px) { #industries .wd-card { padding: 18px 18px; } }
.wd-sect--tiles .wd-card:nth-child(7) { --d: .85s; }
.wd-sect--tiles .wd-card:nth-child(8) { --d: .95s; }
#industries .wd-callout { --d: 1.05s; }

/* =========================================================
   FAQ, NEW DESIGN ("Questions About Websites? Let's Make It Clear.")
   Navy background with soft blue/orange glow (no circles),
   heading + intro on the left, light question cards on the right.
   Font sizes are NOT changed.
========================================================= */
.wd-sect.wd-faq2,
.wd-sect.wd-faq2:nth-of-type(even) {
  background:
    radial-gradient(ellipse 40% 45% at 0% 0%, rgba(47, 123, 255, .28), transparent 70%),
    radial-gradient(ellipse 30% 40% at 100% 0%, rgba(47, 123, 255, .22), transparent 70%),
    #050c22;
}
.wd-sect.wd-faq2::after { content: none; }       /* no ring, no old picture shade */

/* soft glows bottom-left (blurred, no visible circle edge) */
.wd-faq2__glow { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(70px); }
.wd-faq2__glow--a { width: 520px; height: 420px; left: -160px; bottom: -160px; background: rgba(47, 123, 255, .45);
  animation: wd-glow-drift 9s ease-in-out infinite alternate; }
.wd-faq2__glow--b { width: 320px; height: 300px; left: 220px; bottom: -120px; background: rgba(255, 107, 0, .30);
  animation: wd-glow-drift 11s ease-in-out infinite alternate-reverse; }
@keyframes wd-glow-drift { from { transform: translate(0, 0); } to { transform: translate(40px, -30px); } }

/* left column */
.wd-faq2 .wd-eyebrow__hl { color: var(--accent); }
.wd-faq2 .wd-title .hl {
  background: linear-gradient(180deg, #ffb35c 0%, #ff6b00 70%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.wd-faq__intro {
  max-width: 470px;
  margin-top: 22px;
  font-size: 1.08rem;              /* same as the other intro text */
  line-height: 1.6;
  color: rgba(220, 230, 255, .78);
}

/* right column: question cards */
@media (min-width: 1000px) {
  .wd-faq2 .wd-faq__inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 5vw; align-items: center; }
  .wd-faq2 .wd-faq__head { align-self: start; padding-top: clamp(0px, 2vh, 24px); }
}
.wd-faq2 .wd-faq__item {
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35), 0 0 0 rgba(90, 150, 255, 0);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.wd-faq2 .wd-faq__item:hover {
  transform: translateX(-6px);
  border-color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .4), 0 0 26px rgba(90, 150, 255, .55);
}
.wd-faq2 .wd-faq__item[open] {
  border-color: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45), 0 0 34px rgba(90, 150, 255, .6);
}
.wd-faq2 .wd-faq__num { transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); box-shadow: 0 4px 12px rgba(47, 123, 255, .45); }
.wd-faq2 .wd-faq__item:hover .wd-faq__num { transform: scale(1.1) rotate(-6deg); }
.wd-faq2 .wd-faq__item[open] .wd-faq__num { box-shadow: 0 4px 14px rgba(255, 107, 0, .55); }
.wd-faq2 .wd-faq__item summary i { color: #1b55d6; }
.wd-faq2 .wd-faq__item:hover summary i { translate: 0 2px; }
.wd-faq2 .wd-faq__item p { color: #3a4870; }
/* answer slides in when a question opens */
.wd-faq2 .wd-faq__item[open] p { animation: wd-faq-open .4s ease both; }
@keyframes wd-faq-open { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* scroll-in: left side from the left, questions one by one from the right */
.wd-js-anim .wd-faq2 .wd-faq__head > * { opacity: 0; translate: -30px 0;
  transition: opacity .7s ease var(--d, 0s), translate .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
.wd-js-anim .wd-faq2 .wd-faq__item { opacity: 0; translate: 40px 0;
  transition: opacity .6s ease var(--d, 0s), translate .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0s),
              transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.wd-js-anim .wd-faq2.is-in .wd-faq__head > *,
.wd-js-anim .wd-faq2.is-in .wd-faq__item { opacity: 1; translate: 0 0; }
.wd-faq2 .wd-faq__head > :nth-child(2) { --d: .1s; }
.wd-faq2 .wd-faq__head > :nth-child(3) { --d: .2s; }
.wd-faq2 .wd-faq__head > :nth-child(4) { --d: .3s; }
.wd-faq2 .wd-faq__item:nth-child(1)  { --d: .15s; }
.wd-faq2 .wd-faq__item:nth-child(2)  { --d: .21s; }
.wd-faq2 .wd-faq__item:nth-child(3)  { --d: .27s; }
.wd-faq2 .wd-faq__item:nth-child(4)  { --d: .33s; }
.wd-faq2 .wd-faq__item:nth-child(5)  { --d: .39s; }
.wd-faq2 .wd-faq__item:nth-child(6)  { --d: .45s; }
.wd-faq2 .wd-faq__item:nth-child(7)  { --d: .51s; }
.wd-faq2 .wd-faq__item:nth-child(8)  { --d: .57s; }
.wd-faq2 .wd-faq__item:nth-child(9)  { --d: .63s; }
.wd-faq2 .wd-faq__item:nth-child(10) { --d: .69s; }

@media (max-width: 999px) {
  .wd-faq__intro { margin-bottom: 28px; }
  .wd-faq2__glow--b { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wd-faq2__glow { animation: none; }
  .wd-faq2 .wd-faq__item, .wd-faq2 .wd-faq__num { transition: none; }
  .wd-faq2 .wd-faq__item[open] p { animation: none; }
}