/* /home: the landing page. The observation field full screen with the ψ mark at its centre, the line, $PSI's CA and
 * three ways in; then how it works, the live numbers and $PSI. Tokens and components live in site.css / sections.css. */
.home-page .hero.home { height: auto; min-height: max(100svh, 720px); display: grid; place-items: center; padding: calc(64px + 24px + env(safe-area-inset-top, 0px)) var(--gutter) 88px; }
.home-page .hero::after { height: 26%; }
.home-center { position: relative; z-index: 3; width: 100%; max-width: 920px; display: grid; justify-items: center; text-align: center; }
.home .hero-mark { position: relative; left: auto; top: auto; transform: none; width: clamp(120px, 19vmin, 220px); margin-bottom: clamp(18px, 3.4vh, 34px); opacity: 1; }
.home-eyebrow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.home-eyebrow i { font-style: normal; color: var(--cherenkov); margin: 0 6px; }
.home h1 { margin: 16px 0 0; font-weight: 500; font-size: clamp(42px, 7vw, 104px); line-height: .96; letter-spacing: -0.05em; text-wrap: balance; max-width: 13ch; }
.home-sub { margin: 22px 0 0; color: var(--muted); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; max-width: 58ch; text-wrap: pretty; }

/* $PSI's CA: one line, tap to copy */
.home-ca { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; margin-top: 30px; padding: 10px 12px 10px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--glass); color: var(--ink); font-size: clamp(12px, 1.25vw, 15px); letter-spacing: .02em; cursor: copy; transition: border-color var(--t-snap) var(--snap); }
.home-ca:hover { border-color: rgba(46, 230, 255, .35); }
.home-ca .k { flex: none; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.home-ca .v { min-width: 0; overflow-wrap: anywhere; text-align: left; }
.home-ca .cp { flex: none; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--void); background: var(--ink); border-radius: 4px; padding: 5px 8px; }
.home-ca:hover .cp { background: var(--cherenkov); }
.home-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.home-scroll { position: absolute; z-index: 3; left: 50%; bottom: 26px; transform: translateX(-50%); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); transition: color var(--t-snap); }
.home-scroll:hover { color: var(--ink); }

/* the page settles in: the mark resolves, then the words */
@media (prefers-reduced-motion: no-preference) {
  .home .hero-mark { animation: home-mark 1100ms var(--snap) both; }
  .home-eyebrow, .home h1, .home-sub, .home-ca, .home-cta { animation: settle 900ms var(--snap) both; }
  .home-eyebrow { animation-delay: 220ms; } .home h1 { animation-delay: 300ms; } .home-sub { animation-delay: 380ms; } .home-ca { animation-delay: 460ms; } .home-cta { animation-delay: 520ms; }
}
@keyframes home-mark { 0% { opacity: 0; filter: blur(14px); transform: scale(1.14); } 55% { opacity: 1; } 100% { opacity: 1; filter: none; transform: none; } }

.home-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-link { color: var(--ink); border-bottom: 1px solid var(--dim); }
.home-link:hover { border-color: var(--cherenkov); }

.home-psi-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; }
.home-psi-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--glass); padding: 24px; display: grid; gap: 16px; min-width: 0; }
.home-psi-card .k { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.home-ca-big { padding: 0; border: 0; background: none; color: var(--ink); text-align: left; font-size: clamp(15px, 1.7vw, 22px); line-height: 1.35; letter-spacing: .02em; overflow-wrap: anywhere; cursor: copy; }
.home-ca-big:hover .tail { text-shadow: 0 0 22px var(--cherenkov); }
.home-psi-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 860px) {
  .home-steps { grid-template-columns: minmax(0, 1fr); }
  .home-psi-grid { grid-template-columns: minmax(0, 1fr); }
  .home-ca { flex-wrap: wrap; justify-content: center; }
  .home-ca .v { text-align: center; }
}
@media (max-width: 480px) {
  .home-cta .btn { flex: 1 1 100%; }
  .home-scroll { display: none; }
}

/* a soft dark halo behind the words, so they read over the field without boxing them in */
.home-center::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 58%; width: min(1100px, 130%); height: 78%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(5, 5, 7, .82), rgba(5, 5, 7, .5) 55%, rgba(5, 5, 7, 0)); pointer-events: none; }
@media (max-width: 480px) {
  .home-ca .v { font-size: 10.5px; letter-spacing: 0; white-space: nowrap; }
  .home-ca-big { font-size: 13px; letter-spacing: 0; }
}