:root{

  --c-ink:        #05121b;
  --c-ink-deep:   #030a10;
  --c-cyan:       #2ba6e8;
  --c-cyan-hi:    #4fc3ff;
  --c-cyan-glow:  #7fd8ff;
  --c-white:      #ffffff;
  --c-muted:      #a9c4d4;
  --c-line:       rgba(255,255,255,.14);

  --gutter:       clamp(20px, 4vw, 64px);
  --dock-h:       92px;
  --nav-h:        88px;
  --radius:       10px;

  --ease:         cubic-bezier(.22,.61,.36,1);
  --ease-out:     cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

[hidden]{ display:none !important; }

html,body{ height:100%; }

body{
  margin:0;
  min-height:100svh;
  background:var(--c-ink-deep);
  color:var(--c-white);
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.is-loading *{ transition:none !important; }

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

:focus-visible{
  outline:2px solid var(--c-cyan-hi);
  outline-offset:3px;
  border-radius:4px;
}

.stage{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:var(--c-ink-deep);
}

.stage__slides{ position:absolute; inset:0; }

.bg{
  position:absolute;
  inset:0;

  background-image:var(--img), var(--fallback);
  background-size:cover, cover;
  background-position:center, center;
  opacity:0;
  transform:scale(1.08);
  transition:opacity 1.1s var(--ease), transform 9s linear;
  will-change:opacity, transform;
}

.bg.is-active{
  opacity:1;
  transform:scale(1);
}

.stage__scrim{
  position:absolute;
  inset:0;
  background:
    radial-gradient(75% 55% at 50% 42%, rgba(3,10,16,0) 0%, rgba(3,10,16,.55) 78%, rgba(3,10,16,.85) 100%),
    linear-gradient(to bottom, rgba(3,10,16,.72) 0%, rgba(3,10,16,.15) 26%, rgba(3,10,16,.10) 48%, rgba(3,10,16,.80) 84%, var(--c-ink-deep) 100%);
}

.stage__grain{
  position:absolute;
  inset:-100%;
  opacity:.045;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}

@keyframes grain{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-3%,2%); }
  40%{ transform:translate(2%,-3%); }
  60%{ transform:translate(-2%,-2%); }
  80%{ transform:translate(3%,1%); }
}

.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:40;
  height:var(--nav-h);
  padding:0 var(--gutter);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
}
.nav::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(var(--nav-h) + 60px);
  background: linear-gradient(to bottom, rgba(3, 10, 16, 0.85) 0%, rgba(3, 10, 16, 0) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  z-index: -1;
  pointer-events: none;
}

.nav__links{
  display:flex;
  gap:clamp(18px, 2.4vw, 38px);
}

.nav__link{
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
  padding:6px 0;
  position:relative;
  transition:color .3s var(--ease);
}

.nav__link::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%; height:1px;
  background:var(--c-cyan-hi);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s var(--ease-out);
}

.nav__link:hover,
.nav__link.is-current{ color:var(--c-white); }
.nav__link:hover::after,
.nav__link.is-current::after{ transform:scaleX(1); }

.logo{
  display:flex;
  align-items:center;
  gap:16px;
  justify-self:center;
  width:clamp(200px, 24vw, 360px);
}

.logo__line{
  flex:1 1 auto;
  height:1px;
  background:linear-gradient(to right, transparent, rgba(255,255,255,.5));
  transition:background-image .4s var(--ease);
}
.logo__mark ~ .logo__line{
  background:linear-gradient(to left, transparent, rgba(255,255,255,.5));
}

.logo__mark{
  flex:0 0 auto;
  width:92px; height:92px;
  object-fit:contain;
  filter:drop-shadow(0 0 14px rgba(127,216,255,.65));
}

.nav__actions{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:14px;
}

.nav-discord{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:24px; height:24px;
  color:rgba(255,255,255,.72);
}
.nav-discord svg{ width:22px; height:22px; fill:currentColor; }
.nav-discord:hover{
  color:#fff;
}

.btn-discord{
  display:flex;
  align-items:center;
  gap:8px;
  height:38px;
  padding:0 16px;
  border:1px solid rgba(88,101,242,.4);
  border-radius:3px;
  background:rgba(88,101,242,.14);
  color:#fff;
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease-out);
}
.btn-discord svg{ width:16px; height:16px; fill:#5865f2; flex:0 0 auto; }
.btn-discord:hover{
  background:rgba(88,101,242,.26);
  border-color:rgba(88,101,242,.7);
  transform:translateY(-2px);
}

.btn-discord--drawer{ justify-content:center; width:100%; height:48px; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:transform .35s var(--ease-out), background-color .3s var(--ease),
             box-shadow .35s var(--ease), border-color .3s var(--ease);
}

.btn--ghost{
  height:48px;
  padding:0 30px;
  font-size:12px;
  border:1px solid var(--c-line);
  color:rgba(255,255,255,.9);
  backdrop-filter:blur(6px);
  background:rgba(255,255,255,.04);
}

.btn--ghost:hover{
  border-color:rgba(127,216,255,.6);
  background:rgba(43,166,232,.14);
  transform:translateY(-2px);
}

.btn--primary{
  height:52px;
  padding:0 40px;
  background:var(--c-cyan);
  color:#fff;
  border-radius:3px;
  box-shadow:0 12px 34px -10px rgba(43,166,232,.85),
             inset 0 1px 0 rgba(255,255,255,.28);
}
.btn--primary:hover{
  background:var(--c-cyan-hi);
  transform:translateY(-3px);
  box-shadow:0 20px 46px -12px rgba(79,195,255,.95),
             inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--primary:active{ transform:translateY(-1px); }

.hero{
  position:relative;
  z-index:20;
  height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--nav-h) var(--gutter) calc(var(--dock-h) + 40px);
}

.hero__inner{
  width:100%;
  max-width:1180px;
  text-align:center;
}

.slides{
  position:relative;
  display:grid;
}

.slide{
  grid-area:1 / 1;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.slide[hidden]{ display:none; }

.slide.is-in-fwd{ animation:slideFadeIn .7s var(--ease-out) both; }
.slide.is-in-bwd{ animation:slideFadeIn .7s var(--ease-out) both; }
.slide.is-out-fwd{ animation:slideFadeOut .5s var(--ease) both; }
.slide.is-out-bwd{ animation:slideFadeOut .5s var(--ease) both; }

@keyframes slideFadeIn{
  from{ opacity:0; }
  to  { opacity:1; }
}
@keyframes slideFadeOut{
  from{ opacity:1; }
  to  { opacity:0; }
}

.slide__title{
  font-family:'Playfair Display', serif;
  font-weight:700;
  font-size:clamp(3.1rem, 10.5vw, 9.5rem);
  line-height:.94;
  letter-spacing:-.015em;
  margin:0 0 clamp(20px, 2.6vw, 34px);
  text-shadow:0 6px 44px rgba(0,0,0,.55), 0 0 90px rgba(127,216,255,.16);
}

.slide__text{
  max-width:52ch;
  margin:0 0 clamp(26px, 3vw, 40px);
  font-size:clamp(10px, .78vw, 12px);
  font-weight:500;
  line-height:2;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(233,244,250,.86);
  text-shadow:0 2px 14px rgba(0,0,0,.7);
}

.slide.is-entering .slide__title,
.slide.is-entering .slide__text,
.slide.is-entering .btn{
  animation:riseIn .95s var(--ease-out) both;
}
.slide.is-entering .slide__text{ animation-delay:.1s; }
.slide.is-entering .btn{ animation-delay:.19s; }

@keyframes riseIn{
  from{ opacity:0; transform:translateY(34px); filter:blur(6px); }
  to  { opacity:1; transform:none;             filter:blur(0);  }
}

.arrow{
  position:absolute;
  top:50%;
  z-index:30;
  width:44px; height:44px;
  display:grid;
  place-items:center;
  transform:translateY(-50%);
  color:rgba(255,255,255,.6);
  transition:color .3s var(--ease), transform .4s var(--ease-out);
}
.arrow svg{
  width:22px; height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.arrow--prev{ left:calc(var(--gutter) - 8px); }
.arrow--next{ right:calc(var(--gutter) - 8px); }
.arrow:hover{ color:var(--c-white); }
.arrow--prev:hover{ transform:translate(-5px,-50%); }
.arrow--next:hover{ transform:translate(5px,-50%); }

.edge{
  position:absolute;
  top:50%;
  z-index:29;
  transform:translateY(-50%);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
  pointer-events:none;
  white-space:nowrap;
  transition:opacity .5s var(--ease);
}
.edge--left { left:calc(var(--gutter) + 46px); }
.edge--right{ right:calc(var(--gutter) + 46px); }

.location{
  position:relative;
  min-height:100svh;
  padding:calc(var(--nav-h) + clamp(40px, 6vw, 90px)) var(--gutter) calc(var(--dock-h) + clamp(40px, 6vw, 90px));
  background:
    linear-gradient(rgba(3,10,16,.62), rgba(3,10,16,.62)),
    linear-gradient(to bottom, rgba(3,10,16,.25) 0%, rgba(3,10,16,.65) 55%, rgba(3,10,16,.92) 100%),
    url('/assets/img/syldarin-bg.jpg');
  background-size:auto, auto, cover;
  background-position:center;
  background-repeat:no-repeat;
}

.location__inner{ max-width:1220px; margin:0 auto; }

.location__tabs{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(20px, 3vw, 40px);
  border-bottom:1px solid var(--c-line);
  padding-bottom:18px;
}

.location__tab{
  background:none;
  border:none;
  padding:6px 2px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  cursor:pointer;
  position:relative;
  transition:color .3s var(--ease);
}
.location__tab::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-19px;
  height:2px;
  background:var(--c-cyan-hi);
  transform:scaleX(0);
  transition:transform .3s var(--ease-out);
}
.location__tab:hover{ color:rgba(255,255,255,.85); }
.location__tab.is-active{ color:var(--c-white); }
.location__tab.is-active::after{ transform:scaleX(1); }

.location__panel{
  min-height:220px;
  padding-top:clamp(40px, 6vw, 64px);
}

.story{
  display:grid;
  grid-template-columns:minmax(0, .85fr) minmax(0, 1fr);
  gap:clamp(40px, 6vw, 90px);
  align-items:center;
}

.story__media{
  position:relative;
  aspect-ratio:3 / 4;
}

.story__figure{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  height:88%;
  width:auto;
  max-width:none;
  object-fit:contain;
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.6)) drop-shadow(0 0 60px rgba(43,166,232,.16));
}

.story__title{
  font-family:'Cinzel', serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.045em;
  font-size:clamp(2.2rem, 3.8vw, 3.4rem);
  line-height:1.12;
  margin:0 0 clamp(28px, 3.4vw, 40px);
  color:var(--c-white);
  text-shadow:0 6px 44px rgba(0,0,0,.55), 0 0 90px rgba(127,216,255,.2);
}

.story__text p{
  font-size:clamp(15px, 1.1vw, 17px);
  line-height:1.85;
  color:rgba(233,244,250,.8);
  margin:0 0 1.4em;
}

.story__text p:last-of-type{ margin-bottom:0; }

.story__tagline{
  margin-top:clamp(32px, 4vw, 48px) !important;
  padding-top:clamp(24px, 3vw, 32px);
  border-top:1px solid var(--c-line);
  font-family:'Cinzel', serif;
  text-transform:uppercase;
  font-weight:700;
  letter-spacing:.06em;
  font-size:clamp(17px, 1.5vw, 21px) !important;
  line-height:1.7 !important;
  color:var(--c-cyan-glow) !important;
  text-shadow:0 0 40px rgba(43,166,232,.35);
}

@media (max-width:860px){
  .story{ grid-template-columns:1fr; }
  .story__media{ aspect-ratio:16 / 10; }
}

.legends{
  display:grid;
  grid-template-columns:minmax(0, .55fr) minmax(0, 1fr);
  gap:clamp(40px, 6vw, 90px);
  align-items:start;
}

.legends__nav{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.legends__figure{
  position:absolute;
  left:clamp(-20px, 2vw, 50px);
  bottom:clamp(24px, 4.5vw, 60px);
  height:clamp(460px, 60vw, 720px);
  width:auto;
  z-index:0;
  pointer-events:none;
  opacity:0;
  transform:translateY(26px) scale(.97);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.6)) drop-shadow(0 0 50px rgba(43,166,232,.16));
}

.legends__figure.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

.legends__btn{
  text-align:left;
  background:none;
  border:1px solid var(--c-line);
  border-radius:3px;
  padding:18px 22px;
  font-family:'Cinzel', serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.03em;
  color:rgba(255,255,255,.6);
  cursor:pointer;
  transition:color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.legends__btn:hover{ color:#fff; border-color:rgba(255,255,255,.32); }
.legends__btn.is-active{
  color:var(--c-white);
  border-color:rgba(127,216,255,.55);
  background-color:rgba(43,166,232,.08);
}

.legends__stage{ position:relative; }

.legends__text{ min-height:260px; }

.legends__text p{
  font-size:clamp(15px, 1.1vw, 17px);
  line-height:1.85;
  color:rgba(233,244,250,.85);
  margin:0 0 1.4em;
}
.legends__text p:last-child{ margin-bottom:0; }

.legends__cursor{
  color:var(--c-cyan-glow);
  animation:legendsBlink .9s step-end infinite;
}
@keyframes legendsBlink{ 50%{ opacity:0; } }

@media (max-width:860px){
  .legends{ grid-template-columns:1fr; }

  .legends__figure{ display:none; }
}

.map{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr);
  gap:clamp(40px, 6vw, 90px);
  align-items:center;
}

.map__media{
  position:relative;
  max-width:680px;
  width:100%;
  margin-left:clamp(-60px, -4vw, -20px);
}

.map__img{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6)) drop-shadow(0 0 70px rgba(43,166,232,.14));
}

.map__pins{ position:absolute; inset:0; }

.map__pin{
  position:absolute;
  transform:translate(-50%, -50%);
  display:grid;
  place-items:center;
  background:none;
  border:none;
  padding:10px;
  margin:-10px;
  cursor:pointer;
}

.map__pin-dot{
  position:relative;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--c-cyan-hi);
  transition:background-color .3s var(--ease), transform .3s var(--ease-out);
  animation:mapPinGlow 2.4s ease-in-out infinite;
}

@keyframes mapPinGlow{
  0%, 100%{ box-shadow:0 0 6px rgba(43,166,232,.5); }
  50%{ box-shadow:0 0 20px rgba(127,216,255,1); }
}

.map__pin:hover .map__pin-dot,
.map__pin:focus-visible .map__pin-dot{ transform:scale(1.35); }

.map__pin.is-active .map__pin-dot{
  background:#fff;
  animation:mapPinGlowActive 2.4s ease-in-out infinite;
}

@keyframes mapPinGlowActive{
  0%, 100%{ box-shadow:0 0 8px rgba(255,255,255,.6); }
  50%{ box-shadow:0 0 22px rgba(255,255,255,1); }
}

.map__pin-label{
  position:absolute;
  bottom:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%) translateY(4px);
  white-space:nowrap;
  font-family:'Cinzel', serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(3,10,16,.88);
  border:1px solid var(--c-line);
  padding:5px 9px;
  border-radius:3px;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease-out);
}
.map__pin:hover .map__pin-label,
.map__pin:focus-visible .map__pin-label,
.map__pin.is-active .map__pin-label{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

.map__title{
  font-family:'Cinzel', serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.045em;
  font-size:clamp(1.8rem, 3vw, 2.6rem);
  line-height:1.15;
  margin:0 0 clamp(24px, 3vw, 34px);
  color:var(--c-white);
  text-shadow:0 6px 44px rgba(0,0,0,.55), 0 0 90px rgba(127,216,255,.2);
}

.map__text-inner{
  opacity:1;
  transform:translateY(0);
  transition:opacity .35s var(--ease), transform .4s var(--ease-out);
}
.map__text-inner.is-leaving{
  opacity:0;
  transform:translateY(-12px);
}
.map__text-inner.is-entering{
  opacity:0;
  transform:translateY(16px);
}

.map__text-inner p{
  font-size:clamp(15px, 1.1vw, 17px);
  line-height:1.85;
  color:rgba(233,244,250,.8);
  margin:0 0 1.4em;
}
.map__text-inner p:last-child{ margin-bottom:0; }

@media (max-width:860px){
  .map{ grid-template-columns:1fr; }
}

.world{
  position:relative;
  z-index:1;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:calc(var(--nav-h) + clamp(40px, 6vw, 90px)) 0 calc(var(--dock-h) + clamp(40px, 6vw, 90px));
  background:
    linear-gradient(rgba(3,10,16,.62), rgba(3,10,16,.62)),
    linear-gradient(to bottom, rgba(3,10,16,.25) 0%, rgba(3,10,16,.65) 55%, rgba(3,10,16,.92) 100%),
    url('/assets/img/world-bg.jpg');
  background-size:auto, auto, cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
}

.world__inner{ width:100%; max-width:1500px; margin:0 auto; }

.world__kicker{
  display:block;
  text-align:center;
  font-size:12px;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--c-cyan-glow);
  margin-bottom:16px;
  padding:0 var(--gutter);
}

.world__title{
  text-align:center;
  font-family:'Playfair Display', serif;
  font-weight:700;
  font-size:clamp(2.6rem, 5vw, 4.2rem);
  margin:0 0 clamp(54px, 6.5vw, 80px);
  padding:0 var(--gutter);
}

.world__carousel{
  position:relative;
  display:flex;
  align-items:center;
}

.world__track{
  --card-w:clamp(230px, 25vw, 340px);
  display:flex;
  min-width:0;
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:10px calc(50% - (var(--card-w) / 2));
  scrollbar-width:none;
}
.world__track::-webkit-scrollbar{ display:none; }

.world__card{
  position:relative;
  flex:0 0 auto;
  width:var(--card-w);
  aspect-ratio:3 / 4;
  scroll-snap-align:center;
  border-radius:3px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--c-line);
  background:
    radial-gradient(120% 90% at 30% 10%, rgba(43,166,232,.16) 0%, rgba(43,166,232,0) 55%),
    linear-gradient(160deg, #0d2333 0%, #071722 55%, #040d14 100%);
  filter:brightness(.6) saturate(.75);
  transform:scale(.92);
  transition:transform .5s var(--ease-out), filter .5s var(--ease-out), border-color .5s var(--ease);
}

.world__card:nth-child(3n+2){
  background:
    radial-gradient(120% 90% at 70% 10%, rgba(43,166,232,.16) 0%, rgba(43,166,232,0) 55%),
    linear-gradient(160deg, #0e2130 0%, #0a1c29 55%, #040d14 100%);
}
.world__card:nth-child(3n+3){
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(127,216,255,.14) 0%, rgba(127,216,255,0) 55%),
    linear-gradient(160deg, #0c2530 0%, #081b24 55%, #040d14 100%);
}

.world__card.is-active{
  filter:brightness(1) saturate(1);
  transform:scale(1);
  border-color:rgba(127,216,255,.55);
  box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 50px rgba(43,166,232,.18);
}

.world__card-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.72);
}

.world__card-bg{
  position:absolute;
  inset:-10px;
  z-index:0;
  background:inherit;
  filter:blur(10px);
}

.world__card-lock{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.55);
}
.world__card-lock svg{
  width:clamp(24px, 2.8vw, 32px);
  height:clamp(24px, 2.8vw, 32px);
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.world__card-glyph{
  font-size:clamp(26px, 3vw, 36px);
  color:rgba(127,216,255,.28);
  transition:color .5s var(--ease), transform .5s var(--ease);
}
.world__card.is-active .world__card-glyph{
  color:rgba(127,216,255,.55);
  transform:scale(1.15);
}

.world__card-label{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:18px 12px;
  text-align:center;
  font-family:'Playfair Display', serif;
  font-size:clamp(16px, 1.35vw, 20px);
  letter-spacing:.04em;
  color:rgba(255,255,255,.55);
  background:linear-gradient(to top, rgba(3,10,16,.85) 0%, rgba(3,10,16,0) 100%);
  transition:color .5s var(--ease);
}
.world__card.is-active .world__card-label{ color:var(--c-white); }

.world__arrow{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  width:52px; height:52px;
  display:grid;
  place-items:center;
  margin:0 clamp(4px, 1.4vw, 20px);
  color:rgba(255,255,255,.6);
  transition:color .3s var(--ease), transform .3s var(--ease-out);
}
.world__arrow svg{
  width:26px; height:26px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.world__arrow:hover{ color:var(--c-white); }
.world__arrow--prev:hover{ transform:translateX(-4px); }
.world__arrow--next:hover{ transform:translateX(4px); }

.world__dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-top:clamp(32px, 4.5vw, 46px);
}

.world__dot{
  width:7px; height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.25);
  border:none;
  padding:0;
  cursor:pointer;
  transition:background .3s var(--ease), width .3s var(--ease), border-radius .3s var(--ease);
}
.world__dot.is-active{
  width:24px;
  border-radius:3px;
  background:var(--c-cyan-hi);
}

@media (max-width:640px){
  .world__arrow{ display:none; }
}

.faq{
  position:relative;
  z-index:1;
  padding:clamp(72px, 10vw, 120px) var(--gutter) clamp(90px, 11vw, 140px);

  background:
    linear-gradient(rgba(3,10,16,.32), rgba(3,10,16,.32)),
    radial-gradient(60% 45% at 50% 0%, rgba(43,166,232,.1) 0%, rgba(43,166,232,0) 60%),
    linear-gradient(to bottom, rgba(3,10,16,.5) 0%, rgba(3,10,16,.82) 550px, var(--c-ink) 950px),
    url('/assets/img/faq-bg.jpg');

  background-size:auto, auto, auto, 100% auto;
  background-position:center, center, center, center top;
  background-repeat:no-repeat;
  backdrop-filter:blur(30px);
  -webkit-backdrop-filter:blur(30px);
}

.faq__inner{
  position:relative;
  z-index:1;
  max-width:740px;
  margin:0 auto;
}

.faq__portrait{
  position:absolute;
  height:auto;
  z-index:0;
  pointer-events:none;
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.6)) drop-shadow(0 0 44px rgba(43,166,232,.14));
}

.faq__portrait--left{
  left:clamp(0px, 1.2vw, 18px);
  bottom:clamp(36px, 6vw, 95px);
  width:clamp(250px, 21vw, 380px);
}

.faq__portrait--right{
  right:clamp(0px, 2vw, 24px);
  bottom:clamp(60px, 9vw, 145px);
  width:clamp(220px, 19vw, 360px);
}

.faq__callout{
  position:absolute;
  right:clamp(110px, 13vw, 250px);
  bottom:clamp(330px, 35vw, 510px);
  width:clamp(170px, 14vw, 260px);
  height:auto;
  z-index:0;
  pointer-events:none;
  mix-blend-mode:screen;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));
}

.faq__kicker{
  display:block;
  text-align:center;
  font-size:11px;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--c-cyan-glow);
  margin-bottom:14px;
}

.faq__title{
  text-align:center;
  font-family:'Playfair Display', serif;
  font-weight:700;
  font-size:clamp(2.2rem, 4.2vw, 3.4rem);
  margin:0 0 clamp(40px, 6vw, 64px);
}

.faq__list{
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--c-line);
}

.faq__item{ border-bottom:1px solid var(--c-line); }

.faq__q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px 4px;
  text-align:left;
  font-family:'Cinzel', serif;
  font-size:clamp(14px, 1.6vw, 17px);
  font-weight:600;
  letter-spacing:.02em;
  color:#fff;
  transition:color .3s var(--ease), transform .15s var(--ease-out);
}
.faq__q:hover{ color:var(--c-cyan-glow); }
.faq__q:active{ transform:scale(.985); }

.faq__chevron{
  flex:0 0 auto;
  width:18px; height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  color:var(--c-muted);
  transition:transform .4s var(--ease-out), color .3s var(--ease);
}
.faq__item.is-open .faq__chevron{ transform:rotate(180deg); color:var(--c-cyan-hi); }

.faq__a{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .45s var(--ease);
}
.faq__item.is-open .faq__a{ grid-template-rows:1fr; }

.faq__a > div{
  overflow:hidden;
  opacity:0;
  transform:translateY(-10px);
  transition:opacity .3s var(--ease), transform .35s var(--ease);
}
.faq__item.is-open .faq__a > div{
  opacity:1;
  transform:none;
  transition:opacity .4s var(--ease) .1s, transform .4s var(--ease) .1s;
}

.faq__a p{
  margin:0;
  padding:0 4px clamp(20px, 3vw, 28px);
  max-width:64ch;
  font-size:14px;
  line-height:1.75;
  color:var(--c-muted);
}
.faq__a a{ color:var(--c-cyan-hi); text-decoration:underline; text-underline-offset:2px; }
.faq__a a:hover{ color:var(--c-cyan-glow); }

.faq__disclaimer{
  margin:clamp(48px, 7vw, 80px) 0 0;
  text-align:center;
  font-size:11px;
  line-height:1.6;
  letter-spacing:.02em;
  color:rgba(255,255,255,.35);
}

@media (max-width:1360px){

  .faq__portrait, .faq__callout{ display:none; }
}

@media (max-width:600px){
  .faq__q{ font-size:14px; padding:18px 2px; gap:14px; }
}

.dock{
  position:fixed;
  z-index:35;
  left:0; right:0; bottom:0;
  height:var(--dock-h);
  padding:0 var(--gutter);
  display:flex;
  align-items:center;
  gap:clamp(16px, 3vw, 44px);

  background:linear-gradient(to top, var(--c-ink-deep) 55%, rgba(3,10,16,.75) 100%);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.dock__legal{
  display:flex;
  align-items: center;
  gap:22px;
}
.dock__legal a{
  display: block;
  font-size:9px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  transition:color .3s var(--ease);
}
.dock__legal a:hover{ color:#fff; }

.dock__wordmark{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  height:25px;
  width:auto;
  opacity:.2;
  pointer-events:none;
}

.status{
  margin-left:auto;
  margin-right:auto;
  display:flex;
  align-items:center;
  gap:14px;
  padding:9px 9px 9px 18px;
  border:1px solid var(--c-line);
  border-radius:100px;
  background:rgba(255,255,255,.045);
  backdrop-filter:blur(10px);
}

.status__dot{
  position:relative;
  width:8px; height:8px;
  border-radius:50%;
  background:#5d7686;
  flex:0 0 8px;
}
.status__dot::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:1px solid currentColor;
  opacity:0;
}

.status[data-state="online"] .status__dot{
  background:#3ddc84;
  box-shadow:0 0 10px 1px rgba(61,220,132,.9);
  color:#3ddc84;
}
.status[data-state="online"] .status__dot::after{ animation:ping 2s var(--ease-out) infinite; }

.status[data-state="offline"] .status__dot{
  background:#ff5f57;
  box-shadow:0 0 10px 1px rgba(255,95,87,.75);
}

@keyframes ping{
  0%  { opacity:.9; transform:scale(.7); }
  70% { opacity:0;  transform:scale(2.1); }
  100%{ opacity:0;  transform:scale(2.1); }
}

.status__text{
  display:flex;
  flex-direction:column;
  gap:2px;
  line-height:1;
}

.status__count{
  font-family:'Cinzel', serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
.status__count b{ color:#fff; font-weight:700; }
.status__count i{ color:rgba(255,255,255,.35); font-style:normal; margin:0 3px; }
.status__count b:last-of-type{ color:rgba(255,255,255,.5); }

.status__label{
  font-size:8.5px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--c-muted);
}

.status__join{
  height:32px;
  padding:0 18px;
  display:grid;
  place-items:center;
  border-radius:100px;
  background:var(--c-cyan);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  transition:background-color .3s var(--ease), transform .3s var(--ease-out);
}
.status__join:hover{ background:var(--c-cyan-hi); transform:translateY(-1px); }

.dock__social{
  margin-left:auto;
  display:flex;
  align-items: center;
  gap:16px;
}
.dock__social a{
  display: flex;
  align-items: center;
  justify-content: center;
  width:22px; height:22px;
  color:rgba(255,255,255,.45);
  transition:color .3s var(--ease), transform .3s var(--ease-out);
}
.dock__social svg{ width:100%; height:100%; fill:currentColor; }
.dock__social a:hover{ color:var(--c-cyan-hi); transform:translateY(-2px); }

.nav__burger{
  display:none;
  width:34px; height:34px;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
  gap:5px;
}
.nav__burger span{
  display:block;
  height:1.5px;
  background:#fff;
  border-radius:2px;
  transition:transform .4s var(--ease-out), opacity .3s var(--ease), width .4s var(--ease-out);
}
.nav__burger span:nth-child(1){ width:22px; }
.nav__burger span:nth-child(2){ width:15px; }
.nav__burger span:nth-child(3){ width:22px; }

.nav__burger[aria-expanded="true"] span:nth-child(1){ width:22px; transform:translateY(6.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ width:22px; transform:translateY(-6.5px) rotate(-45deg); }

.drawer{
  position:fixed;
  inset:0;
  z-index:38;
  display:grid;
  place-items:center;
  background:rgba(3,10,16,.94);
  backdrop-filter:blur(18px);
  opacity:0;
  transition:opacity .4s var(--ease);
}
.drawer.is-open{ opacity:1; }

.drawer__nav{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:26px;
}
.drawer__nav a:not(.btn){
  font-family:'Cinzel', serif;
  font-size:20px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.drawer__nav .btn{ margin-top:14px; }

.modal{
  position:fixed;
  inset:0;
  z-index:60;
  display:grid;
  place-items:center;
  padding:var(--gutter);
  opacity:0;
  transition:opacity .35s var(--ease);
}
.modal.is-open{ opacity:1; }

.modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(3,10,16,.9);
  backdrop-filter:blur(14px);
}

.modal__box{
  position:relative;
  width:min(1040px, 100%);
  aspect-ratio:16/9;
  border-radius:var(--radius);
  overflow:hidden;
  background:#000;
  border:1px solid var(--c-line);
  box-shadow:0 40px 100px -30px rgba(0,0,0,1);
  transform:scale(.96);
  transition:transform .45s var(--ease-out);
}
.modal.is-open .modal__box{ transform:scale(1); }

.modal__box--linktree{
  width:min(400px, 100%);
  aspect-ratio:auto;
  background:linear-gradient(165deg, var(--c-ink-deep) 0%, var(--c-ink) 100%);
}

.linktree{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:clamp(40px, 8vw, 56px) clamp(28px, 6vw, 40px) clamp(32px, 6vw, 44px);
}

.linktree__logo{
  width:76px; height:76px;
  object-fit:contain;
  margin-bottom:18px;
  filter:drop-shadow(0 0 16px rgba(127,216,255,.5));
}

.linktree__kicker{
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--c-cyan-glow);
  margin-bottom:8px;
}

.linktree__title{
  font-family:'Playfair Display', serif;
  font-weight:700;
  font-size:1.7rem;
  margin:0 0 clamp(28px, 5vw, 40px);
}

.linktree__links{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
}

.linktree__link{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  height:52px;
  padding:0 20px;
  border:1px solid var(--c-line);
  border-radius:8px;
  background:rgba(255,255,255,.04);
  color:#fff;
  font-family:'Cinzel', serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  transition:background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease-out);
}
.linktree__link svg{
  width:20px; height:20px;
  flex:0 0 auto;
  fill:var(--c-cyan-glow);
}
.linktree__link:hover{
  background:rgba(43,166,232,.14);
  border-color:rgba(127,216,255,.5);
  transform:translateY(-2px);
}

.linktree__links [data-reveal]:nth-child(1){ transition-delay:.05s; }
.linktree__links [data-reveal]:nth-child(2){ transition-delay:.12s; }
.linktree__links [data-reveal]:nth-child(3){ transition-delay:.19s; }

.modal__close{
  position:absolute;
  z-index:3;
  top:12px; right:12px;
  width:38px; height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  border:1px solid var(--c-line);
  transition:background-color .3s var(--ease), transform .3s var(--ease-out);
}
.modal__close svg{
  width:16px; height:16px;
  fill:none; stroke:#fff;
  stroke-width:1.7; stroke-linecap:round;
}
.modal__close:hover{ background:var(--c-cyan); transform:rotate(90deg); }

@media (max-width:1200px){
  .status__join{ display:none; }
}

@media (max-width:1024px){
  :root{ --dock-h:78px; --nav-h:74px; }

  .edge{ display:none; }
  .dock__legal{ display:none; }
}

@media (max-width:768px){
  .nav{ grid-template-columns:1fr auto; }
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .nav .btn--ghost{ display:none; }
  .nav .nav-discord{ display:none; }
  .logo{ justify-self:start; width:auto; gap:0; }
  .logo__line{ display:none; }
  .logo__mark{ width:36px; height:36px; }
  .nav__actions{ justify-self:end; }

  .hero{ padding-bottom:calc(var(--dock-h) + 28px); }
  .slide__title{ font-size:clamp(2.6rem, 15vw, 5rem); }
  .slide__text{
    font-size:9.5px;
    line-height:2.1;
    letter-spacing:.16em;
    max-width:40ch;
  }
  .btn--primary{ height:48px; padding:0 30px; }

  .arrow--prev{ left:4px; }
  .arrow--next{ right:4px; }

  .dock{ gap:12px; padding-left:16px; padding-right:16px; }
  .status{ padding:7px 14px; gap:10px; }
  .status__count{ font-size:12px; }
  .status__label{ font-size:7.5px; letter-spacing:.16em; }
  .dock__social{ gap:12px; }
  .dock__social a{ width:17px; height:17px; }
}

@media (max-width:420px){
  .dock__social{ display:none; }
}

body.can-reveal [data-reveal]{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
body.can-reveal [data-reveal].is-revealed{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion:reduce){

  .stage, .stage__grain{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .bg{ transform:none !important; }
  .stage__grain{ display:none; }
}