
.aya-worlds{
  --aya-world-accent:#a8ff00;
  --aya-world-rgb:168,255,0;
  position:relative;
  min-height:100svh;
  overflow:hidden;
  background:#070707;
  color:#f7f7f2;
  isolation:isolate;
  border-top:1px solid rgba(255,255,255,.08);
}
.aya-worlds *{box-sizing:border-box}
.aya-worlds__shell{
  width:min(1540px,100%);
  margin:0 auto;
  padding:clamp(72px,9vw,140px) clamp(20px,4vw,64px);
  position:relative;
  z-index:3;
}
.aya-worlds__intro{
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:flex-start;
  padding-bottom:clamp(38px,5vw,70px);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.aya-worlds__kicker{
  display:block;
  margin-bottom:18px;
  font-size:10px;
  letter-spacing:.22em;
  font-weight:800;
  color:rgba(255,255,255,.5);
}
.aya-worlds h2{
  margin:0;
  color:#f7f7f2;
  font-size:clamp(48px,7vw,112px);
  line-height:.86;
  letter-spacing:-.06em;
  font-weight:950;
}
.aya-worlds__live{
  display:flex;
  align-items:center;
  gap:9px;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:10px;
  color:rgba(255,255,255,.52);
  white-space:nowrap;
  padding-top:4px;
}
.aya-worlds__live-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--aya-world-accent);
  box-shadow:0 0 16px rgba(var(--aya-world-rgb),.65);
}
.aya-worlds__layout{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(320px,.55fr);
  gap:clamp(28px,5vw,80px);
  align-items:stretch;
  padding-top:clamp(34px,5vw,68px);
}
.aya-worlds__list{
  display:flex;
  flex-direction:column;
}
.aya-worlds__item{
  appearance:none;
  width:100%;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.12);
  background:transparent;
  color:rgba(255,255,255,.42);
  display:grid;
  grid-template-columns:54px 1fr auto;
  gap:18px;
  align-items:center;
  padding:clamp(18px,2.2vw,31px) 0;
  text-align:left;
  cursor:pointer;
  transition:color .3s ease,transform .3s ease,padding-left .3s ease;
}
.aya-worlds__item:first-child{border-top:1px solid rgba(255,255,255,.12)}
.aya-worlds__item:hover,
.aya-worlds__item.is-active{
  color:#fff;
  padding-left:12px;
}
.aya-worlds__item.is-active{
  text-shadow:0 0 28px rgba(var(--aya-world-rgb),.08);
}
.aya-worlds__number{
  font-size:10px;
  letter-spacing:.18em;
  color:rgba(255,255,255,.32);
}
.aya-worlds__item.is-active .aya-worlds__number{color:var(--aya-world-accent)}
.aya-worlds__item-title{
  font-size:clamp(26px,4vw,62px);
  letter-spacing:-.045em;
  line-height:.95;
  font-weight:900;
}
.aya-worlds__arrow{
  width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  display:grid;place-items:center;
  font-size:16px;
  transition:transform .3s ease,background .3s ease,color .3s ease;
}
.aya-worlds__item.is-active .aya-worlds__arrow{
  background:var(--aya-world-accent);
  color:#070707;
  transform:rotate(45deg);
  border-color:transparent;
}
.aya-worlds__panel{
  min-height:520px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015)),
    rgba(7,7,7,.56);
  backdrop-filter:blur(20px);
  padding:clamp(24px,3vw,42px);
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  box-shadow:0 30px 100px rgba(0,0,0,.22);
}
.aya-worlds__panel:before{
  content:"";
  position:absolute;
  width:260px;height:260px;border-radius:50%;
  top:-120px;right:-100px;
  background:radial-gradient(circle,rgba(var(--aya-world-rgb),.18),transparent 70%);
  pointer-events:none;
}
.aya-worlds__panel-top{
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.17em;
  color:rgba(255,255,255,.48);
}
.aya-worlds__panel-label{color:var(--aya-world-accent);font-weight:900}
.aya-worlds__symbol{
  width:160px;height:160px;
  margin:clamp(42px,6vw,82px) auto clamp(34px,4vw,56px);
  position:relative;
  display:grid;
  place-items:center;
}
.aya-worlds__symbol:before,
.aya-worlds__symbol:after,
.aya-worlds__symbol span{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:34%;
  transform:rotate(0deg);
  transition:transform .65s cubic-bezier(.2,.7,.2,1),border-color .3s ease;
}
.aya-worlds__symbol:after{transform:rotate(45deg);border-color:rgba(var(--aya-world-rgb),.5)}
.aya-worlds__symbol span:nth-child(1){transform:scale(.72) rotate(18deg)}
.aya-worlds__symbol span:nth-child(2){transform:scale(.46) rotate(-22deg);border-color:rgba(var(--aya-world-rgb),.52)}
.aya-worlds__symbol span:nth-child(3){transform:scale(.22) rotate(45deg);background:rgba(var(--aya-world-rgb),.18);border-color:var(--aya-world-accent)}
.aya-worlds__panel.is-changing .aya-worlds__symbol:before{transform:rotate(45deg)}
.aya-worlds__panel.is-changing .aya-worlds__symbol:after{transform:rotate(90deg)}
.aya-worlds__desc{
  margin:0 0 28px;
  font-size:clamp(19px,2vw,28px);
  line-height:1.35;
  letter-spacing:-.02em;
  color:rgba(255,255,255,.82);
}
.aya-worlds__cta{
  margin-top:auto;
  min-height:58px;
  padding:0 20px;
  border-radius:999px;
  background:var(--aya-world-accent);
  color:#070707;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.1em;
  font-weight:950;
  transition:transform .25s ease,box-shadow .25s ease;
}
.aya-worlds__cta:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 50px rgba(var(--aya-world-rgb),.14);
}
.aya-worlds__cta i{
  font-style:normal;
  width:28px;height:28px;
  border-radius:50%;
  background:rgba(0,0,0,.1);
  display:grid;place-items:center;
}
.aya-worlds__note{
  display:block;
  margin-top:18px;
  color:rgba(255,255,255,.36);
  line-height:1.5;
}
.aya-worlds__ambient{
  position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;
}
.aya-worlds__grid{
  position:absolute;inset:0;
  opacity:.12;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 82%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 82%,transparent 100%);
}
.aya-worlds__halo{
  position:absolute;
  width:54vw;height:54vw;
  right:-15vw;top:10%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(var(--aya-world-rgb),.16),rgba(var(--aya-world-rgb),.055) 34%,transparent 68%);
  transition:background .5s ease,transform .7s cubic-bezier(.2,.7,.2,1);
}
.aya-worlds__beam{
  position:absolute;
  width:80vw;height:18vw;
  left:-22vw;bottom:8%;
  background:linear-gradient(90deg,transparent,rgba(var(--aya-world-rgb),.07),transparent);
  filter:blur(30px);
  transform:rotate(-13deg);
  transition:background .5s ease;
}
.aya-worlds__word{
  position:absolute;
  right:-.04em;
  bottom:-.1em;
  color:rgba(255,255,255,.025);
  font-size:clamp(120px,21vw,360px);
  line-height:.75;
  font-weight:950;
  letter-spacing:-.08em;
  transition:opacity .25s ease,transform .45s ease;
  white-space:nowrap;
}
.aya-worlds.is-switching .aya-worlds__word{
  opacity:0;
  transform:translateY(28px);
}

/* Theme accents */
.aya-worlds[data-active="brand"]{--aya-world-accent:#a8ff00;--aya-world-rgb:168,255,0}
.aya-worlds[data-active="growth"]{--aya-world-accent:#ff8a1f;--aya-world-rgb:255,138,31}
.aya-worlds[data-active="web"]{--aya-world-accent:#32b6ff;--aya-world-rgb:50,182,255}
.aya-worlds[data-active="social"]{--aya-world-accent:#ff4fc8;--aya-world-rgb:255,79,200}
.aya-worlds[data-active="content"]{--aya-world-accent:#9d68ff;--aya-world-rgb:157,104,255}
.aya-worlds[data-active="unsure"]{--aya-world-accent:#f7f7f2;--aya-world-rgb:247,247,242}

@media(max-width:980px){
  .aya-worlds__layout{grid-template-columns:1fr}
  .aya-worlds__panel{min-height:440px}
}
@media(max-width:720px){
  .aya-worlds__intro{display:block}
  .aya-worlds__live{margin-top:24px}
  .aya-worlds h2{font-size:clamp(48px,15vw,88px)}
  .aya-worlds__item{grid-template-columns:38px 1fr auto}
  .aya-worlds__item-title{font-size:clamp(27px,8vw,50px)}
  .aya-worlds__arrow{width:36px;height:36px}
  .aya-worlds__panel{border-radius:20px}
  .aya-worlds__symbol{width:130px;height:130px}
}
@media(max-width:480px){
  .aya-worlds__shell{padding-left:18px;padding-right:18px}
  .aya-worlds__item{gap:10px}
  .aya-worlds__number{font-size:9px}
  .aya-worlds__arrow{width:32px;height:32px}
  .aya-worlds__panel-top{flex-direction:column;gap:8px}
}
@media(prefers-reduced-motion:reduce){
  .aya-worlds *, .aya-worlds *:before, .aya-worlds *:after{
    transition:none!important;
    animation:none!important;
  }
}
