/* ============================================================
   Home — laid out from the shipping UCB One home screen:
   a maroon-to-red header, a white account card riding its
   bottom edge, a 3-column quick-action grid, the loan banner,
   Quick Services chips, dues, Lifestyle and Subsidies.

   The header is a gradient, not a flat red. At this size a flat
   #E11C28 fill behind white text reads as an error banner; the
   maroon top stop is what makes it read as brand.
   ============================================================ */

.ucb-hero {
  position: relative;
  flex-shrink: 0;
  padding: 10px 18px 62px;
  /* Reach up under the shell status bar so the gradient runs behind it; the
     bar itself is transparent on this screen (see base.css). */
  margin-top: calc(-1 * var(--statusbar-h));
  padding-top: calc(10px + var(--statusbar-h));
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(255, 255, 255, 0.12), transparent 60%),
    linear-gradient(168deg,
      var(--color-header-top) 0%,
      var(--color-header-mid) 46%,
      var(--color-header-bot) 100%);
  color: #fff;
  overflow: hidden;
}
/* The bokeh the marketing shots have behind the header. Two soft discs, wide
   apart, at low opacity — enough to stop the gradient looking like a swatch. */
.ucb-hero::before,
.ucb-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 68%);
}
.ucb-hero::before { width: 230px; height: 230px; right: -70px; top: -90px; }
.ucb-hero::after  { width: 170px; height: 170px; left: -60px;  bottom: -70px; }

.ucb-hero-inner { position: relative; z-index: 1; }

/* ---------- Knockout wordmark ----------
   The full-colour UCB ONE mark is red-on-white and disappears on a red header,
   so the header carries a single-colour version of the same lockup, built from
   type plus one pill. The real artwork is used on the login screen, where the
   surface is white and it belongs. */
.ucb-mark {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.4px;
  line-height: 1;
  color: #fff;
}
.ucb-mark-pill {
  width: 13px;
  height: 21px;
  border-radius: 7px;
  /* The mark's pill is a red top over a grey bottom, rotated. Knocked out to
     white over a translucent grey, it keeps the two-tone read on any brand
     colour without carrying a second hue onto the header. */
  background: linear-gradient(150deg, #fff 0 52%, rgba(255, 255, 255, 0.45) 52% 100%);
  transform: rotate(38deg);
  margin: 0 4px 0 2px;
  flex-shrink: 0;
}

.ucb-hero-icons { display: flex; align-items: center; gap: 8px; }
.hero-icon-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}
.hero-icon-btn:active { transform: scale(0.9); background: rgba(255, 255, 255, 0.28); }
.hero-lang {
  display: flex; align-items: center;
  padding: 6px 4px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  cursor: pointer;
  overflow: hidden;
}
.hero-lang span {
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.5;
}
.hero-lang span.on { background: #fff; color: var(--ucb-maroon-800); }

/* ---------- Greeting ---------- */
.ucb-greet { display: flex; align-items: center; gap: 11px; margin-top: 18px; }
.ucb-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  flex-shrink: 0;
}
.ucb-greet-label { font-size: 12px; opacity: 0.82; }
.ucb-greet-name { font-size: 17px; font-weight: 800; line-height: 1.2; margin-top: 1px; }

/* ---------- Account card ----------
   Rides the bottom edge of the header, the way the shipping app's does. The
   negative margin is on the body, not the card, so the card keeps a normal
   flow position and the shadow lands on the page rather than inside the hero. */
.home-body {
  position: relative;
  z-index: 2;
  flex: 1;
  margin-top: -52px;
  padding: 0 16px calc(var(--nav-height) + 24px);
}

.acct-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 26px rgba(var(--brand-deep-rgb), 0.16);
  padding: 16px 18px 12px;
}
.acct-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.acct-no-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
.acct-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--color-primary-soft);
  color: var(--color-primary-text);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.acct-label { font-size: 11px; color: var(--color-text-secondary); }
.acct-no {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-main);
  letter-spacing: 0.2px;
  display: flex; align-items: center; gap: 6px;
}
.acct-copy, .acct-eye {
  border: none; background: none; cursor: pointer;
  color: var(--color-text-secondary);
  display: flex; align-items: center;
  padding: 2px;
  transition: transform 0.15s, color 0.15s;
}
.acct-copy:active, .acct-eye:active { transform: scale(0.86); }
.acct-copy.done { color: var(--color-success); }

.acct-balances { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 14px; gap: 12px; }
.acct-bal-label { font-size: 11.5px; color: var(--color-text-secondary); }
.acct-bal-main {
  display: flex; align-items: baseline; gap: 1px;
  font-weight: 800;
  line-height: 1.05;
  margin-top: 2px;
  letter-spacing: -0.6px;
  color: var(--color-text-main);
}
/* Tabular figures: without them the digits change width as the count-up runs
   and the whole number shuffles sideways for 700ms. */
.acct-cur { font-size: 17px; font-weight: 700; color: var(--color-primary-text); margin-right: 2px; }
.acct-int { font-size: 27px; font-variant-numeric: tabular-nums; }
.acct-frac { font-size: 17px; color: var(--color-text-placeholder); font-variant-numeric: tabular-nums; }
.acct-mask { font-size: 24px; letter-spacing: 3px; color: var(--color-text-placeholder); }
.acct-ledger { text-align: right; flex-shrink: 0; }
.acct-ledger-value { font-size: 14px; font-weight: 700; margin-top: 3px; color: var(--color-text-general); }

.acct-dots { display: flex; justify-content: center; gap: 5px; margin-top: 12px; }
.acct-dot { width: 5px; height: 5px; border-radius: var(--radius-pill); background: var(--color-border-1); }
.acct-dot.active { width: 15px; background: var(--color-primary); }

/* ---------- Quick-action grid ----------
   Three columns, the way the shipping app lays it out. The tile count is
   configurable (Bank Configuration panel), so the grid has to look right at
   three, six, nine or eleven tiles — hence a plain auto-flowing grid rather
   than a fixed two-row card. */
.tile-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin-top: 14px;
  padding: 4px 6px;
  overflow: hidden;
}
.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 18px 6px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: center;
  transition: transform 0.15s;
}
.tile:active { transform: scale(0.94); }
/* Hairlines drawn as insets rather than borders, so the outer edges of the
   card stay clean no matter how many tiles the configuration leaves. */
.tile::before, .tile::after {
  content: '';
  position: absolute;
  background: var(--color-border-2);
  pointer-events: none;
}
.tile::before { left: 0; top: 14%; bottom: 14%; width: 1px; }
.tile::after { left: 12%; right: 12%; top: 0; height: 1px; }
.tile:nth-child(3n + 1)::before { display: none; }
.tile:nth-child(-n + 3)::after { display: none; }
.tile .icon { color: var(--color-primary-text); }
.tile-label {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-main);
}

/* ---------- Loan banner ---------- */
.loan-banner {
  position: relative;
  margin-top: 16px;
  border-radius: var(--radius-lg);
  padding: 14px 16px 16px;
  background: linear-gradient(120deg, #FFF3F3 0%, #FFE9EA 100%);
  border: 1px solid rgba(var(--brand-rgb), 0.16);
  overflow: hidden;
}
.loan-banner-tag { font-size: 13px; font-weight: 800; color: var(--ucb-maroon-800); }
.loan-banner-line { font-size: 11.5px; color: var(--color-text-general); margin-top: 2px; }
.loan-banner-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 11px 16px;
  border: none;
  border-radius: var(--radius-pill);
  background: linear-gradient(100deg, var(--ucb-red) 0%, var(--ucb-red-700) 100%);
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(var(--brand-rgb), 0.34);
  transition: transform 0.12s;
}
.loan-banner-cta:active { transform: scale(0.98); }

/* ---------- Banner carousel ---------- */
.banner {
  position: relative;
  margin-top: 16px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  touch-action: pan-y;
}
.banner-track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.banner-track.dragging { transition: none; }
.banner-slide {
  flex: 0 0 100%;
  min-width: 100%;
  cursor: pointer;
  position: relative;
  padding: 18px 20px;
  min-height: 104px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  background: linear-gradient(120deg, var(--g1), var(--g2));
  overflow: hidden;
  user-select: none;
}
.banner-slide::before,
.banner-slide::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  pointer-events: none;
}
.banner-slide::before { width: 150px; height: 150px; right: -46px; top: -54px; }
.banner-slide::after  { width: 96px;  height: 96px;  right: 12px;  bottom: -46px; }
.banner-icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}
.banner-text { flex: 1; min-width: 0; position: relative; z-index: 1; }
.banner-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.24);
  margin-bottom: 6px;
}
.banner-title { font-size: 15.5px; font-weight: 800; line-height: 1.2; }
.banner-body { font-size: 11.5px; opacity: 0.9; margin-top: 3px; line-height: 1.3; }
.banner-dots { position: absolute; bottom: 10px; left: 20px; display: flex; gap: 5px; z-index: 2; }
.banner-dot {
  width: 5px; height: 5px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.45);
  transition: width 0.3s, background 0.3s;
}
.banner-dot.active { width: 16px; background: #fff; }

/* ---------- Section headings ---------- */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 22px 2px 12px;
}
.section-title {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--color-text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title::before {
  content: '';
  width: 3px; height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary-dark));
}
.section-link {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-primary-text);
  cursor: pointer;
}

/* ---------- Quick Services (saved beneficiaries) ---------- */
.qs-item {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  padding: 9px 14px 9px 9px;
  background: #fff;
  border: 1px solid var(--color-border-1);
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: transform 0.15s;
}
.qs-item:active { transform: scale(0.96); }
.qs-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 11.5px;
  background: var(--color-primary-soft);
  color: var(--color-primary-text);
  flex-shrink: 0;
}
.qs-avatar.add { background: var(--color-primary); color: #fff; }
.qs-name { font-size: 12.5px; font-weight: 700; color: var(--color-text-main); line-height: 1.2; }
.qs-sub { font-size: 10.5px; color: var(--color-text-secondary); margin-top: 1px; }

/* ---------- Dues ---------- */
.due-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  cursor: pointer;
}
.due-icon {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: #FFF4E5;
  color: #B4530A;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.due-amount { font-size: 15px; font-weight: 800; color: var(--color-primary-text); }

/* ---------- Lifestyle strip ---------- */
.life-strip { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 8px; }
.life-card {
  flex: 0 0 122px;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s;
}
.life-card:active { transform: scale(0.96); }
.life-art {
  height: 74px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg-floating);
}
.life-art img { width: 46px; height: 46px; border-radius: 13px; display: block; }
.life-meta { padding: 9px 10px 11px; }
.life-name { font-size: 12px; font-weight: 700; color: var(--color-text-main); line-height: 1.2; }
.life-desc { font-size: 10.5px; color: var(--color-text-secondary); margin-top: 2px; }

/* ---------- Subsidy strip ---------- */
.subsidy-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 13px 15px;
  margin-bottom: 10px;
  cursor: pointer;
}
.subsidy-card:last-child { margin-bottom: 0; }
.subsidy-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

/* ---------- Entrance animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  animation: revealUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes revealUp {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
  .banner-track { transition: none; }
}