/* ==========================================================================
   FORELAD · HERO — the conveyor wall (locked). Text left, uniform-height rows
   of varied-width photo cards railing left, dissolving just before the text.
   ========================================================================== */
.hero{
  position:relative; min-height:100vh; overflow:hidden; display:flex; flex-direction:column;
  background:
    radial-gradient(820px 460px at 85% 12%, var(--aura-violet), transparent 62%),
    radial-gradient(600px 380px at 4% 90%, var(--aura-teal), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cpath d='M75 68v14M68 75h14' stroke='%236D3FBF' stroke-opacity='0.30' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/150px 150px,
    radial-gradient(rgba(109,63,191,.07) 1px, transparent 1.4px) 0 0/26px 26px,
    #fff;
}
/* big top-left sweep + inner dashed arc (echo of the logo) */
.hero::before{ content:''; position:absolute; left:-16vw; top:-34vh; width:64vw; height:64vw; z-index:0; border:2px solid var(--pat-ring); border-radius:50%; pointer-events:none; }
.hero::after{ content:''; position:absolute; left:calc(-16vw + 40px); top:calc(-34vh + 40px); width:calc(64vw - 80px); height:calc(64vw - 80px); z-index:0; border:1.5px dashed var(--pat-ring-teal); border-radius:50%; pointer-events:none; }

/* decorative corners (uses .deco system) tuned for the hero */
.hero .deco-orbits{ position:absolute; right:-150px; top:-170px; width:560px; height:560px; z-index:0; pointer-events:none; }
.hero .deco-ripples{ position:absolute; left:-170px; bottom:-190px; width:460px; height:460px; z-index:0; pointer-events:none; }
.hero .deco-beam{ position:absolute; top:-25%; right:22%; }
.hero .deco-beam.b2{ right:8%; width:120px; opacity:.8; }
.hero .deco-grain{ position:absolute; inset:0; z-index:5; pointer-events:none; opacity:.035; mix-blend-mode:multiply; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); }

.hero__stage{ position:relative; flex:1; display:flex; align-items:center; padding:calc(var(--nav-h) + 6px) 0 40px; }

/* ---- the wall ---- */
.wall{ position:relative; z-index:1; width:100%; display:flex; flex-direction:column; gap:18px; --row-h:min(230px,26vh); }
.wall__row{ display:flex; width:max-content; gap:18px; height:var(--row-h); animation:convey 160s linear infinite; }
.wall__row:hover{ animation-play-state:paused; }
@keyframes convey{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.wcard{ position:relative; height:100%; border-radius:18px; overflow:hidden; flex-shrink:0; box-shadow:var(--sh-card); transition:transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
.wcard:hover{ transform:translateY(-7px); box-shadow:var(--sh-md); }
.wcard img{ width:100%; height:100%; object-fit:cover; }
.wcard .veil{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 46%,rgba(20,10,32,.78)); }
.wcard .label{ position:absolute; left:16px; right:16px; bottom:14px; color:#fff; }
.wcard .tag{ display:inline-block; font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:4px 11px; border-radius:var(--r-pill); margin-bottom:7px; }
.wcard .name{ font-size:15px; font-weight:600; letter-spacing:-.01em; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.w-1{ width:250px } .w-2{ width:320px } .w-3{ width:395px } .w-4{ width:470px }
.tag--violet{ background:rgba(109,63,191,.92); }
.tag--teal{ background:rgba(31,138,130,.92); }
.tag--plum{ background:rgba(74,43,122,.92); }
.tag--lilac{ background:rgba(184,169,217,.95); color:#2E1A47; }
.tag--ink{ background:rgba(20,16,31,.85); }

/* the underpass: cards ride full strength then fade just before the words */
.hero__underpass{ position:absolute; inset:0 auto 0 0; width:58%; z-index:2; pointer-events:none; background:linear-gradient(90deg, #fff 67%, transparent 77%); }

/* the station: text left, above the flow */
.hero__text{ position:absolute; z-index:4; left:max(var(--gutter), calc((100vw - var(--container))/2)); top:50%; transform:translateY(-50%); max-width:520px; padding-right:20px; }
.hero__text h1{ font-size:var(--fs-display); margin:22px 0 18px; }
.hero__text h1 em{ font-style:normal; color:var(--violet); }
.hero__text .lead{ max-width:44ch; margin:0 0 30px; }
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero__trust{ margin-top:26px; }

/* ---- MOBILE hero: designed, not inherited ---- */
@media (max-width:920px){
  .hero__stage{ flex-direction:column; align-items:stretch; padding:calc(var(--nav-h) + 24px) 0 36px; gap:34px; }
  .hero__text{ position:static; transform:none; max-width:none; padding:0 var(--gutter); order:0; }
  .wall{ order:1; }              /* rail comes AFTER the text block on mobile */
  .hero__underpass{ display:none; }
  .hero{ min-height:auto; }      /* let the hero size to content on mobile */
  .wall{ --row-h:158px; gap:13px; }
  .wall__row{ gap:13px; }
  .wcard{ border-radius:14px; }
  .wcard .name{ font-size:14px; }
  .wcard .tag{ font-size:9.5px; padding:3px 9px; margin-bottom:5px; }
  .w-1{ width:170px } .w-2{ width:215px } .w-3{ width:265px } .w-4{ width:320px }
  .hero::before{ left:-40vw; top:-20vh; width:90vw; height:90vw; }
  .hero .deco-beam{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .wall__row{ animation:none; } }