html{scroll-behavior:smooth}main{font-family:poppins,sans-serif}#hero{position:relative;width:100vw;height:100vh}.hero-content{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#000;padding:0 1rem}.hero-title{font-size:2.5rem;font-weight:700;margin-bottom:1rem}.hero-subtitle{color:#f0f0f0;font-size:1.25rem;margin-bottom:2rem;max-width:600px;margin-left:auto;margin-right:auto}.hero-button{background-color:#000;color:#fff;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:background-color .3s ease}.hero-button:hover{background-color:#ddd}.options::-webkit-scrollbar{display:none}.option{border-radius:0;border-width:2px;border-color:#292929;border-style:solid;margin:0;min-width:60px;min-height:100px;flex:1;transition:flex-grow .8s cubic-bezier(.23,1,.32,1),box-shadow .5s cubic-bezier(.23,1,.32,1),background-size .6s cubic-bezier(.23,1,.32,1),background-position .6s cubic-bezier(.23,1,.32,1);will-change:flex-grow,box-shadow,background-size,background-position;box-shadow:0 10px 30px rgba(0,0,0,.3);cursor:pointer;background-size:auto 120%;background-position:50%;position:relative;display:flex;flex-direction:column;justify-content:flex-end;background-color:#18181b;opacity:0;transform:translateX(-60px)}.option.animated{animation:slideFadeIn .7s cubic-bezier(.23,1,.32,1)forwards}@keyframes slideFadeIn{0%{opacity:0;transform:translateX(-60px)}100%{opacity:1;transform:translateX(0)}}.option .shadow,.option .label .main,.option .label .sub{transition:all .8s cubic-bezier(.23,1,.32,1)}.option .label .main,.option .label .sub{opacity:0;transform:translateX(25px)}.option.active{flex-grow:7;background-size:auto 100%;z-index:10;box-shadow:0 20px 60px rgba(0,0,0,.5);border-color:#fff}.option.active .shadow{bottom:0 !important;box-shadow:inset 0 -120px 120px -120px #000,inset 0 -120px 120px -80px #000}.option.active .label .main,.option.active .label .sub{opacity:1;transform:translateX(0)}.option .shadow{position:absolute;bottom:-40px;left:0;right:0;height:120px;pointer-events:none;box-shadow:inset 0 -120px 0 -120px #000,inset 0 -120px 0 -80px #000}.option .label{position:absolute;left:0;right:0;bottom:20px;display:flex;align-items:center;justify-content:flex-start;height:48px;z-index:2;padding-left:16px;padding-right:16px;gap:12px;width:100%;pointer-events:none}.option .icon{min-width:44px;max-width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:9999px;background:rgba(32,32,32,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 4px rgba(0,0,0,.18);font-size:1.5rem;pointer-events:auto;flex-shrink:0;flex-grow:0;transition:background .25s;color:#fff;border:2px solid #444}.option .info{flex:1;display:flex;flex-direction:column;justify-content:center;margin-left:0;pointer-events:auto}@media(max-width:900px){.options>:nth-child(5){display:none}}@media(max-width:820px){.options>:nth-child(4){display:none}}@media(max-width:740px){.options>:nth-child(3){display:none}}@media(max-width:660px){.options>:nth-child(2){display:none}}.option .label .main,.option .label .sub{pointer-events:none}.option:not(.active) .label .main,.option:not(.active) .label .sub{opacity:0;transform:translateX(25px)}.option.active .label .main,.option.active .label .sub{opacity:1;transform:translateX(0)}.fade-in-top{opacity:0;transform:translateY(-20px);animation:fadeInFromTop .8s ease-in-out forwards}.fade-in-top.delay-1{animation-delay:.3s}.fade-in-top.delay-2{animation-delay:.6s}@keyframes fadeInFromTop{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}.highlight{@apply has-checked:bg-gradient-to-r has-checked:from-purple-800/40 has-checked:to-white/20 has-checked:border has-checked:border-purple-800/60}.glass-effect{backdrop-filter:blur(14px)brightness(.91);-webkit-backdrop-filter:blur(14px)brightness(.91)}.gradient-text{background-clip:text;-webkit-background-clip:text;color:transparent}.card-divider{height:1px;background-image:linear-gradient( 90deg,transparent,rgba(255,255,255,9%) 20%,rgba(255,255,255,.22) 50%,rgba(255,255,255,9%) 80%,transparent )}.icon-circle{height:2rem;width:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,6%);border:1px solid rgba(255,255,255,.12)}.floating{animation:float 6s ease-in-out infinite}.floating-delay{animation:float 6s ease-in-out infinite;animation-delay:2s}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-20px)}100%{transform:translateY(0)}}