/* =====================================================
       ROOT
    ===================================================== */

    :root {
      --green: #79ff32;
      --green-light: #a5ff70;
      --green-dark: #43c91c;

      --white: #f7f8f5;
      --muted: #92998c;

      --black: #030403;
      --black-soft: #080a08;

      --border: rgba(121, 255, 50, .16);
    }


    /* =====================================================
       RESET
    ===================================================== */

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }


    html,
    body {
      width: 100%;
      height: 100%;

      overflow: hidden;
    }


    body {
      background: var(--black);

      color: var(--white);

      font-family: "Inter", sans-serif;

      position: relative;
    }


    /* =====================================================
       THREE.JS CANVAS
    ===================================================== */

    #chipsCanvas {
      position: fixed;

      inset: 0;

      width: 100%;
      height: 100%;

      z-index: 30;

      pointer-events: none;
    }


    /* =====================================================
       BACKGROUND
    ===================================================== */

    .background-glow {
      position: fixed;

      width: 600px;
      height: 600px;

      border-radius: 50%;

      background:
        radial-gradient(
          circle,
          rgba(121,255,50,.075),
          transparent 65%
        );

      filter: blur(40px);

      top: 50%;
      left: 50%;

      transform:
        translate(-50%, -50%);

      pointer-events: none;

      z-index: -5;
    }


    .grid {
      position: fixed;

      inset: 0;

      z-index: -6;

      opacity: .25;

      background-image:
        linear-gradient(
          rgba(121,255,50,.035) 1px,
          transparent 1px
        ),
        linear-gradient(
          90deg,
          rgba(121,255,50,.035) 1px,
          transparent 1px
        );

      background-size: 50px 50px;

      mask-image:
        linear-gradient(
          to bottom,
          transparent,
          black 15%,
          black 85%,
          transparent
        );
    }


    /* =====================================================
       NOISE
    ===================================================== */

    .noise {
      position: fixed;

      inset: 0;

      z-index: 100;

      pointer-events: none;

      opacity: .025;

      background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }


    /* =====================================================
       HEADER
    ===================================================== */

    header {
      position: relative;

      width: min(1400px, 92%);

      height: 90px;

      margin: auto;

      display: flex;

      align-items: center;

      justify-content: space-between;

      z-index: 10;
    }


    .brand {
      display: flex;

      align-items: center;

      gap: 13px;

      text-decoration: none;

      color: white;
    }


    .brand-mark {
      width: 40px;
      height: 40px;

      border-radius: 11px;

      display: grid;

      place-items: center;

      font-family: "Space Grotesk", sans-serif;

      font-size: 21px;

      font-weight: 800;

      color: #061003;

      background:
        linear-gradient(
          145deg,
          var(--green-light),
          var(--green)
        );

      box-shadow:
        0 0 30px rgba(121,255,50,.13),

        inset 0 1px
        rgba(255,255,255,.5);
    }


    .brand-name {
      font-family: "Space Grotesk", sans-serif;

      font-weight: 700;

      font-size: 17px;

      letter-spacing: -.5px;
    }


    .brand-sub {
      margin-top: 5px;

      color: #62685e;

      font-family: "DM Mono", monospace;

      font-size: 8px;

      letter-spacing: 2px;

      text-transform: uppercase;
    }


    .edition {
      display: flex;

      align-items: center;

      gap: 9px;

      font-family: "DM Mono", monospace;

      font-size: 9px;

      letter-spacing: 1.6px;

      text-transform: uppercase;

      color: #686e64;
    }


    .live-dot {
      width: 7px;
      height: 7px;

      border-radius: 50%;

      background: var(--green);

      box-shadow:
        0 0 13px var(--green);

      animation:
        blink 1.8s infinite;
    }


    @keyframes blink {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: .25;
      }
    }


    /* =====================================================
       MAIN
    ===================================================== */

    main {
      width: min(1400px, 92%);

      height: calc(100vh - 90px);

      margin: auto;

      display: grid;

      grid-template-columns:
        1.05fr
        .95fr;

      align-items: center;

      position: relative;
    }


    /* =====================================================
       HERO CONTENT
    ===================================================== */

    .hero-content {
      position: relative;

      z-index: 5;

      padding-bottom: 25px;
    }


    .eyebrow {
      display: inline-flex;

      align-items: center;

      gap: 9px;

      padding:
        8px 12px;

      border:
        1px solid rgba(121,255,50,.15);

      border-radius: 100px;

      background:
        rgba(121,255,50,.025);

      font-family: "DM Mono", monospace;

      font-size: 9px;

      letter-spacing: 1.7px;

      text-transform: uppercase;

      color: #8d9388;

      margin-bottom: 25px;

      animation:
        reveal .8s ease forwards;
    }


    .eyebrow span {
      color: var(--green);
    }


    /* =====================================================
       TITLE
    ===================================================== */

    .hero-title {
      font-family: "Space Grotesk", sans-serif;

      font-size:
        clamp(70px, 9vw, 145px);

      line-height: .84;

      letter-spacing: -7px;

      font-weight: 700;

      max-width: 850px;

      animation:
        reveal .9s ease .08s both;
    }


    .white {
      color: var(--white);
    }


    .green {
      color: var(--green);

      text-shadow:
        0 0 35px
        rgba(121,255,50,.15);
    }


    .dot {
      color: #626a5d;
    }


    /* =====================================================
       DESCRIPTION
    ===================================================== */

    .hero-description {
      max-width: 570px;

      margin-top: 30px;

      color: #8e9589;

      font-size: 14px;

      line-height: 1.75;

      animation:
        reveal .9s ease .18s both;
    }


    .hero-description strong {
      color: #d9dfd4;

      font-weight: 600;
    }


    /* =====================================================
       ACTIONS
    ===================================================== */

    .actions {
      display: flex;

      align-items: center;

      flex-wrap: wrap;

      gap: 10px;

      margin-top: 31px;

      animation:
        reveal .9s ease .28s both;
    }


    .btn {
      height: 53px;

      padding:
        0 20px;

      border-radius: 12px;

      display: inline-flex;

      align-items: center;

      justify-content: center;

      gap: 9px;

      text-decoration: none;

      font-family: "Inter", sans-serif;

      font-size: 11px;

      font-weight: 700;

      cursor: pointer;

      transition:
        .25s ease;

      outline: none;
    }


    /* =====================================================
       COMMUNITY
    ===================================================== */

    .btn-primary {
      color: #061003;

      background:
        linear-gradient(
          135deg,
          var(--green-light),
          var(--green)
        );

      border:
        1px solid
        rgba(255,255,255,.18);

      box-shadow:
        0 8px 35px
        rgba(121,255,50,.11),

        inset 0 1px
        rgba(255,255,255,.5);
    }


    .btn-primary:hover {
      transform:
        translateY(-3px);

      box-shadow:
        0 14px 45px
        rgba(121,255,50,.23);
    }


    /* =====================================================
       REGISTRATION
    ===================================================== */

    .btn-secondary {
      color: #e6ebe3;

      border:
        1px solid
        rgba(255,255,255,.11);

      background:
        rgba(255,255,255,.035);

      backdrop-filter:
        blur(15px);
    }


    .btn-secondary:hover {
      transform:
        translateY(-3px);

      border-color:
        rgba(121,255,50,.35);

      background:
        rgba(121,255,50,.05);
    }


    /* =====================================================
       CHIPS BUTTON
    ===================================================== */

    .chips-btn {
      color: #071002;

      border:
        1px solid var(--green);

      background:
        var(--green);

      box-shadow:
        0 8px 30px
        rgba(121,255,50,.10);
    }


    .chips-btn:hover {
      transform:
        translateY(-3px)
        scale(1.02);

      background:
        var(--green-light);

      box-shadow:
        0 12px 45px
        rgba(121,255,50,.25);
    }


    .chips-btn:active {
      transform:
        scale(.96);
    }


    .arrow {
      font-size: 16px;

      transition:
        transform .25s ease;
    }


    .btn:hover .arrow {
      transform:
        translateX(4px);
    }


    /* =====================================================
       META
    ===================================================== */

    .meta {
      display: flex;

      align-items: center;

      gap: 22px;

      margin-top: 32px;

      animation:
        reveal .9s ease .38s both;
    }


    .meta-item {
      display: flex;

      align-items: center;

      gap: 8px;

      font-family: "DM Mono", monospace;

      font-size: 8px;

      letter-spacing: 1px;

      text-transform: uppercase;

      color: #596055;
    }


    .meta-icon {
      color: var(--green);

      font-size: 11px;
    }


    .meta-line {
      width: 1px;

      height: 16px;

      background:
        rgba(255,255,255,.08);
    }


    /* =====================================================
       LOGO VISUAL
    ===================================================== */

    .hero-visual {
      height: 100%;

      min-height: 500px;

      display: grid;

      place-items: center;

      position: relative;
    }


    .visual-glow {
      position: absolute;

      width: 480px;
      height: 480px;

      border-radius: 50%;

      background:
        rgba(121,255,50,.045);

      filter:
        blur(55px);

      animation:
        glow 5s ease-in-out infinite;
    }


    @keyframes glow {

      0%,
      100% {
        transform: scale(.94);

        opacity: .55;
      }

      50% {
        transform: scale(1.07);

        opacity: .95;
      }
    }


    /* =====================================================
       ORBIT
    ===================================================== */

    .orbit {
      position: absolute;

      width: 570px;
      height: 570px;

      border-radius: 50%;

      border:
        1px dashed
        rgba(121,255,50,.13);

      animation:
        rotate 28s linear infinite;
    }


    .orbit::before {
      content: "";

      position: absolute;

      width: 7px;
      height: 7px;

      border-radius: 50%;

      background:
        var(--green);

      top: 10%;
      left: 12%;

      box-shadow:
        0 0 15px var(--green),
        0 0 30px
        rgba(121,255,50,.35);
    }


    .orbit::after {
      content: "";

      position: absolute;

      width: 5px;
      height: 5px;

      border-radius: 50%;

      background:
        var(--green);

      right: 13%;
      bottom: 17%;

      box-shadow:
        0 0 12px var(--green);
    }


    @keyframes rotate {

      to {
        transform:
          rotate(360deg);
      }
    }


    /* =====================================================
       LOGO CIRCLE
    ===================================================== */

    .logo-frame {
      width:
        min(500px, 82%);

      aspect-ratio:
        1 / 1;

      position: relative;

      display: grid;

      place-items: center;

      border-radius: 50%;

      overflow: hidden;

      background:
        #020302;

      border:
        3px solid var(--green);

      box-shadow:

        0 0 0 8px
        rgba(121,255,50,.025),

        0 0 45px
        rgba(121,255,50,.15),

        0 25px 70px
        rgba(0,0,0,.7);

      animation:
        logoIn
        1.1s
        cubic-bezier(.16,1,.3,1)
        .15s
        both,

        logoFloat
        6s
        ease-in-out
        1.3s
        infinite;
    }


    .logo-frame::before {
      content: "";

      position: absolute;

      inset: 10px;

      border-radius: 50%;

      border:
        1px solid
        rgba(121,255,50,.13);

      z-index: 3;

      pointer-events: none;
    }


    .logo-frame img {
      width: 100%;
      height: 100%;

      object-fit: contain;

      border-radius: 50%;

      position: relative;

      z-index: 2;

      filter:
        drop-shadow(
          0 25px 40px
          rgba(0,0,0,.55)
        );
    }


    @keyframes logoIn {

      from {
        opacity: 0;

        transform:
          scale(.82)
          translateY(25px);
      }

      to {
        opacity: 1;

        transform:
          scale(1)
          translateY(0);
      }
    }


    @keyframes logoFloat {

      0%,
      100% {
        transform:
          translateY(0);
      }

      50% {
        transform:
          translateY(-9px);
      }
    }


    /* =====================================================
       CODE DECORATION
    ===================================================== */

    .code-decoration {
      position: absolute;

      right: 0;
      bottom: 38px;

      font-family:
        "DM Mono",
        monospace;

      font-size: 9px;

      line-height: 1.8;

      color:
        rgba(121,255,50,.15);

      text-align: right;

      pointer-events: none;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    .footer {
      position: fixed;

      left: 4%;
      bottom: 24px;

      font-family:
        "DM Mono",
        monospace;

      font-size: 8px;

      letter-spacing: 1.4px;

      color: #3e443b;

      text-transform: uppercase;

      z-index: 5;
    }


    .footer b {
      color: #687061;

      font-weight: 400;
    }


    /* =====================================================
       CHIPS COUNTER
    ===================================================== */

    .chips-counter {
      position: fixed;

      top: 23px;
      left: 50%;

      transform:
        translateX(-50%)
        translateY(-20px);

      z-index: 1000;

      padding:
        9px 16px;

      border-radius: 100px;

      background:
        rgba(3,5,3,.82);

      border:
        1px solid
        rgba(121,255,50,.25);

      backdrop-filter:
        blur(15px);

      color:
        #a8ff78;

      font-family:
        "DM Mono",
        monospace;

      font-size: 10px;

      letter-spacing: 1.5px;

      opacity: 0;

      pointer-events: none;

      transition:
        opacity .25s ease,
        transform .25s ease;
    }


    .chips-counter.show {
      opacity: 1;

      transform:
        translateX(-50%)
        translateY(0);
    }


    /* =====================================================
       REVEAL
    ===================================================== */

    @keyframes reveal {

      from {
        opacity: 0;

        transform:
          translateY(20px);
      }

      to {
        opacity: 1;

        transform:
          translateY(0);
      }
    }


    /* =====================================================
       MOBILE
    ===================================================== */

    @media (max-width: 800px) {

      html,
      body {
        overflow: hidden;
      }


      header {
        width: 88%;

        height: 75px;
      }


      .edition {
        display: none;
      }


      main {
        width: 88%;

        height:
          calc(100vh - 75px);

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: stretch;
      }


      .hero-visual {
        order: 0;

        min-height: auto;

        height: 300px;

        margin-bottom: 4px;
      }


      .hero-content {
        order: 1;

        padding: 0;
      }


      .logo-frame {
        width:
          min(290px, 72vw);
      }


      .orbit {
        width: 310px;
        height: 310px;
      }


      .visual-glow {
        width: 290px;
        height: 290px;
      }


      .eyebrow {
        margin-bottom: 16px;

        font-size: 8px;
      }


      .hero-title {
        font-size:
          clamp(
            54px,
            15vw,
            80px
          );

        line-height: .86;

        letter-spacing: -4px;
      }


      .hero-description {
        margin-top: 18px;

        font-size: 12px;

        line-height: 1.65;
      }


      .actions {
        margin-top: 22px;

        display: grid;

        grid-template-columns:
          1fr 1fr;

        gap: 8px;
      }


      .btn {
        height: 48px;

        padding:
          0 9px;

        font-size: 9px;

        border-radius: 10px;
      }


      .chips-btn {
        grid-column:
          1 / -1;
      }


      .meta {
        margin-top: 20px;

        gap: 12px;
      }


      .meta-item {
        font-size: 7px;
      }


      .code-decoration {
        display: none;
      }


      .footer {
        display: none;
      }
    }


    /* =====================================================
       SMALL MOBILE
    ===================================================== */

    @media (max-width: 430px) {

      .brand-mark {
        width: 34px;
        height: 34px;

        font-size: 18px;

        border-radius: 9px;
      }


      .brand-name {
        font-size: 14px;
      }


      .brand-sub {
        font-size: 7px;
      }


      .hero-visual {
        height: 255px;
      }


      .logo-frame {
        width: 255px;
      }


      .orbit {
        width: 275px;
        height: 275px;
      }


      .hero-title {
        font-size: 56px;

        letter-spacing: -3.5px;
      }


      .hero-description {
        font-size: 11px;
      }


      .btn {
        height: 46px;

        font-size: 8.5px;
      }
    }