/* ═══════════════════════════════════════════════════════════════════════════
   Mr. Crowd / Front Page
   frontpage.css

   Palette is built around the wordmark's blue and the platform's long-standing
   green progress colour.  Ink navy carries the "finance" weight, the greys do
   the structural work, and colour is spent only on money, progress and CTAs.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Brand */
  --blue:        #1264d4;
  --blue-dark:   #0b4ea8;
  --blue-soft:   #e8f0fd;
  --green:       #09ae7e;
  --green-dark:  #068462;
  --green-soft:  #e4f7f1;
  --amber:       #d68910;
  --amber-soft:  #fdf3e2;

  /* Ink & surfaces */
  --ink:         #0b1b34;
  --ink-2:       #12294a;
  --text:        #1a2b45;
  --muted:       #61748f;
  --faint:       #8c9cb3;
  --line:        #e4e9f1;
  --line-soft:   #eef2f7;
  --bg:          #ffffff;
  --bg-alt:      #f6f8fb;
  --bg-tint:     #f0f4f9;

  /* Shape */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --r-xl: 22px;

  --shadow-1: 0 1px 2px rgba(11, 27, 52, .06), 0 1px 3px rgba(11, 27, 52, .04);
  --shadow-2: 0 4px 12px rgba(11, 27, 52, .07), 0 2px 4px rgba(11, 27, 52, .04);
  --shadow-3: 0 14px 34px rgba(11, 27, 52, .13), 0 4px 10px rgba(11, 27, 52, .06);

  --header-h: 68px;
  --maxw: 1200px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", "Noto Sans TC", "Noto Sans SC",
          "Microsoft JhengHei", "PingFang TC", sans-serif;
  --font-num: "Inter", "SF Mono", ui-monospace, "Segoe UI", sans-serif;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; border: 0; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.hidden { display: none !important; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border-radius: var(--r);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s,
              box-shadow .15s, transform .15s;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-2); }
.btn-primary:hover { background: var(--blue-dark); }

.btn-green { background: var(--green); color: #fff; box-shadow: var(--shadow-2); }
.btn-green:hover { background: var(--green-dark); }

.btn-ghost { border: 1px solid var(--line); background: #fff; color: var(--text); }
.btn-ghost:hover { border-color: #c9d4e3; background: var(--bg-alt); }

.btn-light { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.34); }
.btn-light:hover { background: rgba(255,255,255,.24); }

.btn-sm { height: 36px; padding: 0 16px; font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  height: var(--header-h);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand { flex: none; }
.brand img { height: 26px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 26px; }
.main-nav a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.main-nav a:hover { color: var(--ink); border-bottom-color: var(--blue); }

/* The nav carries its own Log In / Sign Up for the mobile drawer.  On desktop
   the pair in .header-right is the one that shows, so these stay out of it. */
.main-nav .btn { display: none; }

.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Language switch */
.lang-switch {
  display: flex;
  align-items: center;
  padding: 3px;
  background: var(--bg-tint);
  border-radius: 8px;
}
.lang-switch button {
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  border-radius: 6px;
  transition: background-color .15s, color .15s;
}
.lang-switch button:hover { color: var(--ink); }
.lang-switch button.active { background: #fff; color: var(--blue); box-shadow: var(--shadow-1); }

/* The drawer's copy of the language switch stays out of the desktop header. */
.drawer-lang { display: none; }

/* ── Signed-in cluster ──────────────────────────────────────────────────── */
.account-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 3px 10px 3px 3px;
  border-radius: 999px;
  transition: background-color .15s;
}
.account-chip:hover { background: var(--bg-tint); }

.account-avatar {
  width: 32px; height: 32px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-tint);
}
.account-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mail, and anything else that is an icon in a hit target */
.icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: 9px;
  color: var(--muted);
  transition: background-color .15s, color .15s;
}
.icon-btn:hover { background: var(--bg-tint); color: var(--ink); }

.icon-badge {
  position: absolute;
  top: 1px; right: 0;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: #d6272d;
  border: 2px solid #fff;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 13px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ── Account menu (desktop, signed in) ──────────────────────────────────── */
.account-menu { position: relative; display: none; }
body.is-authed .account-menu { display: block; }

.menu-btn { width: 38px; height: 38px; border-radius: 9px; }
.menu-btn:hover { background: var(--bg-tint); }
.menu-btn span {
  display: block;
  width: 19px; height: 2px;
  margin: 4px auto;
  background: var(--ink);
  border-radius: 2px;
}

.menu-pop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 208px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.menu-open .menu-pop { opacity: 1; visibility: visible; transform: translateY(0); }

.menu-pop a,
.menu-pop button {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  transition: background-color .12s, color .12s;
}
.menu-pop a:hover,
.menu-pop button:hover { background: var(--bg-tint); color: var(--ink); }
.menu-pop button { border-top: 1px solid var(--line-soft); border-radius: 0 0 var(--r-sm) var(--r-sm); margin-top: 6px; color: #b3282d; }
.menu-pop button:hover { background: #fdeced; color: #8f1e22; }

/* Mobile menu toggle */
.nav-toggle { display: none; width: 40px; height: 40px; border-radius: 8px; }
.nav-toggle:hover { background: var(--bg-tint); }
.nav-toggle span {
  display: block;
  width: 19px; height: 2px;
  margin: 4px auto;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Admin strip */
.admin-strip {
  background: #1e2b3f;
  color: #cfe0f5;
  font-size: 12.5px;
  letter-spacing: .04em;
  text-align: center;
  padding: 5px 0;
}
.admin-strip a { color: #7fc0ff; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}

/* Every slide shares one grid cell rather than being absolutely positioned,
   so the hero is as tall as its tallest slide.  Stacking them out of flow
   pinned the height at min-height, and a slide with an extra line (the
   "Successfully Funded" note) overflowed its buttons into the controls. */
.hero-slides {
  position: relative;
  display: grid;
  min-height: 480px;
}

.hero-slide {
  grid-area: 1 / 1;
  position: relative;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s ease;
  background-position: center;
  background-size: cover;
}
.hero-slide.active { opacity: 1; visibility: visible; }

/* Two washes: a vertical one so the header and the copy stay legible, and a
   left-weighted one so text sits on the darkest part of any photograph. */
.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(6,15,30,.93) 0%, rgba(6,15,30,.78) 45%, rgba(6,15,30,.42) 100%),
    linear-gradient(180deg, rgba(6,15,30,.5) 0%, rgba(6,15,30,.15) 40%, rgba(6,15,30,.72) 100%);
}

.hero-body {
  position: relative;
  z-index: 2;
  min-height: 480px;
  display: flex;
  align-items: center;
  /* Bottom padding clears the carousel controls, which are positioned
     against the hero's bottom edge. */
  padding: 72px 0 96px;
}

.hero-copy { max-width: 660px; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px;
  margin-bottom: 20px;
  border-radius: 999px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.24);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #d8e6fa;
}
.hero-eyebrow .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(9,174,126,.28);
}

.hero-title {
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.022em;
  text-wrap: balance;
}

.hero-sub {
  margin-top: 18px;
  font-size: clamp(16px, 1.5vw, 18.5px);
  line-height: 1.62;
  color: rgba(255,255,255,.84);
  max-width: 620px;
}

.hero-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(9,174,126,.2);
  border: 1px solid rgba(9,174,126,.45);
  color: #7ff0cd;
  font-size: 13px;
  font-weight: 600;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.hero-provider {
  margin-top: 22px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.52);
}

/* Carousel controls.  The strip spans the full width at a z-index above the
   hero copy, so it must not take the pointer: only the controls themselves
   do.  Otherwise it eats clicks meant for whatever sits under it. */
.hero-nav {
  position: absolute;
  left: 0; right: 0;
  bottom: 30px;
  z-index: 3;
  pointer-events: none;
}
.hero-nav-inner { display: flex; align-items: center; gap: 14px; }
.hero-dots button,
.hero-arrows button { pointer-events: auto; }

.hero-dots { display: flex; gap: 8px; }
.hero-dots button {
  width: 26px; height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,.3);
  transition: background-color .2s, width .2s;
}
.hero-dots button:hover { background: rgba(255,255,255,.6); }
.hero-dots button.active { background: #fff; width: 40px; }

.hero-arrows { margin-left: auto; display: flex; gap: 8px; }
.hero-arrows button {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  transition: background-color .15s, border-color .15s;
}
.hero-arrows button:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION SCAFFOLD
   ═══════════════════════════════════════════════════════════════════════════ */
.section { padding: 72px 0; }
.section-alt { background: var(--bg-alt); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.section-tight { padding: 56px 0; }

.section-head {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 30px;
}
.section-head-copy { min-width: 0; }

.section-kicker {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
}
.section-title {
  font-size: clamp(23px, 2.6vw, 30px);
  font-weight: 750;
  letter-spacing: -.018em;
  color: var(--ink);
  line-height: 1.25;
}
.section-sub {
  margin-top: 7px;
  font-size: 15px;
  color: var(--muted);
  max-width: 640px;
}
.section-link {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--blue);
}
.section-link:hover { color: var(--blue-dark); }
.section-link svg { transition: transform .15s; }
.section-link:hover svg { transform: translateX(3px); }

/* ═══════════════════════════════════════════════════════════════════════════
   OFFERING CARDS
   ═══════════════════════════════════════════════════════════════════════════ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 24px;
}

.offer-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.offer-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-3);
  border-color: #d3dded;
}

.offer-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--bg-tint);
  overflow: hidden;
}
.offer-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.offer-card:hover .offer-media img { transform: scale(1.035); }

.offer-ribbon {
  position: absolute;
  top: 12px; left: 12px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(11,27,52,.82);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.offer-ribbon.is-new    { background: var(--blue); }
.offer-ribbon.is-funded { background: var(--green); }
.offer-ribbon.is-ttw    { background: var(--amber); }

.offer-body { flex: 1; display: flex; flex-direction: column; padding: 18px 18px 0; }

.offer-industry {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--faint);
}
.offer-industry img { width: 14px; height: 14px; object-fit: contain; opacity: .75; }

.offer-name {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--ink);
  line-height: 1.3;
}
.offer-card:hover .offer-name { color: var(--blue); }

.offer-pitch {
  margin-top: 7px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.offer-progress { margin-top: auto; padding-top: 18px; }

.progress-track {
  height: 6px;
  border-radius: 3px;
  background: var(--line-soft);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--green) 0%, #24c795 100%);
  width: 0;
  transition: width .9s cubic-bezier(.2,.7,.2,1);
}
.progress-fill.is-complete { background: linear-gradient(90deg, var(--blue) 0%, #3a8bf0 100%); }

.offer-raised {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.offer-amount {
  font-family: var(--font-num);
  font-size: 19px;
  font-weight: 750;
  color: var(--ink);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.offer-pct { font-size: 13px; font-weight: 700; color: var(--green); }
.offer-target { margin-top: 2px; font-size: 12.5px; color: var(--faint); }

/* Reserved-interest figure, shown instead of a progress bar on TTW cards */
.offer-reserved {
  margin-top: auto;
  padding: 14px 0 2px;
}
.offer-reserved-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--faint);
}
.offer-reserved-value {
  font-family: var(--font-num);
  font-size: 20px;
  font-weight: 750;
  color: var(--amber);
  letter-spacing: -.02em;
}

/* Quote block on secondary-market cards */
.offer-quote {
  margin-top: auto;
  padding-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
}
.offer-quote > div { background: #fff; padding: 10px 12px; }
.offer-quote-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
}
.offer-quote-value {
  font-family: var(--font-num);
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -.02em;
}
.offer-quote-value.bid { color: var(--green); }
.offer-quote-value.ask { color: #d6474a; }

.offer-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 18px;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-alt);
  font-size: 12.5px;
  color: var(--muted);
}
.offer-foot .sep { width: 1px; height: 12px; background: var(--line); }
.offer-countdown { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.offer-foot .spacer { margin-left: auto; }
.offer-tag {
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-size: 11.5px;
  font-weight: 700;
}

/* Empty state */
.empty-note {
  padding: 44px 24px;
  text-align: center;
  color: var(--faint);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
}

/* Skeletons */
.skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 24px; }
.skeleton-card {
  height: 400px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    linear-gradient(90deg, var(--bg-alt) 25%, var(--bg-tint) 37%, var(--bg-alt) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ═══════════════════════════════════════════════════════════════════════════
   RISK BAND
   ═══════════════════════════════════════════════════════════════════════════ */
.risk {
  background: var(--ink);
  color: #fff;
  padding: 60px 0;
}
.risk-head { max-width: 720px; }
.risk-title {
  font-size: clamp(22px, 2.4vw, 27px);
  font-weight: 750;
  letter-spacing: -.018em;
}
.risk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.risk-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.1);
}
.risk-item img { width: 52px; height: 52px; flex: none; object-fit: contain; }
.risk-item-title { font-size: 16.5px; font-weight: 700; }
.risk-item-desc { margin-top: 2px; font-size: 13.5px; color: rgba(255,255,255,.62); line-height: 1.5; }

.risk-note {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,.66);
  max-width: 900px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOW IT WORKS
   ═══════════════════════════════════════════════════════════════════════════ */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 8px;
}
.step {
  position: relative;
  padding: 26px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.step-num {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.step-title { margin-top: 14px; font-size: 16.5px; font-weight: 700; color: var(--ink); }
.step-desc { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--muted); }

.raise-cta {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
  padding: 26px 30px;
  border-radius: var(--r-lg);
  background: linear-gradient(115deg, var(--ink) 0%, var(--ink-2) 100%);
  color: #fff;
}
.raise-cta-title { font-size: 19px; font-weight: 700; letter-spacing: -.012em; }
.raise-cta-sub { margin-top: 4px; font-size: 14.5px; color: rgba(255,255,255,.7); }
.raise-cta .btn { margin-left: auto; flex: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   APP DOWNLOAD
   ═══════════════════════════════════════════════════════════════════════════ */
.app-band {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 34px 36px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.app-copy { flex: 1; min-width: 0; }
.app-title { font-size: 20px; font-weight: 750; letter-spacing: -.015em; color: var(--ink); }
.app-sub { margin-top: 6px; font-size: 14.5px; color: var(--muted); }
.app-badges { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.app-badges img { height: 42px; width: auto; }
.app-qr { flex: none; text-align: center; }
.app-qr img { width: 104px; height: 104px; border-radius: var(--r); border: 1px solid var(--line); }
.app-qr span { display: block; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--faint); letter-spacing: .05em; }

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */
.site-footer { background: var(--ink); color: rgba(255,255,255,.72); padding: 60px 0 34px; font-size: 14px; }

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.11);
}
.footer-brand img { height: 26px; width: auto; filter: brightness(0) invert(1); opacity: .92; }
.footer-tagline { margin-top: 14px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.6); max-width: 300px; }

.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  transition: background-color .15s;
}
.footer-social a:hover { background: rgba(255,255,255,.18); }
.footer-social img { width: 17px; height: 17px; opacity: .85; }

.footer-col h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: 14px;
}
.footer-col li { margin-bottom: 9px; }
.footer-col a { color: rgba(255,255,255,.78); font-size: 14px; }
.footer-col a:hover { color: #fff; }

.footer-legal { padding-top: 30px; font-size: 12.5px; line-height: 1.72; color: rgba(255,255,255,.5); }
.footer-legal a { color: rgba(255,255,255,.78); text-decoration: underline; text-underline-offset: 2px; }
.footer-legal strong { color: rgba(255,255,255,.72); }
.footer-legal p + p { margin-top: 12px; }

.footer-regcf {
  display: block;
  margin-bottom: 22px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(255,255,255,.82);
}

.footer-bottom {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.11);
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12.5px;
  color: rgba(255,255,255,.5);
}
.footer-bottom .spacer { margin-left: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL (regional notice)
   ═══════════════════════════════════════════════════════════════════════════ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 15, 30, .62);
  backdrop-filter: blur(3px);
}
.modal {
  width: 100%;
  max-width: 560px;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  padding: 32px;
}
.modal h3 { font-size: 20px; font-weight: 750; color: var(--ink); letter-spacing: -.015em; }
.modal p { margin-top: 14px; font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.modal-actions { display: flex; gap: 12px; margin-top: 26px; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .footer-top { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .risk-grid { grid-template-columns: 1fr; }
  .app-band { flex-direction: column; align-items: flex-start; gap: 24px; }
  .app-qr { display: none; }
  .raise-cta { flex-direction: column; align-items: flex-start; }
  .raise-cta .btn { margin-left: 0; }
}

@media (max-width: 820px) {
  .wrap { padding: 0 18px; }

  .nav-toggle { display: block; order: 3; }
  .header-right { gap: 8px; }
  .header-right .btn { display: none; }

  /* On a phone the bar keeps only identity: avatar, mail and the hamburger.
     The language switch and the account destinations move into the drawer,
     so there is never more than one hamburger on screen. */
  .header-right .lang-switch { display: none; }
  .drawer-lang { display: flex; align-self: flex-start; margin-top: 14px; }
  body.is-authed .account-menu { display: none; }
  .account-chip { margin-left: auto; padding-right: 0; }
  .account-name { display: none; }

  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 18px 18px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-2);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s, transform .18s, visibility .18s;
  }
  .nav-open .main-nav { transform: translateY(0); opacity: 1; visibility: visible; }
  .main-nav a { padding: 13px 0; border-bottom: 1px solid var(--line-soft); font-size: 16px; }
  .main-nav a:last-child { border-bottom: 0; }
  /* Buttons in the drawer keep their own shape rather than the row treatment
     the plain links above get. */
  .main-nav .btn {
    display: flex;
    height: 44px;
    margin-top: 12px;
    padding: 0 22px;
    border-bottom: 0;
  }

  .hero-slides, .hero-body { min-height: 420px; }
  .hero-body { padding: 56px 0 92px; }


  .section { padding: 52px 0; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .section-link { margin-left: 0; }

  .card-grid, .skeleton-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}