* {
  box-sizing: border-box
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: #0b1020;
  color: #e8eefc
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px
}

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(10, 16, 32, .7);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid #1b2342
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px
}

.brand-logo {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(59, 130, 246, .45)
}

.brand-logo.small {
  width: 28px;
  height: 28px
}

.brand-name {
  font-weight: 800;
  letter-spacing: .5px
}

.links a {
  color: #cfe3ff;
  text-decoration: none;
  margin: 0 12px;
  opacity: .9
}

.links a:hover {
  opacity: 1
}

.btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid #3b5ccc;
  text-decoration: none;
  font-weight: 600
}

.btn.buy {
  border-color: #22c55e
}

.btn.primary {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff
}

.btn.primary:hover {
  filter: brightness(1.1)
}

.btn.secondary {
  border-color: #3b5ccc;
  color: #cfe3ff
}

.hero {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items: center;
  padding: 72px 20px
}

.hero-copy {
  min-width: 0
}

.hero h1 {
  font-size: 44px;
  line-height: 1.1;
  margin: 0 0 8px
}

.accent {
  color: #67e8f9
}

.lead {
  color: #bcd2ff;
  font-size: 18px
}

.cta {
  display: flex;
  gap: 12px;
  margin: 18px 0;
  flex-wrap: wrap
}

.badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.badge {
  background: #0f1b3a;
  border: 1px solid #21306b;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: #a6c3ff
}

.hero-art {
  display: flex;
  justify-content: center
}

.coin {
  width: 100%;
  max-width: 420px;
  filter: drop-shadow(0 20px 50px rgba(37, 99, 235, .35));
  border-radius: 20px
}

.section {
  padding: 40px 0
}

.section h2 {
  margin: 0 0 14px;
  font-size: 28px
}

.about .bullets {
  margin: 10px 0 12px 18px
}

.about .bullets li {
  margin: 6px 0
}

.pill-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0
}

.pill {
  background: #0f1b3a;
  border: 1px solid #21306b;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  color: #a6c3ff
}

blockquote {
  margin: 16px 0;
  padding: 10px 12px;
  border-left: 3px solid #2b3f86;
  background: #0a132a;
  color: #cfe3ff;
  border-radius: 6px
}

.token .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px
}

code {
  display: block;
  word-break: break-all;
  background: #0a132a;
  padding: 8px;
  border-radius: 8px;
  border: 1px dashed #253a82;
  color: #e3eeff
}

.copy {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #2b3f86;
  background: #0a132a;
  color: #9fc1ff;
  cursor: pointer
}

.copy:hover {
  filter: brightness(1.1)
}

.notice {
  margin-top: 12px;
  color: #9ab3ff;
  font-size: 13px
}

.links-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px
}

.linkcard {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0e1733;
  border: 1px solid #1b2b63;
  padding: 14px;
  border-radius: 14px;
  color: #cfe3ff;
  text-decoration: none;
  height: 54px
}

.linkcard:hover {
  filter: brightness(1.05)
}

.footer {
  border-top: 1px solid #1b2342;
  margin-top: 40px
}

.foot-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0
}

@media (max-width:1020px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-top: 32px
  }

  .hero-art {
    order: 2
  }

  .coin {
    max-width: 360px;
    margin: 0 auto
  }
}

@media (max-width:900px) {
  .token .grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .links-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(43, 158, 255, 0.3);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.card h3 {
  font-size: 16px;
  color: #2b9eff;
}

.callout.oath {
  margin-top: 20px;
  background: linear-gradient(90deg, rgba(43, 158, 255, .15), rgba(255, 255, 255, .05));
  border: 1px solid rgba(43, 158, 255, .5);
  border-radius: 14px;
  padding: 18px;
  font-style: italic;
}

/* === Wolf Paper helpers (additive only) === */
.paper {
  padding-bottom: 40px;
}
  
    .paper-hero {
      padding-top: 64px;
    }
  
    .reveal {
      opacity: 0;
      transform: translateY(10px);
      transition: opacity .5s ease, transform .5s ease;
    }
  
    .reveal.show {
      opacity: 1;
      transform: none;
    }
  
    /* Accordion structure */
    .acc {
      border: 1px solid #1b2b63;
      border-radius: 14px;
      background: #0e1733;
    }
  
    .acc-hd {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 14px 16px;
      cursor: pointer;
    }
  
    .acc-hd h2 {
      margin: 0;
      font-size: 24px;
    }
  
    .acc-ic {
      transition: transform .2s ease;
    }
  
    .acc.open .acc-ic {
      transform: rotate(90deg);
    }
  
    .acc-bd {
      padding: 0 16px 14px;
    }
  
    /* Nice big closing oath */
    .oath-big {
      margin-top: 14px;
      padding: 20px;
      border-radius: 16px;
      background: linear-gradient(90deg, rgba(43, 158, 255, .18), rgba(255, 255, 255, .07));
      border: 1px solid rgba(43, 158, 255, .45);
      font-size: 1.08rem;
      font-weight: 700;
    }
  
    /* Small utilities */
    .pill-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 999px;
      background: #0f1b3a;
      border: 1px solid #21306b;
      color: #cfe3ff;
      text-decoration: none;
    }
  
    .pill-link:hover {
      filter: brightness(1.08)
    }
  
    .muted {
      color: #9ab3ff
    }
  
    .mono {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }
  
    .kicker {
      font-size: .9rem;
      color: #a6c3ff;
      border: 1px solid #21306b;
      padding: 2px 8px;
      border-radius: 999px;
    }
  }

    /* --- NIKO Wolf Paper: tasteful pop (additive only) --- */
  
    /* Section headings (inside accordions) */
    .acc-hd h2 {
      position: relative;
      letter-spacing: .2px;
      text-shadow: 0 0 8px rgba(43, 158, 255, .18);
    }
  
    .acc-hd h2::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -10px;
      width: 42px;
      height: 2px;
      background: linear-gradient(90deg, #2b9eff, rgba(43, 158, 255, 0));
      border-radius: 2px;
      opacity: .6;
    }
  
    /* Cards: subtle glow and lift on hover */
    .card {
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
      box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    }
  
    .card:hover {
      transform: translateY(-2px);
      border-color: rgba(43, 158, 255, .5);
      box-shadow: 0 10px 28px rgba(43, 158, 255, .14);
    }
  
    /* Card titles */
    .card h3 {
      text-shadow: 0 0 6px rgba(43, 158, 255, .25);
      letter-spacing: .25px;
    }
  
    /* Pill links */
    .pill-link {
      box-shadow: 0 6px 20px rgba(43, 158, 255, .12);
    }
  
    .pill-link:hover {
      transform: translateY(-1px);
    }
  
    /* Oath + callouts slightly brighter */
    .oath,
    .oath-big,
    .callout {
      box-shadow: 0 8px 30px rgba(43, 158, 255, .12);
    }
  
    /* Count-up number emphasis */
    .lead .mono {
      font-weight: 800;
      letter-spacing: .3px;
      text-shadow: 0 0 10px rgba(103, 232, 249, .18);
    }
  
    /* Divider a touch stronger */
    .divider {
      background: linear-gradient(90deg, transparent, rgba(43, 158, 255, .35), transparent);
    }
  
    /* Subtle accent for the .kicker chip */
    .kicker {
      background: rgba(43, 158, 255, .08);
      box-shadow: inset 0 0 0 1px rgba(43, 158, 255, .25);
    }
  
    /* Reveal-on-scroll: slightly crisper motion */
    .reveal {
      transform: translateY(12px);
    }
  
    .reveal.show {
      transform: translateY(0);
    }
  
    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
  
      .card,
      .pill-link,
      .reveal {
        transition: none !important;
        transform: none !important;
      }
  
      .acc-ic {
        transition: none !important;
      }
    }

        /* === NIKO Home: Additive polish (safe) === */
    
        /* Reveal-on-scroll */
        .reveal {
          opacity: 0;
          transform: translateY(12px);
          transition: opacity .5s ease, transform .5s ease;
        }
    
        .reveal.show {
          opacity: 1;
          transform: none;
        }
    
        /* Subtle card lift */
        .card {
          transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
          box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
        }
    
        .card:hover {
          transform: translateY(-2px);
          border-color: rgba(43, 158, 255, .5);
          box-shadow: 0 10px 28px rgba(43, 158, 255, .14);
        }
    
        /* Toast */
        .toast {
          position: fixed;
          left: 50%;
          bottom: 22px;
          transform: translateX(-50%);
          background: rgba(15, 27, 58, .96);
          color: #cfe3ff;
          border: 1px solid #21306b;
          padding: 10px 14px;
          border-radius: 12px;
          z-index: 9999;
          box-shadow: 0 8px 30px rgba(43, 158, 255, .12);
          opacity: 0;
          pointer-events: none;
          transition: opacity .2s ease, transform .2s ease;
        }
    
        .toast.show {
          opacity: 1;
          transform: translateX(-50%) translateY(-4px);
        }
    
        /* Floating CTA (mobile-first) */
        .float-cta {
          position: fixed;
          right: 14px;
          bottom: 18px;
          z-index: 9998;
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 10px 14px;
          border-radius: 999px;
          text-decoration: none;
          font-weight: 700;
          background: #2563eb;
          border: 1px solid #2563eb;
          color: #fff;
          box-shadow: 0 14px 40px rgba(37, 99, 235, .35);
          animation: pulse 2.2s ease-in-out infinite;
        }
    
        .float-cta:hover {
          filter: brightness(1.08);
        }
    
        @keyframes pulse {
    
          0%,
          100% {
            box-shadow: 0 14px 40px rgba(37, 99, 235, .35);
            transform: translateY(0);
          }
    
          50% {
            box-shadow: 0 18px 48px rgba(37, 99, 235, .48);
            transform: translateY(-1px);
          }
        }
    
        /* Respect reduced motion */
        @media (prefers-reduced-motion: reduce) {
          .reveal {
            transition: none !important;
            transform: none !important;
          }
    
          .card {
            transition: none !important;
          }
    
          .float-cta {
            animation: none !important;
          }
        }
    
        /* Only show floating CTA on small screens */
        @media (min-width: 820px) {
          .float-cta {
            display: none;
          }
        }