/* ── KCB Mortgage Landing · LIME POSTER — base: tokens, shell, preloader, nav, type, hero, marquee ── */
:root {
  /* Official KCB logo colors: lime #80BC00 + navy #003057 (+ gold accent) */
  --lime: #80bc00;
  --lime-soft: #8fd40a;
  --navy: #003057;
  --navy-deep: #00203a;
  --gold: #ffd700;
  --paper: #fff;
  --display: 'Outfit', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* no CSS smooth-scroll: it fights ScrollTrigger pinning; anchors are smoothed in JS */
html, body { overflow-x: clip; overflow-anchor: none; }
body {
  font-family: var(--display);
  background: var(--lime);
  color: var(--navy-deep);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--navy); color: var(--lime); }

#bg3d { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
main, header.nav, footer.foot { position: relative; z-index: 2; }

/* grain overlay */
.grain {
  position: fixed; inset: -50%; width: 200%; height: 200%;
  z-index: 40; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 1.4s steps(4) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); } 25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -2%); } 75% { transform: translate(-1%, 2%); }
  100% { transform: translate(0, 0); }
}

/* custom cursor */
.cursor, .cursor-dot { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 90; border-radius: 50%; }
.cursor { width: 36px; height: 36px; border: 2px solid var(--navy); margin: -18px 0 0 -18px; transition: transform .25s ease, opacity .25s ease; opacity: 0; }
.cursor-dot { width: 7px; height: 7px; background: #fff; border: 1px solid var(--navy); margin: -4px 0 0 -4px; opacity: 0; }
body.cursor-on .cursor, body.cursor-on .cursor-dot { opacity: 1; }
body.cursor-hover .cursor { transform: scale(1.9); background: rgba(0, 48, 87, .1); }
@media (pointer: coarse) { .cursor, .cursor-dot { display: none; } }

/* scroll progress */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 5px; width: 100%;
  background: var(--gold); border-bottom: 2px solid var(--navy);
  transform-origin: 0 50%; transform: scaleX(0); z-index: 80;
}

/* ── preloader ── */
.preloader {
  position: fixed; inset: 0; z-index: 100; background: var(--lime);
  display: flex; align-items: center; justify-content: center;
}
.pre-inner { text-align: center; }
.pre-logo { height: 38px; width: auto; margin: 0 auto 1.6rem; border: 3px solid var(--navy); box-shadow: 6px 6px 0 var(--navy); }
.pre-rate { font-weight: 900; font-size: clamp(4rem, 16vw, 11rem); line-height: 1; color: var(--navy); }
.pre-pct { color: #fff; text-shadow: 4px 4px 0 var(--navy); font-size: .5em; }
.pre-tag { margin-top: .8rem; font-size: .85rem; font-weight: 600; color: rgba(0, 48, 87, .8); }
.pre-bar { width: min(280px, 60vw); height: 8px; background: rgba(0, 48, 87, .2); border: 2px solid var(--navy); margin: 1.6rem auto 0; overflow: hidden; }
.pre-bar span { display: block; height: 100%; width: 100%; background: var(--navy); transform: scaleX(0); transform-origin: 0 50%; }

/* ── nav (centered) ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 1.1rem clamp(1.2rem, 4vw, 3rem);
  background: linear-gradient(to bottom, rgba(128, 188, 0, .94), transparent);
}
.nav-brand { display: flex; align-items: center; gap: .8rem; }
.nav-logo-img { height: 102px; width: auto; border: 3px solid var(--navy); }
.nav-divider { width: 3px; height: 70px; background: var(--navy); }
.nav-sub { font-size: 2.7rem; color: var(--navy); font-weight: 800; }

/* ── shared type ── */
.st { font-weight: 900; line-height: 1.02; font-size: clamp(2.2rem, 5.6vw, 4.6rem); text-align: center; text-transform: uppercase; color: var(--navy); }
.lede { max-width: 640px; font-size: clamp(1rem, 1.4vw, 1.2rem); margin-inline: auto; text-align: center; font-weight: 500; }
.fine { font-size: .85rem; opacity: .65; }

.btn {
  display: inline-block; font-weight: 800; font-size: .98rem;
  padding: 1.05rem 2.1rem; border: 3px solid var(--navy); box-shadow: 6px 6px 0 var(--navy-deep);
  transition: transform .15s ease, box-shadow .15s ease, background .2s, color .2s;
}
.btn:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--navy-deep); }
.btn-solid { background: var(--navy); color: #fff; }
.btn-solid:hover { background: var(--navy-deep); }
.btn-ghost { background: transparent; color: var(--navy); }
.btn-ghost:hover { background: var(--navy); color: var(--lime); }

/* ── act 1 · hero ── */
.hero {
  min-height: 100svh; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; text-align: center;
  padding: 6rem clamp(1.2rem, 5vw, 4.5rem) max(7.5vh, 3.5rem);
  position: relative;
}
.hero-title { font-weight: 900; font-size: clamp(2.7rem, 8.6vw, 7.2rem); line-height: .98; color: var(--navy); text-transform: uppercase; }
.hero-title .line { display: block; }
.hero-title em { font-style: normal; background: var(--navy); color: var(--lime); padding: 0 .14em; box-decoration-break: clone; }
.hero-rate { display: flex; align-items: baseline; justify-content: center; gap: .25rem; margin-top: 1.2rem; }
.rate-num { font-weight: 900; font-size: clamp(3.2rem, 6.5vw, 5.4rem); line-height: 1; color: var(--navy); text-shadow: .07em .07em 0 var(--gold); }
.rate-pct { font-weight: 900; font-size: clamp(1.7rem, 3.2vw, 2.7rem); color: var(--navy); text-shadow: .07em .07em 0 #fff; }
.hero-sub { max-width: 560px; font-size: clamp(.95rem, 1.4vw, 1.15rem); color: rgba(0, 32, 58, .92); margin-top: 1rem; font-weight: 500; }
.hero-sub strong { color: var(--navy); font-weight: 800; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; margin-top: 2rem; }
.scroll-cue {
  margin-top: 2.6rem;
  font-size: .8rem; color: var(--navy); font-weight: 700;
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
}
.cue-line { width: 3px; height: 44px; background: linear-gradient(var(--navy), transparent); display: block; animation: cue 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0%, 100% { transform: scaleY(.35); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* gold sticker badge */
.badge {
  position: absolute; right: clamp(.8rem, 7vw, 9rem); top: clamp(5.5rem, 14vh, 9rem); z-index: 3;
  width: clamp(96px, 13vw, 168px); aspect-ratio: 1; border-radius: 50%;
  background: var(--gold); border: 3px solid var(--navy); box-shadow: 7px 7px 0 rgba(0, 32, 58, .4);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1em;
  rotate: -10deg; pointer-events: none;
}
.badge b { font-weight: 900; font-size: clamp(1.5rem, 2.6vw, 2.4rem); line-height: 1; color: var(--navy); }
.badge span { font-size: clamp(.55rem, .85vw, .75rem); font-weight: 800; color: var(--navy); }

/* ── marquee sandwich ── */
.marquee-band { position: relative; z-index: 2; }
.marquee { overflow: hidden; padding: 1.05rem 0; background: var(--gold); color: var(--navy); border-block: 4px solid var(--navy); }
.marquee.marquee-rev { background: var(--navy); color: var(--lime); border-top: 0; }
.marquee-inner { display: flex; width: max-content; white-space: nowrap; will-change: transform; }
.marquee-inner span { font-weight: 800; font-size: clamp(1rem, 2.2vw, 1.5rem); padding-right: .5em; text-transform: uppercase; }
.marquee-inner i { font-style: normal; padding: 0 .55em; opacity: .7; }

/* hazard stripe divider */
.hazard {
  height: 18px; position: relative; z-index: 2;
  background: repeating-linear-gradient(-45deg, var(--navy) 0 16px, var(--lime) 16px 32px);
  border-block: 3px solid var(--navy);
}