:root{
  --ink:#2d3f5d;
  --ink-soft:#6c7f9d;
  --dock-h:112px;
}
*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-snap-type:y proximity;
  overscroll-behavior-y:contain;
}
body{
  margin:0;
  min-height:100svh;
  font-family:Inter,system-ui,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#f8fbff 0%,#e6f0ff 35%,#d6e5ff 72%,#c9dcff 100%);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 16% 8%, rgba(255,255,255,.86), transparent 18%),
    radial-gradient(circle at 82% 18%, rgba(189,218,255,.72), transparent 24%),
    radial-gradient(circle at 50% 58%, rgba(255,255,255,.38), transparent 35%);
}
.ambient{position:fixed;border-radius:50%;filter:blur(36px);pointer-events:none;opacity:.72}
.ambient-a{width:34vw;height:34vw;left:-8vw;top:20vh;background:radial-gradient(circle,rgba(255,255,255,.9),rgba(255,255,255,0))}
.ambient-b{width:44vw;height:44vw;right:-12vw;top:12vh;background:radial-gradient(circle,rgba(180,213,255,.72),rgba(180,213,255,0))}
.ambient-c{width:58vw;height:58vw;left:22vw;bottom:-26vw;background:radial-gradient(circle,rgba(206,227,255,.8),rgba(206,227,255,0))}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{font:inherit}
.logo-float{
  position:fixed;
  top:calc(14px + env(safe-area-inset-top));
  left:calc(14px + env(safe-area-inset-left));
  z-index:70;
  display:flex;
  align-items:center;
  justify-content:center;
  width:80px;
  height:80px;
  border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.16));
  backdrop-filter:blur(14px) saturate(145%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 18px 40px rgba(72,110,178,.12);
  transition:transform .24s ease, box-shadow .24s ease, filter .24s ease;
}
.logo-float:hover,.logo-float:active{transform:translateY(-2px) scale(1.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 22px 44px rgba(72,110,178,.16)}
.logo-float img{width:62px;height:62px;filter:drop-shadow(0 12px 20px rgba(65,105,172,.18));animation:logoFloat 5.4s ease-in-out infinite}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.top-cta{
  position:fixed;
  top:calc(18px + env(safe-area-inset-top));
  right:calc(16px + env(safe-area-inset-right));
  z-index:72;
  width:min(340px,50vw);
  min-width:190px;
  opacity:0;
  transform:translateY(-16px) scale(.98);
  pointer-events:none;
  transition:opacity .42s ease, transform .42s ease, filter .24s ease;
}
.top-cta.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.top-cta:hover,.top-cta:active{filter:saturate(1.06)}
.top-cta-bg{width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(70,110,178,.16))}
.top-cta span{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:900;
  font-size:clamp(12px,1.2vw,16px);
  letter-spacing:-.03em;
}
.experience{position:relative;z-index:5}
.scene{
  position:relative;
  min-height:100svh;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:86px 20px calc(var(--dock-h) + 28px);
  overflow:hidden;
}
.scene::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(circle at 50% 48%, rgba(255,255,255,.18), transparent 32%);
}
.character-wrap{
  border:0;
  background:transparent;
  padding:0;
  position:relative;
  z-index:6;
  width:min(88vw,480px,48svh);
  aspect-ratio:1/1.28;
  margin:0 auto 16px;
  filter:drop-shadow(0 26px 40px rgba(43,70,116,.16));
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.kora{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  transform:translateY(12px) scale(.985);
  transition:opacity .72s cubic-bezier(.2,.7,.2,1), transform .72s cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform;
}
.kora.visible{opacity:1;transform:translateY(0) scale(1)}
.scene.active .kora.visible{animation:breathe 6.8s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.004)}}
.copy-wrap{
  position:relative;
  z-index:13;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease;
}
.scene.active .copy-wrap{opacity:1;transform:translateY(0);transition-delay:.18s}
.scene-kicker{
  margin:0;
  color:#7286a4;
  font-size:11px;
  font-weight:900;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.scene-line{
  margin:0;
  text-align:center;
  text-wrap:balance;
  max-width:min(86vw,640px);
  font-size:clamp(1.78rem,3.2vw,2.65rem);
  line-height:1.03;
  font-weight:900;
  letter-spacing:-.065em;
  color:#344763;
  text-shadow:0 2px 18px rgba(255,255,255,.66);
}
.arrow-cta{
  position:relative;
  z-index:14;
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:120px;
  height:120px;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s ease, transform .7s ease, filter .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.scene.active .arrow-cta{opacity:1;transform:translateY(0);transition-delay:.3s}
.arrow-cta:hover,.arrow-cta:active{filter:saturate(1.08)}
.arrow-cta img{width:112px;height:112px;filter:drop-shadow(0 18px 30px rgba(72,110,178,.18));animation:arrowPulse 2.8s ease-in-out infinite}
@keyframes arrowPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.float-icon{
  position:absolute;
  z-index:2;
  pointer-events:none;
  opacity:.74;
  width:clamp(92px,10vw,138px);
  filter:drop-shadow(0 18px 28px rgba(70,108,172,.1));
  animation:floaty 9s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-12px) rotate(calc(var(--r,0deg) + 2deg))}}
.fi-left{left:7%;top:28%;--r:-5deg}
.fi-right{right:7%;top:42%;--r:7deg;animation-duration:8.5s}
.fi-bottom{right:22%;bottom:20%;--r:-4deg;animation-duration:9.2s}
.dock{
  position:fixed;
  left:50%;
  bottom:calc(16px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:min(640px,calc(100% - 28px));
  padding:14px 18px;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.14));
  backdrop-filter:blur(24px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.68),0 22px 46px rgba(72,110,178,.11);
  transition:transform .34s ease, opacity .34s ease;
}
.dock.hidden{transform:translateX(-50%) translateY(120%);opacity:0}
.dock-item{
  display:flex;
  align-items:center;
  justify-content:center;
  width:82px;
  height:82px;
  border:0;
  background:transparent;
  padding:0;
  border-radius:50%;
  cursor:pointer;
  transition:transform .22s ease, filter .22s ease;
  -webkit-tap-highlight-color:transparent;
}
.dock-item img{width:78px;height:78px;filter:drop-shadow(0 16px 22px rgba(72,110,178,.12))}
.dock-item:hover,.dock-item:active{transform:translateY(-4px) scale(1.04);filter:saturate(1.08)}
.dock-wa{transform:translateY(-1px) scale(1.03)}
.router{
  position:fixed;
  left:50%;
  bottom:calc(124px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(24px) scale(.985);
  z-index:90;
  width:min(560px,calc(100% - 28px));
  padding:18px;
  border-radius:38px;
  background:linear-gradient(180deg,rgba(255,255,255,.36),rgba(255,255,255,.18));
  backdrop-filter:blur(30px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.74),0 34px 70px rgba(72,110,178,.18);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.router.open{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0) scale(1)}
.router-close{
  position:absolute;
  top:14px;
  right:14px;
  z-index:3;
  width:42px;
  height:42px;
  border-radius:999px;
  border:0;
  background:rgba(255,255,255,.34);
  color:#243854;
  font-size:28px;
  line-height:1;
  font-weight:700;
  cursor:pointer;
}
.router-card{position:relative;width:100%;margin:8px 0 18px}
.router-card img{width:100%;height:auto;filter:drop-shadow(0 18px 24px rgba(30,44,82,.22))}
.router-copy{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(22px,5vw,46px);
}
.router-copy span{
  color:#9fbaff;
  font-size:clamp(12px,2vw,18px);
  font-weight:900;
  letter-spacing:.22em;
}
.router-copy strong{
  margin-top:10px;
  max-width:360px;
  color:white;
  font-size:clamp(1.45rem,5.4vw,2.4rem);
  line-height:1.02;
  font-weight:900;
  letter-spacing:-.06em;
}
.router-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:0 6px 18px;
}
.router-option{
  min-height:62px;
  border:0;
  border-radius:999px;
  cursor:pointer;
  color:#273a58;
  background:linear-gradient(180deg,rgba(255,255,255,.48),rgba(255,255,255,.25));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 16px 28px rgba(72,110,178,.08);
  font-size:clamp(15px,3.4vw,20px);
  font-weight:900;
  letter-spacing:-.04em;
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.router-option:hover,.router-option:active,.router-option.active{
  transform:translateY(-2px);
  color:#fff;
  background:linear-gradient(180deg,#4f94ff,#2772ee);
}
.router-primary{
  position:relative;
  display:block;
  width:min(360px,82%);
  margin:0 auto 4px;
  transition:transform .24s ease, filter .24s ease;
}
.router-primary:hover,.router-primary:active{transform:translateY(-2px) scale(1.01);filter:saturate(1.05)}
.router-primary img{width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(70,110,178,.16))}
.router-primary span{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  font-size:clamp(14px,3.4vw,19px);
  font-weight:900;
  letter-spacing:-.04em;
}
@media (max-width:900px){
  .logo-float{width:72px;height:72px;top:calc(14px + env(safe-area-inset-top));left:calc(14px + env(safe-area-inset-left))}
  .logo-float img{width:56px;height:56px}
  .top-cta{top:calc(14px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right));width:190px;min-width:190px}
  .top-cta span{font-size:12px}
  .scene{padding:82px 16px calc(var(--dock-h) + 26px)}
  .character-wrap{width:min(90vw,430px,45svh);margin-bottom:12px}
  .scene-kicker{font-size:10px}
  .scene-line{font-size:clamp(1.52rem,6.7vw,2.18rem);max-width:316px}
  .float-icon{width:96px;opacity:.72}
  .fi-left{left:6%;top:23%}
  .fi-right{right:6%;top:42%}
  .fi-bottom{right:18%;bottom:18%}
  .arrow-cta{width:108px;height:108px;margin-top:12px}
  .arrow-cta img{width:98px;height:98px}
  .dock{gap:12px;padding:10px 12px;bottom:calc(14px + env(safe-area-inset-bottom));justify-content:space-between}
  .dock-item{width:72px;height:72px}
  .dock-item img{width:68px;height:68px}
  .router{bottom:calc(108px + env(safe-area-inset-bottom));padding:14px;border-radius:34px}
  .router-card{margin-top:8px}
  .router-options{gap:10px;margin:0 4px 14px}
  .router-option{min-height:58px}
}
@media (max-width:430px){
  .dock-item{width:68px;height:68px}
  .dock-item img{width:64px;height:64px}
  .scene-line{max-width:302px}
  .router-copy{padding:26px 28px}
}
@media (max-height:760px) and (max-width:900px){
  .scene{padding-top:74px;padding-bottom:118px}
  .character-wrap{width:min(84vw,380px,39svh)}
  .scene-line{font-size:clamp(1.32rem,5.8vw,1.82rem)}
  .arrow-cta{width:92px;height:92px}
  .arrow-cta img{width:84px;height:84px}
  .dock-item{width:62px;height:62px}
  .dock-item img{width:58px;height:58px}
  .router{bottom:94px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}