:root {
      --g: #00ff88;
      --gd: #00cc6a;
      --gx: rgba(0, 255, 136, 0.08);
      --gg: rgba(0, 255, 136, 0.35);
      --bg: #050a0a;
      --bg2: #07100e;
      --bg3: #0a1614;
      --bg4: #0e1e1a;
      --cb: rgba(0, 255, 136, 0.04);
      --cbr: rgba(0, 255, 136, 0.14);
      --ch: rgba(0, 255, 136, 0.08);
      --tx: #e0f0e8;
      --tm: #6a9080;
      --td: #3a5848;
      --red: #ff4455;
      --blu: #00d4ff;
      --pur: #7c5fff
    }

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

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg);
      color: var(--tx);
      overflow-x: hidden
    }

    ::-webkit-scrollbar {
      width: 4px
    }

    ::-webkit-scrollbar-track {
      background: var(--bg)
    }

    ::-webkit-scrollbar-thumb {
      background: var(--gd);
      border-radius: 2px
    }

    /* ===NAV=== */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: .9rem 3rem;
      background: rgba(5, 10, 10, 0.92);
      backdrop-filter: blur(24px);
      border-bottom: 1px solid var(--cbr)
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none
    }

    .logo-text {
      font-family: 'Orbitron', monospace;
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--g);
      letter-spacing: 2px
    }

    .logo-text span {
      color: #fff
    }

    .nav-links {
      display: flex;
      gap: 1.8rem;
      list-style: none
    }

    .nav-links a {
      color: var(--tm);
      text-decoration: none;
      font-size: .8rem;
      font-weight: 500;
      letter-spacing: .5px;
      transition: color .3s
    }

    .nav-links a:hover {
      color: var(--g)
    }

    .nav-cta {
      display: flex;
      gap: .8rem
    }

    .btn-o {
      padding: .48rem 1.1rem;
      border: 1px solid var(--cbr);
      background: transparent;
      color: var(--tx);
      border-radius: 6px;
      cursor: pointer;
      font-size: .82rem;
      font-weight: 500;
      text-decoration: none;
      transition: all .3s;
      font-family: 'Inter', sans-serif
    }

    .btn-o:hover {
      border-color: var(--g);
      color: var(--g)
    }

    .btn-p {
      padding: .48rem 1.3rem;
      border: 1px solid var(--g);
      background: var(--g);
      color: #050a0a;
      border-radius: 6px;
      cursor: pointer;
      font-size: .82rem;
      font-weight: 700;
      text-decoration: none;
      transition: all .3s;
      font-family: 'Inter', sans-serif
    }

    .btn-p:hover {
      background: var(--gd);
      box-shadow: 0 0 20px var(--gg)
    }

    /* ===TICKER=== */
    .ticker {
      background: rgba(0, 255, 136, 0.04);
      border-top: 1px solid var(--cbr);
      border-bottom: 1px solid var(--cbr);
      overflow: hidden;
      padding: .5rem 0;
      margin-top: 62px
    }

    .ticker-in {
      display: flex;
      gap: 3rem;
      animation: tick 32s linear infinite;
      white-space: nowrap
    }

    @keyframes tick {
      0% {
        transform: translateX(0)
      }

      100% {
        transform: translateX(-50%)
      }
    }

    .ti {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: 'Share Tech Mono', monospace;
      font-size: .7rem;
      color: var(--tm)
    }

    .ti .up {
      color: var(--g)
    }

    .ti .dn {
      color: var(--red)
    }

    /* ===HERO=== */
    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      padding: 5.5rem 4rem 3rem;
      gap: 2rem
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 35% 55%, rgba(0, 255, 136, .08) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(0, 212, 255, .04) 0%, transparent 50%)
    }

    .grid-bg {
      position: absolute;
      inset: 0;
      background-image: linear-gradient(rgba(0, 255, 136, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 136, .04) 1px, transparent 1px);
      background-size: 52px 52px;
      mask-image: radial-gradient(ellipse at center, black 20%, transparent 72%)
    }

    .hero-content {
      text-align: left;
      z-index: 2;
      max-width: 820px
    }

    .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 5px 14px;
      border: 1px solid var(--cbr);
      border-radius: 20px;
      background: rgba(0, 255, 136, .05);
      font-size: .68rem;
      letter-spacing: 2px;
      color: var(--g);
      margin-bottom: 1.6rem;
      font-family: 'Orbitron', monospace
    }

    .hero-tag::before {
      content: '';
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--g);
      animation: blink 2s infinite
    }

    @keyframes blink {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .25
      }
    }

    .hero h1 {
      font-family: 'Orbitron', monospace;
      font-size: clamp(2rem, 5vw, 4.2rem);
      font-weight: 900;
      line-height: 1.1;
      margin-bottom: 1.3rem;
      letter-spacing: -1px
    }

    .hero h1 .gr {
      color: var(--g)
    }

    .hero p {
      font-size: 1rem;
      color: var(--tm);
      line-height: 1.8;
      max-width: 560px;
      margin: 0 auto 2rem
    }

    .hero-cta {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 2.8rem
    }

    .btn-lg {
      padding: .82rem 1.9rem;
      border-radius: 8px;
      font-size: .92rem;
      font-weight: 600;
      font-family: 'Inter', sans-serif
    }

    .stats-row {
      display: flex;
      gap: 2.2rem;
      justify-content: center;
      flex-wrap: wrap;
      padding-top: 1.8rem;
      border-top: 1px solid var(--cbr)
    }

    .stat-num {
      font-family: 'Orbitron', monospace;
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--g);
      display: block
    }

    .stat-lbl {
      font-size: .72rem;
      color: var(--tm);
      letter-spacing: 1px
    }

    /* ===SECTION BASE=== */
    .sec {
      padding: 5rem 3rem
    }

    .sec-lbl {
      font-family: 'Orbitron', monospace;
      font-size: .65rem;
      letter-spacing: 3px;
      color: var(--g);
      margin-bottom: .75rem
    }

    .sec-h {
      font-family: 'Orbitron', monospace;
      font-size: clamp(1.5rem, 2.8vw, 2.4rem);
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: .85rem
    }

    .sec-sub {
      color: var(--tm);
      font-size: .9rem;
      line-height: 1.8;
      max-width: 560px
    }

    .ctr {
      max-width: 1200px;
      margin: 0 auto
    }

    /* ===GLASS CARD=== */
    .gc {
      background: var(--cb);
      border: 1px solid var(--cbr);
      border-radius: 14px;
      padding: 1.6rem;
      backdrop-filter: blur(10px);
      transition: all .3s;
      position: relative;
      overflow: hidden
    }

    .gc::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--g), transparent);
      opacity: 0;
      transition: opacity .3s
    }

    .gc:hover {
      border-color: rgba(0, 255, 136, .28);
      background: var(--ch)
    }

    .gc:hover::before {
      opacity: 1
    }

    /* ===BLOCKCHAIN=== */
    .chain-wrap {
      background: var(--bg2);
      padding: 3.5rem 0;
      overflow: hidden;
      position: relative
    }

    /* ===ELEC DIVIDER=== */
    .elec-div {
      position: relative;
      overflow: hidden;
      height: 64px
    }

    /* ===MACHINE FLOW SECTION=== */
    .flow-section {
      background: linear-gradient(180deg, var(--bg) 0%, var(--bg3) 50%, var(--bg) 100%);
      position: relative;
      overflow: hidden
    }

    /* ===MINING TYPES=== */
    .types-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 1.4rem;
      margin-top: 2.4rem
    }

    .type-card {
      background: rgba(0, 12, 8, .85);
      border: 1px solid var(--cbr);
      border-radius: 14px;
      overflow: hidden;
      cursor: pointer;
      transition: all .3s;
      position: relative
    }

    .type-card:hover,
    .type-card.act {
      border-color: var(--g);
      box-shadow: 0 0 36px rgba(0, 255, 136, .14), inset 0 0 36px rgba(0, 255, 136, .03)
    }

    .msw {
      height: 155px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 255, 136, .02);
      border-bottom: 1px solid var(--cbr);
      position: relative;
      overflow: hidden
    }

    .msw::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 35px;
      background: linear-gradient(transparent, rgba(5, 10, 10, .85))
    }

    .t-badge {
      position: absolute;
      top: 9px;
      right: 9px;
      background: var(--g);
      color: #050a0a;
      font-size: .58rem;
      font-weight: 700;
      letter-spacing: 1px;
      padding: 2px 7px;
      border-radius: 8px;
      font-family: 'Orbitron', monospace
    }

    .t-info {
      padding: 1.1rem
    }

    .t-name {
      font-family: 'Orbitron', monospace;
      font-size: .76rem;
      font-weight: 700;
      color: #fff;
      margin-bottom: .35rem
    }

    .t-desc {
      font-size: .76rem;
      color: var(--tm);
      line-height: 1.6
    }

    /* ===PACKAGES=== */
    .pkg-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 1.4rem;
      margin-top: 2.4rem
    }

    .pkg {
      background: var(--cb);
      border: 1px solid var(--cbr);
      border-radius: 14px;
      overflow: hidden;
      position: relative;
      transition: all .3s;
      display: flex;
      flex-direction: column
    }

    .pkg:hover {
      border-color: rgba(0, 255, 136, .32);
      transform: translateY(-4px);
      box-shadow: 0 20px 50px rgba(0, 255, 136, .07)
    }

    .pkg.pop {
      border-color: var(--g);
      background: rgba(0, 255, 136, .04);
      box-shadow: 0 0 36px rgba(0, 255, 136, .1)
    }

    .pkg-img {
      height: 130px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 255, 136, .02);
      border-bottom: 1px solid var(--cbr);
      position: relative;
      overflow: hidden
    }

    .pkg-img::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 30px;
      background: linear-gradient(transparent, rgba(5, 10, 10, .9))
    }

    .pkg-pop-tag {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      background: var(--g);
      color: #050a0a;
      font-size: .6rem;
      font-weight: 700;
      letter-spacing: 1px;
      padding: 3px 16px;
      border-radius: 0 0 8px 8px;
      font-family: 'Orbitron', monospace;
      z-index: 2
    }

    .pkg-body {
      padding: 1.4rem;
      flex: 1;
      display: flex;
      flex-direction: column
    }

    .pkg-tier {
      font-family: 'Orbitron', monospace;
      font-size: .58rem;
      color: var(--g);
      letter-spacing: 2px;
      margin-bottom: .4rem
    }

    .pkg-amt {
      font-family: 'Orbitron', monospace;
      font-size: 2rem;
      font-weight: 900;
      color: #00ff88;
      text-shadow: 0 0 20px rgba(0, 255, 136, .3);
      margin-bottom: .15rem
    }

    .pkg-per {
      font-size: .74rem;
      color: var(--tm);
      margin-bottom: .9rem
    }

    .pkg-div {
      height: 1px;
      background: var(--cbr);
      margin-bottom: .9rem
    }

    .pkg-feats {
      list-style: none;
      flex: 1
    }

    .pkg-feats li {
      font-size: .78rem;
      color: var(--tm);
      padding: .3rem 0;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .pkg-feats li::before {
      content: '✓';
      color: var(--g);
      font-weight: 700;
      flex-shrink: 0
    }

    .pkg-btn {
      margin-top: 1.2rem;
      padding: .7rem;
      border-radius: 7px;
      font-size: .84rem;
      font-weight: 600;
      cursor: pointer;
      text-align: center;
      transition: all .3s;
      font-family: 'Inter', sans-serif;
      border: none;
      display: block;
      text-decoration: none
    }

    .pb-o {
      background: transparent;
      border: 1px solid var(--cbr) !important;
      color: var(--tx)
    }

    .pb-o:hover {
      border-color: var(--g) !important;
      color: var(--g)
    }

    .pb-f {
      background: var(--g);
      color: #050a0a
    }

    .pb-f:hover {
      background: var(--gd);
      box-shadow: 0 0 18px var(--gg)
    }

    .rental-tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: rgba(0, 212, 255, .1);
      border: 1px solid rgba(0, 212, 255, .3);
      border-radius: 6px;
      padding: 3px 10px;
      font-size: .65rem;
      color: var(--blu);
      font-weight: 600;
      font-family: 'Orbitron', monospace;
      margin-bottom: .6rem
    }

    /* ===CALCULATOR=== */
    .calc-wrap {
      background: var(--bg2)
    }

    .calc-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      margin-top: 2.4rem;
      align-items: start
    }

    .calc-box {
      background: rgba(0, 255, 136, .03);
      border: 1px solid var(--cbr);
      border-radius: 16px;
      padding: 2rem
    }

    .calc-title {
      font-family: 'Orbitron', monospace;
      font-size: 1rem;
      font-weight: 700;
      color: #fff;
      margin-bottom: .3rem
    }

    .calc-sub {
      font-size: .82rem;
      color: var(--tm);
      margin-bottom: 1.4rem
    }

    .pkg-selector {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: .5rem;
      margin-bottom: 1.4rem
    }

    .pkg-sel-btn {
      padding: .5rem .3rem;
      background: var(--cb);
      border: 1px solid var(--cbr);
      border-radius: 7px;
      color: var(--tm);
      font-size: .72rem;
      font-weight: 600;
      cursor: pointer;
      text-align: center;
      transition: all .3s;
      font-family: 'Orbitron', monospace
    }

    .pkg-sel-btn:hover,
    .pkg-sel-btn.active {
      background: rgba(0, 255, 136, .1);
      border-color: var(--g);
      color: var(--g)
    }

    .slider-wrap {
      margin-bottom: 1.2rem
    }

    .slider-label {
      display: flex;
      justify-content: space-between;
      font-size: .78rem;
      color: var(--tm);
      margin-bottom: .5rem
    }

    .slider-label span {
      color: var(--g);
      font-weight: 600;
      font-family: 'Orbitron', monospace
    }

    input[type=range] {
      width: 100%;
      -webkit-appearance: none;
      height: 4px;
      border-radius: 2px;
      background: var(--cbr);
      outline: none
    }

    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--g);
      cursor: pointer;
      box-shadow: 0 0 10px var(--gg)
    }

    .calc-results {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .8rem;
      margin-top: 1rem
    }

    .calc-res-item {
      background: rgba(0, 255, 136, .04);
      border: 1px solid var(--cbr);
      border-radius: 10px;
      padding: .9rem
    }

    .cr-label {
      font-size: .7rem;
      color: var(--tm);
      margin-bottom: .3rem
    }

    .cr-val {
      font-family: 'Orbitron', monospace;
      font-size: 1.1rem;
      color: var(--g);
      font-weight: 700
    }

    .cr-usd {
      font-size: .7rem;
      color: var(--tm);
      margin-top: .1rem
    }

    .calc-machine {
      background: rgba(0, 255, 136, .02);
      border: 1px solid var(--cbr);
      border-radius: 16px;
      padding: 1.5rem;
      text-align: center
    }

    .calc-machine-title {
      font-family: 'Orbitron', monospace;
      font-size: .8rem;
      color: var(--g);
      margin-bottom: .5rem
    }

    .calc-machine-info {
      font-size: .78rem;
      color: var(--tm);
      line-height: 1.6;
      margin-top: 1rem
    }

    .calc-roi {
      margin-top: 1.2rem;
      padding: .9rem;
      background: rgba(0, 255, 136, .06);
      border-radius: 10px;
      border: 1px solid rgba(0, 255, 136, .2)
    }

    .calc-roi-title {
      font-size: .72rem;
      color: var(--tm);
      margin-bottom: .3rem
    }

    .calc-roi-val {
      font-family: 'Orbitron', monospace;
      font-size: 1.4rem;
      color: var(--g);
      font-weight: 700
    }

    /* ===ROADMAP HORIZONTAL=== */
    .road-wrap {
      overflow-x: auto;
      padding-bottom: 1rem
    }

    .road-track {
      display: flex;
      align-items: center;
      min-width: 900px;
      position: relative;
      padding: 0 2rem
    }

    .road-line-h {
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--g) 10%, var(--g) 90%, transparent);
      transform: translateY(-50%)
    }

    .road-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      position: relative
    }

    .road-dot-h {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 2px solid var(--g);
      background: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Orbitron', monospace;
      font-size: .62rem;
      font-weight: 700;
      color: var(--g);
      z-index: 2;
      box-shadow: 0 0 18px var(--gg);
      flex-shrink: 0;
      cursor: pointer;
      transition: all .3s
    }

    .road-dot-h.done {
      background: var(--g);
      color: #050a0a
    }

    .road-dot-h:hover {
      box-shadow: 0 0 30px var(--gg)
    }

    .road-up {
      padding-bottom: 1.4rem;
      text-align: center
    }

    .road-dn {
      padding-top: 1.4rem;
      text-align: center
    }

    .road-date {
      font-family: 'Orbitron', monospace;
      font-size: .58rem;
      color: var(--g);
      letter-spacing: 1px;
      margin-bottom: .3rem
    }

    .road-phase-title {
      font-size: .78rem;
      font-weight: 600;
      color: #fff;
      margin-bottom: .3rem
    }

    .road-items-h {
      list-style: none
    }

    .road-items-h li {
      font-size: .68rem;
      color: var(--tm);
      padding: .15rem 0;
      position: relative;
      padding-left: .8rem
    }

    .road-items-h li::before {
      content: '▸';
      position: absolute;
      left: 0;
      color: var(--g);
      font-size: .55rem
    }

    /* ===ECO GRID=== */
    .eco-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      margin-top: 2.4rem;
      border: 1px solid var(--cbr);
      border-radius: 14px;
      overflow: hidden
    }

    .eco-item {
      background: var(--cb);
      padding: 1.6rem;
      transition: background .3s;
      text-align: center
    }

    .eco-item:hover {
      background: var(--ch)
    }

    .eco-name {
      font-family: 'Orbitron', monospace;
      font-size: .76rem;
      font-weight: 600;
      color: #fff;
      margin: .7rem 0 .35rem
    }

    .eco-desc {
      font-size: .76rem;
      color: var(--tm);
      line-height: 1.6
    }

    /* ===HOW TO START=== */
    .hts-wrap {
      background: var(--bg2)
    }

    .hts-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
      margin-top: 2.4rem;
      align-items: start
    }

    .hts-step {
      position: relative
    }

    .hts-connector {
      position: absolute;
      top: 32px;
      left: calc(50% + 24px);
      right: calc(-50% + 24px);
      height: 2px;
      background: linear-gradient(90deg, var(--g), rgba(0, 255, 136, .2));
      z-index: 0
    }

    .hts-step:last-child .hts-connector {
      display: none
    }

    .hts-num {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 2px solid var(--g);
      background: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Orbitron', monospace;
      font-size: .78rem;
      font-weight: 700;
      color: var(--g);
      margin: 0 auto 1rem;
      position: relative;
      z-index: 1;
      box-shadow: 0 0 14px var(--gg)
    }

    .hts-card {
      background: var(--cb);
      border: 1px solid var(--cbr);
      border-radius: 12px;
      padding: 1.2rem;
      text-align: center;
      transition: all .3s;
      margin-top: .5rem
    }

    .hts-card:hover {
      border-color: rgba(0, 255, 136, .28);
      background: var(--ch)
    }

    .hts-title {
      font-weight: 600;
      color: #fff;
      font-size: .88rem;
      margin-bottom: .35rem
    }

    .hts-desc {
      font-size: .76rem;
      color: var(--tm);
      line-height: 1.6
    }

    .hts-card.highlight {
      background: rgba(0, 255, 136, .07);
      border-color: var(--g)
    }

    /* ===WHY=== */
    .why-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1.4rem;
      margin-top: 2.4rem
    }

    .why-card {
      display: flex;
      gap: .9rem;
      align-items: flex-start;
      background: var(--cb);
      border: 1px solid var(--cbr);
      border-radius: 12px;
      padding: 1.3rem;
      transition: all .3s
    }

    .why-card:hover {
      border-color: rgba(0, 255, 136, .28)
    }

    .why-num {
      font-family: 'Orbitron', monospace;
      font-size: 1.6rem;
      font-weight: 900;
      color: rgba(0, 255, 136, .18);
      line-height: 1;
      flex-shrink: 0;
      width: 44px
    }

    .why-title {
      font-weight: 600;
      color: #fff;
      margin-bottom: .3rem;
      font-size: .88rem
    }

    .why-txt {
      font-size: .78rem;
      color: var(--tm);
      line-height: 1.7
    }

    /* ===PARTNERS=== */
    .partners-row {
      display: flex;
      gap: 1.2rem;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 2.4rem
    }

    .p-card {
      background: var(--cb);
      border: 1px solid var(--cbr);
      border-radius: 10px;
      padding: 1.1rem 1.5rem;
      min-width: 140px;
      text-align: center;
      transition: all .3s
    }

    .p-card:hover {
      border-color: var(--g);
      box-shadow: 0 0 18px var(--gg)
    }

    .p-name {
      font-family: 'Orbitron', monospace;
      font-size: .76rem;
      font-weight: 600;
      color: #fff
    }

    .p-type {
      font-size: .68rem;
      color: var(--tm);
      margin-top: 3px
    }

    /* ===ADV=== */
    .adv-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 1.4rem;
      margin-top: 2.4rem
    }

    .adv-item {
      background: var(--cb);
      border: 1px solid var(--cbr);
      border-radius: 12px;
      padding: 1.4rem;
      text-align: center;
      transition: all .3s
    }

    .adv-item:hover {
      border-color: rgba(0, 255, 136, .28)
    }

    .adv-val {
      font-family: 'Orbitron', monospace;
      font-size: 1.4rem;
      color: var(--g);
      font-weight: 700;
      margin-bottom: .2rem
    }

    .adv-title {
      font-size: .82rem;
      font-weight: 600;
      color: #fff;
      margin-bottom: .15rem
    }

    .adv-sub {
      font-size: .72rem;
      color: var(--tm)
    }

    /* ===RENTAL=== */
    .rent-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
      gap: 1.6rem;
      margin-top: 2.4rem
    }

    .rent-card {
      background: var(--cb);
      border: 1px solid var(--cbr);
      border-radius: 14px;
      overflow: hidden;
      transition: all .3s
    }

    .rent-card:hover {
      border-color: rgba(0, 255, 136, .32);
      transform: translateY(-4px)
    }

    .rent-img {
      height: 110px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 255, 136, .02);
      border-bottom: 1px solid var(--cbr)
    }

    .rent-body {
      padding: 1.4rem
    }

    .rent-tier {
      font-family: 'Orbitron', monospace;
      font-size: .6rem;
      color: var(--g);
      letter-spacing: 2px;
      margin-bottom: .5rem
    }

    .rent-name {
      font-size: 1rem;
      font-weight: 600;
      color: #fff;
      margin-bottom: .3rem
    }

    .rent-price {
      font-family: 'Orbitron', monospace;
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--g);
      margin: 0.8rem 0
    }

    .rent-specs {
      list-style: none;
      margin-bottom: 1.2rem
    }

    .rent-specs li {
      font-size: .76rem;
      color: var(--tm);
      padding: .25rem 0;
      border-bottom: 1px solid rgba(255, 255, 255, .04)
    }

    .rent-specs li strong {
      color: var(--tx);
      font-weight: 500
    }

    /* ===CTA=== */
    .cta-sec {
      text-align: center;
      padding: 4.5rem 3rem;
      background: linear-gradient(180deg, var(--bg) 0%, var(--bg3) 50%, var(--bg) 100%);
      position: relative;
      overflow: hidden
    }

    .cta-sec::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 50%, rgba(0, 255, 136, .07) 0%, transparent 70%)
    }

    .cta-sec h2 {
      font-family: 'Orbitron', monospace;
      font-size: clamp(1.7rem, 3.5vw, 2.8rem);
      font-weight: 900;
      margin-bottom: .9rem
    }

    .cta-sec p {
      color: var(--tm);
      margin-bottom: 1.8rem
    }

    /* ===FOOTER=== */
    footer {
      background: var(--bg2);
      border-top: 1px solid var(--cbr);
      padding: 2.8rem
    }

    .foot-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 2.5rem;
      max-width: 1200px;
      margin: 0 auto
    }

    .foot-desc {
      color: var(--tm);
      font-size: .78rem;
      line-height: 1.8;
      margin-top: .9rem
    }

    .foot-h {
      font-family: 'Orbitron', monospace;
      font-size: .6rem;
      letter-spacing: 2px;
      color: var(--g);
      margin-bottom: .85rem
    }

    .foot-links {
      list-style: none
    }

    .foot-links li {
      margin-bottom: .4rem
    }

    .foot-links a {
      color: var(--tm);
      text-decoration: none;
      font-size: .78rem;
      transition: color .3s
    }

    .foot-links a:hover {
      color: var(--g)
    }

    .foot-bot {
      border-top: 1px solid var(--cbr);
      margin-top: 1.8rem;
      padding-top: 1.3rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: .8rem;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto
    }

    .foot-bot p {
      font-size: .74rem;
      color: var(--td)
    }

    /* ===MODALS=== */
    .mo {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(5, 10, 10, .92);
      backdrop-filter: blur(12px);
      align-items: center;
      justify-content: center
    }

    .mo.open {
      display: flex
    }

    .mod {
      background: var(--bg3);
      border: 1px solid var(--cbr);
      border-radius: 18px;
      padding: 2.2rem;
      width: 90%;
      max-width: 450px;
      position: relative;
      max-height: 90vh;
      overflow-y: auto
    }

    .mod-x {
      position: absolute;
      top: .9rem;
      right: .9rem;
      background: none;
      border: none;
      color: var(--tm);
      font-size: 1.3rem;
      cursor: pointer
    }

    .mod-x:hover {
      color: var(--g)
    }

    .mod-h {
      font-family: 'Orbitron', monospace;
      font-size: 1.05rem;
      color: #fff;
      margin-bottom: .35rem
    }

    .mod-s {
      font-size: .78rem;
      color: var(--tm);
      margin-bottom: 1.6rem
    }

    .fg {
      margin-bottom: 1rem
    }

    .fl {
      display: block;
      font-size: .72rem;
      color: var(--tm);
      margin-bottom: .3rem;
      letter-spacing: .5px
    }

    .fi {
      width: 100%;
      padding: .65rem .9rem;
      background: rgba(0, 255, 136, .03);
      border: 1px solid var(--cbr);
      border-radius: 7px;
      color: var(--tx);
      font-size: .85rem;
      font-family: 'Inter', sans-serif;
      transition: border-color .3s;
      outline: none
    }

    .fi:focus {
      border-color: var(--g)
    }

    .fi::placeholder {
      color: var(--td)
    }

    .f2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .9rem
    }

    .flink {
      color: var(--g);
      text-decoration: none;
      font-size: .78rem
    }

    .flink:hover {
      text-decoration: underline
    }

    .ref-box {
      background: rgba(0, 255, 136, .07);
      border: 1px solid rgba(0, 255, 136, .18);
      border-radius: 7px;
      padding: .65rem .9rem;
      font-size: .74rem;
      color: var(--tm);
      margin-bottom: .9rem
    }

    .ref-box strong {
      color: var(--g)
    }

    /* ===ANIMATIONS=== */
    @keyframes spinFan {
      from {
        transform: rotate(0deg)
      }

      to {
        transform: rotate(360deg)
      }
    }

    @keyframes floatY {

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

      50% {
        transform: translateY(-10px)
      }
    }

    @keyframes glowPulse {

      0%,
      100% {
        opacity: .5
      }

      50% {
        opacity: 1
      }
    }

    @keyframes dataFlow {
      0% {
        stroke-dashoffset: 200
      }

      100% {
        stroke-dashoffset: 0
      }
    }

    @keyframes scanLine {
      0% {
        transform: translateY(-100%)
      }

      100% {
        transform: translateY(1000%)
      }
    }

    @keyframes blockIn {
      from {
        opacity: 0;
        transform: scale(.85) translateX(-15px)
      }

      to {
        opacity: 1;
        transform: scale(1) translateX(0)
      }
    }

    /* ===RESPONSIVE=== */
    @media(max-width:900px) {
      nav {
        padding: .9rem 1.4rem
      }

      .nav-links {
        display: none
      }

      .sec {
        padding: 3.5rem 1.4rem
      }

      .eco-grid {
        grid-template-columns: 1fr
      }

      .foot-grid {
        grid-template-columns: 1fr 1fr
      }

      .calc-grid {
        grid-template-columns: 1fr
      }

      .hts-grid {
        grid-template-columns: 1fr 1fr
      }

      .pkg-selector {
        grid-template-columns: repeat(4, 1fr)
      }
    }

    @media(max-width:600px) {
      .hts-grid {
        grid-template-columns: 1fr
      }

      .types-grid {
        grid-template-columns: 1fr 1fr
      }

      .pkg-grid {
        grid-template-columns: 1fr
      }

      .foot-grid {
        grid-template-columns: 1fr
      }

      .calc-results {
        grid-template-columns: 1fr
      }

      .pkg-selector {
        grid-template-columns: repeat(4, 1fr)
      }
    }

    .blockchain-viz-wrap {
      position: relative;
      overflow: hidden;
    }

    .blockchain-viz-wrap::before {
      content: "";
      position: absolute;
      inset: 0;
      background: url("web_assets/images/img-1.webp") center/cover no-repeat;
      opacity: 0.05;
      filter: blur(3px);
    }

    .sponsor-btn:hover {
      border-color: rgba(0, 255, 136, .4) !important;
      background: rgba(0, 255, 136, .06) !important
    }



    
/* Dashboard CSS */
    .db-nav-item {
      display: flex;
      align-items: center;
      gap: .65rem;
      padding: .62rem 1.2rem;
      cursor: pointer;
      transition: all .25s;
      border-left: 2.5px solid transparent;
      font-size: .78rem;
      color: #6a9080;
      font-weight: 500;
      margin: .05rem 0
    }

    .db-nav-item:hover {
      background: rgba(0, 255, 136, .04);
      border-left-color: rgba(0, 255, 136, .25);
      color: #9ab89a
    }

    .db-nav-item.active {
      background: rgba(0, 255, 136, .07);
      border-left-color: #00ff88;
      color: #00ff88
    }

    .db-page {
      display: none
    }

    .db-page.active {
      display: block
    }

    .db-card {
      background: #060f08;
      border: 1px solid rgba(0, 255, 136, .1);
      border-radius: 12px;
      padding: 1.1rem;
      transition: border-color .3s
    }

    .db-card:hover {
      border-color: rgba(0, 255, 136, .22)
    }

    .db-pkg-card {
      background: #060f08;
      border: 1.5px solid rgba(0, 255, 136, .12);
      border-radius: 12px;
      padding: 1.1rem;
      cursor: pointer;
      transition: all .3s;
      text-align: center
    }

    .db-pkg-card:hover {
      border-color: rgba(0, 255, 136, .45);
      transform: translateY(-4px);
      box-shadow: 0 16px 40px rgba(0, 255, 136, .08)
    }

    .db-activate-btn {
      width: 100%;
      padding: .6rem;
      background: #00ff88;
      color: #000;
      border: none;
      border-radius: 18px;
      font-size: .77rem;
      font-weight: 700;
      cursor: pointer;
      transition: all .3s;
      font-family: 'Inter', sans-serif
    }

    .db-activate-btn:hover {
      box-shadow: 0 4px 20px rgba(0, 255, 136, .4)
    }

    @media(max-width:900px) {
      #dbSidebar {
        transform: translateX(-100%)
      }

      #dbSidebar.db-open {
        transform: translateX(0)
      }

      #dbMain {
        margin-left: 0 !important
      }

      .db-grid-5 {
        grid-template-columns: 1fr 1fr !important
      }

      .db-grid-2 {
        grid-template-columns: 1fr !important
      }

      .db-grid-3 {
        grid-template-columns: 1fr 1fr !important
      }
    }

    @media(max-width:580px) {

      .db-grid-5,
      .db-grid-3 {
        grid-template-columns: 1fr !important
      }
    }
    
    
    
    
    
    
    
    nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 5%;
    position: relative;
}

.nav-links {
    font-family: 'Orbitron', sans-serif;
    display: flex;
    align-items: center;
    gap: 25px;
    list-style: none;
}

.nav-links li a {
    text-decoration: none;
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
}

.menu-toggle {
    display: none;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
    user-select: none;
}

.mobile-login {
    display: none;
}

/* Mobile */
@media (max-width: 991px) {

    .menu-toggle {
        display: block;
        z-index: 1001;
    }

    .nav-cta {
        display: none;
    }

    .mobile-login {
        display: block;
        margin-top: 15px;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: #050a0a;
        flex-direction: column;
        align-items: flex-start;
        padding: 100px 30px 30px;
        gap: 20px;
        transition: 0.4s ease;
        z-index: 1000;
        overflow-y: auto;
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links li a {
        display: block;
        width: 100%;
        font-size: 16px;
        padding: 10px 0;
    }
}
    
    
    nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 15px 5%;
    box-sizing: border-box;

    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}