@property --a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
  @property --b { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

  :root {
      color-scheme: dark;
    --bg: #02050f;
    --bg-2: #050b1f;
    --gold: #ffb81c;
    --gold-hi: #ffe27a;
    --gold-deep: #c77700;
    --blue: #1f8bff;
    --blue-hi: #6fd0ff;
    --text: #ffffff;
    --muted: #a9bde6;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  nav.top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 12px clamp(14px, 3vw, 40px);
      background: linear-gradient(180deg, rgba(3, 8, 24, .95), rgba(3, 8, 24, .55));
      border-bottom: 1px solid rgba(31, 139, 255, .25);
      position: relative;
      z-index: 3;
  }

  nav.top::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -1px;
      height: 2px;
      width: 30%;
      background: linear-gradient(90deg, transparent, var(--gold), var(--blue-hi), transparent);
      animation: navSweep 4.5s linear infinite;
  }

  @keyframes navSweep {
      from {
          left: -30%;
      }

      to {
          left: 100%;
      }
  }

  .brand {
      font-family: 'Orbitron', sans-serif;
      font-weight: 800;
      font-size: 26px;
      letter-spacing: .5px;
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .brand b {
      color: var(--blue-hi);
      font-weight: 800;
  }

  .brand i {
      font-style: normal;
      color: var(--gold);
  }

  .links {
      display: flex;
      gap: clamp(14px, 2.4vw, 38px);
      font-size: 14px;
      font-weight: 600;
      color: #5d8fe0;
  }

  .links a {
      color: inherit;
      text-decoration: none;
      transition: color .2s;
  }

  .links a:hover {
      color: var(--gold-hi);
  }

  .wallet {
      --a: 0deg;
      position: relative;
      border: 0;
      cursor: pointer;
      color: var(--gold);
      font: 700 14px 'Montserrat', sans-serif;
      padding: 9px 20px;
      border-radius: 40px;
      background: #060d22;
      isolation: isolate;
  }

  .wallet::before {
      content: "";
      position: absolute;
      inset: -1.5px;
      border-radius: inherit;
      z-index: -2;
      background: conic-gradient(from var(--a), transparent 0 70%, var(--gold) 90%, var(--blue-hi) 100%);
      animation: spin 3s linear infinite;
  }

  .wallet::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: #060d22;
      z-index: -1;
  }

  @keyframes spin {
      to {
          --a: 360deg;
      }
  }

  @keyframes spinB {
      to {
          --b: -360deg;
      }
  }

  @media (max-width: 760px) {
      .links {
          display: none;
      }
  }

  /* ---------- STAGE ---------- */
.stage {
    padding: 20px;
    display: flex;
    justify-content: center;
    position: fixed;
    height: 100vh;
    align-items: center;
    top: 0;
    width: 100%;
    z-index: 9999;
    background: hsl(0deg 0% 0% / 82%);
}

  .panel {
      position: relative;
      width: min(1100px, 100%);

      padding: clamp(40px, 5vw, 64px) clamp(26px, 5vw, 76px) clamp(34px, 4vw, 56px);
      overflow: hidden;
      isolation: isolate;
      transition: opacity .5s, transform .5s;
      clip-path: polygon(4% 0, 70% 0, 71.5% 1.4%, 83% 1.4%, 84.5% 0, 96% 0, 100% 5%, 100% 93%, 96% 100%,
              74% 100%, 72.8% 99%, 27.5% 99%, 26% 100%, 4% 100%, 0 93%, 0 5%);
  }

  .stage.closed {
      opacity: 0;
      transform: scale(.96);
      pointer-events: none;
      position: absolute;
      visibility: hidden;
  }

  .bg {
      position: absolute;
      inset: 0;
      z-index: -3;
      background: url(../img/popop_img.jpg) no-repeat top right;
      background-size: cover;
  }

  canvas#fx {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: -2;
  }


  /* ---------- FRAME (animated borders) ---------- */
  svg.frame {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 5;
      overflow: visible;
  }

  .frame path {
      fill: none;
      vector-effect: non-scaling-stroke;
      stroke-linejoin: round;
  }

  .f-gold {
      stroke: url(#gGold);
      stroke-width: 4;
      filter: url(#glowGold);
      animation: goldPulse 2.6s ease-in-out infinite;
  }

  .f-blue {
      stroke: url(#gBlue);
      stroke-width: 3;
      filter: url(#glowBlue);
      animation: bluePulse 2.2s ease-in-out infinite;
  }

  .f-thin {
      stroke: rgba(111, 208, 255, .55);
      stroke-width: 1;
      stroke-dasharray: 3 7;
      animation: crawl 1.2s linear infinite;
  }

  .f-run-g {
      stroke: #fff3b0;
      stroke-width: 6;
      stroke-linecap: round;
      stroke-dasharray: 5 95;
      filter: url(#glowGold);
      animation: run 5s linear infinite;
  }

  .f-run-g2 {
      stroke: #ffd24a;
      stroke-width: 5;
      stroke-linecap: round;
      stroke-dasharray: 3 97;
      filter: url(#glowGold);
      animation: run 5s linear infinite;
      animation-delay: -2.5s;
  }

  .f-run-b {
      stroke: #bfeaff;
      stroke-width: 5;
      stroke-linecap: round;
      stroke-dasharray: 6 94;
      filter: url(#glowBlue);
      animation: runRev 4s linear infinite;
  }

  .f-run-b2 {
      stroke: #4aa8ff;
      stroke-width: 4;
      stroke-linecap: round;
      stroke-dasharray: 3 97;
      filter: url(#glowBlue);
      animation: runRev 4s linear infinite;
      animation-delay: -2s;
  }

  @keyframes run {
      to {
          stroke-dashoffset: -100;
      }
  }

  @keyframes runRev {
      to {
          stroke-dashoffset: 100;
      }
  }

  @keyframes crawl {
      to {
          stroke-dashoffset: -20;
      }
  }

  @keyframes goldPulse {
      50% {
          stroke-width: 5;
          opacity: .8;
      }
  }

  @keyframes bluePulse {
      50% {
          stroke-width: 4;
          opacity: .7;
      }
  }

  .corner {
      position: absolute;
      width: 38px;
      height: 38px;
      z-index: 6;
      pointer-events: none;
  }

  .corner::before,
  .corner::after {
      content: "";
      position: absolute;
      background: var(--gold-hi);
      box-shadow: 0 0 10px 2px var(--gold);
      animation: blink 1.4s ease-in-out infinite;
  }

  .corner::before {
      width: 100%;
      height: 3px;
  }

  .corner::after {
      width: 3px;
      height: 100%;
      animation-delay: .35s;
  }

  .corner.tl {
      top: 14px;
      left: 22px;
  }

  .corner.tr {
      top: 14px;
      right: 22px;
      transform: scaleX(-1);
  }

  .corner.bl {
      bottom: 14px;
      left: 22px;
      transform: scaleY(-1);
  }

  .corner.br {
      bottom: 14px;
      right: 22px;
      transform: scale(-1, -1);
  }

  @keyframes blink {
      50% {
          opacity: .25;
      }
  }

  .edge-dots {
      position: absolute;
      z-index: 6;
      display: flex;
      gap: 6px;
      bottom: 26px;
      right: 7%;
  }

  .edge-dots span {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--gold);
      box-shadow: 0 0 8px var(--gold);
      animation: dotWave 1.2s ease-in-out infinite;
  }

  .edge-dots span:nth-child(2) {
      animation-delay: .15s
  }

  .edge-dots span:nth-child(3) {
      animation-delay: .3s
  }

  .edge-dots span:nth-child(4) {
      animation-delay: .45s
  }

  @keyframes dotWave {
      50% {
          transform: translateY(-5px);
          opacity: .3;
      }
  }

  /* side scanner lines */
  .scan {
      position: absolute;
      z-index: 6;
      width: 3px;
      height: 22%;
      border-radius: 3px;
      pointer-events: none;
      background: linear-gradient(180deg, transparent, var(--blue-hi), transparent);
      box-shadow: 0 0 12px var(--blue);
  }

  .scan.l {
      left: 4.2%;
      animation: scanY 3.6s ease-in-out infinite;
  }

  .scan.r {
      right: 4.2%;
      animation: scanY 3.6s ease-in-out infinite reverse;
      background: linear-gradient(180deg, transparent, var(--gold-hi), transparent);
      box-shadow: 0 0 12px var(--gold);
  }

  @keyframes scanY {

      0%,
      100% {
          top: 12%;
      }

      50% {
          top: 66%;
      }
  }

  /* ---------- CLOSE ---------- */
  .close {
      position: absolute;
      top: 34px;
      right: clamp(28px, 4.5vw, 70px);
      z-index: 8;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 0;
      cursor: pointer;
      color: #fff;
      background: #040a1d;
      isolation: isolate;
  }

  .close::before {
      content: "";
      position: absolute;
      inset: -2px;
      border-radius: 50%;
      z-index: -2;
      background: conic-gradient(from var(--a), var(--blue) 0 30%, transparent 40% 60%, var(--blue-hi) 80%, var(--blue));
      animation: spin 2.4s linear infinite;
  }

  .close::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: #040a1d;
      z-index: -1;
  }

  .close svg {
      width: 20px;
      height: 20px;
      display: block;
      margin: auto;
  }

  .close:hover {
      transform: rotate(90deg);
      transition: transform .3s;
  }

  /* ---------- CONTENT ---------- */
  .content {
      position: relative;
      z-index: 4;
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 20px;
      align-items: start;
  }

.kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 800;
    letter-spacing: .3em;
    color: #cfe6ff;
    margin-bottom: 6px;
    font-size: 10px;
}

  .kicker::before,
  .kicker::after {
      content: "";
      height: 3px;
      width: clamp(26px, 4vw, 56px);
      background: var(--gold);
      box-shadow: 0 0 10px var(--gold);
      border-radius: 3px;
      animation: kickerGlow 2s ease-in-out infinite;
  }

  @keyframes kickerGlow {
      50% {
          opacity: .4;
          width: clamp(18px, 3vw, 40px);
      }
  }

  h1 {
      margin: 0;
      line-height: .95;
      font-weight: 900;
      letter-spacing: -.01em;
  }

  .t-main {
      display: block;
      font-size: clamp(54px, 8.4vw, 70px);
      font-style: italic;
      transform: skewX(-4deg);
      white-space: nowrap;
  }

  .t-defi {
      background: linear-gradient(180deg, #fff 0%, #cfe3ff 40%, #3f8bff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      filter: drop-shadow(0 0 16px rgba(60, 140, 255, .6));
  }

  .t-ten {
      background: linear-gradient(180deg, #fff2a8 0%, #ffbe1a 50%, #c97a00 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      filter: drop-shadow(0 0 16px rgba(255, 170, 0, .65));
      background-size: 100% 200%;
      animation: goldShift 3.5s ease-in-out infinite;
  }

  @keyframes goldShift {
      50% {
          background-position: 0 100%;
      }
  }

.t-sub {
    display: block;
    font-size: clamp(30px, 4.6vw, 40px);
    font-style: italic;
    transform: skewX(-4deg);
    margin-top: 6px;
}

  .t-sub.w {
      color: #fff;
      text-shadow: 0 0 22px rgba(80, 150, 255, .5);
  }

  .t-sub.g {
      background: linear-gradient(180deg, #fff2a8 0%, #ffbe1a 55%, #d98500 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      filter: drop-shadow(0 0 14px rgba(255, 170, 0, .6));
  }

  .lead {
      margin: 5px 0 10px;
      font-size: 14px;
      font-weight: 500;
      line-height: 1.35;
      max-width: 40ch;
      color: #f1f6ff;
  }

  /* Pill with rotating border */
  .pill {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 9px clamp(30px, -1vw, 25px);
      border-radius: 18px 36px 36px 18px;
      background: #050d28;
      font-weight: 800;
      font-size: 16px;
      isolation: isolate;
      clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
  }

  .pill::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background: conic-gradient(from var(--a), var(--gold) 0 25%, var(--blue) 50%, var(--gold) 75%, var(--gold-hi) 100%);
      animation: spin 3.2s linear infinite;
  }

  .pill::after {
      content: "";
      position: absolute;
      inset: 3px;
      z-index: -1;
      background: linear-gradient(180deg, #0a1a4d, #040b24);
      clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
  }

  .pill .dot {
      color: var(--gold);
  }

.pill svg {
    width: 25px;
    height: 25px;
    flex: none;
}

  /* ---------- COUNTDOWN ---------- */
.launch-label {
    position: relative;
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin: 15px 0 10px;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: #e7f4ff;
    text-shadow: 0 0 14px rgba(70, 160, 255, .8);
    text-align: center;
}

  .launch-label::before,
  .launch-label::after {
      content: "";
      flex: 0 1 140px;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--gold));
      box-shadow: 0 0 10px var(--gold);
  }

  .launch-label::after {
      background: linear-gradient(270deg, transparent, var(--gold));
  }

  .timer {
      position: relative;
      z-index: 4;
      display: flex;
      justify-content: center;
      gap: clamp(8px, 1.4vw, 20px); 
  }

  .unit {
      position: relative;
      width: clamp(130px, 17.5vw, 215px);
      padding: 20px 8px 14px;
      text-align: center;
      isolation: isolate;
      clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  }

  .unit::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background: conic-gradient(from var(--a), var(--blue) 0 15%, var(--blue-hi) 25%, transparent 38% 55%, var(--gold) 72%, var(--gold-hi) 82%, var(--blue) 100%);
      animation: spin 3.4s linear infinite;
  }

  .unit:nth-child(2)::before {
      animation-delay: -.8s
  }

  .unit:nth-child(3)::before {
      animation-delay: -1.6s
  }

  .unit:nth-child(4)::before {
      animation-delay: -2.4s
  }

  .unit::after {
      content: "";
      position: absolute;
      inset: 3px;
      z-index: -1;
      background: radial-gradient(circle at 50% 0%, rgba(40, 110, 255, .45), transparent 70%), linear-gradient(180deg, #071a52, #030a26);
      clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  }

.num {
    display: block;
    font-size: 44px;
    line-height: 34px;
    background: linear-gradient(180deg, #fff2a8, #ffb81c 60%, #d98500);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 14px rgba(255, 170, 0, .6));
    font-variant-numeric: tabular-nums;
    font-family: var(--head);
    font-weight: 800;
}

  .num.tick {
      animation: tick .35s ease-out;
  }

  @keyframes tick {
      0% {
          transform: translateY(-10px) scale(1.1);
          opacity: .3;
      }

      100% {
          transform: none;
          opacity: 1;
      }
  }

  .unit small {
      display: block;
      margin-top: 4px;
      font-weight: 800;
      font-size: 12px;
      letter-spacing: .08em;
  }

  /* ---------- CTA ---------- */
  .cta-row {
      position: relative;
      z-index: 4;
      display: flex;
      justify-content: center;
      margin-top: 15px;
  }

  .cta {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      width: min(100%, 610px);
      padding: 10px 42px;
      border: 0;
      cursor: pointer;
      isolation: isolate;
      font-size: 26px;
      color: #1a1000;
      text-transform: uppercase;
      letter-spacing: .02em;
      clip-path: polygon(26px 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 26px 100%, 0 50%);
      transition: transform .2s;
      font-weight: 800;
      font-family: var(--head);
  }

  .cta:hover {
      transform: translateY(-2px) scale(1.015);
  }

  .unit::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background: conic-gradient(from var(--a), #1f8bff 0 15%, #6fd0ff 25%, transparent 38% 55%, #ffb81c 72%, var(--gold-hi) 82%, #1f8bff 100%);
      animation: spin 3.4s linear infinite;
  }

  .cta::after {
      content: "";
      position: absolute;
      inset: 4px;
      z-index: -2;
      background: linear-gradient(180deg, #ffe27a, #ffb81c 55%, #e08a00);
      clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 24px 100%, 0 50%);
  }

  .cta .sheen {
      position: absolute;
      inset: 4px;
      z-index: -1;
      overflow: hidden;
      clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 24px 100%, 0 50%);
  }

  .cta .sheen::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 90px;
      left: -120px;
      transform: skewX(-22deg);
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
      animation: sheen 2.6s ease-in-out infinite;
  }

  @keyframes sheen {
      0% {
          left: -120px;
      }

      60%,
      100% {
          left: 110%;
      }
  }

  .cta .arrow {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: #0a0f24;
      display: grid;
      place-items: center;
      color: var(--gold-hi);
      position: relative;
      isolation: isolate;
  }

  .cta .arrow::before {
      content: "";
      position: absolute;
      inset: -2px;
      border-radius: 50%;
      z-index: -1;
      background: conic-gradient(from var(--b), var(--blue-hi), transparent 40%, var(--blue-hi));
      animation: spinB 2s linear infinite;
  }

  .cta .arrow::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: #0a0f24;
      z-index: -1;
  }

  .cta .arrow svg {
      width: 24px;
      height: 24px;
      animation: nudge 1.2s ease-in-out infinite;
  }

  @keyframes nudge {
      50% {
          transform: translateX(5px);
      }
  }

  /* ---------- FOOTER ROW ---------- */
.foot {
    position: relative;
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(10px, 2vw, 12px);
    margin: 10px 0;
    flex-wrap: wrap;
    letter-spacing: 0.14em;
    color: #eaf2ff;
}

  .foot span {
      display: inline-flex;
      align-items: center;
      gap: 10px;
  }

  .foot svg {
      width: 28px;
      height: 28px;
      color: var(--gold);
      filter: drop-shadow(0 0 6px var(--gold));
  }

  .foot .sep {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--gold);
      box-shadow: 0 0 8px var(--gold);
      animation: dotWave 1.6s ease-in-out infinite;
  }

  

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 900px) {
.bg { 
    background: url(../img/popop_img-mobile.jpg) no-repeat top center;
    background-size: cover;
}
.launch-label { 
    gap: 10px;
    margin: 15px 0 10px;
    font-weight: 800;
    letter-spacing: 0; 
    line-height: 18px;
    font-size: 13px;
}
.stage {
    padding: 10px; 
}
      .content {
          grid-template-columns: 1fr;        margin-bottom: 60%;
      }

      .coin-wrap {
          order: -1;
          min-height: 260px;
          margin-top: 30px;
      }

      .coin-wrap svg {
          width: min(78%, 340px);
      }

      .lead {
          max-width: none;
      }

      .t-main {
          white-space: normal;
      }

      .panel {
                  text-align: center;
      }

      .launch-label::before,
      .launch-label::after {
          flex-basis: 30px;
      }
  }

  @media (max-width: 600px) {
      .unit {
          width: calc(50% - 8px);    padding: 12px 8px;
      }
      .unit small { 
    font-size: 9px; 
}
.pill { 
    font-size: 10px;     padding: 5px 20px;
}
.num { 
    font-size: 32px; 
}
.t-sub { 
    font-size: clamp(24px, 4.6vw, 40px); 
}
.cta {
    gap: 12px;
    padding: 4px 25px;
    font-size: 15px;
}
.cta .arrow {
    width: 40px;
    height: 40px; }
    .foot {
     
    margin: 10px 0 20px; 
    font-size: 10px;
}
.foot svg{ display: none;}
.pill svg {
    width: 20px;
    height: 20px;
    flex: none;
}
      .close {
          width: 40px;
          height: 40px;
          top: 22px;
          right: 22px;        z-index: 999999;
      }
  }

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

      *,
      *::before,
      *::after {
          animation-duration: .001ms !important;
          animation-iteration-count: 1 !important;
      }
  }

  :focus-visible {
      outline: 3px solid var(--gold-hi);
      outline-offset: 3px;
  }