html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; width: 0; height: 0; }
html body main { position: relative; isolation: isolate; }
html body main > .figma-home.river-hero { position: sticky; z-index: 0; top: 0; }
.figma-home .figma-home__background { transform: scale(var(--hero-exit-scale, 1)); transform-origin: 50% 50%; filter: saturate(var(--hero-exit-saturation, 1)) brightness(var(--hero-exit-brightness, 1)); background: #043d78 url("assets/figma-home/homepage-video-poster.png") center / cover no-repeat; }
.figma-home .figma-home__background > video { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

.hero-route { position: absolute; z-index: 6; top: 0; left: 50%; width: min(680px, 54vw); height: 100%; color: rgba(241,251,255,.9); transform: translate(-50%,44px); pointer-events: none; }
.hero-route__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-route__glow,.hero-route__stroke { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hero-route__glow { stroke: rgba(78,202,255,.46); stroke-width: 10; filter: url(#home-route-glow); }
.hero-route__stroke { stroke: rgba(239,252,255,.96); stroke-width: 2.1; animation: route-current 5.6s ease-in-out infinite; }
.hero-route__node { position: absolute; z-index: 2; top: var(--node-y); left: var(--node-x); width: 8px; height: 8px; border-radius: 50%; background: #f6fdff; box-shadow: 0 0 5px #55d8ff,0 0 11px rgba(85,216,255,.72); transform: translate(-50%,-50%); animation: route-node-pulse 3.8s ease-in-out infinite; }
.hero-route__node:nth-of-type(2) { animation-delay: -.7s; }.hero-route__node:nth-of-type(3) { animation-delay: -1.4s; }.hero-route__node:nth-of-type(4) { animation-delay: -2.1s; }.hero-route__node:nth-of-type(5) { animation-delay: -2.8s; }
.hero-route__connectors path { fill: none; stroke: rgba(223,248,255,.7); stroke-width: 1.4; stroke-linecap: round; }
.hero-route__step { position: absolute; display: flex; align-items: center; gap: 7px; min-width: 84px; opacity: .78; text-shadow: 0 0 8px rgba(92,196,255,.6); transform: translateY(-50%); animation: route-label-float 6.4s ease-in-out var(--step-delay,0s) infinite; }
.hero-route__step img { width: 22.4px; height: 22.4px; padding: 3.5px; border: 1px solid rgba(231,250,255,.86); border-radius: 50%; filter: brightness(0) invert(1) drop-shadow(0 0 4px rgba(104,210,255,.9)); }
.hero-route__step span { display: grid; gap: 1.4px; }.hero-route__step strong { color: rgba(244,253,255,.98); font-size: clamp(10.5px,.955vw,14.8px); line-height: 1.15; font-weight: 600; letter-spacing: .06em; }.hero-route__step small { color: rgba(230,249,255,.9); font: 500 clamp(5.5px,.493vw,7.4px)/1.1 "DM Mono",monospace; letter-spacing: .06em; }
.hero-route__step--implement { top: 18%; left: 65%; --step-delay: -1.2s; }.hero-route__step--validate { top: 26%; right: 65%; flex-direction: row-reverse; text-align: right; --step-delay: -4.7s; }.hero-route__step--define { top: 35.5%; left: 65%; --step-delay: -2.4s; }.hero-route__step--think { top: 44.5%; right: 65%; flex-direction: row-reverse; text-align: right; --step-delay: -5.5s; }.hero-route__step--explore { top: 55.5%; left: 65%; --step-delay: -3.5s; }

.hero-diver { position: absolute; z-index: 8; left: 50%; bottom: max(calc(29% - 58px),calc(13.8% + 58px)); width: clamp(56px,5vw,78px); aspect-ratio: 2/3; pointer-events: none; transform-origin: 52% 34%; animation: hero-diver-float 7.6s ease-in-out infinite; }
.hero-diver::before { position: absolute; z-index: -1; left: 50%; bottom: -22%; width: 230%; height: 78%; border-radius: 50%; content: ""; background: radial-gradient(ellipse,rgba(255,165,70,.28),rgba(255,130,42,.08) 45%,transparent 72%); filter: blur(13px); transform: translateX(-50%); animation: hero-bottom-light 5.6s ease-in-out infinite; }
.hero-diver img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 -5px 8px rgba(107,212,255,.34)) drop-shadow(0 12px 10px rgba(255,157,62,.24)) drop-shadow(0 0 16px rgba(24,118,232,.36)); }
.hero-identity { position:absolute; z-index:9; right:12%; bottom:13.8%; left:12%; color:rgba(239,249,255,.92); text-align:center; text-shadow:0 2px 18px rgba(0,32,77,.78); transform:translateY(48px); pointer-events:none; }
.hero-identity p { margin:0; }.hero-identity__name { font-family:"Noto Serif SC",serif; font-size:18px; letter-spacing:.12em; text-shadow:0 2px 3px rgba(0,19,48,.98),0 0 10px rgba(0,27,65,.8),0 0 26px rgba(0,25,62,.62); }.hero-identity__name em { font-style:normal; letter-spacing:.16em; }.hero-identity__role { display:flex; justify-content:center; gap:12px; margin-top:8px!important; font-size:clamp(10px,.95vw,14px); letter-spacing:.06em; }.hero-identity__role strong { font-weight:500; }.hero-identity__role span { font-family:"DM Mono",monospace; }.hero-identity__skills { display:flex; justify-content:center; gap:18px; margin-top:10px!important; color:rgba(230,245,255,.78); font:500 clamp(8px,.72vw,11px)/1.2 "DM Mono",monospace; letter-spacing:.02em; }.hero-identity__skills i { font-style:normal; opacity:.7; }

.hero-ocean-life { position: absolute; z-index: 5; inset: 0; overflow: hidden; pointer-events: none; }
.ocean-fish { position: absolute; top: var(--fish-y); left: -36px; width: 15px; height: 6px; border-radius: 55% 46% 48% 52%; background: rgba(3,44,89,.3); opacity: .28; transform: scale(var(--fish-size)); animation: ocean-fish-drift var(--fish-duration) linear var(--fish-delay) infinite; }.ocean-fish::after { position: absolute; top: 0; right: -6px; width: 7px; height: 7px; content: ""; background: inherit; clip-path: polygon(0 50%,100% 0,100% 100%); }.ocean-fish--reverse { right: -36px; left: auto; animation-name: ocean-fish-drift-reverse; }
.ocean-fish--tiny { background: rgba(8,54,101,.24); opacity: .2; filter: blur(.15px); }
.ocean-bubble { position: absolute; bottom: -16px; left: var(--bubble-x); width: var(--bubble-size); height: var(--bubble-size); border: 1px solid rgba(211,244,255,.38); border-radius: 50%; opacity: 0; animation: ocean-bubble-rise var(--bubble-duration) ease-in var(--bubble-delay) infinite; }
.ocean-plankton { position:absolute; top:var(--plankton-y); left:var(--plankton-x); width:var(--plankton-size); height:var(--plankton-size); border-radius:50%; background:rgba(180,232,255,.72); box-shadow:0 0 5px rgba(115,205,255,.66),0 0 11px rgba(69,160,225,.28); opacity:.2; animation:ocean-plankton-breathe var(--plankton-duration) ease-in-out var(--plankton-delay) infinite; }
.hero-scroll-hint { position: absolute; z-index: 10; left: 50%; bottom: calc(9.8% - 60px); display: grid; justify-items: center; gap: 4px; color: rgba(255,255,255,.72); font: 500 10px/1.2 "Noto Sans SC",sans-serif; letter-spacing: .12em; text-shadow: 0 2px 12px rgba(0,31,78,.72); transform: translateX(-50%); }.hero-scroll-hint__mouse { position: relative; width: 13px; height: 19px; border: 1px solid currentColor; border-radius: 8px; }.hero-scroll-hint__mouse::before { position: absolute; top: 0; left: 50%; width: 1px; height: 5px; content: ""; background: currentColor; transform: translateX(-50%); }.hero-scroll-hint__mouse i { position: absolute; top: 4px; left: 50%; width: 2px; height: 3px; border-radius: 999px; background: #fff; transform: translateX(-50%); animation: hero-scroll-wheel 1.8s ease-in-out infinite; }
.hero-scroll-hint > span:last-child { transform:translateY(12px); }

@keyframes route-current { 0%,100% { opacity:.72; filter:drop-shadow(0 0 2px rgba(104,211,255,.4)); } 48% { opacity:1; filter:drop-shadow(0 0 5px rgba(104,211,255,.85)); } }@keyframes route-answer-glow { 0%,100% { opacity:.38; } 50% { opacity:.92; } }@keyframes route-node-pulse { 0%,100% { opacity:.62; box-shadow:0 0 4px #55d8ff,0 0 9px rgba(85,216,255,.58); } 48% { opacity:1; box-shadow:0 0 7px #b9f2ff,0 0 14px rgba(85,216,255,.9); } }@keyframes route-label-float { 0%,100% { opacity:.72; } 50% { opacity:1; } }
@keyframes hero-diver-float { 0%,100% { transform:translate3d(-50%,0,0) rotate(8deg); } 38% { transform:translate3d(calc(-50% + 2px),-5px,0) rotate(9.1deg); } 70% { transform:translate3d(calc(-50% - 2px),2px,0) rotate(7.2deg); } }@keyframes hero-bottom-light { 0%,100% { opacity:.5; transform:translateX(-50%) scale(.92); } 50% { opacity:1; transform:translateX(-50%) scale(1.08); } }
@keyframes hero-scroll-float { 0%,100% { transform:translate3d(-50%,0,0); opacity:.68; } 50% { transform:translate3d(-50%,4px,0); opacity:1; } }@keyframes hero-scroll-wheel { 0% { transform:translate3d(-50%,0,0); opacity:0; } 25% { opacity:1; } 70%,100% { transform:translate3d(-50%,6px,0); opacity:0; } }
@keyframes ocean-fish-drift { 0% { transform:translate3d(-4vw,0,0) scaleX(-1) scale(var(--fish-size)); opacity:0; } 12%,82% { opacity:.28; } 48% { transform:translate3d(53vw,8px,0) scaleX(-1) scale(var(--fish-size)); } 100% { transform:translate3d(108vw,-5px,0) scaleX(-1) scale(var(--fish-size)); opacity:0; } }@keyframes ocean-fish-drift-reverse { 0% { transform:translate3d(4vw,0,0) scale(var(--fish-size)); opacity:0; } 12%,82% { opacity:.24; } 50% { transform:translate3d(-54vw,-7px,0) scale(var(--fish-size)); } 100% { transform:translate3d(-108vw,4px,0) scale(var(--fish-size)); opacity:0; } }@keyframes ocean-bubble-rise { 0% { transform:translate3d(0,0,0) scale(.7); opacity:0; } 12% { opacity:.3; } 55% { transform:translate3d(8px,-48vh,0) scale(1); opacity:.22; } 100% { transform:translate3d(-5px,-96vh,0) scale(1.12); opacity:0; } }
@keyframes ocean-plankton-breathe { 0%,100% { opacity:.08; transform:translate3d(0,7px,0) scale(.72); } 36% { opacity:.46; transform:translate3d(var(--plankton-drift),-5px,0) scale(1.08); } 68% { opacity:.2; transform:translate3d(0,-13px,0) scale(.86); } }

.figma-home__anchors,body.river-launched .figma-home__anchors,body.guide-docked .figma-home__anchors { z-index:40; border-radius:24px 24px 0 0; box-shadow:0 8px 24px rgba(27,61,105,.035); transition:border-radius .24s ease,box-shadow .24s ease; }body.guide-docked .figma-home__anchors { border-radius:0; box-shadow:0 8px 24px rgba(27,61,105,.035); }.figma-home__anchors::after { position:absolute; top:7px; left:50%; width:34px; height:2px; border-radius:999px; content:""; background:rgba(37,79,124,.2); transform:translateX(-50%); }
html body main > section:not(.hero) { position:relative; z-index:20; }html body main > #faces { border-radius:0; box-shadow:0 -1px 0 rgba(255,255,255,.5); }

@media (max-width:760px) {
  .hero-route { width:680px; }.hero-route__step { gap:4.9px; min-width:72.8px; }.hero-route__step img { width:18.9px; height:18.9px; }.hero-route__step strong { font-size:9.8px; }.hero-route__step small { font-size:5px; }
  .hero-diver { bottom:max(calc(29% - 58px),calc(14.5% + 50px)); width:53px; }.hero-identity { right:-10%; bottom:14.5%; left:-10%; }.hero-identity__name { font-size:18px; }.hero-identity__role { gap:8px; margin-top:6px!important; font-size:9px; }.hero-identity__skills { gap:8px; margin-top:8px!important; font-size:6px; }.hero-scroll-hint { bottom:calc(9.3% - 60px); font-size:9px; }
  .ocean-fish:nth-of-type(n+4),.ocean-bubble:nth-of-type(n+5) { display:none; }
  .figma-home__anchors,body.river-launched .figma-home__anchors,body.guide-docked .figma-home__anchors { border-radius:18px 18px 0 0; box-shadow:0 6px 18px rgba(27,61,105,.03); }body.guide-docked .figma-home__anchors { border-radius:0; box-shadow:0 6px 18px rgba(27,61,105,.03); }
}

@media (prefers-reduced-motion:reduce) {
  html body main > .figma-home.river-hero,.figma-home .figma-home__background { transform:none!important; filter:none!important; }.figma-home .figma-home__background > video { display:none; }
  .hero-route__stroke,.hero-route__node,.hero-route__step,.hero-diver,.hero-diver::before,.hero-scroll-hint,.hero-scroll-hint__mouse i,.ocean-fish,.ocean-bubble,.ocean-plankton { animation:none!important; }
}