/* =========================================================================
   RosenetLabs homepage — scoped redesign styles.
   Loaded only on index.html, after the shared stylesheets, so these rules
   intentionally win where they override shared component defaults.
   Section rhythm: dark hero -> blue band -> white services -> white why
   -> blue CTA -> white work, so the page breathes instead of stacking darks.
   ========================================================================= */

/* ---------- Directional scroll reveals (build on the shared .reveal) ------ */
.reveal.from-left {
  transform: translateX(-46px);
}

.reveal.from-right {
  transform: translateX(46px);
}

.reveal.from-left.is-visible,
.reveal.from-left[data-reveal-visible="true"],
.reveal.from-right.is-visible,
.reveal.from-right[data-reveal-visible="true"] {
  transform: none;
}

.reveal-delay-4 { --reveal-delay: 220ms; }
.reveal-delay-5 { --reveal-delay: 300ms; }
.reveal-delay-6 { --reveal-delay: 380ms; }

/* =========================================================================
   1. HERO — deep navy neural stage
   ========================================================================= */
.hero-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Pull the dark stage up behind the floating navbar, then restore the offset. */
  margin-top: -108px;
  padding-top: 108px;
  min-height: 100svh;
  isolation: isolate;
  overflow: hidden;
  color: #c3d3f2;
  background:
    radial-gradient(circle at 80% 16%, rgba(58, 120, 255, 0.30), transparent 44%),
    radial-gradient(circle at 10% 84%, rgba(126, 96, 255, 0.20), transparent 48%),
    radial-gradient(circle at 58% 52%, rgba(18, 38, 86, 0.55), transparent 72%),
    linear-gradient(162deg, #060d20 0%, #0a1531 50%, #081026 100%);
}

/* faint perspective grid, masked toward the visual side */
.hero-zone::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120, 160, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 160, 255, 0.05) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(circle at 72% 42%, #000, transparent 76%);
  mask-image: radial-gradient(circle at 72% 42%, #000, transparent 76%);
}

/* legibility scrim: centered radial pool behind the centered copy, so the
   neuron field stays visible around it without competing with the text */
.hero-zone::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 720px 65% at 50% 46%,
      rgba(6, 13, 32, 0.78) 0%,
      rgba(6, 13, 32, 0.38) 52%,
      rgba(6, 13, 32, 0) 100%
    );
}

.hero-network {
  /* override the shared light mask for a softer dark blend */
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, #000 22%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, #000 22%, #000 80%, transparent 100%);
  /* soft fade-in when the hero sequence reveals the neuron field */
  transition: opacity 1.2s ease;
}

.hero-zone .hero {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: clamp(440px, 64svh, 720px);
  padding: clamp(40px, 6vw, 76px) 0 clamp(28px, 4vw, 52px);
  text-align: center;
}

.hero-copy {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

/* dark-stage typography */
.hero-zone .eyebrow {
  color: #8fb4ff;
}


.hero-zone .hero-title {
  position: relative;
  margin: 0 auto 22px;
  max-width: 720px;
  color: #eef3ff;
  text-align: center;
}

@media (min-width: 641px) {
  .hero-zone .hero-title {
    font-size: clamp(46px, 5.1vw, 76px);
  }

  /* Traditional Chinese headline is full-width glyphs; at the Latin sizes it
     wraps into a one-character orphan line. This keeps the word line clean. */
  .hero-zone .hero-title:lang(zh-Hant) {
    font-size: clamp(40px, 4.2vw, 62px);
  }
}

/* ---------- Centered typewriter headline (progressive enhancement) --------
   The lead ("We build modern") and the rotating word each sit on their own
   centered line, so the lead stays fixed while only the blue word changes —
   no horizontal drift, no vertical jump. The semantic layer is real, readable
   text that reserves the exact box for accessibility and no-JS fallback; the
   aria-hidden visual layer types and rotates on top once JS is ready. */
.hero-title__lead-text,
.hero-title__word-text,
.hero-title__vlead,
.hero-title__vword {
  display: block;
}

/* rotating final word — brand blue accent */
.hero-title__word-text,
.hero-title__vword {
  color: #6ea8ff;
}

.hero-title__semantic {
  display: block;
}

.hero-title__visual {
  display: none;
  pointer-events: none;
}

.hero-title__caret {
  display: inline-block;
  width: 3px;
  height: 0.82em;
  margin-left: 0.06em;
  border-radius: 2px;
  background: #6ea8ff;
  vertical-align: -0.04em;
}

.hero-title.is-typewriter-ready .hero-title__semantic,
.hero-title.is-typewriter-ready .hero-title__semantic .hero-title__word-text {
  color: transparent;
}

.hero-title.is-typewriter-ready .hero-title__visual {
  display: block;
  position: absolute;
  inset: 0;
  color: #eef3ff;
}

.hero-title__caret.is-blinking {
  animation: heroCaretBlink 1.06s steps(2, start) infinite;
}

@keyframes heroCaretBlink {
  50% {
    opacity: 0;
  }
}

.hero-zone .hero-lede {
  max-width: 600px;
  margin: 0 auto 30px;
  color: #b6c7ea;
}

.hero-actions {
  justify-content: center;
}

/* ---------- Staged reveal: eyebrow -> paragraph -> CTAs -----------------
   JS adds .hero-anim at start (elements hidden) then .hero-revealed once the
   headline has finished typing. Transition-delays stagger the entrance. */
.hero-copy.hero-anim .eyebrow,
.hero-copy.hero-anim .hero-lede,
.hero-copy.hero-anim .hero-actions {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.hero-copy.hero-anim.hero-revealed .eyebrow {
  opacity: 1;
  transform: none;
  transition-delay: 0ms;
}

.hero-copy.hero-anim.hero-revealed .hero-lede {
  opacity: 1;
  transform: none;
  transition-delay: 150ms;
}

.hero-copy.hero-anim.hero-revealed .hero-actions {
  opacity: 1;
  transform: none;
  transition-delay: 300ms;
}

/* Neuron background eases in softly after the headline resolves */
.hero-zone.hero-anim .hero-network {
  opacity: 0;
}

.hero-zone.hero-anim.hero-bg-revealed .hero-network {
  opacity: 1;
}

/* Reduced motion: JS shows the stable state directly, but guard here too. */
@media (prefers-reduced-motion: reduce) {
  .hero-copy.hero-anim .eyebrow,
  .hero-copy.hero-anim .hero-lede,
  .hero-copy.hero-anim .hero-actions {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-zone.hero-anim .hero-network {
    opacity: 1;
  }

  .hero-title__caret {
    display: none;
  }
}

.hero-zone .button-secondary {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #eaf0ff;
  box-shadow: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero-zone .button-secondary:hover {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.13);
}

/* ---------- Built-for marquee (dark glass strip on the hero base) --------- */
.built-for {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(150, 180, 255, 0.14);
  background: rgba(8, 15, 34, 0.55);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}

.built-for-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  width: min(var(--container), calc(100% - 40px));
  margin: 0 auto;
  padding: 13px 0;
}

.built-for-label {
  flex: 0 0 auto;
  color: #93a8cf;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.built-for-mask {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.built-for-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: builtForScroll 40s linear infinite;
}

.built-for:hover .built-for-track {
  animation-play-state: paused;
}

.built-for-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  /* margin (not gap) keeps the duplicated set exactly half the track for a seamless -50% loop */
  margin-right: 12px;
  min-height: 32px;
  padding: 0 15px;
  border: 1px solid rgba(140, 175, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: #cddcf6;
  font-size: 12.5px;
  font-weight: 750;
  white-space: nowrap;
}

@keyframes builtForScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Index-only full-bleed guard: keeps the 100vw value band from creating a
   horizontal scrollbar. `clip` (unlike `hidden`) does not turn <main> into a
   scroll container, so sticky/normal scrolling stay intact. */
main {
  overflow-x: clip;
}

/* =========================================================================
   2. WE'RE A TECH COMPANY — full-width immersive banner
   Edge-to-edge section over the provided fondowearetech background image,
   with a dark-blue overlay for readability and a subtle internal parallax.
   ========================================================================= */
.value-band-full {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: clamp(420px, 46vw, 620px);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
}

.value-band-full__bg {
  position: absolute;
  inset: -8% 0;
  z-index: 0;
  background-image: url("../assets/images/sections/fondowearetech.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateY(var(--value-band-y, 0px));
  will-change: transform;
}

.value-band-full__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(2, 8, 35, 0.80), rgba(15, 63, 190, 0.50) 52%, rgba(5, 12, 50, 0.72)),
    radial-gradient(circle at 18% 22%, rgba(37, 99, 235, 0.34), transparent 38%);
}

/* Decorative interactive particle constellation. Sits above the gradient
   overlay but below the copy; fully clipped by the section's overflow:hidden.
   Never intercepts pointer input so chips/links stay clickable. */
.value-band-full__particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.value-band-full__inner {
  position: relative;
  z-index: 3;
  padding-block: clamp(56px, 7vw, 104px);
}

.value-band-full__content {
  max-width: 760px;
}

.value-band-full .eyebrow {
  color: #bdd4ff;
}


.value-band-full h2 {
  max-width: 760px;
  margin-bottom: 16px;
  color: #ffffff;
}

.value-band-full p {
  max-width: 640px;
  margin-bottom: 26px;
  color: #dbe6ff;
  font-size: clamp(16px, 1.3vw, 18px);
}

.band-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.band-badge {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 17px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #f2f6ff;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* =========================================================================
   3. SERVICES — white section
   ========================================================================= */
.home-services .section-head {
  margin-bottom: clamp(30px, 3.4vw, 46px);
}

.service-grid {
  gap: 22px;
}

.home-service {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
}

.home-service-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 116px;
  background:
    radial-gradient(circle at 78% 20%, rgba(139, 220, 255, 0.32), transparent 60%),
    linear-gradient(135deg, #14306f, #2563eb 70%, #3f6ff0);
  overflow: hidden;
}

.home-service-visual::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.55;
  background-image:
    radial-gradient(circle at 22% 36%, rgba(255, 255, 255, 0.6) 1.3px, transparent 1.5px),
    radial-gradient(circle at 64% 26%, rgba(255, 255, 255, 0.5) 1.3px, transparent 1.5px),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.45) 1.3px, transparent 1.5px),
    linear-gradient(60deg, transparent 49.5%, rgba(255, 255, 255, 0.14) 50%, transparent 50.5%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 180px 180px;
}

.home-service-icon {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 14px 30px rgba(8, 25, 70, 0.35);
}

.home-service-icon img {
  width: 26px;
  height: 26px;
  filter: brightness(0) saturate(100%) invert(33%) sepia(97%) saturate(2354%) hue-rotate(217deg) brightness(95%) contrast(93%);
}

.home-service-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 24px 24px 22px;
}

.home-service-body h3 {
  margin: 0 0 10px;
  font-size: clamp(19px, 1.5vw, 22px);
}

.home-service-body p {
  margin: 0 0 18px;
  font-size: 15.5px;
  line-height: 1.66;
}

.service-learn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  color: var(--blue-700);
  font-size: 14px;
  font-weight: 850;
  transition: gap 180ms var(--ease), color 180ms var(--ease);
}

.service-learn span {
  transition: transform 180ms var(--ease);
}

.home-service:hover .service-learn,
.service-learn:hover {
  color: var(--blue);
}

.home-service:hover .service-learn span,
.service-learn:hover span {
  transform: translateX(3px);
}

/* =========================================================================
   4. CTA — blue gradient banner
   ========================================================================= */
.home-cta {
  position: relative;
  display: grid;
  gap: 22px;
  justify-items: center;
  padding: clamp(40px, 5.5vw, 72px) clamp(28px, 5vw, 60px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: center;
  color: #eef4ff;
  background:
    radial-gradient(circle at 84% 18%, rgba(139, 220, 255, 0.26), transparent 44%),
    radial-gradient(circle at 14% 86%, rgba(126, 96, 255, 0.26), transparent 46%),
    linear-gradient(135deg, #1a47c7 0%, #2563eb 50%, #1c3fb0 100%);
  box-shadow: 0 30px 80px rgba(23, 60, 150, 0.32);
}

.home-cta::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0.4;
  background-image:
    radial-gradient(circle at 24% 30%, rgba(255, 255, 255, 0.55) 1.4px, transparent 1.7px),
    radial-gradient(circle at 70% 26%, rgba(255, 255, 255, 0.45) 1.4px, transparent 1.7px),
    radial-gradient(circle at 82% 74%, rgba(255, 255, 255, 0.45) 1.4px, transparent 1.7px),
    linear-gradient(50deg, transparent 49.6%, rgba(255, 255, 255, 0.12) 50%, transparent 50.4%),
    linear-gradient(124deg, transparent 49.6%, rgba(255, 255, 255, 0.08) 50%, transparent 50.4%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 260px 260px, 340px 340px;
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 78%);
  mask-image: radial-gradient(circle at 50% 40%, #000, transparent 78%);
}

.home-cta > * {
  position: relative;
}

.home-cta .eyebrow {
  margin-bottom: 4px;
  color: #bdd4ff;
}


.home-cta h2 {
  max-width: 740px;
  margin-bottom: 0;
  color: #ffffff;
}

.home-cta p {
  max-width: 600px;
  margin-bottom: 6px;
  color: #d6e2ff;
  font-size: 17px;
}

.home-cta .hero-actions {
  justify-content: center;
}

.home-cta .button-secondary {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  box-shadow: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.home-cta .button-secondary:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.18);
}

/* =========================================================================
   FEATURED PROJECT — EASYJOB (flagship product showcase, approved concept)
   Two-column premium showcase: copy left, large floating phone right over a
   soft blue orbit glow, floating info cards, and a thin tech line.
   No plate/card/panel behind the phone — only drop-shadow.
   ========================================================================= */
/* =========================================================================
   FEATURED PROJECT — LISTOYA HERO
   Static branded artwork (listoya.png) is the visual base: it already carries
   the "ListoYA!" title, slogan, side phones and floating cards. On top of it
   we layer REAL HTML: a left content block (translatable + selectable) and a
   real center phone mockup with an embedded YouTube video. Overlays are sized
   in container-query units so the whole composition scales with the artwork
   without drifting or overflowing. No baked title/slogan is duplicated here.
   ========================================================================= */
.listoya-hero {
  position: relative;
  padding: clamp(56px, 7vw, 104px) 0;
  overflow: hidden;
}

.listoya-hero__container {
  position: relative;
}

/* The stage IS the bordered panel: it locks the artwork's exact natural
   ratio (1672 × 941) so every overlay, positioned in cqw units (1cqw = 1% of
   stage width), stays glued to the baked elements at any scale. Vertical
   coordinates also use cqw (image height = 56.28% of its width), which keeps
   overlays anchored to the artwork even when the stage grows taller than the
   image on small screens. Background matches the artwork's edge color. */
.listoya-hero__stage {
  position: relative;
  container-type: inline-size;
  container-name: listoya-stage;
  width: 100%;
  aspect-ratio: 1672 / 941;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: clamp(14px, 1.8vw, 24px);
  overflow: hidden;
  isolation: isolate;
  background: #f5f7fc;
  box-shadow: 0 30px 70px rgba(15, 56, 130, 0.14);
}

.listoya-hero__artwork {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Safe: the stage ratio equals the image's natural ratio exactly. */
  object-fit: fill;
  display: block;
}

/* --- Real center phone (iPhone-style device with YouTube video) --- */
/* Measured baked-phone bounds in listoya.png: x 907–1212, y 94–796 of
   1672 × 941. Converted to cqw with ~4px overdraw per side so no baked
   edge peeks out from behind the real device. */
.listoya-phone {
  position: absolute;
  z-index: 3;
  left: 54.01%;
  top: 5.38cqw;
  width: 18.72%;
  height: 42.46cqw;
  padding: 0.66cqw;
  border-radius: 2.9cqw;
  background: linear-gradient(160deg, #1c1c22 0%, #050507 55%, #17171d 100%);
  box-shadow:
    0 1.4cqw 3.4cqw rgba(7, 21, 47, 0.42),
    inset 0 0 0 0.2cqw rgba(255, 255, 255, 0.08);
  scroll-margin-top: 120px;
}

.listoya-phone__island {
  position: absolute;
  top: 1.35cqw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 34%;
  height: 1.7cqw;
  border-radius: 999px;
  background: #050507;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.listoya-phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 2.3cqw;
  overflow: hidden;
  background: #04122e;
}

.listoya-phone__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --- Eyebrow: sits in the measured empty band above the baked title
   (title top = y 287 → 17.2cqw; left text margin = x 77 → 4.6cqw). --- */
.listoya-hero__eyebrow {
  position: absolute;
  z-index: 4;
  left: 4.6cqw;
  top: 13.4cqw;
  display: inline-flex;
  margin: 0;
  color: #2563eb;
  font-weight: 900;
  font-size: clamp(9px, 1.25cqw, 16px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* --- Left overlay content block (real, translatable HTML). Safe area:
   below the baked slogan (ends ~y 585 → 35cqw) and left of the static chat
   phone (starts x 632 → 37.8cqw). --- */
.listoya-hero__content {
  position: absolute;
  z-index: 4;
  left: 4.6cqw;
  top: 36cqw;
  width: 31.5cqw;
}

.listoya-hero__description {
  margin: 0;
  color: #1e2b4a;
  font-size: clamp(10.5px, 1.5cqw, 21px);
  line-height: 1.45;
  font-weight: 600;
}

.listoya-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(4px, 0.55cqw, 9px);
  margin: clamp(8px, 1cqw, 16px) 0 0;
  padding: 0;
  list-style: none;
}

.listoya-hero__chips li {
  display: inline-flex;
  align-items: center;
  padding: clamp(2px, 0.35cqw, 6px) clamp(7px, 1cqw, 15px);
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: #1e2b4a;
  font-size: clamp(8.5px, 1.05cqw, 14px);
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(15, 56, 130, 0.06);
}

.listoya-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(6px, 0.8cqw, 13px);
  margin-top: clamp(9px, 1.2cqw, 18px);
}

.listoya-hero__actions .button {
  padding: clamp(5px, 0.65cqw, 11px) clamp(10px, 1.4cqw, 22px);
  font-size: clamp(9.5px, 1.1cqw, 15px);
}

.listoya-hero__play {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.35em 0 0.35em 0.58em;
  border-color: transparent transparent transparent currentColor;
}

/* =========================================================================
   FEATURED READY-MADE WEBSITES — premium dark asymmetric grid
   One dominant featured card + four smaller cards. Dark navy overlays,
   white text, icon badge, visible CTA, subtle image zoom on hover.
   ========================================================================= */
.readymade-section .section-head {
  margin-bottom: clamp(28px, 3.2vw, 46px);
}


.readymade-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(196px, 1fr);
  gap: 18px;
}

.rm-card {
  position: relative;
  display: flex;
  min-height: 196px;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-lg, 22px);
  background: #0a1430;
  box-shadow: 0 18px 44px rgba(8, 20, 60, 0.18);
  color: #eaf1ff;
  text-decoration: none;
  transition: transform 0.4s var(--ease, ease), box-shadow 0.4s var(--ease, ease);
}

.rm-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 70px rgba(10, 28, 80, 0.30);
}

.rm-card:focus-visible {
  outline: 3px solid #8fb4ff;
  outline-offset: 3px;
}

/* large featured card spans 2 cols x 2 rows */
.rm-card--feature {
  grid-column: span 2;
  grid-row: span 2;
}

/* background layer (photo or rich gradient) — zooms gently on hover */
.rm-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: transform 0.6s var(--ease, ease);
}

.rm-card:hover .rm-card__media {
  transform: scale(1.08);
}

/* dark navy/blue overlay for readability + premium depth */
.rm-card__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(4, 10, 34, 0.20) 0%, rgba(4, 10, 34, 0.55) 50%, rgba(3, 8, 28, 0.92) 100%),
    linear-gradient(125deg, rgba(13, 42, 130, 0.50), rgba(7, 15, 48, 0.20));
}

/* icon badge, top-left */
.rm-card__icon {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.12);
  color: #e4eeff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.rm-card__icon svg {
  width: 21px;
  height: 21px;
}

.rm-card__body {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: auto;
  padding: 18px;
}

.rm-card__body h3 {
  margin: 0 0 6px;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #fff;
}

.rm-card__body p {
  margin: 0 0 14px;
  max-width: 42ch;
  font-size: 13.6px;
  line-height: 1.55;
  color: #c6d5f2;
}

.rm-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.25s var(--ease, ease), border-color 0.25s var(--ease, ease), gap 0.25s var(--ease, ease);
}

.rm-card:hover .rm-card__cta {
  gap: 11px;
  border-color: transparent;
  background: var(--blue, #2563eb);
}

/* featured card scale-up */
.rm-card--feature .rm-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 15px;
}

.rm-card--feature .rm-card__icon svg {
  width: 24px;
  height: 24px;
}

.rm-card--feature .rm-card__body {
  padding: 26px;
}

.rm-card--feature .rm-card__body h3 {
  font-size: clamp(24px, 2.4vw, 34px);
}

.rm-card--feature .rm-card__body p {
  max-width: 46ch;
  font-size: 15px;
}

/* ---- per-card backgrounds: real demo photos ---- */
.rm-card--realestate .rm-card__media {
  background-image:
    linear-gradient(180deg, rgba(6, 14, 40, 0.12), rgba(6, 14, 40, 0.12)),
    url("../demos/real-estate-listings/assets/img/02-featured-property-main.webp");
}

.rm-card--restaurant .rm-card__media {
  background-image:
    linear-gradient(180deg, rgba(6, 14, 40, 0.12), rgba(6, 14, 40, 0.12)),
    url("../demos/restaurant-cafe/assets/img/01-hero-restaurant-dining.webp");
}

.rm-card--barber .rm-card__media {
  background-image:
    linear-gradient(180deg, rgba(6, 14, 40, 0.12), rgba(6, 14, 40, 0.12)),
    url("../demos/barber-shop/assets/img/01-hero-classic-shave.webp");
}

.rm-card--salon .rm-card__media {
  background-image:
    linear-gradient(180deg, rgba(6, 14, 40, 0.12), rgba(6, 14, 40, 0.12)),
    url("../demos/salon-spa/assets/img/01-hero-serenity-treatment.webp");
}

.rm-card--shop .rm-card__media {
  background-image:
    linear-gradient(180deg, rgba(6, 14, 40, 0.12), rgba(6, 14, 40, 0.12)),
    url("../demos/small-shop-product-catalog/assets/img/01-home2-hero-skincare-facial-mask.webp");
}

.readymade-section .section-link {
  margin-top: clamp(26px, 3vw, 40px);
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1120px) {
  .hero-zone::after {
    background: linear-gradient(178deg, rgba(6, 13, 32, 0.2) 0%, rgba(6, 13, 32, 0.55) 60%, rgba(6, 13, 32, 0.86) 100%);
  }

  .hero-zone .hero {
    text-align: center;
    justify-content: center;
  }

  .hero-copy {
    max-width: 720px;
    margin: 0 auto;
  }

  .hero-zone .hero-title,
  .hero-zone .hero-lede {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions,
  .hero-micro {
    justify-content: center;
  }

  /* Tablet: 2-column grid, featured spans the full width */
  .readymade-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rm-card--feature {
    grid-column: span 2;
    grid-row: span 1;
    min-height: 240px;
  }
}

/* ListoYA hero — mobile: the stage (still ONE bordered panel) grows taller
   than the artwork. The artwork keeps its natural ratio at the top, the
   content block flows below it INSIDE the same panel over the edge-matched
   background, and the eyebrow + real phone stay glued to the artwork via
   cqw coordinates (which are width-relative, so unaffected by the taller
   stage). Nothing leaves the panel. */
@media (max-width: 767px) {
  .listoya-hero__stage {
    aspect-ratio: auto;
  }

  .listoya-hero__artwork {
    position: relative;
    inset: auto;
    height: auto;
    aspect-ratio: 1672 / 941;
  }

  .listoya-hero__content {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    padding: 16px 18px 20px;
  }

  .listoya-hero__description {
    font-size: clamp(14px, 4vw, 17px);
  }

  .listoya-hero__chips {
    gap: 7px;
    margin-top: 12px;
  }

  .listoya-hero__chips li {
    padding: 6px 12px;
    font-size: 12px;
  }

  .listoya-hero__actions {
    gap: 10px;
    margin-top: 16px;
  }

  .listoya-hero__actions .button {
    padding: 10px 18px;
    font-size: 14px;
  }
}

@media (max-width: 420px) {
  .listoya-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .listoya-hero__actions .button {
    justify-content: center;
  }
}

@media (max-width: 760px) {
  .built-for-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .built-for-mask {
    width: 100%;
  }

  /* Banner: shorter on small screens, badges already wrap */
  .value-band-full {
    min-height: clamp(360px, 70vw, 460px);
  }
}

@media (max-width: 640px) {
  /* Mobile: single column, featured returns to a single cell */
  .readymade-grid {
    grid-template-columns: 1fr;
  }

  .rm-card--feature {
    grid-column: span 1;
    grid-row: span 1;
    min-height: 220px;
  }

  .band-badges {
    gap: 9px;
  }

  .hero-micro {
    font-size: 12.5px;
  }
}

@media (max-width: 430px) {
  .home-cta {
    padding: 26px 22px;
    border-radius: 24px;
  }
}

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .reveal.from-left,
  .reveal.from-right {
    opacity: 1;
    transform: none;
  }

  .built-for-track {
    animation: none;
  }

  /* Banner parallax disabled — background stays static */
  .value-band-full__bg {
    transform: none !important;
    transition: none;
  }

  .rm-card__media,
  .rm-card {
    transition: none;
  }
}

/* =========================================================================
   CIRCUIT-BOARD BACKGROUND UTILITY
   Very light, partial circuit traces for white sections. Decorative only:
   pointer-events disabled, faded with a mask so it never fills the whole area.
   ========================================================================= */
.circuit-bg {
  position: relative;
  isolation: isolate;
}

.circuit-bg::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  opacity: 0.42;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none' stroke='%237ea2e8' stroke-width='1.4'%3E%3Cpath d='M20 0V60H80V120H40V240'/%3E%3Cpath d='M120 0V40H180V100'/%3E%3Cpath d='M0 180H100V140H160V200H240'/%3E%3Cpath d='M200 0V80H240'/%3E%3Cpath d='M60 240V190H140'/%3E%3Ccircle cx='80' cy='60' r='3.2' fill='%237ea2e8' stroke='none'/%3E%3Ccircle cx='40' cy='120' r='3.2' fill='%237ea2e8' stroke='none'/%3E%3Ccircle cx='180' cy='40' r='3.2' fill='%237ea2e8' stroke='none'/%3E%3Ccircle cx='100' cy='180' r='3.2' fill='%237ea2e8' stroke='none'/%3E%3Ccircle cx='160' cy='140' r='3.2' fill='%237ea2e8' stroke='none'/%3E%3Ccircle cx='200' cy='80' r='3.2' fill='%237ea2e8' stroke='none'/%3E%3Ccircle cx='140' cy='190' r='3.2' fill='%237ea2e8' stroke='none'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  background-repeat: repeat;
  /* default: pooled into the top-right corner only */
  -webkit-mask-image: radial-gradient(135% 105% at 100% 0%, #000 0%, rgba(0, 0, 0, 0.35) 36%, transparent 64%);
  mask-image: radial-gradient(135% 105% at 100% 0%, #000 0%, rgba(0, 0, 0, 0.35) 36%, transparent 64%);
}

/* keep real content above the traces */
.circuit-bg > .container,
.circuit-bg > * {
  position: relative;
  z-index: 1;
}

.circuit-bg--right::before {
  -webkit-mask-image: linear-gradient(90deg, transparent 42%, #000 96%);
  mask-image: linear-gradient(90deg, transparent 42%, #000 96%);
}

.circuit-bg--bottom::before {
  -webkit-mask-image: linear-gradient(180deg, transparent 48%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 48%, #000 100%);
}

.circuit-bg--soft::before {
  opacity: 0.26;
}

/* =========================================================================
   OUR BUSINESS FOCUS -- premium circuit timeline (rebuilt)
   Frameless floating product mockups paired tightly to a center line.
   No cards, no panels: only the product image carries shadow/glow.
   ========================================================================= */
/* Background now comes from the shared .page-surface--circuit wrapper so the
   circuit is continuous across the whole page. This section stays transparent. */
.business-focus {
  position: relative;
  padding: clamp(90px, 9vw, 150px) 24px;
}

.business-focus__inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
}

/* header */
.business-focus__header {
  max-width: 760px;
  margin: 0 auto clamp(48px, 6vw, 84px);
  text-align: center;
}

.business-focus__header .section-eyebrow {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue, #2563eb);
}

.business-focus__header h2 {
  margin: 0;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #07152f;
}

/* timeline + center line */
.business-focus__timeline {
  position: relative;
}

.business-focus__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(37, 99, 235, 0.18);
  border-radius: 99px;
  z-index: 2;
}

.business-focus__line-fill {
  display: block;
  width: 100%;
  height: var(--timeline-progress, 0%);
  border-radius: 99px;
  background: linear-gradient(to bottom, #2563eb, #7c3aed);
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.35);
  transition: height 0.12s linear;
}

/* one item = product + line + copy, both hugging the center line */
.business-focus__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 64px minmax(280px, 1fr);
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
  min-height: clamp(420px, 58vh, 620px);
}

.business-focus__side {
  width: min(100%, 430px);
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.business-focus__side--left {
  grid-column: 1;
  justify-self: end;
}

.business-focus__side--right {
  grid-column: 3;
  justify-self: start;
}

/* dot sits in the middle column, on the line */
.business-focus__dot {
  grid-column: 2;
  justify-self: center;
  align-self: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid rgba(37, 99, 235, 0.4);
  box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.08);
  z-index: 3;
  transition: border-color 0.3s var(--ease, ease), box-shadow 0.3s var(--ease, ease), transform 0.3s var(--ease, ease);
}

.business-focus__item.is-in .business-focus__dot {
  border-color: #2563eb;
  box-shadow: 0 0 0 7px rgba(37, 99, 235, 0.12), 0 0 18px rgba(37, 99, 235, 0.32);
  transform: scale(1.12);
}

/* frameless floating product -- the transparent PNG is the object itself */
.business-focus__product {
  display: block;
  width: min(100%, 430px);
  height: auto;
  object-fit: contain;
  background: transparent;
  border: 0;
  box-shadow: none;
  filter:
    drop-shadow(0 22px 34px rgba(15, 56, 130, 0.14))
    drop-shadow(0 4px 12px rgba(37, 99, 235, 0.08));
  transition: transform 0.35s ease, filter 0.35s ease;
}

.business-focus__side--left .business-focus__product {
  margin-left: auto;
}

.business-focus__side:hover .business-focus__product {
  transform: translateY(-6px) scale(1.015);
  filter:
    drop-shadow(0 30px 46px rgba(15, 56, 130, 0.18))
    drop-shadow(0 8px 18px rgba(37, 99, 235, 0.12));
}

/* text cluster with the big pale number behind the title */
.business-focus__copy {
  position: relative;
  width: min(100%, 410px);
  padding: 20px 0;
}

.business-focus__side--left .business-focus__copy {
  margin-left: auto;
}

.business-focus__number {
  position: absolute;
  left: -10px;
  top: -54px;
  z-index: 0;
  font-size: clamp(84px, 9vw, 150px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.08em;
  color: rgba(37, 99, 235, 0.12);
  pointer-events: none;
  user-select: none;
}

.business-focus__copy h3,
.business-focus__copy p {
  position: relative;
  z-index: 1;
}

.business-focus__copy h3 {
  margin: 0 0 14px;
  font-size: clamp(26px, 2.2vw, 38px);
  line-height: 1.05;
  color: #07152f;
}

.business-focus__copy p {
  margin: 0;
  max-width: 360px;
  font-size: clamp(15px, 1vw, 18px);
  line-height: 1.7;
  color: #334155;
}

/* footer link */
.business-focus__footer {
  margin-top: clamp(48px, 6vw, 80px);
  text-align: center;
}

/* scroll reveal: left side eases in from the left, right side from the right */
.business-focus__side {
  opacity: 0;
  transition: opacity 0.6s var(--ease, ease), transform 0.6s var(--ease, ease);
}

.business-focus__side--left {
  transform: translate(-24px, 22px);
}

.business-focus__side--right {
  transform: translate(24px, 22px);
}

.business-focus__item.is-in .business-focus__side {
  opacity: 1;
  transform: none;
}

.business-focus__item.is-in .business-focus__side--right {
  transition-delay: 0.08s;
}

/* tablet: keep two columns, tighten the gap and sizes */
@media (max-width: 960px) {
  .business-focus__item {
    grid-template-columns: minmax(220px, 1fr) 56px minmax(220px, 1fr);
    min-height: clamp(360px, 50vh, 520px);
  }

  .business-focus__side {
    width: min(100%, 360px);
  }

  .business-focus__product {
    width: min(100%, 360px);
  }
}

/* mobile: single column, line + dot on the left, copy then product, tightly grouped */
@media (max-width: 760px) {
  .business-focus {
    padding: clamp(64px, 12vw, 96px) 18px;
  }

  .business-focus__item {
    grid-template-columns: 34px 1fr;
    min-height: auto;
    row-gap: 18px;
    padding: 44px 0;
    max-width: 520px;
  }

  .business-focus__line {
    left: 17px;
    transform: none;
  }

  .business-focus__dot {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    align-self: start;
    margin-top: 6px;
  }

  .business-focus__side {
    grid-column: 2;
    justify-self: start;
    width: 100%;
  }

  /* copy always first, product second on mobile */
  .business-focus__item--image-left .business-focus__side--right,
  .business-focus__item--image-right .business-focus__side--left {
    order: 1;
  }

  .business-focus__item--image-left .business-focus__side--left,
  .business-focus__item--image-right .business-focus__side--right {
    order: 2;
  }

  .business-focus__side--left,
  .business-focus__side--right {
    transform: translate(-18px, 18px);
  }

  .business-focus__item.is-in .business-focus__side {
    transform: none;
  }

  .business-focus__side--left .business-focus__copy,
  .business-focus__side--left .business-focus__product {
    margin-left: 0;
  }

  .business-focus__copy {
    width: 100%;
    padding: 6px 0;
  }

  .business-focus__copy p {
    max-width: none;
  }

  .business-focus__number {
    left: -6px;
    top: -42px;
    font-size: clamp(60px, 19vw, 100px);
  }

  .business-focus__product {
    width: min(100%, 360px);
  }
}

/* reduced motion: show everything, no slide/float, full line */
@media (prefers-reduced-motion: reduce) {
  .business-focus__side {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }

  .business-focus__product {
    transition: none;
  }

  .business-focus__line-fill {
    height: 100% !important;
    transition: none;
  }

  .business-focus__dot {
    border-color: #2563eb;
  }
}

/* =========================================================================
   GLOBAL EYEBROW PSEUDO-ELEMENT KILL SWITCH
   Ensures no decorative line/dash can appear before any eyebrow label,
   regardless of specificity order in earlier stylesheets.
   ========================================================================= */
.eyebrow::before,
.section-eyebrow::before,
.page-eyebrow::before,
.hero-kicker::before,
.section-label::before,
.listoya-hero__eyebrow::before,
[class*="eyebrow"]::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
}