/* Homepage page stylesheet (digalu theme)
 *
 * Extracted verbatim from themes/digalu/home.html (4 inline <style> blocks,
 * 40KB) on 2026-09-24. It was being re-sent inside the HTML of every
 * response — uncacheable, uncompressed, and counted against the
 * MAX_INLINE_STYLE_BLOCKS ratchet in tests/architecture/test_csp_readiness.py.
 *
 * As a hashed static file it is served immutable with a 10-year max-age and
 * brotli'd by WhiteNoise, so repeat visits pay nothing for it.
 *
 * Rules are in their original source order — cascade order is load-bearing here
 * (several later blocks deliberately override earlier ones), so do not sort or
 * dedupe without checking what still wins.
 */

/* ── block 1 of 4 ─────────────────────────── */
/* ===== Hero circuit-board overlay (top-right half, fades down) ===== */
.banner-area { position: relative; overflow: hidden; }
.banner-area::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-image: url("../img/hero-circuit-bg.fc59eda8b54a.webp");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: cover;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: 1;
}
/* Keep hero content above the overlay */
.banner-area .banner-fade,
.banner-area .container { position: relative; z-index: 2; }

/* ===== Hero instant-paint: show first slide before Swiper initialises ===== */
/* Swiper's fade effect hides slides until JS boots — force slide 1 visible immediately. */
.banner-area .banner-fade .swiper-wrapper { display: block; }
.banner-area .banner-fade .swiper-slide { opacity: 1 !important; }
.banner-area .banner-fade .swiper-slide:not(:first-child) { display: none; }
/* Once Swiper has initialised it adds .swiper-initialized — restore its own behaviour. */
.banner-area .banner-fade.swiper-initialized .swiper-wrapper { display: flex; }
.banner-area .banner-fade.swiper-initialized .swiper-slide { opacity: 0 !important; }
.banner-area .banner-fade.swiper-initialized .swiper-slide.swiper-slide-active { opacity: 1 !important; }
.banner-area .banner-fade.swiper-initialized .swiper-slide:not(:first-child) { display: block; }
/* Keep the hero image from reflowing once the real aspect ratio is known. */
.banner-style-six .thumb img { max-width: 100%; height: auto; }

/* ===== Our Services icons: animated GIFs replacing the flaticon glyphs
   (the flaticon icon font was rendering as blank squares) ===== */
.service-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 80px;
  background: var(--dark);
  border-radius: 10px;
  margin-bottom: 30px;
  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1);
}
.service-icon-wrap img { width: 44px; height: 44px; display: block; }

/* ===== Expertise cards: equal height + aligned bottoms ===== */
.expertise-area .expertise-items .row { align-items: stretch; }
.expertise-area .expertise-items .row > [class*="col-"] { display: flex; }
.expertise-area .expertise-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.expertise-area .expertise-item .content { flex: 1 1 auto; }
.expertise-area .expertise-item .bottom { margin-top: auto; }

/* ===== Expertise cards: photo-led, warm serif titles, neon lines =====
   Photo header with its title set over the image (Wix "Find Your Bliss"
   style), a glowing neon line under the photo, a neon border that lights up
   on hover and a pill-shaped glowing arrow. Photos: Pexels 34207359 (Freek
   Wolsink), 7166982 (Antoni Shkraba), 14075142 (周赛 王), committed under
   static/images/expertise/. */
.xp-card {
  --xp-neon: #22d3ee;
  position: relative;
  overflow: hidden;
  border: 1px solid #e7ebf3 !important;
  border-radius: 22px !important;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 22px 44px -28px rgba(15, 23, 42, .35);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease, border-color .4s ease;
}
.xp-card--2 { --xp-neon: #ff3dcb; }
.xp-card--3 { --xp-neon: #ffb300; }
.xp-card:hover {
  transform: translateY(-6px);
  border-color: var(--xp-neon) !important;
  box-shadow: 0 0 0 1px var(--xp-neon), 0 0 22px color-mix(in srgb, var(--xp-neon) 55%, transparent),
    0 0 60px color-mix(in srgb, var(--xp-neon) 25%, transparent), 0 26px 50px -26px rgba(15, 23, 42, .45);
}
/* Neon light that sweeps round the card edge. */
.xp-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--xp-angle, 0deg), transparent 0 70%, var(--xp-neon) 82%, #ffffff 86%,
    var(--xp-neon) 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .85;
  pointer-events: none;
  animation: xp-sweep 6s linear infinite;
}
@property --xp-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes xp-sweep { to { --xp-angle: 360deg; } }

.xp-media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin: 10px 10px 0;
  border-radius: 16px;
  background: #0f172a;
}
.xp-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.2, .8, .2, 1);
}
.xp-card:hover .xp-media img { transform: scale(1.06); }
.xp-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, .2) 0%, rgba(15, 23, 42, .08) 35%, rgba(15, 23, 42, .78) 100%);
}
.xp-media-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  z-index: 1;
  padding: 0 20px;
  color: #fff;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55), 0 0 22px color-mix(in srgb, var(--xp-neon) 45%, transparent);
}
.xp-media-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  background: rgba(15, 23, 42, .35);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 0 14px color-mix(in srgb, var(--xp-neon) 45%, transparent);
}
.xp-media-tag i { color: var(--xp-neon); }
/* Neon line between photo and text. */
.xp-card .content { position: relative; }
.xp-card .content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--xp-neon), transparent);
  box-shadow: 0 0 10px var(--xp-neon), 0 0 22px var(--xp-neon);
}
/* The overlaid photo title replaces the heading; keep it for screen readers. */
.xp-card .content h4 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.xp-card .content p { margin-top: 4px; }

/* Caption row: serif label + neon pill arrow, like the gallery caption/badge. */
.xp-card .bottom {
  margin: 0 10px 10px;
  padding-left: 22px !important;
  border: 1px solid #eef1f7 !important;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}
.xp-card .bottom .expertise-link-label {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 21px;
  font-weight: 600;
}
.xp-card .bottom a.arrow-glow {
  height: 46px !important;
  width: 64px !important;
  margin: 14px 14px 14px 0;
  border: 1px solid color-mix(in srgb, var(--xp-neon) 60%, #ffffff) !important;
  border-radius: 999px !important;
  line-height: 44px !important;
  background: color-mix(in srgb, var(--xp-neon) 14%, #ffffff);
  color: #0f172a;
  box-shadow: 0 0 12px color-mix(in srgb, var(--xp-neon) 45%, transparent);
}
.xp-card .bottom a.arrow-glow:hover {
  background: var(--xp-neon);
  color: #0f172a;
  box-shadow: 0 0 16px var(--xp-neon), 0 0 36px var(--xp-neon);
}
@media (prefers-reduced-motion: reduce) {
  .xp-card::before { animation: none; }
  .xp-card, .xp-media img { transition: none; }
}

/* ===== Expertise card arrow hover glows (square buttons) ===== */
.expertise-item .bottom {
  transition: box-shadow 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}
.expertise-item .bottom a.arrow-glow {
  transition: color 0.35s ease, background-color 0.35s ease, transform 0.35s ease;
  border-radius: 0 !important;
}
.expertise-item .bottom a.arrow-glow,
.expertise-item .bottom a.arrow-glow::before,
.expertise-item .bottom a.arrow-glow::after {
  border-radius: 0 !important;
}
.expertise-item .bottom a.arrow-glow:hover {
  transform: translateY(-2px);
}
.xp-card .bottom a.arrow-glow,
.xp-card .bottom a.arrow-glow::before,
.xp-card .bottom a.arrow-glow::after { border-radius: 999px !important; }
/* Neon glow round the caption row on hover, in the card's own colour. */
.xp-card .bottom:has(a.arrow-glow:hover) {
  border-color: var(--xp-neon) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--xp-neon) 60%, transparent),
    inset 0 0 10px color-mix(in srgb, var(--xp-neon) 18%, transparent) !important;
}
/* The label beside each card's arrow (where the theme had an icon). */
.expertise-item .bottom .expertise-link-label {
  flex: 1 1 auto;
  padding: 0 16px 0 0;
  color: var(--color-heading);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

/* Card 1: cyan / electric blue glow */
.expertise-item .bottom:has(a.arrow-glow-1:hover) {
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.6), 0 0 32px rgba(0, 229, 255, 0.45), inset 0 0 10px rgba(0, 229, 255, 0.18);
  border-color: rgba(0, 229, 255, 0.55) !important;
}
.expertise-item .bottom a.arrow-glow-1:hover {
  color: #00e5ff;
  background-color: rgba(0, 229, 255, 0.12);
}

/* Card 2: magenta / pink glow */
.expertise-item .bottom:has(a.arrow-glow-2:hover) {
  box-shadow: 0 0 14px rgba(255, 61, 203, 0.6), 0 0 32px rgba(255, 61, 203, 0.45), inset 0 0 10px rgba(255, 61, 203, 0.18);
  border-color: rgba(255, 61, 203, 0.55) !important;
}
.expertise-item .bottom a.arrow-glow-2:hover {
  color: #ff3dcb;
  background-color: rgba(255, 61, 203, 0.12);
}

/* Card 3: gold / amber glow */
.expertise-item .bottom:has(a.arrow-glow-3:hover) {
  box-shadow: 0 0 14px rgba(255, 179, 0, 0.65), 0 0 32px rgba(255, 179, 0, 0.5), inset 0 0 10px rgba(255, 179, 0, 0.2);
  border-color: rgba(255, 179, 0, 0.6) !important;
}
.expertise-item .bottom a.arrow-glow-3:hover {
  color: #ffb300;
  background-color: rgba(255, 179, 0, 0.14);
}

/* Slide 1's image renders taller than slide 2's, so align-center on the row pushes
   slide 1's text down on top of the fixed "Build your Dreams" button. Top-align
   both columns and add matching padding-top so the slides start from the same line. */
.banner-area .banner-fade .swiper-slide .row.align-center { align-items: flex-start !important; }
.banner-area .banner-fade .swiper-slide .content { padding-top: 90px; }

/* Headlines vary in length; the longest ("Design, Package & Sell AI Products")
   wraps to 3 lines at the theme's 80px and collides with the fixed button below.
   Cap the size a little so every slide clears the button. */
.banner-area .banner-style-six .content h1,
.banner-area .banner-style-six .content h2 { font-size: 60px; line-height: 1.05; margin-bottom: 24px; }
@media (max-width: 1199px) {
  .banner-area .banner-style-six .content h1,
  .banner-area .banner-style-six .content h2 { font-size: 50px; }
}

/* ===== Persistent "Build your Dreams" button (does not move with slide transitions) =====
   Anchored from the top, a fixed distance under the headline. The text block
   is the same height at every desktop width (two headline lines), whereas the
   banner's height follows the slide image and shrinks with the viewport — a
   bottom offset rode up onto the headline below ~1280px. */
.dreams-button-wrapper {
  position: absolute;
  top: 348px;  /* headline bottom (310px) + 38px */
  left: 0;
  right: 0;
  z-index: 110;
  pointer-events: none;
}
.dreams-button-wrapper .container { pointer-events: auto; }
/* Override Digalu's ".banner-area .button { opacity:0; visibility:hidden }" which only
   un-hides buttons inside an active .swiper-slide. Our button lives outside the slider. */
.dreams-button-wrapper .button {
  display: block;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
  margin-top: 0 !important;
}
.dreams-button-wrapper .button .btn { display: inline-block; }
@media (min-width: 992px) and (max-width: 1199px) {
  /* The theme lifts the text block by 110px only from 1200px up; without the
     lift the headline starts 110px lower and runs into the builder panel. */
  .banner-area.double-items.bottom-thumb .content { margin-top: -110px; }
  .dreams-button-wrapper { top: 327px; }  /* 50px headline → bottom at 289px */
  /* The image alone sets the banner's height here, which leaves too little
     room for headline + button + builder panel. Reserve it, and keep the
     image on the banner's bottom edge as the banner grows. */
  .banner-area .banner-fade .swiper-slide .row { min-height: 640px; }
  .banner-area .banner-fade .swiper-slide .col-lg-5 { align-self: flex-end; }
}
/* Tablet and phone: the image column stacks under the text, so there is no
   empty left column to float the button and builder panel over — they landed
   on the headline and the image. Put both back in normal flow
   (slider → button → panel) and let the banner grow to fit. */
@media (max-width: 991px) {
  .dreams-button-wrapper { position: relative; top: auto; margin-top: 28px; text-align: center; }
  .banner-area .banner-fade .swiper-slide .content { padding: 48px 0 0; }
  .banner-area .banner-fade .thumb img { max-height: 320px; width: auto; max-width: 100%; }
}
@media (max-width: 767px) {
  /* The 50px cap above outranks the theme's 36px phone size, which wrapped
     the longest headline to four lines. */
  .banner-area .banner-style-six .content h1,
  .banner-area .banner-style-six .content h2 { font-size: 34px; margin-bottom: 0; }
  .banner-area .banner-fade .swiper-slide .content { padding-top: 32px; }
  /* Small enough that the button stays above the fold on a 667px-tall phone. */
  .banner-area .banner-fade .thumb { margin-top: 20px; }
  .banner-area .banner-fade .thumb img { max-height: 200px; }
}

/* ===== Home-page sparkle builder buttons ===== */
.sp-wrap {
  position: relative;
  display: inline-block;
  width: 215px;
}
.sp-wrap.sp-gold   .sp-btn { --hue: 45; }
.sp-wrap.sp-blue   .sp-btn { --hue: 210; }
.sp-wrap.sp-green  .sp-btn { --hue: 130; }
.sp-wrap.sp-purple .sp-btn { --hue: 280; }

.sp-btn {
  --cut: 0.1em;
  --active: 0;
  --hue: 260;
  --bg:
    radial-gradient(40% 50% at center 100%,
      hsl(var(--hue) calc(var(--active)*97%) 72% / var(--active)), transparent),
    radial-gradient(80% 100% at center 120%,
      hsl(var(--hue) calc(var(--active)*97%) 70% / var(--active)), transparent),
    linear-gradient(135deg,
      hsl(var(--hue) calc(var(--active)*62% + 38%) calc((var(--active)*-58%) + 82%)),
      hsl(calc(var(--hue) + 22) calc(var(--active)*58% + 28%) calc((var(--active)*-55%) + 72%)));
  background: var(--bg);
  font-size: 1.08rem;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  padding: 0.55em 1.1em;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  white-space: nowrap;
  border-radius: 100px;
  position: relative;
  text-decoration: none !important;
  box-shadow:
    0 0 calc(var(--active)*5em) calc(var(--active)*2.5em) hsl(var(--hue) 97% 61% / 0.75),
    0 0.05em 0 0 hsl(var(--hue) calc(var(--active)*97%) calc((var(--active)*50%) + 30%)) inset,
    0 -0.05em 0 0 hsl(var(--hue) calc(var(--active)*97%) calc(var(--active)*60%)) inset;
  transition: box-shadow 0.25s, scale 0.25s, background 0.25s;
  scale: calc(1 + (var(--active)*0.07));
}
.sp-btn:active { scale: 1; }
.sp-btn svg { overflow: visible !important; }

.sp-btn .sp-sparkle path {
  color: hsl(0 0% calc((var(--active,0)*70%) + var(--base)));
  transform-box: fill-box;
  transform-origin: center;
  fill: currentColor;
  stroke: currentColor;
  animation-delay: calc((0.25s*1.5) + (var(--delay)*1s));
  animation-duration: 0.6s;
  transition: color 0.25s;
}
.sp-btn:is(:hover,:focus-visible) .sp-sparkle path { animation-name: hsp-bounce; }
@keyframes hsp-bounce { 35%,65% { scale: var(--scale); } }
.sp-btn .sp-sparkle path:nth-of-type(1) { --scale:.5;  --delay:.1;  --base:40%; }
.sp-btn .sp-sparkle path:nth-of-type(2) { --scale:1.5; --delay:.2;  --base:20%; }
.sp-btn .sp-sparkle path:nth-of-type(3) { --scale:2.5; --delay:.35; --base:30%; }

.sp-btn::before {
  content: "";
  position: absolute;
  inset: -0.25em;
  z-index: -1;
  border: 0.25em solid hsl(var(--hue) 97% 50% / 0.5);
  border-radius: 100px;
  opacity: var(--active,0);
  transition: opacity 0.25s;
}
.sp-btn .sp-spark {
  position: absolute; inset: 0;
  border-radius: 100px;
  overflow: hidden;
  mask: linear-gradient(white, transparent 50%);
  animation: hsp-flip calc(1.8s*2) infinite steps(2,end);
}
@keyframes hsp-flip { to { rotate: 360deg; } }
.sp-btn .sp-spark::before {
  content: "";
  position: absolute;
  width: 200%; aspect-ratio: 1;
  top: 0; left: 50%;
  z-index: -1;
  translate: -50% -15%;
  transform: rotate(-90deg);
  opacity: calc(var(--active) + 0.4);
  background: conic-gradient(from 0deg, transparent 0 340deg, white 360deg);
  transition: opacity 0.25s;
  animation: hsp-rot 1.8s linear infinite both;
}
.sp-btn .sp-spark::after {
  content: ""; position: absolute;
  inset: var(--cut); border-radius: 100px;
}
@keyframes hsp-rot { to { transform: rotate(90deg); } }
.sp-btn .sp-backdrop {
  position: absolute;
  inset: var(--cut);
  background: var(--bg);
  border-radius: 100px;
  transition: background 0.25s;
}
.sp-btn .sp-text {
  translate: 2% -6%;
  letter-spacing: .01ch;
  background: linear-gradient(90deg,
    hsl(var(--hue) calc(70% - var(--active)*70%) calc(var(--active)*80% + 15%)),
    hsl(var(--hue) calc(80% - var(--active)*80%) calc(var(--active)*80% + 10%)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background 0.25s;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}
.sp-btn svg.sp-sparkle { inline-size: 1em; translate: -8% -4%; }
.sp-btn:is(:hover,:focus-visible) { --active: 1; }

.sp-particle-pen {
  position: absolute;
  width: 200%; aspect-ratio: 1;
  top: 50%; left: 50%;
  translate: -50% -50%;
  -webkit-mask: radial-gradient(white, transparent 65%);
  mask: radial-gradient(white, transparent 65%);
  z-index: -1;
  opacity: var(--active,0);
  transition: opacity 0.25s;
  pointer-events: none;
}
.sp-particle {
  fill: white;
  width: calc(var(--size,0.25)*1rem);
  aspect-ratio: 1;
  position: absolute;
  top: calc(var(--y)*1%);
  left: calc(var(--x)*1%);
  opacity: var(--alpha,1);
  animation: hsp-float calc(var(--duration,1)*1s) calc(var(--delay)*-1s) infinite linear;
  transform-origin: var(--origin-x,1000%) var(--origin-y,1000%);
  z-index: -1;
  animation-play-state: var(--play-state,paused);
}
.sp-particle path { fill: hsl(0 0% 90%); stroke: none; }
.sp-particle:nth-of-type(even) { animation-direction: reverse; }
@keyframes hsp-float { to { rotate: 360deg; } }

@supports selector(:has(+ *)) {
  .sp-wrap:has(.sp-btn:is(:hover,:focus-visible)) .sp-particle-pen { --active: 1; }
  .sp-wrap:has(.sp-btn:is(:hover,:focus-visible)) .sp-particle { animation-play-state: running; }
}
.sp-btn:is(:hover,:focus-visible) ~ .sp-particle-pen { --active: 1; }
.sp-btn:is(:hover,:focus-visible) ~ .sp-particle-pen .sp-particle { animation-play-state: running; }

/* ── block 2 of 4 ─────────────────────────── */
.builder-carousel-wrapper {
        position: absolute;
        bottom: 50px;
        left: 0;
        right: 0;
        z-index: 105;
        pointer-events: none;
      }
      .builder-carousel-wrapper .container { pointer-events: auto; }
      /* Blue gradient panel that frames the carousel (matches reference image).
         Heights use !important to override Digalu's `.auto-height div { height: auto; }`
         from style.css which would otherwise collapse the panel and the circle heads to 0px. */
      .builder-carousel {
        position: relative;
        width: 100%;
        max-width: 540px;
        height: 320px !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: linear-gradient(135deg, #1e3a8a 0%, #0891b2 100%);
        border-radius: 16px;
        box-shadow: 0 12px 32px rgba(15, 23, 80, 0.22);
        overflow: hidden;
      }
      /* In normal flow below lg — see the .dreams-button-wrapper note above. */
      @media (max-width: 991px) {
        .builder-carousel-wrapper { position: relative; bottom: auto; margin: 32px 0 48px; }
        .builder-carousel { height: 300px !important; margin: 0 auto; }
      }
      @media (max-width: 767px) {
        .builder-carousel-wrapper { margin: 28px 0 40px; }
        .builder-carousel { max-width: 100%; height: 212px !important; }
      }

      /* Positioning context for the absolutely-placed .bc__item cards. Kept as a
         separate layer from .builder-carousel so the nav arrows (siblings of the
         viewport) stay pinned to the panel corners even when the viewport itself
         scrolls in the reduced-motion fallback below. */
      .bc__viewport { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

      /* Up/down scroll arrows — top-right and bottom-right corners of the panel.
         They step the rotation one card at a time so a user can park the card
         they want in the centre (clickable) position instead of waiting for it. */
      .bc__nav {
        position: absolute;
        right: 12px;
        z-index: 5;
        width: 38px;
        height: 38px !important;  /* override `.auto-height div { height: auto }` */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.45);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.18);
        color: #fff;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        backdrop-filter: blur(2px);
        transition: background .2s ease, border-color .2s ease, transform .2s ease;
      }
      .bc__nav:hover { background: rgba(255, 255, 255, 0.34); border-color: rgba(255, 255, 255, 0.8); }
      .bc__nav:active { transform: scale(0.92); }
      .bc__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
      .bc__nav svg { width: 16px; height: 16px; display: block; }
      .bc__nav--up { top: 12px; }
      .bc__nav--down { bottom: 12px; }
      @media (max-width: 768px) {
        .bc__nav { right: 8px; width: 34px; height: 34px !important; }
        .bc__nav--up { top: 8px; }
        .bc__nav--down { bottom: 8px; }
      }

      .bc__item {
        display: flex;
        align-items: center;
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        margin-top: -48px;  /* half of head height (96px) — vertically centers each card */
        width: 100%;
        padding: 0 18px;
        opacity: 0;
        text-decoration: none;
        color: inherit;
        filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
        will-change: transform, opacity;
        animation: bc-animate-vertical 14.4s linear infinite;
      }
      .bc__item, .bc__item:hover, .bc__item:focus { color: inherit; text-decoration: none; }
      /* 6 items, 14.4s loop → step fraction = 14.4/6 = 2.4s (same per-item dwell as
         the original 5-item carousel). Delay for item i = (i - 2) * fraction. */
      .bc__item:nth-child(1) { animation-delay: -2.4s; }
      .bc__item:nth-child(2) { animation-delay: 0s; }
      .bc__item:nth-child(3) { animation-delay: 2.4s; }
      .bc__item:nth-child(4) { animation-delay: 4.8s; }
      .bc__item:nth-child(5) { animation-delay: 7.2s; }
      .bc__item:nth-child(6) { animation-delay: 9.6s; }
      /* Pause rotation when the user hovers the panel — keeps the centered card
         in place so it can be clicked. */
      .builder-carousel:hover .bc__item { animation-play-state: paused; }

      /* The disc overlaps the card by half its width, so the two must read as
         one continuous shape rather than a disc parked on a rectangle. Three
         things make the junction seamless:
           · the gradient runs across the disc, not down it, ending on pure
             white exactly where the disc enters the card — so there is no
             tonal step at the overlap;
           · the shadow is offset left and down only, so nothing is cast onto
             the white card, which is what previously drew an arc across it;
           · the card's left end is a full semicircular cap of the same radius
             as the disc (see .bc__item-body), so the silhouettes share a
             curvature instead of meeting at a corner. */
      .bc__item-head {
        border-radius: 50%;
        background: linear-gradient(115deg, #a9dcf7 0%, #dcf4ff 54%, #ffffff 100%);
        width: 96px;
        height: 96px !important;  /* override `.auto-height div { height: auto }` */
        padding: 14px;
        flex-shrink: 0;
        /* The depression was the disc and the card's cap pulling apart near
           the top and bottom, leaving a wedge of panel between them. Both
           arcs share a 48px radius, so they only separate below the height
           where disc_centre + s == cap_centre - s. At -48px the disc centre
           sat 48px from the cap centre and the two parted over the outer
           6.4px of the disc; at -72px it sits 24px away and they part over
           1.5px, which reads as continuous. The disc still clears the card
           by 24px, so it keeps its overlapping-token look. */
        margin-right: -72px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #2563eb;
        position: relative;
        z-index: 2;
        box-shadow: -5px 5px 14px rgba(15, 23, 80, 0.16);
      }
      /* Inline SVG rather than the theme's Font Awesome glyphs: the webfont
         resolves to nothing here, and the rest of this carousel (the scroll
         arrows) is already inline SVG. No webfont dependency to break. */
      .bc__item-head svg { width: 42px; height: 42px; display: block; }
      .bc__item-body {
        width: 100%;
        min-height: 96px;             /* matches the disc, so the cap radius
                                         resolves to the disc's own 48px */
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: #fff;
        /* 48px, not a large "pill" value: when the radii on any edge exceed
           the box, CSS scales *every* corner by the same factor, so 999px here
           would shrink the right-hand corners to under a pixel. 48px is half
           the 96px height — an exact semicircle, matching the disc. */
        border-radius: 48px 14px 14px 48px;
        /* Left padding clears the disc, which now reaches 72px into the card
           (24px centre + 48px radius), plus a 22px gutter before the text. */
        padding: 14px 26px 14px 94px;
        position: relative;
        z-index: 1;
      }
      /* Prefixed with .banner-area to beat Digalu's `.banner-area p` rule
         (style.css) which sets opacity:0; visibility:hidden; transform:translateY(50%);
         padding-right:25% for swiper-slide entry animation — would otherwise hide
         carousel text since it lives in .banner-area but outside a swiper slide. */
      .banner-area .bc__title {
        text-transform: uppercase;
        font-size: 22px;
        font-weight: 700;
        margin: 6px 0 6px 0;
        line-height: 1.1;
        color: #0f172a;
        letter-spacing: 0.01em;
        transform: none;
        opacity: 1;
        visibility: visible;
        padding-right: 0;
      }
      .banner-area .bc__sub {
        font-size: 14px;
        line-height: 1.35;
        margin: 0;
        color: #4b5563;
        transform: none;
        opacity: 1;
        visibility: visible;
        padding-right: 0;
      }

      /* Phones: at full size the card's text column is ~170px wide, so titles
         and subtitles wrapped, cards grew to unequal heights and collided
         mid-rotation. Scale the card by 2/3 — disc, cap radius and overlap
         keep the proportions reasoned out above — and hold each line to one
         row. Sits before the reduced-motion block so that one still wins. */
      @media (max-width: 767px) {
        .bc__item { margin-top: -32px; padding: 0 12px; }
        .bc__item-head { width: 64px; height: 64px !important; padding: 10px; margin-right: -48px; }
        .bc__item-head svg { width: 30px; height: 30px; }
        .bc__item-body { min-height: 64px; border-radius: 32px 12px 12px 32px; padding: 10px 16px 10px 62px; }
        .banner-area .bc__title,
        .banner-area .bc__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .banner-area .bc__title { font-size: 17px; margin: 0 0 3px; }
        .banner-area .bc__sub { font-size: 13px; }
      }

      /* 6-item keyframes: step fraction = 16.667% of the cycle (one station wide),
         so exactly one card is centered at a time. pointer-events flips to `auto`
         only during the centered (active) phase so clicks always land on the
         visible card, not on a faded/offscreen anchor stacked beneath. */
      @keyframes bc-animate-vertical {
        0%   { transform: translateY(100%) scale(0.5);  opacity: 0;  visibility: hidden;  pointer-events: none; }
        3%,
        16.7%  { transform: translateY(100%) scale(0.7);  opacity: .4; visibility: visible; pointer-events: none; }
        19.7%,
        33.3%  { transform: translateY(0)    scale(1);    opacity: 1;  visibility: visible; pointer-events: auto; }
        36.3%,
        50%  { transform: translateY(-100%) scale(0.7); opacity: .4; visibility: visible; pointer-events: none; }
        53%  { transform: translateY(-100%) scale(0.5); opacity: 0;  visibility: visible; pointer-events: none; }
        100% { transform: translateY(-100%) scale(0.5); opacity: 0;  visibility: hidden;  pointer-events: none; }
      }

      /* Reduced motion: no rotation at all. The viewport becomes a plain vertical
         scroller listing every destination, and the arrows scroll it instead of
         stepping the animation (see the bc-nav script). */
      @media (prefers-reduced-motion: reduce) {
        .bc__viewport { overflow-y: auto; padding: 14px 0; scroll-behavior: smooth; scrollbar-width: none; }
        .bc__viewport::-webkit-scrollbar { display: none; }
        .bc__item {
          animation: none;
          opacity: 1;
          visibility: visible;
          transform: none;
          pointer-events: auto;
          position: relative;
          top: auto;
          margin: 0 0 12px 0;
          padding-right: 62px;  /* keep cards clear of the arrow column */
        }
        .bc__item:last-child { margin-bottom: 0; }
      }

/* ── block 3 of 4 ─────────────────────────── */
/* ═══════════════════════════════════════════
     AI Workflow Section  ·  ixy-wf-* namespace
     ═══════════════════════════════════════════ */

  /* Section */
  .ixy-wf-section {
    position: relative;
    background: linear-gradient(160deg, #060c24 0%, #0d1b4b 45%, #0c2461 100%);
    padding: 80px 0 56px;
    overflow: hidden;
  }

  /* Canvas dots background */
  .ixy-wf-canvas {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: .25; pointer-events: none;
  }

  /* Blobs */
  .ixy-wf-blob {
    position: absolute; border-radius: 50%;
    filter: blur(80px); pointer-events: none; opacity: .5;
  }
  .ixy-wf-blob--1 {
    width: 520px; height: 520px; top: -120px; left: -140px;
    background: radial-gradient(circle, rgba(99,102,241,.35), transparent 70%);
    animation: ixy-wf-drift 14s ease-in-out infinite alternate;
  }
  .ixy-wf-blob--2 {
    width: 380px; height: 380px; top: 30%; right: -80px;
    background: radial-gradient(circle, rgba(6,182,212,.28), transparent 70%);
    animation: ixy-wf-drift 11s ease-in-out infinite alternate-reverse;
  }
  .ixy-wf-blob--3 {
    width: 300px; height: 300px; bottom: -60px; left: 35%;
    background: radial-gradient(circle, rgba(245,158,11,.22), transparent 70%);
    animation: ixy-wf-drift 16s ease-in-out infinite alternate;
  }
  @keyframes ixy-wf-drift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(30px, 20px) scale(1.08); }
  }

  /* ── Header ── */
  .ixy-wf-header { text-align: center; margin-bottom: 28px; }

  .ixy-wf-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(99,102,241,.15); color: #a5b4fc;
    border: 1px solid rgba(99,102,241,.3); border-radius: 50px;
    padding: 5px 16px; font-size: 11.5px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; margin-bottom: 20px;
  }
  .ixy-wf-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #818cf8; box-shadow: 0 0 0 3px rgba(129,140,248,.3);
    animation: ixy-wf-blink 1.4s ease-in-out infinite;
    display: inline-block;
  }
  @keyframes ixy-wf-blink { 0%,100%{opacity:1;} 50%{opacity:.3;} }

  .ixy-wf-title {
    font-size: 3rem; font-weight: 800; color: #fff;
    line-height: 1.18; letter-spacing: -.6px; margin-bottom: 16px;
  }
  .ixy-wf-title-accent {
    background: linear-gradient(90deg, #818cf8, #38bdf8, #34d399);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .ixy-wf-subtitle {
    color: rgba(255,255,255,.55); font-size: 1.05rem;
    line-height: 1.7; max-width: 560px; margin: 0 auto;
  }
  @media (max-width:768px) { .ixy-wf-title { font-size: 2.1rem; } }

  /* ── Grid ── */
  .ixy-wf-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Phase header */
  .ixy-wf-phase-header {
    display: flex; align-items: center; gap: 14px;
    margin: 22px 0 10px;
    opacity: 0; transform: translateX(-20px);
    transition: opacity .5s ease, transform .5s ease;
  }
  .ixy-wf-phase-header:first-child { margin-top: 0; }
  .ixy-wf-phase-header.visible { opacity: 1; transform: translateX(0); }
  .ixy-wf-phase-badge {
    flex-shrink: 0;
    background: rgba(99,102,241,.18); border: 1px solid rgba(99,102,241,.35);
    color: #a5b4fc; border-radius: 50px; padding: 3px 12px;
    font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    white-space: nowrap;
  }
  .ixy-wf-phase-title {
    color: rgba(255,255,255,.7); font-size: .85rem; font-weight: 700;
    letter-spacing: .04em; white-space: nowrap;
  }
  .ixy-wf-phase-divider {
    flex: 1; height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,.15), transparent);
  }

  /* Row of 3 steps */
  .ixy-wf-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 0;
    align-items: stretch;
  }

  /* Arrow between steps */
  .ixy-wf-row-arrow {
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.2); font-size: .85rem;
    padding: 0 4px;
  }

  /* ── Step ── */
  .ixy-wf-step {
    opacity: 0; transform: translateY(24px);
    transition: opacity .5s ease var(--step-delay), transform .5s ease var(--step-delay);
  }
  .ixy-wf-step.visible { opacity: 1; transform: translateY(0); }

  /* ── Card — compact horizontal grid layout ── */
  .ixy-wf-card {
    position: relative;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 16px;
    padding: 14px 16px;
    backdrop-filter: blur(10px);
    transition: transform .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease;
    overflow: hidden;
    height: 100%;
    /* Icon col (36px) + content col */
    display: grid;
    grid-template-columns: 36px 1fr;
    grid-template-rows: auto auto 1fr auto;
    column-gap: 11px;
    align-items: start;
  }
  .ixy-wf-card:hover {
    transform: translateY(-4px);
    border-color: var(--step-color, #818cf8);
    background: rgba(255,255,255,.09);
    box-shadow: 0 10px 28px var(--step-glow, rgba(99,102,241,.2));
  }

  /* Glow behind card on hover */
  .ixy-wf-card-glow {
    position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
    background: radial-gradient(circle at 20% 0%, var(--step-glow, rgba(99,102,241,.18)), transparent 65%);
    opacity: 0; transition: opacity .28s;
  }
  .ixy-wf-card:hover .ixy-wf-card-glow { opacity: 1; }

  /* Icon — left column, spans all content rows */
  .ixy-wf-icon-wrap {
    grid-column: 1; grid-row: 1 / 5;
    align-self: start; margin-top: 2px;
    width: 36px; height: 36px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; color: #fff; flex-shrink: 0;
    background: linear-gradient(135deg, var(--step-color, #6366f1), color-mix(in srgb, var(--step-color, #6366f1) 55%, #fff));
    box-shadow: 0 3px 12px var(--step-glow, rgba(99,102,241,.4));
    transition: transform .28s, box-shadow .28s;
  }
  .ixy-wf-card:hover .ixy-wf-icon-wrap {
    transform: scale(1.1) rotate(-3deg);
    box-shadow: 0 6px 20px var(--step-glow, rgba(99,102,241,.5));
  }

  /* Step number — right column row 1 */
  .ixy-wf-step-num {
    grid-column: 2; grid-row: 1;
    font-size: .62rem; font-weight: 800; letter-spacing: .14em;
    color: var(--step-color, #818cf8); margin-bottom: 3px;
    text-transform: uppercase;
  }

  /* Title — right column row 2 */
  .ixy-wf-step-title {
    grid-column: 2; grid-row: 2;
    font-size: .88rem; font-weight: 800; color: #fff;
    margin-bottom: 4px; line-height: 1.25;
  }

  /* Desc — right column row 3 */
  .ixy-wf-step-desc {
    grid-column: 2; grid-row: 3;
    font-size: .75rem; color: rgba(255,255,255,.5);
    line-height: 1.55; margin: 0;
  }

  /* Artifact chip — right column row 4 */
  .ixy-wf-artifact {
    grid-column: 2; grid-row: 4;
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 8px;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.11);
    border-radius: 50px; padding: 2px 8px;
    font-size: .62rem; font-weight: 700; color: rgba(255,255,255,.4);
    letter-spacing: .04em; text-transform: uppercase;
    align-self: end;
  }
  .ixy-wf-artifact i { font-size: .65rem; color: var(--step-color, #818cf8); }

  /* Scenario callout */
  .ixy-wf-scenario {
    display: flex; align-items: flex-start; gap: 14px;
    background: rgba(99,102,241,.08);
    border: 1px solid rgba(99,102,241,.22);
    border-left: 3px solid #6366f1;
    border-radius: 12px; padding: 14px 20px;
    margin-bottom: 28px;
    max-width: 860px; margin-left: auto; margin-right: auto;
  }
  .ixy-wf-scenario-icon {
    color: #818cf8; font-size: 1.2rem; flex-shrink: 0; margin-top: 1px;
  }
  .ixy-wf-scenario-label {
    display: block; color: #a5b4fc;
    font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    margin-bottom: 4px;
  }
  .ixy-wf-scenario-text {
    color: rgba(255,255,255,.58); font-size: .8rem; line-height: 1.65; margin: 0;
  }

  /* ── Download / preview action bar ── */
  .ixy-wf-dl-bar {
    display: flex; align-items: stretch; gap: 12px;
    max-width: 860px; margin: 0 auto 28px;
    flex-wrap: wrap;
  }
  .ixy-wf-dl-btn {
    display: flex; align-items: center; gap: 12px;
    flex: 1; min-width: 220px;
    border-radius: 12px; padding: 13px 18px;
    text-decoration: none; cursor: pointer;
    transition: transform .22s, box-shadow .22s, background .22s, border-color .22s;
    position: relative; overflow: hidden;
  }
  .ixy-wf-dl-btn:hover { transform: translateY(-2px); text-decoration: none; }

  /* Primary — indigo gradient */
  .ixy-wf-dl-btn--primary {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    border: 1px solid rgba(139,92,246,.5);
    box-shadow: 0 4px 20px rgba(99,102,241,.35);
  }
  .ixy-wf-dl-btn--primary:hover {
    box-shadow: 0 8px 28px rgba(99,102,241,.55);
    background: linear-gradient(135deg, #4338ca, #6d28d9);
  }

  /* Ghost — frosted */
  .ixy-wf-dl-btn--ghost {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
  }
  .ixy-wf-dl-btn--ghost:hover {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.25);
    box-shadow: 0 6px 20px rgba(0,0,0,.2);
  }

  /* Icon circle */
  .ixy-wf-dl-icon-wrap {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem; color: #fff;
    background: rgba(255,255,255,.15);
  }
  .ixy-wf-dl-btn--ghost .ixy-wf-dl-icon-wrap {
    background: rgba(255,255,255,.08);
  }

  /* Text block */
  .ixy-wf-dl-text {
    display: flex; flex-direction: column; flex: 1;
  }
  .ixy-wf-dl-label {
    font-size: .88rem; font-weight: 800; color: #fff; line-height: 1.2;
  }
  .ixy-wf-dl-sub {
    font-size: .7rem; color: rgba(255,255,255,.55); margin-top: 2px;
  }
  .ixy-wf-dl-btn--ghost .ixy-wf-dl-sub { color: rgba(255,255,255,.4); }

  /* Free badge */
  .ixy-wf-dl-badge {
    flex-shrink: 0; align-self: center;
    background: rgba(255,255,255,.2); color: #fff;
    border-radius: 50px; padding: 2px 9px;
    font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  }

  /* External link icon */
  .ixy-wf-dl-ext {
    flex-shrink: 0; color: rgba(255,255,255,.35); font-size: .8rem; align-self: center;
  }

  /* Responsive */
  @media (max-width:1024px) {
    .ixy-wf-row { grid-template-columns: 1fr auto 1fr; }
    .ixy-wf-row > .ixy-wf-step:nth-child(5),
    .ixy-wf-row > .ixy-wf-row-arrow:nth-child(4) { display: none; }
  }
  @media (max-width:640px) {
    .ixy-wf-row { grid-template-columns: 1fr; }
    .ixy-wf-row-arrow { display: none; }
  }

  /* ── CTA bar ── */
  .ixy-wf-cta-bar {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 16px;
    margin-top: 36px; padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .ixy-wf-cta-label {
    color: rgba(255,255,255,.5); font-size: .9rem; font-weight: 500;
  }
  .ixy-wf-cta-btn {
    display: inline-flex; align-items: center;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff; text-decoration: none;
    border-radius: 10px; padding: 12px 24px;
    font-size: .95rem; font-weight: 700;
    box-shadow: 0 6px 24px rgba(99,102,241,.4);
    transition: transform .22s, box-shadow .22s;
  }
  .ixy-wf-cta-btn:hover {
    color: #fff; text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(99,102,241,.55);
  }
  .ixy-wf-cta-link {
    display: inline-flex; align-items: center; gap: 4px;
    color: rgba(255,255,255,.45); font-size: .88rem; font-weight: 600;
    text-decoration: none; transition: color .2s;
  }
  .ixy-wf-cta-link:hover { color: #a5b4fc; text-decoration: none; }

/* ── block 4 of 4 ─────────────────────────── */
/* ── Home Pricing Grid ── */
    .phg { display: flex; }
    .phg .pricing-style-two {
      display: flex; flex-direction: column;
      width: 100%; border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 4px 24px rgba(0,0,0,0.08);
      transition: transform .25s, box-shadow .25s;
    }
    .phg .pricing-style-two:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 36px rgba(0,0,0,0.13);
    }

    /* header */
    .phg .pricing-header {
      padding: 36px 40px 28px;
      text-align: center; position: relative; z-index: 1;
    }
    .phg .pricing-header i  { font-size: 42px; color: #fff; margin-bottom: 12px; display: block; }
    .phg .pricing-header h4 { color: #fff; font-size: 18px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 0; }

    /* ── per-card header colours ── */
    .phg .ph-free    .pricing-header { background: #1a2744; }
    .phg .ph-pro     .pricing-header { background: linear-gradient(135deg,#0c5adb,#3f1399); }
    .phg .ph-biz     .pricing-header { background: linear-gradient(135deg,#0c5adb 0%,#06b4e9 100%); }

    /* Most Popular badge */
    .phg .ph-biz .popular-badge {
      display: inline-block;
      background: #fff; color: #0c5adb;
      font-size: 10px; font-weight: 800; letter-spacing: .08em;
      text-transform: uppercase; padding: 3px 12px;
      border-radius: 20px; margin-bottom: 10px;
    }
    .phg .ph-free .popular-badge,
    .phg .ph-pro  .popular-badge { display: none; }

    /* content area */
    .phg .pricing-content {
      display: flex; flex-direction: column; flex: 1;
      padding: 32px 36px 36px; background: #fff;
    }

    /* feature list */
    .phg .pricing-content ul { list-style: none; margin: 0 0 0 0; padding: 0; flex: 1; }
    .phg .pricing-content ul li {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 7px 0; font-size: 15px; line-height: 1.45;
      border-bottom: 1px solid #f1f5f9;
      color: #374151;
    }
    .phg .pricing-content ul li:last-child { border-bottom: none; }
    .phg .pricing-content ul li i { font-size: 15px; margin-top: 2px; flex-shrink: 0; }
    .phg .pricing-content ul li i.fa-check-circle { color: #10b981; }
    .phg .pricing-content ul li i.fa-times-circle  { color: #d1d5db; }
    .phg .pricing-content ul li.feat-off { color: #9ca3af; }

    /* price block */
    .phg .price-block { margin-top: 28px; margin-bottom: 8px; }
    .phg .price-block .price-free {
      font-size: 42px; font-weight: 800; color: #1a2744; line-height: 1;
    }
    .phg .price-block .price-trial {
      font-size: 12px; color: #6b7280; margin-top: 4px; font-weight: 500;
    }
    .phg .price-block .price-amount {
      display: flex; align-items: flex-end; gap: 2px; line-height: 1;
    }
    .phg .price-block .price-currency { font-size: 22px; font-weight: 700; color: #374151; margin-bottom: 6px; }
    .phg .price-block .price-number   { font-size: 52px; font-weight: 800; color: #1a2744; }
    .phg .price-block .price-period   { font-size: 13px; color: #6b7280; margin-bottom: 10px; font-weight: 500; }

    /* CTA buttons — all same height, all bottom-aligned */
    .phg .pricing-content .ph-btn {
      display: block; width: 100%; text-align: center;
      padding: 14px 24px; margin-top: 24px;
      border-radius: 50px; font-size: 15px; font-weight: 700;
      letter-spacing: .02em; text-decoration: none;
      transition: all .25s ease; white-space: nowrap;
    }
    .phg .ph-btn-outline {
      border: 2px solid #1a2744; color: #1a2744; background: transparent;
    }
    .phg .ph-btn-outline:hover { background: #1a2744; color: #fff; }
    .phg .ph-btn-blue {
      border: 2px solid #0c5adb; color: #0c5adb; background: transparent;
    }
    .phg .ph-btn-blue:hover { background: #0c5adb; color: #fff; }
    .phg .ph-btn-gradient {
      background: linear-gradient(135deg,#0c5adb,#06b4e9);
      color: #fff; border: none;
      box-shadow: 0 6px 20px rgba(12,90,219,.35);
    }
    .phg .ph-btn-gradient:hover {
      box-shadow: 0 10px 28px rgba(12,90,219,.5);
      opacity: .93; color: #fff;
    }

/* ===== "or" + "Click here to try “The IndustryAI Suite”" above the builder carousel =====
   Sits in the carousel wrapper, which is anchored to the banner's bottom on
   desktop, so it grows upward into the gap under the hero CTA (109px from
   1200px up; the 992–1199px range gets extra banner height below). */
.builder-carousel-wrapper .bc-intro {
  max-width: 540px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;           /* "or" ↔ link */
  margin-bottom: 10px; /* link ↔ carousel */
}
.builder-carousel-wrapper .bc-intro__or {
  margin: 0;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  color: #64748b;
}
.builder-carousel-wrapper .bc-intro__lead {
  display: block;
  margin: 0;
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  color: #0f172a;
  text-decoration: none;
}
.builder-carousel-wrapper .bc-intro__lead:hover, .builder-carousel-wrapper .bc-intro__lead:focus-visible { text-decoration: underline; text-underline-offset: 4px; color: #0f172a; }
.bc-intro__suite { color: #7c3aed; }
@media (min-width: 992px) and (max-width: 1199px) {
  .banner-area .banner-fade .swiper-slide .row { min-height: 700px; }
}
@media (max-width: 991px) {
  .builder-carousel-wrapper .bc-intro { margin: 0 auto 10px; gap: 8px; }
  .builder-carousel-wrapper { margin-top: 20px; }
}
@media (max-width: 575px) {
  .builder-carousel-wrapper .bc-intro__lead { font-size: 16px; }
}

/* ===== Hero secondary link + "Start free" tools strip (growth roadmap S2) ===== */
/* Glass button: 50%-transparent fill, half-opacity brand border, pulsing halo.
   Same height (57.5px) and radius as the gradient CTA beside it. */
.dreams-button-wrapper .hero-secondary-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 18px;
  padding: 14px 32px;  /* + 2px border = the CTA's 57.5px */
  vertical-align: middle;
  color: #0c5adb;  /* the hero's left half is pale — white text was unreadable */
  font-size: 17px;
  font-weight: 600;
  line-height: 25.5px;
  text-decoration: none;
  white-space: nowrap;
  background: rgba(255, 255, 255, .5);
  border: 2px solid rgba(12, 90, 219, .5);
  border-radius: 8px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 0 3px rgba(12, 90, 219, .08), 0 0 18px 2px rgba(12, 90, 219, .3);
  animation: hero-halo 2.8s ease-in-out infinite;
  transition: background .2s, color .2s, border-color .2s;
}
.dreams-button-wrapper .hero-secondary-link:hover,
.dreams-button-wrapper .hero-secondary-link:focus-visible {
  color: #3f1399;
  background: rgba(255, 255, 255, .75);
  border-color: rgba(63, 19, 153, .6);
}
@keyframes hero-halo {
  0%, 100% { box-shadow: 0 0 0 3px rgba(12, 90, 219, .08), 0 0 18px 2px rgba(12, 90, 219, .3); }
  50%      { box-shadow: 0 0 0 6px rgba(12, 90, 219, .12), 0 0 32px 8px rgba(63, 19, 153, .38); }
}
@media (prefers-reduced-motion: reduce) {
  .dreams-button-wrapper .hero-secondary-link { animation: none; }
}
@media (max-width: 575px) {
  .dreams-button-wrapper .hero-secondary-link { display: flex; width: fit-content; margin: 16px auto 0; }
}

.free-tools-strip { padding: 48px 0 24px; background: #f4f7fd; }
.free-tools-heading { font-size: 24px; font-weight: 700; margin-bottom: 20px; text-align: center; }
.free-tool-card {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 20px 22px; border-radius: 14px; background: #fff;
  border: 1px solid #e3e9f5; border-top: 4px solid var(--ft-accent, #0c5adb);
  color: #1f2937; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.free-tool-card:hover, .free-tool-card:focus-visible {
  transform: translateY(-3px); box-shadow: 0 12px 28px rgba(12, 90, 219, .12); color: #1f2937;
}
.free-tool-card strong { font-size: 18px; }
.free-tool-card span:last-child { color: #4b5563; font-size: 15px; line-height: 1.5; }
.free-tool-line {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ft-accent, #0c5adb);
}
.free-tool-card--plan   { --ft-accent: #0c5adb; }
.free-tool-card--build  { --ft-accent: #d97706; }
.free-tool-card--decide { --ft-accent: #7c3aed; }
.free-tools-payments { margin: 20px 0 0; text-align: center; color: #4b5563; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .free-tool-card { transition: none; } }