/* KRU — marketing homepage: hero, ticker, colour blocks, phone mockups, stats. */
#home{background:#0B0420;color:#fff;overflow-x:hidden}
#home h2,#home h3{margin:0}

/* full-bleed colour blocks */
.block{padding:clamp(64px,9vw,120px) 0}
.block .wrap{display:grid;grid-template-columns:1fr minmax(260px,420px);gap:clamp(32px,5vw,70px);align-items:center}
.block.flip .wrap{grid-template-columns:minmax(260px,420px) 1fr}
.block.flip .copy{order:2}
.b-violet{background:var(--kru-violet);color:#fff}
.b-amber{background:var(--kru-amber);color:#1B1033}
.b-lilac{background:var(--kru-lilac);color:var(--kru-ink)}
.b-night{background:#0B0420;color:#fff}

.giant{
  font-family:var(--kru-display);font-weight:800;letter-spacing:-.045em;line-height:.88;
  font-size:clamp(46px,10.5vw,126px);margin:0;
}
.big{
  font-family:var(--kru-display);font-weight:800;letter-spacing:-.04em;line-height:.92;
  font-size:clamp(34px,5.6vw,66px);margin:0 0 18px;
}
.lede{font-size:clamp(17px,1.6vw,20px);line-height:1.45;max-width:34ch;margin:0 0 28px;opacity:.78}
.b-amber .lede,.b-lilac .lede{opacity:.72}
.tagline{font-family:var(--kru-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin:0 0 22px;opacity:.6}
.b-violet .tagline{color:#F3E9FF;opacity:.85}
.b-amber .tagline{opacity:.6}

.hero{padding:clamp(40px,6vw,74px) 0 clamp(64px,8vw,100px)}
/* The mockup column is capped at .phone's own 320px, so reserving 400px here
   left ~80px of dead air beside it and squeezed the headline into a fourth
   line. Matching the two gives the display type the width it was drawn for. */
.hero .wrap{display:grid;grid-template-columns:1.15fr minmax(250px,320px);gap:clamp(30px,5vw,64px);align-items:center}
.hero .giant em{font-style:normal;color:var(--kru-amber)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero-note{font-family:var(--kru-mono);font-size:12px;opacity:.45;margin:20px 0 0}

/* sticker strip */
.strip-tags{background:var(--kru-amber);color:#1B1033;padding:16px 0;overflow:hidden;white-space:nowrap}
.strip-tags .run{display:inline-flex;gap:40px;font-family:var(--kru-display);font-weight:700;font-size:clamp(17px,2vw,24px);letter-spacing:-.02em;animation:slide 26s linear infinite;padding-right:40px}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.strip-tags b{font-weight:700}
.strip-tags span{opacity:.45}

/* phone mockups */
.phone{
  width:100%;max-width:320px;margin:0 auto;aspect-ratio:9/18.6;
  background:#100630;border-radius:38px;padding:10px;
  box-shadow:0 40px 70px -30px rgba(0,0,0,.65),0 0 0 1.5px rgba(255,255,255,.14);
  position:relative;
}
.b-amber .phone,.b-lilac .phone{box-shadow:0 40px 70px -30px rgba(43,17,96,.5),0 0 0 1.5px rgba(27,16,51,.14)}
.phone::before{content:"";position:absolute;top:16px;left:50%;transform:translateX(-50%);width:74px;height:6px;border-radius:99px;background:rgba(255,255,255,.22);z-index:2}
.scr{height:100%;border-radius:29px;padding:34px 18px 20px;display:flex;flex-direction:column;gap:12px;overflow:hidden;font-size:13px}
.scr-violet{background:linear-gradient(170deg,#7B4BFF,#4A1FBF 65%,#3A159F);color:#fff}
.scr-white{background:#fff;color:var(--kru-ink)}
.scr-night{background:#150735;color:#fff}
.scr .top-line{display:flex;align-items:center;justify-content:space-between;font-family:var(--kru-mono);font-size:10.5px;opacity:.6}
.balance{font-family:var(--kru-display);font-weight:800;font-size:38px;letter-spacing:-.04em;line-height:1;margin:14px 0 2px}
.bal-lab{font-family:var(--kru-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.65}
.chip-row{display:flex;gap:8px;margin-top:14px}
.chip-row button,.chip-row span{flex:1;border:0;border-radius:11px;padding:11px 0;text-align:center;font-weight:600;font-size:12.5px;background:rgba(255,255,255,.16);color:#fff}
.scr-white .chip-row span{background:var(--kru-lilac);color:var(--kru-violet)}
.feed{margin-top:auto;display:grid;gap:9px}
.fr{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.1);border-radius:13px;padding:10px 12px}
.scr-white .fr{background:#F6F2FF}
.fr .ic{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.scr-white .fr .ic{background:var(--kru-violet);color:#fff}
.fr .who{flex:1;min-width:0}
.fr .who b{display:block;font-size:12.5px;font-weight:600}
.fr .who small{font-size:10.5px;opacity:.6}
.fr .v{font-family:var(--kru-mono);font-size:12px}
.fr .v.in{color:#5BE7A9}
.scr-white .fr .v.in{color:#0E9C6B}

.keyed{font-family:var(--kru-display);font-weight:800;font-size:46px;letter-spacing:-.04em;text-align:center;margin:26px 0 6px}
.keyed-sub{text-align:center;font-size:12px;opacity:.6;margin:0}
.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:auto}
.numpad span{padding:11px 0;text-align:center;font-size:16px;font-weight:600;border-radius:10px;background:rgba(255,255,255,.09)}
.scr-white .numpad span{background:#F4F0FF}
.tagpill{align-self:center;background:rgba(255,255,255,.18);border-radius:99px;padding:7px 16px;font-family:var(--kru-mono);font-size:12.5px;margin-top:6px}
.scr-white .tagpill{background:var(--kru-lilac);color:var(--kru-violet)}
.qr-mini{width:132px;height:132px;margin:16px auto 0;background:#fff;border-radius:14px;padding:9px}
.qr-mini svg{width:100%;height:100%;display:block}
.scan-note{text-align:center;font-size:12px;opacity:.65;margin:12px 0 0}
.paid-tick{width:52px;height:52px;border-radius:50%;background:var(--kru-mint);display:grid;place-items:center;margin:auto auto 0;color:#fff;font-size:24px}

/* numbers row */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.14)}
.stat{background:#0B0420;padding:clamp(26px,4vw,44px) clamp(18px,3vw,32px)}
.stat b{display:block;font-family:var(--kru-display);font-weight:800;font-size:clamp(32px,4.6vw,54px);letter-spacing:-.04em;line-height:1;margin-bottom:8px}
.stat span{font-size:14.5px;opacity:.6}

/* closing */
.close{background:var(--kru-violet);text-align:center;padding:clamp(70px,10vw,130px) 0}
.close .giant{margin-bottom:30px}
.close .hero-cta{justify-content:center}

/* Two-column range only: hold the headline to the three lines it is written
   as. Below 860px the copy spans the full width and the base size already
   fits, so mobile and tablet keep the larger type. */
@media (min-width:861px){
  .hero .giant{font-size:clamp(46px,8.5vw,118px)}
}

@media (max-width:860px){
  .hero .wrap,.block .wrap,.block.flip .wrap{grid-template-columns:1fr}
  .block.flip .copy{order:0}
  .phone{max-width:280px}
  .stats{grid-template-columns:1fr}
}