.elementor-8 .elementor-element.elementor-element-4f67486{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;--overlay-opacity:0.6;}.elementor-8 .elementor-element.elementor-element-4f67486::before, .elementor-8 .elementor-element.elementor-element-4f67486 > .elementor-background-video-container::before, .elementor-8 .elementor-element.elementor-element-4f67486 > .e-con-inner > .elementor-background-video-container::before, .elementor-8 .elementor-element.elementor-element-4f67486 > .elementor-background-slideshow::before, .elementor-8 .elementor-element.elementor-element-4f67486 > .e-con-inner > .elementor-background-slideshow::before, .elementor-8 .elementor-element.elementor-element-4f67486 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';background-color:#000000;}.elementor-8 .elementor-element.elementor-element-4f67486, .elementor-8 .elementor-element.elementor-element-4f67486::before{--border-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-dde063f{--display:flex;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-c828760{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-9999ea4{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-9999ea4.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-8 .elementor-element.elementor-element-b084308 img{width:100%;}.elementor-8 .elementor-element.elementor-element-32871e6{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-a697efb .elementor-button{font-family:"Share Tech Mono", Sans-serif;font-size:13px;font-weight:300;fill:#FFFFFF;color:#FFFFFF;background-color:#9900CC;}.elementor-8 .elementor-element.elementor-element-a464eb6 .elementor-button{font-family:"Share Tech Mono", Sans-serif;font-size:13px;font-weight:300;fill:#FFFFFF;color:#FFFFFF;background-color:#9900CC;}.elementor-8 .elementor-element.elementor-element-d8e51ce .elementor-button{font-family:"Share Tech Mono", Sans-serif;font-size:13px;font-weight:300;fill:#FFFFFF;color:#FFFFFF;background-color:#9900CC;}.elementor-8 .elementor-element.elementor-element-eac72ee .elementor-button{font-family:"Share Tech Mono", Sans-serif;font-size:13px;font-weight:300;fill:#FFFFFF;color:#FFFFFF;background-color:#9900CC;}.elementor-8 .elementor-element.elementor-element-00b0307 .elementor-button{font-family:"Share Tech Mono", Sans-serif;font-size:13px;font-weight:300;fill:#FFFFFF;color:#FFFFFF;background-color:#9900CC;}.elementor-8 .elementor-element.elementor-element-6ba70da{--display:flex;--background-transition:0.3s;--margin-top:100px;--margin-bottom:100px;--margin-left:0px;--margin-right:0px;}.elementor-8 .elementor-element.elementor-element-e55bcd6{text-align:center;}.elementor-8 .elementor-element.elementor-element-e55bcd6 img{width:60%;}.elementor-8 .elementor-element.elementor-element-fc74f0f > .elementor-widget-container{margin:20px 0px 0px 0px;}.elementor-8 .elementor-element.elementor-element-fc74f0f{text-align:center;}.elementor-8 .elementor-element.elementor-element-fc74f0f .elementor-heading-title{color:#FFFFFF;font-family:"Share Tech Mono", Sans-serif;font-size:25px;font-weight:300;}.elementor-8 .elementor-element.elementor-element-3a6e76f > .elementor-widget-container{margin:25px 0px 0px 0px;}.elementor-8 .elementor-element.elementor-element-3a6e76f{text-align:center;}.elementor-8 .elementor-element.elementor-element-3a6e76f .elementor-heading-title{color:#FFFFFF;font-family:"Share Tech Mono", Sans-serif;font-size:22px;font-weight:100;}.elementor-8 .elementor-element.elementor-element-34c6e12 .elementor-button{font-family:"Share Tech Mono", Sans-serif;font-size:13px;font-weight:300;fill:#FFFFFF;color:#FFFFFF;background-color:#9900CC;}.elementor-8 .elementor-element.elementor-element-a0a210b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-a0a210b:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-a0a210b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#14001A;}.elementor-8 .elementor-element.elementor-element-a0a210b, .elementor-8 .elementor-element.elementor-element-a0a210b::before{--border-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-e3151bc{--display:flex;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-9b0d56f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;--overlay-opacity:0.6;}.elementor-8 .elementor-element.elementor-element-9b0d56f:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-9b0d56f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://beyondnewworld.xyz/wp-content/uploads/2025/08/2.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-8 .elementor-element.elementor-element-9b0d56f::before, .elementor-8 .elementor-element.elementor-element-9b0d56f > .elementor-background-video-container::before, .elementor-8 .elementor-element.elementor-element-9b0d56f > .e-con-inner > .elementor-background-video-container::before, .elementor-8 .elementor-element.elementor-element-9b0d56f > .elementor-background-slideshow::before, .elementor-8 .elementor-element.elementor-element-9b0d56f > .e-con-inner > .elementor-background-slideshow::before, .elementor-8 .elementor-element.elementor-element-9b0d56f > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';background-color:#000000;}.elementor-8 .elementor-element.elementor-element-9b0d56f, .elementor-8 .elementor-element.elementor-element-9b0d56f::before{--border-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-a7d14a6{--display:flex;--background-transition:0.3s;--margin-top:100px;--margin-bottom:100px;--margin-left:0px;--margin-right:0px;}.elementor-8 .elementor-element.elementor-element-639b22d{--display:flex;--background-transition:0.3s;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-8 .elementor-element.elementor-element-f4d0043{--display:flex;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-6450769 img{width:100%;border-radius:15px 15px 15px 15px;}.elementor-8 .elementor-element.elementor-element-682c030 img{width:60%;}.elementor-8 .elementor-element.elementor-element-3c47e9e > .elementor-widget-container{margin:20px 0px 0px 0px;}.elementor-8 .elementor-element.elementor-element-3c47e9e{text-align:center;}.elementor-8 .elementor-element.elementor-element-3c47e9e .elementor-heading-title{color:#FFFFFF;font-family:"Share Tech Mono", Sans-serif;font-size:25px;font-weight:300;}.elementor-8 .elementor-element.elementor-element-b07ac59{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-23bec6f .elementor-button{font-family:"Share Tech Mono", Sans-serif;font-size:13px;font-weight:300;fill:#FFFFFF;color:#FFFFFF;background-color:#9900CC;}.elementor-8 .elementor-element.elementor-element-7cab1d4 .elementor-button{font-family:"Share Tech Mono", Sans-serif;font-size:13px;font-weight:300;fill:#FFFFFF;color:#FFFFFF;background-color:#9900CC;}.elementor-8 .elementor-element.elementor-element-16b8e83 .elementor-button{font-family:"Share Tech Mono", Sans-serif;font-size:13px;font-weight:300;fill:#FFFFFF;color:#FFFFFF;background-color:#9900CC;}.elementor-8 .elementor-element.elementor-element-afd5412 .elementor-button{font-family:"Share Tech Mono", Sans-serif;font-size:13px;font-weight:300;fill:#FFFFFF;color:#FFFFFF;background-color:#9900CC;}.elementor-8 .elementor-element.elementor-element-9ac6a45{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-9ac6a45:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-9ac6a45 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#14001A;}.elementor-8 .elementor-element.elementor-element-9ac6a45, .elementor-8 .elementor-element.elementor-element-9ac6a45::before{--border-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-162c1de{--display:flex;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-47bece7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;--overlay-opacity:0.6;}.elementor-8 .elementor-element.elementor-element-47bece7:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-47bece7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://beyondnewworld.xyz/wp-content/uploads/2025/08/1.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-8 .elementor-element.elementor-element-47bece7::before, .elementor-8 .elementor-element.elementor-element-47bece7 > .elementor-background-video-container::before, .elementor-8 .elementor-element.elementor-element-47bece7 > .e-con-inner > .elementor-background-video-container::before, .elementor-8 .elementor-element.elementor-element-47bece7 > .elementor-background-slideshow::before, .elementor-8 .elementor-element.elementor-element-47bece7 > .e-con-inner > .elementor-background-slideshow::before, .elementor-8 .elementor-element.elementor-element-47bece7 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';background-color:#000000;}.elementor-8 .elementor-element.elementor-element-47bece7, .elementor-8 .elementor-element.elementor-element-47bece7::before{--border-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-9767511{--display:flex;--background-transition:0.3s;--margin-top:100px;--margin-bottom:100px;--margin-left:0px;--margin-right:0px;}.elementor-8 .elementor-element.elementor-element-e417e5b{text-align:center;}.elementor-8 .elementor-element.elementor-element-e417e5b img{width:78%;}.elementor-8 .elementor-element.elementor-element-562970d > .elementor-widget-container{margin:20px 0px 0px 0px;}.elementor-8 .elementor-element.elementor-element-562970d{text-align:center;}.elementor-8 .elementor-element.elementor-element-562970d .elementor-heading-title{color:#FFFFFF;font-family:"Share Tech Mono", Sans-serif;font-size:25px;font-weight:300;}.elementor-8 .elementor-element.elementor-element-0fb956d{--display:flex;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-c6464d0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-c6464d0:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-c6464d0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#14001A;}.elementor-8 .elementor-element.elementor-element-c6464d0, .elementor-8 .elementor-element.elementor-element-c6464d0::before{--border-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-5ed32c4{--display:flex;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-4c73760{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;--overlay-opacity:0.6;}.elementor-8 .elementor-element.elementor-element-4c73760:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-4c73760 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://beyondnewworld.xyz/wp-content/uploads/2025/08/3.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-8 .elementor-element.elementor-element-4c73760::before, .elementor-8 .elementor-element.elementor-element-4c73760 > .elementor-background-video-container::before, .elementor-8 .elementor-element.elementor-element-4c73760 > .e-con-inner > .elementor-background-video-container::before, .elementor-8 .elementor-element.elementor-element-4c73760 > .elementor-background-slideshow::before, .elementor-8 .elementor-element.elementor-element-4c73760 > .e-con-inner > .elementor-background-slideshow::before, .elementor-8 .elementor-element.elementor-element-4c73760 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';background-color:#000000;}.elementor-8 .elementor-element.elementor-element-4c73760, .elementor-8 .elementor-element.elementor-element-4c73760::before{--border-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-1acaa70{--display:flex;--background-transition:0.3s;--margin-top:100px;--margin-bottom:100px;--margin-left:0px;--margin-right:0px;}.elementor-8 .elementor-element.elementor-element-ce53713{text-align:center;}.elementor-8 .elementor-element.elementor-element-ce53713 img{width:78%;}.elementor-8 .elementor-element.elementor-element-7098b54 > .elementor-widget-container{margin:20px 0px 0px 0px;}.elementor-8 .elementor-element.elementor-element-7098b54{text-align:center;}.elementor-8 .elementor-element.elementor-element-7098b54 .elementor-heading-title{color:#FFFFFF;font-family:"Share Tech Mono", Sans-serif;font-size:25px;font-weight:300;}.elementor-8 .elementor-element.elementor-element-5ca1cfc{--display:flex;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-ef7df4e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-ef7df4e:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-ef7df4e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#14001A;}.elementor-8 .elementor-element.elementor-element-ef7df4e, .elementor-8 .elementor-element.elementor-element-ef7df4e::before{--border-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-967a288{--display:flex;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-3cbab25{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;--overlay-opacity:0.6;}.elementor-8 .elementor-element.elementor-element-3cbab25::before, .elementor-8 .elementor-element.elementor-element-3cbab25 > .elementor-background-video-container::before, .elementor-8 .elementor-element.elementor-element-3cbab25 > .e-con-inner > .elementor-background-video-container::before, .elementor-8 .elementor-element.elementor-element-3cbab25 > .elementor-background-slideshow::before, .elementor-8 .elementor-element.elementor-element-3cbab25 > .e-con-inner > .elementor-background-slideshow::before, .elementor-8 .elementor-element.elementor-element-3cbab25 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';background-color:#000000;}.elementor-8 .elementor-element.elementor-element-3cbab25, .elementor-8 .elementor-element.elementor-element-3cbab25::before{--border-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-8cd778a{--display:flex;--background-transition:0.3s;--margin-top:100px;--margin-bottom:100px;--margin-left:0px;--margin-right:0px;}.elementor-8 .elementor-element.elementor-element-3a8935d{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-6896a95{--display:flex;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-6896a95.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-8 .elementor-element.elementor-element-dc6826d{text-align:center;}.elementor-8 .elementor-element.elementor-element-dc6826d img{width:78%;}.elementor-8 .elementor-element.elementor-element-703b6e4 > .elementor-widget-container{margin:20px 0px 0px 0px;}.elementor-8 .elementor-element.elementor-element-703b6e4{text-align:center;}.elementor-8 .elementor-element.elementor-element-703b6e4 .elementor-heading-title{color:#FFFFFF;font-family:"Share Tech Mono", Sans-serif;font-size:25px;font-weight:300;}.elementor-8 .elementor-element.elementor-element-28fa73a .elementor-button{font-family:"Share Tech Mono", Sans-serif;font-size:13px;font-weight:300;fill:#FFFFFF;color:#FFFFFF;background-color:#9900CC;}.elementor-8 .elementor-element.elementor-element-cad570d img{border-radius:15px 15px 15px 15px;}.elementor-8 .elementor-element.elementor-element-74560c6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-74560c6:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-74560c6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#14001A;}.elementor-8 .elementor-element.elementor-element-74560c6, .elementor-8 .elementor-element.elementor-element-74560c6::before{--border-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-e4d6fbf{--display:flex;--background-transition:0.3s;}@media(min-width:768px){.elementor-8 .elementor-element.elementor-element-9999ea4{--width:45.622%;}.elementor-8 .elementor-element.elementor-element-6896a95{--width:67.188%;}}@media(max-width:767px){.elementor-8 .elementor-element.elementor-element-c828760{--justify-content:center;}.elementor-8 .elementor-element.elementor-element-e55bcd6 img{width:100%;}.elementor-8 .elementor-element.elementor-element-fc74f0f .elementor-heading-title{font-size:20px;}.elementor-8 .elementor-element.elementor-element-3a6e76f .elementor-heading-title{font-size:15px;}.elementor-8 .elementor-element.elementor-element-682c030 img{width:100%;}.elementor-8 .elementor-element.elementor-element-3c47e9e .elementor-heading-title{font-size:20px;}.elementor-8 .elementor-element.elementor-element-e417e5b img{width:100%;}.elementor-8 .elementor-element.elementor-element-562970d .elementor-heading-title{font-size:20px;}.elementor-8 .elementor-element.elementor-element-ce53713 img{width:100%;}.elementor-8 .elementor-element.elementor-element-7098b54 .elementor-heading-title{font-size:20px;}.elementor-8 .elementor-element.elementor-element-3a8935d{--flex-direction:row-reverse;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap-reverse;}.elementor-8 .elementor-element.elementor-element-dc6826d img{width:100%;}.elementor-8 .elementor-element.elementor-element-703b6e4 .elementor-heading-title{font-size:20px;}}/* Start custom CSS for container, class: .elementor-element-dde063f */<!-- FONT -->
<link href="https://fonts.googleapis.com/css2?family=Share+Tech&display=swap" rel="stylesheet">

<!-- NAV FUTURISTIC -->
<nav class="fi-glow-container fi-nav">
  <a href="#home"       class="fi-btn">Home</a>
  <a href="#about"      class="fi-btn">About</a>
  <a href="#tokenomics" class="fi-btn">Tokenomics</a>
  <a href="#roadmaps"   class="fi-btn">Roadmaps</a>
  <a href="#join"       class="fi-btn">Join</a>
</nav>

<!-- CONTOH SECTION (opsional, bisa kamu ganti/isi) -->
<section id="home"       class="fi-section">Home Section</section>
<section id="about"      class="fi-section">About Section</section>
<section id="tokenomics" class="fi-section">Tokenomics Section</section>
<section id="roadmaps"   class="fi-section">Roadmaps Section</section>
<section id="join"       class="fi-section">Join Section</section>

<style>
  /* Smooth scroll & offset nyaman saat loncat anchor */
  html { scroll-behavior: smooth; }
  .fi-section { 
    min-height: 80vh; 
    padding: 80px 20px; 
    color:#fff; 
    font-family: "Share Tech", system-ui, sans-serif;
    scroll-margin-top: 92px; /* biar gak ketutup navbar */
    border-bottom: 1px dashed rgba(255,255,255,.08);
  }

  /* ===== FI FUTURISTIC GLOW (Neon #9900CC) ===== */
  :root{
    --fi-glow-color:#9900CC;
    --fi-border-radius: 18px;
    --fi-border-width: 2px;
    --fi-bg-color: rgba(10,0,15,.85);
  }
  body{
    margin:0;
    background: radial-gradient(1200px 600px at 50% -10%, rgba(153,0,204,.18), transparent 60%) #06040a;
  }

  .fi-glow-container{
    position: relative;
    display: grid;
    grid-auto-flow: column;
    gap: 12px;
    align-items: center;
    padding: 14px 18px;
    border-radius: var(--fi-border-radius);
    background: var(--fi-bg-color);
    border: var(--fi-border-width) solid var(--fi-glow-color);
    box-shadow:
      0 0 8px var(--fi-glow-color),
      0 0 16px var(--fi-glow-color),
      inset 0 0 12px rgba(153,0,204,.35);
    overflow: hidden;
  }
  /* Border energy sweep */
  .fi-glow-container::before{
    content:"";
    position:absolute; inset:0;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent, var(--fi-glow-color), transparent);
    background-size: 300% 300%;
    animation: fi-glow-border 4s linear infinite;
    pointer-events:none;
    mix-blend-mode: screen;
    opacity:.6;
  }
  @keyframes fi-glow-border{
    0%{   background-position:   0% 50%; }
    100%{ background-position: 300% 50%; }
  }

  /* NAV spesifik: fixed top */
  .fi-nav{
    position: sticky; top: 10px; z-index: 999;
    margin: 12px auto 20px;
    width: min(980px, 92%);
  }

  /* Tombol */
  .fi-btn{
    position: relative;
    display: inline-grid;
    place-items: center;
    padding: 10px 16px;
    border-radius: 12px;
    text-decoration: none;
    color: #f5dfff;
    font-family: "Share Tech", system-ui, sans-serif;
    font-size: 15px;
    letter-spacing: .4px;
    background: rgba(153,0,204,.10);
    border: 1px solid rgba(153,0,204,.45);
    box-shadow:
      0 0 6px rgba(153,0,204,.55),
      inset 0 0 10px rgba(153,0,204,.22);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    overflow: hidden;
  }
  .fi-btn::after{
    content:"";
    position:absolute; inset:0;
    background: radial-gradient(120px 60px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.25), transparent 60%);
    opacity: 0; transition: opacity .2s ease;
    pointer-events:none;
  }
  .fi-btn:hover{
    transform: translateY(-2px);
    box-shadow:
      0 0 10px rgba(153,0,204,.75),
      inset 0 0 14px rgba(153,0,204,.32);
    background: rgba(153,0,204,.14);
  }
  .fi-btn:hover::after{ opacity: .7; }

  /* State aktif berdasarkan :target (anchor yang dituju) */
  :target ~ .fi-nav .fi-btn[aria-current="page"]{ /* guard default */ }
  /* Tandai aktif dengan atribut data-target yang cocok dengan :target */
  .fi-btn[data-target="home"]:where(:hover, :focus-visible),
  #home:target ~ .fi-nav .fi-btn[data-target="home"],
  .fi-btn[data-target="about"]:where(:hover, :focus-visible),
  #about:target ~ .fi-nav .fi-btn[data-target="about"],
  .fi-btn[data-target="tokenomics"]:where(:hover, :focus-visible),
  #tokenomics:target ~ .fi-nav .fi-btn[data-target="tokenomics"],
  .fi-btn[data-target="roadmaps"]:where(:hover, :focus-visible),
  #roadmaps:target ~ .fi-nav .fi-btn[data-target="roadmaps"],
  .fi-btn[data-target="join"]:where(:hover, :focus-visible),
  #join:target ~ .fi-nav .fi-btn[data-target="join"]{
    outline: 1px solid #fff;
    box-shadow:
      0 0 14px rgba(153,0,204,.95),
      inset 0 0 18px rgba(153,0,204,.38);
  }

  /* Buat hover lighting mengikuti mouse */
  .fi-btn{ --mx:50%; --my:50%; }
  .fi-btn:hover{ cursor: pointer; }
</style>

<script>
  // Opsional: lighting mengikuti posisi mouse (aman tanpa framework)
  document.addEventListener('mousemove', e=>{
    document.querySelectorAll('.fi-btn').forEach(btn=>{
      const r = btn.getBoundingClientRect();
      btn.style.setProperty('--mx', (e.clientX - r.left)+'px');
      btn.style.setProperty('--my', (e.clientY - r.top)+'px');
    });
  });
</script>/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e55bcd6 *//* Glow berdenyut mengikuti gambar transparan (warna #9900CC) */
.glow-img-pulse{
  filter:
    drop-shadow(0 0 6px #9900CC)
    drop-shadow(0 0 18px rgba(153,0,204,.45))
    drop-shadow(0 0 40px rgba(153,0,204,.25));
  animation: glowImgPulse 2.2s ease-in-out infinite;
  transition: filter .25s ease;
}

@keyframes glowImgPulse{
  0%,100%{
    filter:
      drop-shadow(0 0 6px #9900CC)
      drop-shadow(0 0 18px rgba(153,0,204,.45))
      drop-shadow(0 0 40px rgba(153,0,204,.25));
  }
  50%{
    filter:
      drop-shadow(0 0 10px #9900CC)
      drop-shadow(0 0 28px #9900CC)
      drop-shadow(0 0 70px rgba(153,0,204,.45));
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a7d14a6 */<!-- FONT -->
<link href="https://fonts.googleapis.com/css2?family=Share+Tech&display=swap" rel="stylesheet">

<!-- NAV FUTURISTIC -->
<nav class="fi-glow-container fi-nav">
  <a href="#home"       class="fi-btn">Home</a>
  <a href="#about"      class="fi-btn">About</a>
  <a href="#tokenomics" class="fi-btn">Tokenomics</a>
  <a href="#roadmaps"   class="fi-btn">Roadmaps</a>
  <a href="#join"       class="fi-btn">Join</a>
</nav>

<!-- CONTOH SECTION (opsional, bisa kamu ganti/isi) -->
<section id="home"       class="fi-section">Home Section</section>
<section id="about"      class="fi-section">About Section</section>
<section id="tokenomics" class="fi-section">Tokenomics Section</section>
<section id="roadmaps"   class="fi-section">Roadmaps Section</section>
<section id="join"       class="fi-section">Join Section</section>

<style>
  /* Smooth scroll & offset nyaman saat loncat anchor */
  html { scroll-behavior: smooth; }
  .fi-section { 
    min-height: 80vh; 
    padding: 80px 20px; 
    color:#fff; 
    font-family: "Share Tech", system-ui, sans-serif;
    scroll-margin-top: 92px; /* biar gak ketutup navbar */
    border-bottom: 1px dashed rgba(255,255,255,.08);
  }

  /* ===== FI FUTURISTIC GLOW (Neon #9900CC) ===== */
  :root{
    --fi-glow-color:#9900CC;
    --fi-border-radius: 18px;
    --fi-border-width: 2px;
    --fi-bg-color: rgba(10,0,15,.85);
  }
  body{
    margin:0;
    background: radial-gradient(1200px 600px at 50% -10%, rgba(153,0,204,.18), transparent 60%) #06040a;
  }

  .fi-glow-container{
    position: relative;
    display: grid;
    grid-auto-flow: column;
    gap: 12px;
    align-items: center;
    padding: 14px 18px;
    border-radius: var(--fi-border-radius);
    background: var(--fi-bg-color);
    border: var(--fi-border-width) solid var(--fi-glow-color);
    box-shadow:
      0 0 8px var(--fi-glow-color),
      0 0 16px var(--fi-glow-color),
      inset 0 0 12px rgba(153,0,204,.35);
    overflow: hidden;
  }
  /* Border energy sweep */
  .fi-glow-container::before{
    content:"";
    position:absolute; inset:0;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent, var(--fi-glow-color), transparent);
    background-size: 300% 300%;
    animation: fi-glow-border 4s linear infinite;
    pointer-events:none;
    mix-blend-mode: screen;
    opacity:.6;
  }
  @keyframes fi-glow-border{
    0%{   background-position:   0% 50%; }
    100%{ background-position: 300% 50%; }
  }

  /* NAV spesifik: fixed top */
  .fi-nav{
    position: sticky; top: 10px; z-index: 999;
    margin: 12px auto 20px;
    width: min(980px, 92%);
  }

  /* Tombol */
  .fi-btn{
    position: relative;
    display: inline-grid;
    place-items: center;
    padding: 10px 16px;
    border-radius: 12px;
    text-decoration: none;
    color: #f5dfff;
    font-family: "Share Tech", system-ui, sans-serif;
    font-size: 15px;
    letter-spacing: .4px;
    background: rgba(153,0,204,.10);
    border: 1px solid rgba(153,0,204,.45);
    box-shadow:
      0 0 6px rgba(153,0,204,.55),
      inset 0 0 10px rgba(153,0,204,.22);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    overflow: hidden;
  }
  .fi-btn::after{
    content:"";
    position:absolute; inset:0;
    background: radial-gradient(120px 60px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.25), transparent 60%);
    opacity: 0; transition: opacity .2s ease;
    pointer-events:none;
  }
  .fi-btn:hover{
    transform: translateY(-2px);
    box-shadow:
      0 0 10px rgba(153,0,204,.75),
      inset 0 0 14px rgba(153,0,204,.32);
    background: rgba(153,0,204,.14);
  }
  .fi-btn:hover::after{ opacity: .7; }

  /* State aktif berdasarkan :target (anchor yang dituju) */
  :target ~ .fi-nav .fi-btn[aria-current="page"]{ /* guard default */ }
  /* Tandai aktif dengan atribut data-target yang cocok dengan :target */
  .fi-btn[data-target="home"]:where(:hover, :focus-visible),
  #home:target ~ .fi-nav .fi-btn[data-target="home"],
  .fi-btn[data-target="about"]:where(:hover, :focus-visible),
  #about:target ~ .fi-nav .fi-btn[data-target="about"],
  .fi-btn[data-target="tokenomics"]:where(:hover, :focus-visible),
  #tokenomics:target ~ .fi-nav .fi-btn[data-target="tokenomics"],
  .fi-btn[data-target="roadmaps"]:where(:hover, :focus-visible),
  #roadmaps:target ~ .fi-nav .fi-btn[data-target="roadmaps"],
  .fi-btn[data-target="join"]:where(:hover, :focus-visible),
  #join:target ~ .fi-nav .fi-btn[data-target="join"]{
    outline: 1px solid #fff;
    box-shadow:
      0 0 14px rgba(153,0,204,.95),
      inset 0 0 18px rgba(153,0,204,.38);
  }

  /* Buat hover lighting mengikuti mouse */
  .fi-btn{ --mx:50%; --my:50%; }
  .fi-btn:hover{ cursor: pointer; }
</style>

<script>
  // Opsional: lighting mengikuti posisi mouse (aman tanpa framework)
  document.addEventListener('mousemove', e=>{
    document.querySelectorAll('.fi-btn').forEach(btn=>{
      const r = btn.getBoundingClientRect();
      btn.style.setProperty('--mx', (e.clientX - r.left)+'px');
      btn.style.setProperty('--my', (e.clientY - r.top)+'px');
    });
  });
</script>/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e417e5b *//* Glow berdenyut mengikuti gambar transparan (warna #9900CC) */
.glow-img-pulse{
  filter:
    drop-shadow(0 0 6px #9900CC)
    drop-shadow(0 0 18px rgba(153,0,204,.45))
    drop-shadow(0 0 40px rgba(153,0,204,.25));
  animation: glowImgPulse 2.2s ease-in-out infinite;
  transition: filter .25s ease;
}

@keyframes glowImgPulse{
  0%,100%{
    filter:
      drop-shadow(0 0 6px #9900CC)
      drop-shadow(0 0 18px rgba(153,0,204,.45))
      drop-shadow(0 0 40px rgba(153,0,204,.25));
  }
  50%{
    filter:
      drop-shadow(0 0 10px #9900CC)
      drop-shadow(0 0 28px #9900CC)
      drop-shadow(0 0 70px rgba(153,0,204,.45));
  }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ce53713 *//* Glow berdenyut mengikuti gambar transparan (warna #9900CC) */
.glow-img-pulse{
  filter:
    drop-shadow(0 0 6px #9900CC)
    drop-shadow(0 0 18px rgba(153,0,204,.45))
    drop-shadow(0 0 40px rgba(153,0,204,.25));
  animation: glowImgPulse 2.2s ease-in-out infinite;
  transition: filter .25s ease;
}

@keyframes glowImgPulse{
  0%,100%{
    filter:
      drop-shadow(0 0 6px #9900CC)
      drop-shadow(0 0 18px rgba(153,0,204,.45))
      drop-shadow(0 0 40px rgba(153,0,204,.25));
  }
  50%{
    filter:
      drop-shadow(0 0 10px #9900CC)
      drop-shadow(0 0 28px #9900CC)
      drop-shadow(0 0 70px rgba(153,0,204,.45));
  }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-dc6826d *//* Glow berdenyut mengikuti gambar transparan (warna #9900CC) */
.glow-img-pulse{
  filter:
    drop-shadow(0 0 6px #9900CC)
    drop-shadow(0 0 18px rgba(153,0,204,.45))
    drop-shadow(0 0 40px rgba(153,0,204,.25));
  animation: glowImgPulse 2.2s ease-in-out infinite;
  transition: filter .25s ease;
}

@keyframes glowImgPulse{
  0%,100%{
    filter:
      drop-shadow(0 0 6px #9900CC)
      drop-shadow(0 0 18px rgba(153,0,204,.45))
      drop-shadow(0 0 40px rgba(153,0,204,.25));
  }
  50%{
    filter:
      drop-shadow(0 0 10px #9900CC)
      drop-shadow(0 0 28px #9900CC)
      drop-shadow(0 0 70px rgba(153,0,204,.45));
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8cd778a */<!-- FONT -->
<link href="https://fonts.googleapis.com/css2?family=Share+Tech&display=swap" rel="stylesheet">

<!-- NAV FUTURISTIC -->
<nav class="fi-glow-container fi-nav">
  <a href="#home"       class="fi-btn">Home</a>
  <a href="#about"      class="fi-btn">About</a>
  <a href="#tokenomics" class="fi-btn">Tokenomics</a>
  <a href="#roadmaps"   class="fi-btn">Roadmaps</a>
  <a href="#join"       class="fi-btn">Join</a>
</nav>

<!-- CONTOH SECTION (opsional, bisa kamu ganti/isi) -->
<section id="home"       class="fi-section">Home Section</section>
<section id="about"      class="fi-section">About Section</section>
<section id="tokenomics" class="fi-section">Tokenomics Section</section>
<section id="roadmaps"   class="fi-section">Roadmaps Section</section>
<section id="join"       class="fi-section">Join Section</section>

<style>
  /* Smooth scroll & offset nyaman saat loncat anchor */
  html { scroll-behavior: smooth; }
  .fi-section { 
    min-height: 80vh; 
    padding: 80px 20px; 
    color:#fff; 
    font-family: "Share Tech", system-ui, sans-serif;
    scroll-margin-top: 92px; /* biar gak ketutup navbar */
    border-bottom: 1px dashed rgba(255,255,255,.08);
  }

  /* ===== FI FUTURISTIC GLOW (Neon #9900CC) ===== */
  :root{
    --fi-glow-color:#9900CC;
    --fi-border-radius: 18px;
    --fi-border-width: 2px;
    --fi-bg-color: rgba(10,0,15,.85);
  }
  body{
    margin:0;
    background: radial-gradient(1200px 600px at 50% -10%, rgba(153,0,204,.18), transparent 60%) #06040a;
  }

  .fi-glow-container{
    position: relative;
    display: grid;
    grid-auto-flow: column;
    gap: 12px;
    align-items: center;
    padding: 14px 18px;
    border-radius: var(--fi-border-radius);
    background: var(--fi-bg-color);
    border: var(--fi-border-width) solid var(--fi-glow-color);
    box-shadow:
      0 0 8px var(--fi-glow-color),
      0 0 16px var(--fi-glow-color),
      inset 0 0 12px rgba(153,0,204,.35);
    overflow: hidden;
  }
  /* Border energy sweep */
  .fi-glow-container::before{
    content:"";
    position:absolute; inset:0;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent, var(--fi-glow-color), transparent);
    background-size: 300% 300%;
    animation: fi-glow-border 4s linear infinite;
    pointer-events:none;
    mix-blend-mode: screen;
    opacity:.6;
  }
  @keyframes fi-glow-border{
    0%{   background-position:   0% 50%; }
    100%{ background-position: 300% 50%; }
  }

  /* NAV spesifik: fixed top */
  .fi-nav{
    position: sticky; top: 10px; z-index: 999;
    margin: 12px auto 20px;
    width: min(980px, 92%);
  }

  /* Tombol */
  .fi-btn{
    position: relative;
    display: inline-grid;
    place-items: center;
    padding: 10px 16px;
    border-radius: 12px;
    text-decoration: none;
    color: #f5dfff;
    font-family: "Share Tech", system-ui, sans-serif;
    font-size: 15px;
    letter-spacing: .4px;
    background: rgba(153,0,204,.10);
    border: 1px solid rgba(153,0,204,.45);
    box-shadow:
      0 0 6px rgba(153,0,204,.55),
      inset 0 0 10px rgba(153,0,204,.22);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    overflow: hidden;
  }
  .fi-btn::after{
    content:"";
    position:absolute; inset:0;
    background: radial-gradient(120px 60px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.25), transparent 60%);
    opacity: 0; transition: opacity .2s ease;
    pointer-events:none;
  }
  .fi-btn:hover{
    transform: translateY(-2px);
    box-shadow:
      0 0 10px rgba(153,0,204,.75),
      inset 0 0 14px rgba(153,0,204,.32);
    background: rgba(153,0,204,.14);
  }
  .fi-btn:hover::after{ opacity: .7; }

  /* State aktif berdasarkan :target (anchor yang dituju) */
  :target ~ .fi-nav .fi-btn[aria-current="page"]{ /* guard default */ }
  /* Tandai aktif dengan atribut data-target yang cocok dengan :target */
  .fi-btn[data-target="home"]:where(:hover, :focus-visible),
  #home:target ~ .fi-nav .fi-btn[data-target="home"],
  .fi-btn[data-target="about"]:where(:hover, :focus-visible),
  #about:target ~ .fi-nav .fi-btn[data-target="about"],
  .fi-btn[data-target="tokenomics"]:where(:hover, :focus-visible),
  #tokenomics:target ~ .fi-nav .fi-btn[data-target="tokenomics"],
  .fi-btn[data-target="roadmaps"]:where(:hover, :focus-visible),
  #roadmaps:target ~ .fi-nav .fi-btn[data-target="roadmaps"],
  .fi-btn[data-target="join"]:where(:hover, :focus-visible),
  #join:target ~ .fi-nav .fi-btn[data-target="join"]{
    outline: 1px solid #fff;
    box-shadow:
      0 0 14px rgba(153,0,204,.95),
      inset 0 0 18px rgba(153,0,204,.38);
  }

  /* Buat hover lighting mengikuti mouse */
  .fi-btn{ --mx:50%; --my:50%; }
  .fi-btn:hover{ cursor: pointer; }
</style>

<script>
  // Opsional: lighting mengikuti posisi mouse (aman tanpa framework)
  document.addEventListener('mousemove', e=>{
    document.querySelectorAll('.fi-btn').forEach(btn=>{
      const r = btn.getBoundingClientRect();
      btn.style.setProperty('--mx', (e.clientX - r.left)+'px');
      btn.style.setProperty('--my', (e.clientY - r.top)+'px');
    });
  });
</script>/* End custom CSS */