/* koifi.app home — loaded after css/site.css + css/beta.css. The home page
   reuses /beta's sections (hero, growth path, 360° bento, five companions)
   through `.beta`; this file adds only what the home page has on its own:
   the hero art (the real-app phone with the egg beside it — never on top),
   the nav's Beta link, the "why KoiFi" cards and the waitlist steps. */

.nav .nav-links a.beta-link,.mmenu a.beta-link{color:var(--gold-l)}
.nav .btn-gold{flex:none}
.nav-links a{white-space:nowrap}
/* the section links fit one line only from 1100 px; below that they live in the burger menu */
@media (max-width:1099px){
  .nav-links{display:none}
  .burger{display:flex}
  .nav .lang{margin-left:auto}
}
.home .b-hero-copy .wl{display:flex;flex-direction:column}
.b-how.beta-cta{color:var(--gold-l)}
.home .b-hero h1{font-size:clamp(2.4rem,5.2vw,3.7rem)}

/* ── hero art: phone + egg side by side (≥1100 px), egg row above (<1100 px) ── */
.h-art{position:relative;display:flex;align-items:flex-end;justify-content:flex-end;gap:12px;min-width:0}
.h-art .b-glow{left:50%;top:50%;transform:translate(-50%,-50%)}
.h-phone{position:relative;flex:0 0 auto;width:270px;height:560px;border-radius:46px;background:#0C0B0A;padding:9px;border:1px solid rgba(216,176,152,.22);box-shadow:0 50px 100px rgba(0,0,0,.55),0 0 140px rgba(201,152,126,.12)}
.h-phone iframe{width:100%;height:100%;border:0;border-radius:37px;background:#F9F8F7;display:block}
.h-egg{position:relative;order:-1;display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:24px;flex:0 1 150px;min-width:0}
.home .h-egg .mstage{width:min(100%,150px)}
.h-egg .b-bubble{order:-1;margin:0;max-width:150px;min-height:0;font-size:.92rem;padding:10px 12px}
.h-egg .b-bubble::before{top:auto;bottom:-7px;transform:translateX(-50%) rotate(225deg)}
@media (prefers-reduced-motion:no-preference){.h-art .b-glow{animation:hglow 6s ease-in-out infinite}}
@keyframes hglow{0%,100%{transform:translate(-50%,-50%) scale(.96);opacity:.85}50%{transform:translate(-50%,-50%) scale(1.04);opacity:1}}
@media (max-width:1099px){
  .h-art{flex-direction:column;align-items:center;justify-content:flex-start}
  .h-egg{margin:0;flex:none;flex-direction:row;gap:12px}
  .h-egg .b-bubble{order:1;max-width:200px}
  .h-egg .b-bubble::before{top:50%;bottom:auto;left:-7px;transform:translateY(-50%) rotate(-45deg)}
  .home .h-egg .mstage{width:110px}
}
@media (max-width:860px){
  /* beta.css puts its companion first on phones; here the copy and the form come first */
  .home .h-art{order:0;margin-top:12px}
}
@media (max-width:380px){
  .h-phone{width:240px;height:498px;border-radius:40px}
  .h-phone iframe{border-radius:32px}
}

/* ── why KoiFi ── */
.repo{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.repo article{background:var(--bg-2);border:1px solid var(--border);border-radius:18px;padding:22px;min-width:0;display:flex;flex-direction:column;gap:10px}
.repo .vs{font:600 .7rem/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.repo h3{font-size:1.5rem;line-height:1.15;text-wrap:balance}
.repo p{color:var(--muted);font-size:.94rem;line-height:1.6}

/* ── companions: hover / focus waves ── */
.comp5{transition:border-color .3s}
.comp5 p,.stage-card p,.repo p{overflow-wrap:anywhere;hyphens:auto}
.comp5:hover{border-color:var(--border-2)}

/* ── waitlist steps ── */
.wsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 22px;list-style:none;text-align:left}
.wsteps li{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;min-width:0;display:flex;flex-direction:column;gap:6px}
.wsteps b{font:600 .7rem/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.wsteps span{font-size:.88rem;line-height:1.5;color:var(--ink)}
.wait .section-sub{margin-bottom:22px}
.perks{list-style:none}
.joined:focus{outline:none}
.joined:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px}
.wait .btn:focus-visible,.wait input:focus-visible,.faq summary:focus-visible,.footer a:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px}

@media (max-width:1060px) and (min-width:861px){
  .wsteps{grid-template-columns:1fr}
}
@media (max-width:980px){
  .repo{grid-template-columns:1fr}
}
@media (max-width:860px){
  .wait .section-sub,.wait .form-err{margin-left:auto;margin-right:auto}
}
@media (max-width:600px){
  .wsteps{grid-template-columns:1fr}
}