/* ============================================================================
 * Homepage — Apple-style: stacked banners (1 animated + static) + 2-wide tiles
 * Restraint on color: black / white / off-white-gray base, subtle gradients
 * bleeding into white, color used as an occasional accent.
 * ========================================================================== */

:root {
  --ink: #1d1d1f;            /* near-black text on light */
  --ink-sub: #6e6e73;        /* Apple secondary gray */
  --gray-tile: #f5f5f7;      /* barely-off-white tile */
  --link-blue: #1E5288;      /* brand navy-blue link */
}

/* ---------------------------------------------------------------------------
 * BANNER SYSTEM (full-bleed, stacked)
 * ------------------------------------------------------------------------- */
.banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
}
.banner-copy { position: relative; z-index: 3; padding-top: max(96px, 8vh); padding-inline: 22px; }
.banner h1, .banner h2 {
  font-size: clamp(34px, 5.4vw, 76px);  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.05;
  margin: 0;
  color: inherit;
  text-wrap: balance;
}
.banner h1 .thin { font-weight: 300; }
.banner-sub {
  font-size: clamp(19px, 2.1vw, 27px);
  font-weight: 400;
  line-height: 1.3;
  margin: 14px auto 0;
  max-width: 30ch;
  color: var(--ink-sub);
}
.banner-links { display: flex; gap: 30px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.banner-link {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: clamp(17px, 1.35vw, 21px); font-weight: 400;
  color: var(--link-blue);
}
.banner-link .mdi { font-size: 0.9em; transition: transform var(--dur-base) var(--ease-out); }
.banner-link:hover { color: var(--link-blue); text-decoration: underline; text-underline-offset: 4px; }
.banner-link:hover .mdi { transform: translateX(3px); }
.banner-link.inline { font-size: inherit; font-weight: 600; }

/* banner themes */
.banner-dark { background: #000; color: #fff; }
.banner-dark .banner-sub { color: rgba(255,255,255,0.72); }
.banner-dark .banner-link { color: var(--fs-cyan); }
.banner-dark .banner-link:hover { color: var(--fs-cyan-soft); }
.banner-light { background: #fff; color: var(--ink); }
.banner-gray { background: var(--gray-tile); color: var(--ink); }
/* subtle gradient banner: faint brand tint at top → white */
.banner-tint { background: linear-gradient(180deg, #eef6ff 0%, #f7fbff 30%, #fff 70%); color: var(--ink); overflow: hidden; position: relative; }
/* "Hello, CardSync." banner: text on left, graphic right-anchored */
.banner-tint .banner-copy {
  position: relative; z-index: 3;
  padding: clamp(56px, 9vh, 110px) clamp(24px, 4vw, 64px) clamp(40px, 6vh, 80px);
  width: 100%;
  max-width: min(560px, 50%);
  margin: 0;
  text-align: left;
  align-self: flex-start;
}
.banner-tint .banner-copy h2,
.banner-tint .banner-copy .hero-sub-thin,
.banner-tint .banner-copy .banner-links { text-align: left; margin-left: 0; margin-right: 0; }
.banner-tint .banner-copy .banner-links { justify-content: flex-start; }
.banner-tint .banner-visual {
  position: absolute; inset: 0; z-index: 1;
  display: block;
  pointer-events: none;
}
.cardsync-graphic {
  width: auto;
  height: 112%;
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  left: auto;
  margin: 0;
  mix-blend-mode: multiply;
}
/* Beat the .reveal.in { transform: none } so the right-shift sticks after the entrance animation */
.cardsync-graphic.reveal { transform: translate(28%, 26px); }
.cardsync-graphic.reveal.in { transform: translateX(28%); }

/* "Hello, CardSync" banner on narrow viewports — stack text above a smaller right-side graphic */
@media (max-width: 860px) {
  .banner-static { min-height: 0; }
  .banner-tint .banner-copy {
    max-width: 100%;
    padding: clamp(64px, 12vh, 96px) 22px clamp(28px, 5vh, 48px);
  }
  .banner-tint .banner-visual { position: relative; inset: auto; height: clamp(220px, 38vh, 320px); margin-top: -8px; }
  .cardsync-graphic { position: absolute; right: 0; bottom: 0; height: 100%; width: auto; max-width: 130%; }
  .cardsync-graphic.reveal { transform: translate(8%, 26px); }
  .cardsync-graphic.reveal.in { transform: translateX(8%); }
}
@media (max-width: 560px) {
  .banner-tint .banner-visual { height: clamp(180px, 32vh, 240px); }
  .cardsync-graphic { max-width: 150%; }
}

/* Learn-why slide-in panel — flows in from the left over the image */
.why-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(560px, 64%);
  z-index: 4;
  pointer-events: none;
  display: flex; align-items: center;
}
.why-panel-inner {
  position: relative;
  width: 100%;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-left: 1px solid rgba(25,40,85,0.10);
  box-shadow: -24px 0 60px rgba(15,26,54,0.10);
  padding: clamp(36px, 5vw, 60px) clamp(28px, 4vw, 56px);
  color: var(--ink);
  transform: translateX(100%);
  opacity: 0;
  transition: transform 620ms cubic-bezier(.22,.61,.36,1), opacity 360ms ease-out;
  pointer-events: auto;
}
.why-panel.is-open .why-panel-inner { transform: translateX(0); opacity: 1; }
.why-panel .eyebrow { color: var(--fs-navy-700); margin-bottom: 10px; }
.why-panel h3 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -0.012em; margin: 0 0 14px; color: var(--ink); }
.why-panel p { color: var(--fg-2); line-height: var(--lh-loose); font-size: var(--fs-body-lg); margin: 0 0 14px; }
.why-pill { display: inline-flex; align-items: center; gap: 9px; margin: 6px 0 18px; padding: 11px 16px; background: var(--primary-soft); border-radius: var(--radius-md); font-weight: 600; color: var(--fs-navy); }
.why-pill .mdi { font-size: 20px; color: var(--fs-navy-700); }
.why-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.why-close {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: rgba(25,40,85,0.06); color: var(--fs-navy);
  display: grid; place-items: center; font-size: 20px; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.why-close:hover { background: rgba(25,40,85,0.12); }
@media (max-width: 800px) {
  .why-panel { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .why-panel-inner { transition: none; }
}

/* Video panel — wider, with an iframe that lazy-loads on open + an expand-to-fullscreen button */
.video-panel { width: min(720px, 72%); }
.video-panel .why-panel-inner { padding: clamp(28px, 4vw, 48px) clamp(24px, 3vw, 40px) clamp(28px, 4vw, 40px); display: flex; flex-direction: column; height: 100%; }
.video-panel-bar { display: flex; justify-content: flex-end; gap: 8px; margin: 0 0 14px; flex: none; }
.video-expand-btn,
.video-panel .why-close {
  position: static;
  width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: rgba(25,40,85,0.06); color: var(--fs-navy);
  display: grid; place-items: center; font-size: 18px; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.video-expand-btn:hover,
.video-panel .why-close:hover { background: rgba(25,40,85,0.12); }
.video-frame { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--radius-md); overflow: hidden; background: #000; box-shadow: 0 10px 28px rgba(15,26,54,0.18); }
.video-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Expanded view — covers most of the viewport, still embedded, not on YouTube */
.video-panel.is-expanded {
  position: fixed; inset: 5vh 5vw;
  width: auto; right: 5vw; bottom: 5vh; top: 5vh; left: 5vw;
  z-index: 9999;
}
.video-panel.is-expanded .why-panel-inner {
  background: #ffffff;
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 100px rgba(15,26,54,0.38);
  transform: translateX(0) !important;
  opacity: 1 !important;
  height: 100%;
}
.video-panel.is-expanded .video-frame { flex: 1 1 auto; aspect-ratio: auto; height: 100%; min-height: 0; }

/* Backdrop that recedes the page when expanded */
.video-backdrop {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(11,20,48,0.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease-out), visibility .35s var(--ease-out);
}
.video-backdrop.is-open { opacity: 1; visibility: visible; }

@media (max-width: 800px) {
  .video-panel { width: 100%; }
}

.banner-visual { position: relative; z-index: 2; flex: 1; width: 100%; display: grid; place-items: center; }

/* ---- ANIMATED HERO BANNER (banner 1) ---- */
.hero {
  min-height: 760px;
  padding-top: 68px;
}
.hero[data-mood="white"] { background: #fff; color: var(--ink); }
.hero[data-mood="white"] .banner-sub { color: var(--ink-sub); }
.hero[data-mood="white"] .banner-link { color: var(--link-blue); }
.hero .banner-copy { padding-top: max(80px, 6.5vh); }

/* Two-scene auto-cycling hero (Credentials / Commerce) */
.hero-scenes { position: relative; flex: 1 1 auto; width: 100%; display: flex; flex-direction: column; }
.hero-scene { display: none; flex-direction: column; align-items: center; width: 100%; }
.hero-scene.is-active { display: flex; flex: 1; }
.hero-scene.is-entering { animation: heroFade 700ms var(--ease-out); }
@keyframes heroFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hero-scene .banner-copy { width: 100%; }

.hero-dots { display: inline-flex; gap: 6px; padding: 5px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-pill); margin: 0 auto 22px; position: relative; z-index: 5; }
.hero-dot { background: transparent; border: 0; color: rgba(255,255,255,0.72); font: 600 14px var(--font-body); padding: 8px 18px; border-radius: var(--radius-pill); cursor: pointer; transition: color .3s, background .3s; letter-spacing: -0.005em; }
.hero-dot:hover { color: #fff; }
.hero-dot.active { background: #fff; color: var(--fs-navy); }

/* Hero bottom artwork — flush-bottom asset that "emerges" from the canvas */
.banner-visual { position: relative; overflow: hidden; }
.hero-bottom-art {
  position: absolute;
  bottom: 0; left: 50%;
  width: calc(100% - clamp(40px, 8vw, 140px));
  max-width: 1320px;
  height: auto;
  pointer-events: none;
  user-select: none;
  display: block;
  /* base state (kept hidden until the scene is active) */
  opacity: 0;
  transform: translateX(-50%) translateY(80px) scale(.96);
  filter: blur(14px) saturate(108%);
  will-change: opacity, transform, filter;
}
.hero.lit .hero-scene.is-active .hero-bottom-art {
  animation: heroArtEnter 2.4s cubic-bezier(0.16, 1, 0.3, 1) .25s both;
}
@keyframes heroArtEnter {
  from { opacity: 0; transform: translateX(-50%) translateY(80px) scale(.96); filter: blur(14px) saturate(108%); }
  to   { opacity: 1; transform: translate3d(-50%, 0, 0); filter: none; }
}

/* radial glow behind the image, fades in with it */
.hero-bottom-glow {
  position: absolute; bottom: -10%; left: 50%;
  width: 95%; max-width: 1400px; height: 120%;
  background: radial-gradient(ellipse 60% 70% at 50% 80%, rgba(9,208,234,0.42), rgba(9,208,234,0.18) 38%, rgba(9,208,234,0.0) 72%);
  filter: blur(60px);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 1.8s var(--ease-out) .25s;
  pointer-events: none; z-index: 0;
}

/* Narrow-window fit: cap headline + crop the bottom art so the hero fits in one viewport */
@media (max-width: 1100px) {
  .hero .banner-copy { padding-top: max(88px, 9vh); }
  .hero h1, .hero h2 { font-size: clamp(34px, 6.2vw, 60px); }
  .hero-bottom-art { width: calc(100% - clamp(32px, 6vw, 100px)); max-height: 46vh; object-fit: contain; object-position: bottom center; }
}
@media (max-width: 720px) {
  .hero { min-height: 940px; }
  .hero .banner-copy { padding-top: 84px; }
  .hero h1, .hero h2 { font-size: clamp(32px, 8vw, 52px); }
  .hero-bottom-art { max-height: 38vh; }
}

/* --- Mobile-specific hero artwork (portrait crops that rotate every 8s) --- */
.hero-bottom-mobile { display: none; }
@media (max-width: 720px) {
  .hero-art-desktop { display: none; }
  /* Make the visual a real flow block — never let absolute children overlap the text */
  .hero-scene .banner-visual { position: relative; flex: 1 1 auto; width: 100%; min-height: 480px; overflow: hidden; padding: 0; }
  .hero-bottom-mobile {
    display: block; position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .hbm-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain; object-position: bottom center;
    opacity: 0;
    transition: opacity 900ms var(--ease-out), transform 1400ms var(--ease-out);
    transform: scale(1.02);
    will-change: opacity, transform;
  }
  .hbm-img.is-active { opacity: 1; transform: scale(1); }
  /* Laptop crop is designed to bleed off the right edge — fill the container flush-right */
  .hbm-img.hbm-bleed-right {
    object-fit: cover;
    object-position: bottom right;
  }
  /* Fill horizontally edge-to-edge (crops top/bottom if needed) — for assets that should hit both side edges */
  .hbm-img.hbm-fill-x {
    object-fit: cover;
    object-position: top center;
  }
  .hero.lit .hero-scene.is-active .hero-bottom-mobile .hbm-img.is-active {
    animation: heroMobileEnter 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  @keyframes heroMobileEnter {
    from { opacity: 0; transform: translateY(28px) scale(.98); filter: blur(8px); }
    to   { opacity: 1; transform: none; filter: none; }
  }
}
.hero.lit .hero-scene.is-active .hero-bottom-glow { opacity: 1; animation: heroGlow 9s ease-in-out 2.4s infinite; }
@keyframes heroGlow {
  0%, 100% { opacity: 1;   transform: translateX(-50%) scale(1); }
  50%      { opacity: .42; transform: translateX(-50%) scale(1.14); }
}

/* Orange glow for the Commerce scene — wider + stronger so it spills past the device edges */
.hero-scene[data-scene="commerce"] .hero-bottom-glow {
  background: radial-gradient(ellipse 60% 70% at 50% 80%, rgba(245,140,40,0.72), rgba(239,108,0,0.30) 38%, rgba(239,108,0,0.0) 72%);
  width: 100%;
  max-width: 1500px;
  height: 130%;
  bottom: -10%;
  filter: blur(70px);
}

/* Glassy prev / next arrows (revealed on hover only) */
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  color: #fff; cursor: pointer;
  display: grid; place-items: center;
  font-family: inherit; font-size: 24px; line-height: 1;
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease-out), background .25s var(--ease-out), transform .25s var(--ease-out);
  z-index: 6;
}
.hero-arrow .mdi { font-size: 26px; }
.hero-arrow.prev { left: clamp(14px, 2.4vw, 32px); }
.hero-arrow.next { right: clamp(14px, 2.4vw, 32px); }
.hero:hover .hero-arrow { opacity: 1; visibility: visible; }
.hero-arrow:hover { background: rgba(255,255,255,0.18); transform: translateY(-50%) scale(1.06); }
.hero-arrow:active { transform: translateY(-50%) scale(0.96); }
@media (max-width: 720px) { .hero-arrow { display: none; } }

/* BalanceU pass variants (used in the Commerce scene phones) */
.pass-bu { background: linear-gradient(160deg, #f59e1b 0%, #ef6c00 55%, #b25000 100%); }
.pass-bu-deep { background: linear-gradient(160deg, #243b73 0%, #142a55 55%, #0a142e 100%); }
.pass-bigamt { font-size: 28px; font-weight: 600; letter-spacing: -0.012em; line-height: 1; margin-top: 4px; }
.pass-bigamt .sub { font-size: 11px; font-weight: 500; opacity: .78; margin-left: 4px; }

.hero-stage {
  position: relative;
  height: clamp(420px, 52vh, 600px);
  perspective: 1600px;
  display: grid; place-items: center;
  width: 100%;
  margin-top: clamp(20px, 4vh, 56px);
}
.phone-glow {
  position: absolute; width: 520px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(9,208,234,0.34), transparent 62%);
  filter: blur(46px); opacity: 0; transition: opacity 1.4s var(--ease-out) .6s; z-index: 0;
}
.hero.lit .phone-glow { opacity: .85; }
.hero[data-mood="white"] .phone-glow { background: radial-gradient(circle, rgba(9,208,234,0.22), transparent 64%); }

.phone {
  position: absolute;
  width: 248px; height: 512px;
  border-radius: 44px;
  background: linear-gradient(150deg, #2a2d34, #0a0c10);
  padding: 11px;
  box-shadow: 0 50px 90px rgba(0,0,0,0.6), 0 0 0 2px rgba(255,255,255,0.07) inset, 0 2px 2px rgba(255,255,255,0.14) inset;
  will-change: transform, opacity;
}
.hero[data-mood="white"] .phone { box-shadow: 0 40px 80px rgba(15,26,54,0.22), 0 0 0 2px rgba(0,0,0,0.06) inset; }
.phone-screen { width: 100%; height: 100%; border-radius: 34px; overflow: hidden; position: relative; background: #f2f3f6; }
.phone .island { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 86px; height: 24px; background: #000; border-radius: 999px; z-index: 5; }
.phone-a { z-index: 3; }
.phone-b { z-index: 2; }
/* hidden, tilted "on their side" pre-entrance state */
.phone-a { opacity: 0; transform: translateX(-24px) translateY(120px) rotate(-20deg) scale(.9); }
.phone-b { opacity: 0; transform: translateX(24px) translateY(120px) rotate(20deg) scale(.9); }
/* entrance: drive opacity + transform via keyframes (a transition here gets stuck at 0) */
.hero.lit .phone-a { animation: enterA 1.3s var(--ease-out) forwards; }
.hero.lit .phone-b { animation: enterB 1.35s var(--ease-out) forwards; }
@media (prefers-reduced-motion: no-preference) {
  .hero.lit .phone-a { animation: enterA 1.3s var(--ease-out) forwards, floatA 7s ease-in-out 1.6s infinite; }
  .hero.lit .phone-b { animation: enterB 1.35s var(--ease-out) forwards, floatB 8s ease-in-out 1.8s infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .phone-a { opacity: 1; transform: translateX(-92px) translateY(6px) rotate(-9deg); }
  .phone-b { opacity: 1; transform: translateX(92px) translateY(-20px) rotate(9deg); }
  .hero.lit .phone-a, .hero.lit .phone-b { animation: none; }
}
@keyframes enterA {
  from { opacity: 0; transform: translateX(-24px) translateY(120px) rotate(-20deg) scale(.9); }
  to   { opacity: 1; transform: translateX(-92px) translateY(6px) rotate(-9deg); }
}
@keyframes enterB {
  from { opacity: 0; transform: translateX(24px) translateY(120px) rotate(20deg) scale(.9); }
  to   { opacity: 1; transform: translateX(92px) translateY(-20px) rotate(9deg); }
}
@keyframes floatA { 0%,100%{ transform: translateX(-92px) translateY(6px) rotate(-9deg);} 50%{ transform: translateX(-92px) translateY(-12px) rotate(-9deg);} }
@keyframes floatB { 0%,100%{ transform: translateX(92px) translateY(-20px) rotate(9deg);} 50%{ transform: translateX(92px) translateY(-2px) rotate(9deg);} }

/* wallet pass UI inside phone */
.wallet { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 40px 13px 16px; }
.wallet-os { font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; color: #6b7280; padding: 0 6px 11px; }
.wallet-os .mdi { font-size: 14px; }
.pass { border-radius: 18px; padding: 15px; color: #fff; position: relative; overflow: hidden; box-shadow: 0 10px 24px rgba(0,0,0,0.22); }
.pass-apple { background: linear-gradient(160deg, #243b73, var(--fs-navy) 55%, #0a142e); }
.pass-google { background: linear-gradient(160deg, #1f4a8f, #0b2147); }
.pass::after { content: ""; position: absolute; top: -40%; left: -20%; width: 70%; height: 180%; background: linear-gradient(115deg, transparent, rgba(255,255,255,0.20), transparent); transform: rotate(8deg) translateX(-160%); }
.hero.lit .pass::after { animation: sheen 3.6s ease-in-out 1.9s infinite; }
@keyframes sheen { 0%{ transform: rotate(8deg) translateX(-160%);} 30%,100%{ transform: rotate(8deg) translateX(260%);} }
.pass-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pass-top .brand { display: flex; align-items: center; gap: 7px; }
.pass-top .brand img { width: 19px; height: 19px; }
.pass-top .brand span { font-size: 12px; font-weight: 700; }
.pass-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; opacity: .65; }
.pass-row { display: flex; align-items: center; gap: 11px; margin: 7px 0 14px; }
.pass-photo { width: 48px; height: 48px; border-radius: 9px; background: linear-gradient(135deg,#6b8cc4,#3a5a93); flex: none; display: grid; place-items: center; font-size: 20px; color: rgba(255,255,255,0.85); }
.pass-name { font-size: 16px; font-weight: 600; line-height: 1.1; }
.pass-id { font-size: 10px; opacity: .72; margin-top: 3px; }
.pass-meta { display: flex; justify-content: space-between; gap: 8px; }
.pass-meta .m .k { font-size: 8px; text-transform: uppercase; letter-spacing: .1em; opacity: .6; font-weight: 700; }
.pass-meta .m .v { font-size: 11px; font-weight: 600; margin-top: 2px; }
.pass-barcode { margin-top: 13px; height: 36px; border-radius: 7px; background-color: #fff; background-image: repeating-linear-gradient(90deg, #0b1430 0 2px, transparent 2px 4px, #0b1430 4px 5px, transparent 5px 9px); }
.pass-contactless { position: absolute; top: 15px; right: 13px; font-size: 15px; opacity: .8; }
.wallet-hint { margin-top: auto; text-align: center; font-size: 10px; color: #9aa3b2; padding-top: 9px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.wallet-hint .mdi { font-size: 13px; }

.hero-cue { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: var(--fs-caption); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.hero[data-mood="white"] .hero-cue { color: var(--ink-sub); }
.hero-cue .mdi { font-size: 20px; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%,100%{ transform: translateY(0); opacity: .6;} 50%{ transform: translateY(6px); opacity: 1;} }

/* ---- STATIC IMAGE BANNERS (banners 2 & 3) ---- */
.banner-static { min-height: clamp(640px, 88vh, 880px); }
.banner-static .banner-visual { padding: clamp(28px, 5vh, 64px) 22px 0; }

/* a clean "credential mesh" graphic for banner 2 */
.mesh {
  position: relative; width: min(760px, 92vw); aspect-ratio: 16/9;
  display: grid; place-items: center;
}
.mesh-core { width: 116px; height: 116px; border-radius: 24px; background: #fff; box-shadow: var(--shadow-4); display: grid; place-items: center; z-index: 3; }
.mesh-core img { width: 58px; }
.mesh-node { position: absolute; padding: 11px 15px; border-radius: var(--radius-pill); background: #fff; box-shadow: var(--shadow-2); font-size: var(--fs-body-sm); font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; z-index: 2; }
.mesh-node .mdi { font-size: 17px; color: var(--link-blue); }
.mesh-node.m1 { top: 6%; left: 16%; } .mesh-node.m2 { top: 2%; right: 18%; }
.mesh-node.m3 { top: 44%; right: 2%; } .mesh-node.m4 { bottom: 8%; right: 22%; }
.mesh-node.m5 { bottom: 4%; left: 20%; } .mesh-node.m6 { top: 40%; left: 1%; }
.mesh-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.mesh-svg line { stroke: var(--neutral-300); stroke-width: 1.5; stroke-dasharray: 4 6; }

/* Hello, CardSync — replacement product graphic */
.banner-static .banner-copy { position: relative; z-index: 2; }

/* dashboard-ish glass panel for banner 3 (dark) */
.panel-shot {
  width: min(880px, 94vw); border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, #11203f, #0a1530);
  border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 40px 80px rgba(0,0,0,0.5);
}
.panel-bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.panel-bar .dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.22); }
.panel-bar .ttl { margin-left: 10px; font-size: var(--fs-body-sm); color: rgba(255,255,255,0.7); font-weight: 600; }
.panel-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; padding: 18px; text-align: left; }
.panel-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 15px; }
.panel-card .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,0.5); font-weight: 700; }
.panel-card .big { font-size: 30px; font-weight: 300; color: #fff; margin-top: 6px; }
.panel-card .big .u { color: var(--cp-green); }
.panel-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.07); font-size: var(--fs-body-sm); color: rgba(255,255,255,0.82); }
.panel-row:last-child { border-bottom: 0; }
.panel-row .ok { color: var(--cp-green); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.spark { display: flex; align-items: flex-end; gap: 4px; height: 54px; margin-top: 12px; }
.spark span { flex: 1; background: linear-gradient(180deg, var(--cp-green), rgba(67,160,71,0.25)); border-radius: 3px 3px 0 0; }

/* ---------------------------------------------------------------------------
 * 2-WIDE TILE GRID
 * ------------------------------------------------------------------------- */
.tiles { background: #fff; }
.tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tile-wide { grid-column: 1 / -1; min-height: 320px; }
.tile {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl);
  min-height: 540px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(40px, 5vw, 60px) 28px 0;
  text-decoration: none; color: var(--ink);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.tile:hover { transform: translateY(-4px); }
.tile-eyebrow { font-size: var(--fs-body); font-weight: 600; letter-spacing: .01em; margin-bottom: 8px; }
.tile h3 { font-size: clamp(26px, 2.6vw, 40px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.08; margin: 0; color: inherit; }
.tile-sub { font-size: clamp(16px, 1.3vw, 20px); color: var(--ink-sub); margin: 10px auto 0; max-width: 30ch; }
.tile-links { display: flex; gap: 24px; justify-content: center; margin-top: 16px; }
.tile-links .banner-link { font-size: clamp(15px, 1.1vw, 18px); }
.tile-links-stacked { flex-direction: column; gap: 6px; align-items: center; }
.tile-visual { margin-top: auto; padding-top: 26px; width: 100%; display: grid; place-items: center; }

/* Bleed variant — image fills the tile's bottom edge-to-edge (no horizontal padding) */
.tile:has(.tile-visual-bleed) { padding-bottom: 0; }
.tile-visual-bleed { padding-top: 18px; margin-left: calc(-1 * clamp(8px, 1.6vw, 28px)); margin-right: calc(-1 * clamp(8px, 1.6vw, 28px)); margin-bottom: -2px; }
.tile-art-img { width: 100%; height: auto; display: block; object-fit: contain; object-position: bottom center; }

/* tile themes */
.tile-white { background: #fff; border: 1px solid var(--border); }
.tile-gray { background: var(--gray-tile); }
.tile-dark { background: linear-gradient(180deg, #1b2c57, #0b1124); color: #fff; }
.tile-dark .tile-sub { color: rgba(255,255,255,0.7); }
.tile-dark .tile-eyebrow { color: var(--fs-cyan); }
.tile-dark .banner-link { color: var(--fs-cyan); }

/* color-accent tiles: tint at top → white (only when accents=brand) */
.tile-tint { background: var(--gray-tile); }
[data-accents="brand"] .tile-tint.t-cyan   { background: linear-gradient(180deg, #e3fafe 0%, #f3fdff 34%, #fff 72%); }
[data-accents="brand"] .tile-tint.t-orange { background: linear-gradient(180deg, #fff1e0 0%, #fff8f1 34%, #fff 72%); }
[data-accents="brand"] .tile-tint.t-purple { background: linear-gradient(180deg, #efeaff 0%, #f7f4ff 34%, #fff 72%); }
[data-accents="brand"] .tile-tint.t-green  { background: linear-gradient(180deg, #e6f6e7 0%, #f3fbf3 34%, #fff 72%); }
.tile-tint .tile-eyebrow { color: var(--ink-sub); }
[data-accents="brand"] .tile-tint.t-cyan   .tile-eyebrow { color: #0a8aa0; }
[data-accents="brand"] .tile-tint.t-orange .tile-eyebrow { color: #c75600; }
[data-accents="brand"] .tile-tint.t-purple .tile-eyebrow { color: #5b30d6; }
[data-accents="brand"] .tile-tint.t-green  .tile-eyebrow { color: var(--cp-green-deep); }
/* minimal mode: strip all tile color, demote dark tile to graphite */
[data-accents="minimal"] .tile-dark { background: linear-gradient(180deg, #2b2b2e, #1d1d1f); }
[data-accents="minimal"] .tile-dark .tile-eyebrow,
[data-accents="minimal"] .tile-dark .banner-link { color: #fff; }

/* tile visuals */
.tile-logo img { height: 34px; width: auto; }
.tile-card-art { display: grid; gap: 10px; width: min(360px, 84%); }
.mini-pass { border-radius: 14px; padding: 13px; color: #fff; text-align: left; box-shadow: var(--shadow-3); position: relative; overflow: hidden; }
.mini-pass .l { font-size: 9px; text-transform: uppercase; letter-spacing: .12em; opacity: .7; font-weight: 700; }
.mini-pass .n { font-size: 15px; font-weight: 600; margin-top: 3px; }
.mini-pass .b { height: 22px; margin-top: 10px; border-radius: 5px; background-color: #fff; background-image: repeating-linear-gradient(90deg,#0b1430 0 2px,transparent 2px 4px); }
.tile-icon-art { font-size: clamp(80px, 9vw, 128px); opacity: .9; line-height: 1; }
.tile-ipad { width: min(330px, 82%); aspect-ratio: 4/3; border-radius: 20px 20px 0 0; background: #111; border: 8px solid #1a1a1a; border-bottom: 0; overflow: hidden; box-shadow: var(--shadow-4); }
.tile-ipad img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }

/* RollCall composite art (iPhone + iPad + HID reader) — flush-bottom in its tile */
.tile-rollcall-art {
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  filter: drop-shadow(0 10px 30px rgba(15,26,54,0.18));
}

/* tile that uses JS for navigation (lets us nest a real <a> inside) */
.tile-click { cursor: pointer; }
.tile-click:focus-visible { outline: 2px solid var(--fs-cyan); outline-offset: 3px; }

/* Pull tile visuals closer to text when they're small (icons / news list) */
.tile:has(.tile-icon-art),
.tile:has(.tile-news) { min-height: 0; padding-bottom: clamp(36px, 4vw, 56px); }
.tile:has(.tile-icon-art) .tile-visual { margin-top: clamp(20px, 2.4vw, 32px); padding-top: 0; }
.tile:has(.tile-news) .tile-visual { margin-top: clamp(24px, 2.6vw, 36px); padding-top: 0; }

/* Integration-partner pair graphic: FutureState + Your platform */
/* Tile-level: pull the visual right under the links so there's no dead space */
.tile:has(.partner-pair) { min-height: 0; padding-bottom: clamp(36px, 4vw, 56px); }
.tile:has(.partner-pair) .tile-visual { margin-top: 22px; padding-top: 0; }
.partner-pair {
  display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.4vw, 20px);
  width: 100%; max-width: 440px; margin: 0 auto;
  padding: 6px 10px 4px;
}
.pp-fs, .pp-you {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: clamp(96px, 10vw, 128px); height: clamp(96px, 10vw, 128px);
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 12px 28px rgba(15,26,54,0.10);
  font-size: var(--fs-body-sm); font-weight: 600; color: var(--fs-navy-700);
  text-align: center; padding: 10px;
}
.pp-fs img { width: 56%; height: 56%; object-fit: contain; }
.pp-link {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 auto;
  min-width: 64px;
  max-width: 140px;
}
.pp-you {
  border: 2px dashed rgba(25,40,85,0.28);
  background: rgba(255,255,255,0.5);
}
.pp-link {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  flex: 0 1 100px;
  min-width: 56px;
}
.pp-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--fs-cyan);
  opacity: .35;
  animation: ppFlow 1.8s ease-in-out infinite;
}
.pp-dot:nth-child(1){ animation-delay: 0s; }
.pp-dot:nth-child(2){ animation-delay: .15s; }
.pp-dot:nth-child(3){ animation-delay: .30s; }
.pp-dot:nth-child(4){ animation-delay: .45s; }
.pp-dot:nth-child(5){ animation-delay: .60s; }
.pp-arrow {
  color: var(--fs-cyan);
  font-size: 18px;
  margin-left: 2px;
}
@keyframes ppFlow {
  0%,100% { opacity: .25; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) { .pp-dot { animation: none; opacity: .6; } }

/* feature chips visual */
.chip-cloud { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; width: min(380px, 90%); }
.chip-cloud span { font-size: var(--fs-body-sm); font-weight: 600; padding: 9px 15px; border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--border); color: var(--fg-2); box-shadow: var(--shadow-1); }

/* news mini list visual */
.tile-news { width: min(420px, 92%); display: flex; flex-direction: column; gap: 1px; text-align: left; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-2); }
.tile-news .row { background: #fff; padding: 13px 16px; display: flex; gap: 12px; align-items: center; }
.tile-news .row .cat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--link-blue); width: 78px; flex: none; }
.tile-news .row .t { font-size: var(--fs-body-sm); font-weight: 500; color: var(--ink); }

/* ---------------------------------------------------------------------------
 * RESPONSIVE
 * ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .tile-grid { grid-template-columns: 1fr; }
  .tile { min-height: 460px; }
  .panel-body { grid-template-columns: 1fr; }
  .hero-stage { transform: scale(.92); }
}
@media (max-width: 560px) {
  .hero-stage { transform: scale(.82); }
  .banner h1, .banner h2 { font-size: 34px; }
}