/* GENERATED by gi_home.py from gi.css + gi_home.css. Edit those, never this file. */
.gi-home .gi-stars, .gi-home .gi-stars::after { position: absolute; inset: 0; background-image:
  radial-gradient(1px 1px at 11% 22%, rgba(255,255,255,.75) 50%, transparent 51%), radial-gradient(1.4px 1.4px at 31% 9%, rgba(255,255,255,.85) 50%, transparent 51%),
  radial-gradient(1px 1px at 47% 30%, rgba(255,255,255,.55) 50%, transparent 51%), radial-gradient(1px 1px at 62% 14%, rgba(255,255,255,.65) 50%, transparent 51%),
  radial-gradient(1.3px 1.3px at 76% 56%, rgba(255,255,255,.7) 50%, transparent 51%), radial-gradient(1px 1px at 89% 8%, rgba(255,255,255,.55) 50%, transparent 51%),
  radial-gradient(1px 1px at 22% 70%, rgba(255,255,255,.4) 50%, transparent 51%), radial-gradient(1.2px 1.2px at 94% 86%, rgba(255,255,255,.5) 50%, transparent 51%),
  radial-gradient(1.6px 1.6px at 56% 78%, rgba(255,226,160,.8) 50%, transparent 51%);
  background-size: 520px 420px; animation: gi-twinkle 6s ease-in-out infinite alternate; }
.gi-home .gi-stars::after { content: ""; background-size: 330px 290px; background-position: 140px 70px; opacity: .65; animation-delay: -3s; }
@keyframes gi-twinkle { from { opacity: .35; } to { opacity: 1; } }
.gi-home .gi-spot { position: absolute; inset: 0; background: radial-gradient(560px circle at var(--mx, 72%) var(--my, 45%), rgba(251, 181, 42, .11), rgba(251, 181, 42, .035) 42%, transparent 70%); }
.gi-home .gi-current { position: absolute; right: -6%; top: 4%; width: 58%; height: 88%; fill: var(--pale); opacity: .55; animation: drift 46s ease-in-out infinite alternate; }
.gi-home .gi-current--dark { fill: var(--sea-2); opacity: .28; left: -8%; right: auto; top: 10%; animation-duration: 38s; }
.gi-home .gi-motes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.gi-home .gi-motes i { position: absolute; left: var(--x); bottom: -10px; width: var(--s); height: var(--s); border-radius: 50%; background: var(--light-soft); box-shadow: 0 0 6px 2px rgba(251, 181, 42, .6); opacity: 0; animation: gi-rise var(--d) linear var(--dl) infinite; }
@keyframes gi-rise { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .95; } 50% { transform: translate(14px, calc(var(--rise) * -.5)); } 85% { opacity: .5; } 100% { transform: translate(-10px, calc(var(--rise) * -1)); opacity: 0; } }
.gi-home .gi-ico { position: relative; display: inline-block; flex: none; width: 4rem; height: 4rem; color: var(--light);
  filter: drop-shadow(0 0 2px rgba(251, 181, 42, .95)) drop-shadow(0 0 10px rgba(251, 181, 42, .55)) drop-shadow(0 0 30px rgba(251, 181, 42, .3)); }
.gi-home .gi-ico svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gi-home .gi-ico .gi-core { stroke: #fff6dc; stroke-width: .7; }
.gi-home .gi-ico g, .gi-home .gi-ico path { transform-box: view-box; }
.gi-home .gi-ico .wi-dot { fill: currentColor; stroke: none; }
.gi-home .gi-ico .gi-core .wi-dot { fill: #fff6dc; }
.gi-home .gi-ico--big { position: relative; z-index: 3; width: 62%; height: 62%; }
.gi-home .gi-ico--big svg { stroke-width: 1.2; }
.gi-home .gi-ico--big .gi-core { stroke-width: .4; }
.gi-home .is-live .gi-ico--big { animation: gi-flicker 1.3s linear both; }
@keyframes gi-flicker { 0% { opacity: 0; } 8% { opacity: .9; } 12% { opacity: .15; } 22% { opacity: 1; } 26% { opacity: .35; } 34%, 100% { opacity: 1; } }
.gi-home .gi-ico--chip { width: 1.75rem; height: 1.75rem; }
.gi-home .gi-ico--chip svg { stroke-width: 2.6; }
.gi-home .gi-ico--chip .gi-core { display: none; }
@property --gi-turn { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@keyframes gi-turn { to { --gi-turn: 360deg; } }
@keyframes gi-core { 0%, 100% { transform: scale(.92); opacity: .85; } 50% { transform: scale(1.08); opacity: 1; } }
.gi-home .gi-orbit__item .gi-ico { position: absolute; width: calc(var(--o) * .13); height: calc(var(--o) * .13); left: calc(var(--o) * -.065); top: calc(var(--o) * -.065); animation: gi-spin 54s linear infinite reverse; }
@keyframes gi-spin { to { transform: rotate(360deg); } }
.gi-home .gi-count { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.2rem; font: 600 1.05rem/1 var(--font-display); letter-spacing: .1em; color: var(--mist); }
.gi-home .gi-count b { font-weight: 600; color: var(--light); text-shadow: 0 0 14px rgba(251, 181, 42, .65); }
.gi-home .gi-count span { width: 2.8rem; height: 1px; background: currentColor; opacity: .55; }
.gi-home .gi-art { position: relative; z-index: 1; display: grid; place-items: center; width: min(30rem, 34vw); aspect-ratio: 1; margin-inline: auto;
  translate: calc(var(--px, 0) * 18px) calc(var(--py, 0) * 14px); transition: translate .8s var(--ease), opacity .9s var(--ease), transform 1s var(--ease); }
.gi-home .gi-art.reveal { transform: scale(.92); }
.gi-home .gi-art.reveal.is-in { transform: none; }
.gi-home .gi-pool { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle, rgba(251, 181, 42, .3), rgba(251, 181, 42, .08) 45%, transparent 70%); filter: blur(12px); animation: gi-breathe 5s ease-in-out infinite; }
@keyframes gi-breathe { 0%, 100% { transform: scale(.92); opacity: .75; } 50% { transform: scale(1.06); opacity: 1; } }
.gi-home .gi-pulse { position: absolute; inset: 20%; border-radius: 50%; border: 1.5px solid rgba(251, 181, 42, .6); box-shadow: 0 0 20px rgba(251, 181, 42, .35), inset 0 0 20px rgba(251, 181, 42, .2); opacity: 0; animation: gi-pulse 4.5s var(--ease) calc(var(--k, 0) * 1.5s) infinite; }
@keyframes gi-pulse { 0% { transform: scale(.5); opacity: 0; } 20% { opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.gi-home .gi-art--fund .gi-motes { inset: 10% 15% 18%; }
.gi-home .gi-port { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; isolation: isolate;
  background: radial-gradient(circle at 50% 42%, #10397e 0%, var(--night) 62%, var(--abyss) 100%);
  box-shadow: 0 0 0 12px rgba(8, 51, 125, .06), 0 0 0 1px rgba(8, 51, 125, .16), 0 60px 100px -45px rgba(6, 38, 94, .7), inset 0 0 70px rgba(0, 0, 0, .5); }
.gi-home .gi-port::after { content: ""; position: absolute; inset: 4%; border-radius: 50%; border: 1px solid rgba(251, 181, 42, .22); pointer-events: none; }
.gi-home .gi-port .gi-stars { background-size: 260px 240px; }
.gi-home .gi-art--partner .gi-ico svg:first-child path { fill: rgba(7, 26, 66, .92); }
.gi-home .gi-wire { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; fill: none; stroke: var(--light); stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(251, 181, 42, .9)); stroke-dasharray: 100; stroke-dashoffset: 100; animation: gi-wire 3.6s var(--ease) infinite; }
@keyframes gi-wire { 0% { stroke-dashoffset: 100; opacity: .9; } 35%, 78% { stroke-dashoffset: 0; opacity: .9; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.gi-home .gi-node { position: absolute; z-index: 2; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--light); box-shadow: 0 0 0 5px rgba(251, 181, 42, .16), 0 0 20px rgba(251, 181, 42, .95); animation: gi-node 3.6s ease-in-out infinite; }
.gi-home .gi-node--a { left: 15%; top: 70%; }
.gi-home .gi-node--b { left: 85%; top: 30%; animation-delay: -1.3s; }
@keyframes gi-node { 0%, 100% { transform: scale(.8); } 35% { transform: scale(1.35); } }
.gi-home .gi-grid { position: absolute; inset: 0; border-radius: 50%;
  background: repeating-radial-gradient(circle closest-side, transparent 0 calc(20% - 1px), rgba(219, 232, 242, .13) calc(20% - 1px) 20%),
    linear-gradient(transparent calc(50% - .5px), rgba(219, 232, 242, .13) 0 calc(50% + .5px), transparent 0),
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(219, 232, 242, .13) 0 calc(50% + .5px), transparent 0); }
.gi-home .gi-radar { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg, transparent 280deg, rgba(251, 181, 42, .18) 352deg, rgba(255, 220, 140, .42) 360deg); animation: gi-spin 5s linear infinite; }
.gi-home .gi-blip { position: absolute; z-index: 2; left: var(--bx); top: var(--by); width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: var(--light-soft); box-shadow: 0 0 14px 4px rgba(251, 181, 42, .7); opacity: 0; animation: gi-blip 5s linear var(--bd) infinite; }
@keyframes gi-blip { 0% { opacity: 1; transform: scale(1.4); } 55% { opacity: .15; transform: scale(1); } 100% { opacity: 0; } }
@keyframes gi-marq { to { transform: translateX(-50%); } }
@keyframes gi-sweep { 0% { transform: translateX(-30vw) skewX(-18deg); } 60%, 100% { transform: translateX(110vw) skewX(-18deg); } }
.gi-home .gi-dash { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(251, 181, 42, .6); stroke-width: 1; stroke-dasharray: 1.5 7; stroke-linecap: round; animation: gi-spin 40s linear infinite; }
.gi-home .gi-dash--2 { stroke: rgba(219, 232, 242, .35); stroke-dasharray: 14 10; animation-duration: 26s; animation-direction: reverse; }
.gi-home .gi-sat { position: absolute; inset: 2%; animation: gi-spin 9s linear infinite; }
.gi-home .gi-sat i { position: absolute; left: 50%; top: 0; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #fff6dc; box-shadow: 0 0 0 4px rgba(251, 181, 42, .2), 0 0 22px 6px rgba(251, 181, 42, .8); }
.gi-home .gi-soon { margin: 0; font: 600 clamp(2.2rem, 3.6vw, 3.2rem)/1 var(--font-display); color: var(--light); text-shadow: 0 0 22px rgba(251, 181, 42, .55); animation: gi-glow 3.2s ease-in-out infinite; }
@keyframes gi-glow { 0%, 100% { text-shadow: 0 0 14px rgba(251, 181, 42, .35); } 50% { text-shadow: 0 0 30px rgba(251, 181, 42, .8); } }
.gi-home .gi-ico--mini { width: 2.6rem; height: 2.6rem; }
.gi-home .gi-ico--mini .gi-core { display: none; }
@property --gi-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes gi-ang { to { --gi-ang: 360deg; } }

/* Home "Join us", staged like Get involved (2026-10-04). Loads BEFORE site.css, so every rule starts with .gi-home.
   Blue = ocean and night; yellow = the light only. gi.js marks the head and each card .is-live while it is in view. */

.sec.gi-home { position: relative; isolation: isolate; overflow: hidden; color: var(--paper);
  background: radial-gradient(70% 55% at 78% 20%, #0e3478 0%, var(--night) 55%, var(--abyss) 100%); }
.gi-home .gi-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.gi-home .sec__inner { position: relative; z-index: 1; }

/* the head: the title alone (2026-10-04: no lamp with circling icons in this corner) */
.gi-home .gh-head { display: block; }
.gi-home .gh-title { margin: .9rem 0 0; font-size: clamp(4rem, 10vw, 9.6rem); line-height: .95; color: var(--paper); text-shadow: 0 0 50px rgba(251, 181, 42, .14); }

/* the cards: one lit scene per way, numbered like the Get involved screens */
.gi-home .gh-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.gi-home .gh-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 13rem); align-items: center; gap: 1.5rem;
  padding: clamp(1.6rem, 2.6vw, 2.4rem); border: 1px solid rgba(219, 232, 242, .14); border-radius: 18px; overflow: hidden;
  background: radial-gradient(90% 120% at 85% 50%, rgba(14, 52, 120, .6), rgba(5, 16, 45, .62) 62%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color .35s, box-shadow .35s, opacity .7s var(--ease), transform .7s var(--ease); }
.gi-home .gh-card:hover { border-color: rgba(251, 181, 42, .45); box-shadow: 0 0 40px rgba(251, 181, 42, .12), 0 40px 80px -50px rgba(0, 0, 0, .8); }
.gi-home .gh-copy { position: relative; z-index: 2; }
.gi-home .gi-count { margin-bottom: 1rem; }
.gi-home .gh-card h3 { margin: 0; font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1; color: var(--paper); }
.gi-home .gh-card h3::after { content: ""; display: block; width: 2.2rem; height: 2px; margin-top: 1rem; background: var(--light); box-shadow: 0 0 10px rgba(251, 181, 42, .6); }
.gi-home .gh-card p { margin: 1rem 0 0; max-width: 26rem; line-height: 1.6; color: #c7d6e4; }
.gi-home .gh-card .gi-soon { font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height: 1; color: var(--light); }
.gi-home .gh-card .btns { margin-top: 1.4rem; }
.gi-home .btn--primary { background: var(--light); color: var(--ink); } .gi-home .btn--primary:hover { background: var(--paper); color: var(--ink); }

/* the drawings, card-sized; the round windows sit on night glass here, not on paper */
.gi-home .gi-art { width: 100%; max-width: 13rem; }
.gi-home .gi-port { box-shadow: 0 0 0 8px rgba(219, 232, 242, .04), 0 0 0 1px rgba(219, 232, 242, .16), inset 0 0 50px rgba(0, 0, 0, .5); }
.gi-home .gi-port .gi-stars { background-size: 180px 170px; }

/* only what is in view moves (and the icons flicker on each time a card arrives) */
.gi-ready .gi-home .gh-live:not(.is-live) * { animation-play-state: paused !important; }

@media (max-width: 1100px) { .gi-home .gh-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .gi-home .gh-card { grid-template-columns: minmax(0, 1fr); }
  .gi-home .gi-art { order: -1; max-width: 11rem; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .gi-home .gi-motes, .gi-home .gi-pulse { display: none; }
  .gi-home .gi-bg *, .gi-home .gi-art *, .gi-home .gi-ico, .gi-home .gi-ico *, .gi-home .gi-soon, .gi-home .gi-stars::after { animation: none !important; }
  .gi-home .gi-wire { stroke-dashoffset: 0; } .gi-home .gi-blip { opacity: .8; }
}