:root {
      --black: #050505;
      --red: #E10600;
      --red-glow: rgba(225, 6, 0, .1);
      --white: #fff;
      --gray: #111;
      --fd: 'Bebas Neue', sans-serif;
      --fu: 'Rajdhani', sans-serif;
      --fa: 'Orbitron', sans-serif;
    }

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

    html {
      scroll-behavior: smooth;
      overflow-x: hidden
    }

    body {
      background: #020202; /* Even deeper black */
      color: var(--white);
      font-family: var(--fu);
      overflow-x: hidden;
      cursor: none;
      position: relative;
    }

    /* ══ CUSTOM CYBER SCROLLBAR ══ */
    html::-webkit-scrollbar {
      width: 10px;
      height: 10px;
      background: #020202;
    }

    html::-webkit-scrollbar-track {
      background: #050505;
      border-left: 1px solid rgba(255, 255, 255, 0.03);
      /* Subtle grid texture on the track */
      background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
      background-size: 100% 20px;
    }

    html::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, transparent 0%, rgba(225, 6, 0, 0.8) 10%, rgba(225, 6, 0, 0.8) 90%, transparent 100%);
      border: 2px solid #050505; /* Spacing from edges */
      border-radius: 6px;
    }

    html::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, transparent 0%, #ff2020 10%, #ff2020 90%, transparent 100%);
    }

    html::-webkit-scrollbar-corner {
      background: #020202;
    }

    /* ══ CUSTOM SELECTION ══ */
    ::selection {
      background: rgba(225, 6, 0, 0.7);
      color: var(--white);
      text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
    }

    /* GLOBAL ATMOSPHERE */
    .global-bg {
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background: #020202;
      overflow: hidden;
    }

    .gbg-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(150px);
      opacity: 0.08; 
      background: #000000be; /* Neutralized from red to prevent 'red-ish' wash */
    }

    .gbg-orb-1 {
      width: 800px;
      height: 800px;
      top: -10%;
      left: -10%;
    }

    .gbg-orb-2 {
      width: 600px;
      height: 600px;
      bottom: 10%;
      right: -5%;
      opacity: 0.08;
    }

    .gbg-orb-3 {
      width: 500px;
      height: 500px;
      top: 40%;
      left: 30%;
      background: #000000be;
      opacity: 0.05;
    }

    /* Professional Scanner Lines */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 99998;
      pointer-events: none;
      background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.01) 2px, rgba(255, 255, 255, 0.01) 3px);
      opacity: 0.5;
    }

    /* Tech Grid Overlay */
    .global-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: 
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
      background-size: 50px 50px;
      mask-image: radial-gradient(circle at center, black 10%, transparent 80%);
      opacity: 0.3;
    }

    .mobile-only {
      display: none !important;
    }

    @media (max-width: 1000px) {
      .desktop-only {
        display: none !important;
      }
      .mobile-only {
        display: block !important;
      }
    }

    @media (max-width: 1024px), (pointer: coarse) {
      body {
        cursor: auto !important;
      }
    }

    /* CURSOR */
    .cursor {
      width: 10px;
      height: 10px;
      background: var(--red);
      border-radius: 50%;
      position: fixed;
      top: 0;
      left: 0;
      pointer-events: none;
      z-index: 999999;
      transform: translate(-50%, -50%);
      transition: width .15s, height .15s
    }

    .cursor-ring {
      width: 32px;
      height: 32px;
      border: 1px solid rgba(225, 6, 0, .6);
      border-radius: 50%;
      position: fixed;
      top: 0;
      left: 0;
      pointer-events: none;
      z-index: 999998;
      transform: translate(-50%, -50%);
      transition: width .3s, height .3s, border-color .3s
    }

    @media (max-width: 1024px), (pointer: coarse) {
      .cursor, .cursor-ring {
        display: none !important;
      }
    }

    /* ══ INTRO ══ */
    #intro {
      position: fixed;
      inset: 0;
      z-index: 100000;
      background: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden
    }

    #intro-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0
    }

    #intro::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0, 0, 0, .15) 3px, rgba(0, 0, 0, .15) 4px);
      pointer-events: none
    }

    .intro-skip {
      position: absolute;
      bottom: 40px;
      right: 48px;
      z-index: 10;
      font-family: var(--fa);
      font-size: 10px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .35);
      border: 1px solid rgba(255, 255, 255, .15);
      padding: 10px 22px;
      background: transparent;
      cursor: none;
      display: flex;
      align-items: center;
      gap: 10px;
      opacity: 0;
      animation: fadeSkip .5s ease 1.5s forwards;
      transition: color .3s, border-color .3s
    }

    .intro-skip:hover {
      color: var(--white);
      border-color: var(--red)
    }

    @keyframes fadeSkip {
      to {
        opacity: 1
      }
    }

    .skip-bar {
      width: 40px;
      height: 1px;
      background: rgba(255, 255, 255, .25);
      overflow: hidden;
      position: relative
    }

    .skip-fill {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      background: var(--red);
      width: 0%;
      transition: width linear
    }

    #intro-flash {
      position: absolute;
      inset: 0;
      z-index: 9;
      background: #fff;
      opacity: 0;
      pointer-events: none
    }

    .curt {
      position: absolute;
      top: 0;
      height: 100%;
      background: #000;
      z-index: 8;
      pointer-events: none;
      width: 0
    }

    .curt-l {
      left: 0
    }

    .curt-r {
      right: 0
    }

    /* ══ NAV ══ */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 60px;
      transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
      background: transparent;
      border-bottom: 1px solid transparent;
    }

    nav.scrolled {
      background: rgba(255, 255, 255, 0.03); /* Crystal glass tint */
      backdrop-filter: blur(20px) saturate(180%);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }

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

    .nav-logo img {
      height: 36px;
      width: auto;
      filter: drop-shadow(0 0 10px rgba(225, 6, 0, .5))
    }

    .nav-logo-txt {
      font-family: var(--fa);
      font-size: 15px;
      font-weight: 900;
      letter-spacing: 4px;
      color: var(--white)
    }

    .nav-logo-txt span {
      color: var(--red)
    }

    .nav-links {
      display: flex;
      gap: 36px;
      list-style: none
    }

    .nav-links a {
      color: rgba(255, 255, 255, .5);
      text-decoration: none;
      font-family: var(--fu);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      transition: color .3s;
      position: relative
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      right: 100%;
      height: 1px;
      background: var(--red);
      transition: right .3s
    }

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

    .nav-links a:hover::after {
      right: 0
    }

    .nav-cta {
      background: var(--red);
      color: var(--white);
      border: none;
      padding: 10px 26px;
      font-family: var(--fu);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      cursor: none;
      text-decoration: none;
      clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
      transition: box-shadow .3s
    }

    .nav-cta:hover {
      box-shadow: 0 0 28px var(--red-glow)
    }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 30px
    }

    .menu-toggle {
      display: none;
      flex-direction: column;
      gap: 8px;
      background: none;
      border: none;
      cursor: none;
      padding: 10px;
      z-index: 1001;
      width: 44px
    }

    .menu-toggle .bar {
      width: 100%;
      height: 2px;
      background: var(--white);
      transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1)
    }

    .menu-toggle .bar:last-child {
      width: 70%;
      margin-left: auto;
      background: var(--red)
    }

    /* ══ OFF-CANVAS ══ */
    .off-canvas {
      position: fixed;
      inset: 0;
      z-index: 2000;
      visibility: hidden;
      pointer-events: none
    }

    .off-canvas.active {
      visibility: visible;
      pointer-events: all
    }

    .oc-bg {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(15px);
      opacity: 0;
      transition: opacity .6s
    }

    .off-canvas.active .oc-bg {
      opacity: 1
    }

    .oc-content {
      position: absolute;
      top: 0;
      right: -100%;
      width: 100%;
      max-width: 500px;
      height: 100%;
      background: #050505;
      border-left: 1px solid rgba(255, 255, 255, .05);
      padding: 60px 50px; /* Balanced padding */
      display: flex;
      flex-direction: column;
      transition: all .8s cubic-bezier(0.85, 0, 0.15, 1);
      z-index: 2;
      overflow-y: auto;
    }

    .off-canvas.active .oc-content {
      right: 0
    }

    .oc-header {
      display: flex;
      justify-content: space-between;
      align-items: center
    }

    .oc-title {
      font-family: var(--fa);
      font-size: 10px;
      letter-spacing: 6px;
      color: rgba(255, 255, 255, .2)
    }

    .oc-close {
      background: none;
      border: none;
      color: var(--white);
      font-size: 24px;
      cursor: none;
      transition: transform .4s
    }

    .oc-close:hover {
      transform: rotate(90deg);
      color: var(--red)
    }

    .oc-links {
      list-style: none;
      margin: 60px 0
    }

    .oc-links li {
      margin-bottom: 35px;
      overflow: hidden
    }

    .oc-links a {
      font-family: var(--fd);
      font-size: 52px;
      color: var(--white);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 24px;
      transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1)
    }

    .oc-links a span {
      font-family: var(--fa);
      font-size: 14px;
      color: var(--red);
      font-weight: 700
    }

    .oc-links a:hover {
      padding-left: 30px;
      color: var(--red)
    }

    .oc-footer {
      border-top: 1px solid rgba(255, 255, 255, .05);
      padding-top: 40px
    }

    .oc-socials {
      display: flex;
      gap: 30px;
      margin-bottom: 25px
    }

    .oc-socials a {
      color: var(--white);
      font-size: 26px; /* Slightly larger */
      opacity: 0.8 !important; /* Force visible */
      transition: all .3s;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .oc-socials a:hover {
      opacity: 1;
      color: var(--red);
      transform: translateY(-5px)
    }

    .oc-cta {
      display: block;
      width: 100%;
      background-color: var(--red) !important;
      color: #fff !important;
      text-align: center;
      padding: 20px;
      font-family: var(--fu);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      text-decoration: none;
      margin-bottom: 30px;
      clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
      transition: all 0.3s;
      opacity: 1 !important;
      position: relative;
      z-index: 5;
    }

    .oc-cta:hover {
      box-shadow: 0 0 35px var(--red-glow);
      transform: translateY(-2px);
    }
    
    .oc-footer p {
      font-family: var(--fa);
      font-size: 10px;
      letter-spacing: 2px;
      color: rgba(255, 255, 255, .3); /* More visible copyright */
      margin-top: 10px;
    }

    @media (max-width: 900px) {
      nav {
        padding: 15px 40px
      }

      .nav-links, .nav-cta {
        display: none /* Hide in main nav on mobile */
      }

      .menu-toggle {
        display: flex
      }

      .oc-content {
        padding: 60px 40px
      }

      .oc-links a {
        font-size: 42px
      }
    }

    @media (max-width: 500px) {
      nav {
        padding: 15px 25px
      }

      .nav-logo-txt {
        display: none
      }

      .oc-links a {
        font-size: 36px
      }
    }

    /* ══ HERO ══ */
    #hero {
      position: relative;
      width: 100vw;
      height: 100vh;
      min-height: 800px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #000;
    }

    /* ── BACKGROUND ELEMENTS ── */
    .h-bg-fx {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
    }

    .h-light {
      position: absolute;
      border-radius: 50%;
      filter: blur(140px);
      opacity: 0.05;
      background: var(--red);
      z-index: 1;
    }

    .h-light-1 {
      width: 600px;
      height: 600px;
      top: -10%;
      left: -10%;
    }

    .h-light-2 {
      width: 500px;
      height: 500px;
      bottom: -5%;
      right: 15%;
    }

    .smoke-wrap {
      position: absolute;
      inset: 0;
      z-index: 2;
      overflow: hidden;
    }

    .smoke {
      position: absolute;
      width: 800px;
      height: 800px;
      background: radial-gradient(circle, rgba(255, 0, 0, 0.01) 0%, transparent 70%); /* Neutralized from red */
      filter: blur(100px); /* More blur for softness */
      animation: smokeMove 25s linear infinite;
      opacity: 0.15; /* Reduced from 0.3 */
    }

    @keyframes smokeMove {
      0% {
        transform: translate(-20%, -20%) rotate(0deg) scale(1);
      }

      50% {
        transform: translate(10%, 10%) rotate(180deg) scale(1.2);
      }

      100% {
        transform: translate(-20%, -20%) rotate(360deg) scale(1);
      }
    }

    .particle {
      position: absolute;
      background: #fff;
      border-radius: 50%;
      pointer-events: none;
      z-index: 3;
      opacity: 0.2;
    }

    .h-grid {
      position: absolute;
      inset: 0;
      z-index: 4;
      background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
      background-size: 80px 80px;
      mask-image: radial-gradient(circle at center, black 10%, transparent 95%);
      opacity: 0.1; /* Reduced from 0.2 */
    }

    /* ── CONTENT ── */
    .h-container {
      position: relative;
      z-index: 10;
      width: 100%;
      max-width: 1400px;
      padding: 0 80px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 40px;
    }

    .h-content {
      flex: 1;
      text-align: left;
    }

    .h-ey-wrap {
      overflow: hidden;
      margin-bottom: 20px;
    }

    .h-ey {
      font-family: var(--fa);
      font-size: 11px;
      letter-spacing: 5px;
      color: var(--red);
      text-transform: uppercase;
      font-weight: 700;
      opacity: 0;
      transform: translateY(100%);
    }

    .h-title-wrap {
      margin-bottom: 30px;
    }

    .h-title {
      font-family: var(--fd);
      font-size: clamp(60px, 9vw, 150px);
      line-height: 0.85;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #fff;
    }

    .h-title .r {
      color: var(--red);
      text-shadow: 0 0 30px rgba(225, 6, 0, 0.1);
    }

    .h-sub {
      font-family: var(--fu);
      font-size: 18px;
      font-weight: 400;
      letter-spacing: 2px;
      color: rgba(255, 255, 255, .4);
      text-transform: uppercase;
      margin-bottom: 50px;
      max-width: 550px;
      opacity: 0;
      transform: translateY(30px);
    }

    .h-btns {
      display: flex;
      gap: 20px;
      opacity: 0;
      transform: translateY(30px);
    }

    /* ── VISUAL (LOGO) ── */
    .h-visual {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      perspective: 1200px;
    }

    .h-logo-scene {
      position: relative;
      width: clamp(280px, 35vw, 450px);
      height: clamp(280px, 35vw, 450px);
      display: flex;
      align-items: center;
      justify-content: center;
      transform-style: preserve-3d;
      opacity: 0;
      transform: scale(0.8) rotateX(20deg);
    }

    .h-logo-glow {
      position: absolute;
      width: 70%;
      height: 70%;
      background: radial-gradient(circle, rgba(225, 6, 0, 0.1) 0%, transparent 80%);
      filter: blur(40px);
      z-index: 0;
      animation: pulseGlow 4s ease-in-out infinite;
    }

    @keyframes pulseGlow {

      0%,
      100% {
        transform: scale(1);
        opacity: 0.15; /* Reduced from 0.3 */
      }

      50% {
        transform: scale(1.2); /* Slightly less scaling */
        opacity: 0.3; /* Reduced from 0.6 */
      }
    }

    .h-logo-main {
      position: relative;
      width: 100%;
      height: auto;
      z-index: 2;
      filter: drop-shadow(0 0 30px rgba(225, 6, 0, 0.4)); /* Reduced from 40px/0.6 */
      transform-style: preserve-3d;
    }

    .h-logo-back {
      position: absolute;
      width: 90%;
      height: auto;
      z-index: 1;
      filter: brightness(0) invert(1) opacity(0.05);
      transform: translateZ(-50px) scale(1.1);
      pointer-events: none;
    }

    .scroll-ind {
      position: absolute;
      bottom: 40px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 20;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
      opacity: 0;
    }

    .scroll-ind span {
      font-family: var(--fa);
      font-size: 9px;
      letter-spacing: 5px;
      color: rgba(255, 255, 255, .25);
      text-transform: uppercase;
    }

    @media (max-width: 1100px) {
      #hero {
        min-height: auto;
        padding: 120px 0 80px;
        height: auto;
      }

      .h-container {
        flex-direction: column-reverse;
        text-align: center;
        padding: 0 40px;
        gap: 40px;
      }

      .h-content {
        align-items: center;
        display: flex;
        flex-direction: column;
        text-align: center;
      }

      .h-visual {
        justify-content: center;
        width: 100%;
      }

      .h-logo-scene {
        width: clamp(240px, 50vw, 380px);
        height: clamp(240px, 50vw, 380px);
      }

      .h-sub {
        max-width: 100%;
        font-size: 16px;
        margin-bottom: 40px;
      }
    }

    @media (max-width: 600px) {
      #hero {
        padding: 100px 0 60px;
      }

      .h-container {
        padding: 0 25px;
        gap: 30px;
      }

      .h-title {
        font-size: clamp(50px, 15vw, 80px);
      }

      .h-btns {
        flex-direction: column;
        width: 100%;
        gap: 15px;
      }

      .h-btns a {
        width: 100%;
        text-align: center;
      }

      .scroll-ind {
        display: none;
      }
    }

    /* ══ BUTTONS ══ */
    .btn-p {
      background: var(--red);
      color: var(--white);
      border: none;
      padding: 15px 38px;
      font-family: var(--fu);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      cursor: none;
      text-decoration: none;
      display: inline-block;
      position: relative;
      overflow: hidden;
      clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
      transition: box-shadow .3s, transform .2s;
    }

    .btn-p::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
      transition: left .5s;
    }

    .btn-p:hover {
      box-shadow: 0 0 40px var(--red-glow);
      transform: translateY(-2px);
    }

    .btn-p:hover::before {
      left: 100%;
    }

    .btn-s {
      background: transparent;
      color: var(--white);
      border: 1px solid rgba(255, 255, 255, .25);
      padding: 15px 38px;
      font-family: var(--fu);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      cursor: none;
      text-decoration: none;
      display: inline-block;
      clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
      transition: border-color .3s, background .3s, transform .2s;
    }

    .btn-s:hover {
      border-color: var(--red);
      background: rgba(225, 6, 0, .08);
      transform: translateY(-2px);
    }

    /* ══ TICKER ══ */
    .ticker {
      background: var(--red);
      padding: 12px 0;
      overflow: hidden;
      border-top: 1px solid rgba(255, 255, 255, .1);
      border-bottom: 1px solid rgba(255, 255, 255, .1)
    }

    .ticker-track {
      display: flex;
      white-space: nowrap;
      animation: tick 22s linear infinite
    }

    .ticker-item {
      display: inline-flex;
      align-items: center;
      gap: 34px;
      padding-right: 68px;
      font-family: var(--fd);
      font-size: 14px;
      letter-spacing: 3px;
      text-transform: uppercase
    }

    .td {
      color: rgba(255, 255, 255, .5);
      font-size: 10px
    }

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

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

    /* ══ COMMON ══ */
    .sw {
      padding: 110px 60px
    }

    .s-lbl {
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: var(--fa);
      font-size: 9px;
      letter-spacing: 4px;
      color: var(--red);
      text-transform: uppercase;
      margin-bottom: 10px
    }

    .s-lbl::before {
      content: '';
      width: 28px;
      height: 1px;
      background: var(--red)
    }

    .s-h {
      font-family: var(--fd);
      font-size: clamp(44px, 6vw, 80px);
      letter-spacing: 3px;
      line-height: 1;
      text-transform: uppercase
    }

    .s-h span {
      color: var(--red)
    }

    .rbar {
      width: 50px;
      height: 2px;
      background: var(--red);
      margin-top: 14px;
      margin-bottom: 50px
    }

    /* ══ BENTO ══ */
    .bg {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 14px
    }

    .bc {
      position: relative;
      overflow: hidden;
      background: rgba(10, 10, 10, 0.4);
      backdrop-filter: blur(5px);
      border: 1px solid rgba(255, 255, 255, .04);
      cursor: none;
      transition: border-color .4s, transform .4s, background .4s;
      opacity: 0;
      transform: translateY(24px)
    }

    .bc:hover {
      border-color: rgba(225, 6, 0, .4);
      background: rgba(15, 15, 15, 0.6);
      transform: translateY(-4px)
    }

    .bc::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(135deg, rgba(225, 6, 0, .09), transparent 60%);
      opacity: 0;
      transition: opacity .4s
    }

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

    .bc::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      z-index: 2;
      width: 50%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .04), transparent);
      transform: skewX(-18deg);
      transition: left .7s
    }

    .bc:hover::after {
      left: 150%
    }

    .bc-in {
      position: relative;
      z-index: 3;
      padding: 28px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end
    }

    .bc-lbl {
      font-family: var(--fa);
      font-size: 8px;
      letter-spacing: 3px;
      color: var(--red);
      text-transform: uppercase;
      margin-bottom: 6px
    }

    .bc-num {
      font-family: var(--fd);
      font-size: 58px;
      color: var(--red);
      line-height: 1;
      margin-bottom: 4px
    }

    .bc-t {
      font-family: var(--fd);
      font-size: 30px;
      letter-spacing: 2px;
      margin-bottom: 8px
    }

    .bc-d {
      font-size: 12px;
      color: rgba(255, 255, 255, .4);
      line-height: 1.6;
      max-width: 280px
    }

    .bc-e {
      grid-column: span 6;
      min-height: 310px
    }

    .bc-c {
      grid-column: span 6;
      min-height: 310px
    }

    .bc-d2 {
      grid-column: span 12;
      min-height: 255px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center
    }

    .bc-d2 .bc-in {
      align-items: center;
      justify-content: center;
      width: 100%
    }

    @media (max-width: 1100px) {
      .bg {
        grid-template-columns: repeat(2, 1fr);
      }
      .bc-c, .bc-e {
        grid-column: span 1;
        min-height: 280px;
      }
      .bc-d2 {
        grid-column: span 2;
        min-height: 255px;
      }
    }

    @media (max-width: 900px) {
      .sw {
        padding: 80px 40px;
      }
    }

    @media (max-width: 650px) {
      .bg {
        grid-template-columns: 1fr;
      }
      .bc-c, .bc-d2, .bc-e {
        grid-column: span 1;
        min-height: auto;
      }
      .sw {
        padding: 60px 25px;
      }
    }


    /* ══ TEAM LINEUP BANNER ══ */
    .team-banner {
      width: 100%;
      aspect-ratio: 1920 / 800;
      position: relative;
      background-image: url('../img/banner/roster.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      margin-bottom: 80px;
    }

    @media (max-width: 900px) {
      .team-banner {
        aspect-ratio: auto;
        height: 400px;
        margin-bottom: 50px;
      }
    }

    @media (max-width: 500px) {
      .team-banner {
        height: 280px;
        background-size: cover;
        background-position: center;
        margin-bottom: 40px;
      }
    }

    /* ══ ROSTER Cyber-Pro Grid ══ */
    .ros-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 0px;
    }

    .ros-view-all {
      font-family: var(--fa);
      font-size: 11px;
      letter-spacing: 2px;
      color: rgba(255, 255, 255, .4);
      text-decoration: none;
      transition: color .3s;
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px; /* Align with title's spacing before rbar */
    }

    .ros-view-all:hover {
      color: var(--red);
    }

    .ros-footer {
      display: flex;
      justify-content: center;
      margin-top: 120px;
    }

    .ros-btn {
      padding: 12px 30px;
      font-size: 11px;
    }

    @media (max-width: 900px) {
      .ros-view-all {
        display: none;
      }
    }
    .rg {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
      padding-top: 50px;
      max-width: 1300px;
      margin: 0 auto;
    }

    .pc {
      position: relative;
      height: 600px;
      opacity: 0;
      transform: translateY(40px);
    }

    .pc-inner {
      position: relative;
      width: 100%;
      height: 100%;
      background: #080808;
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 4px;
      /* overflow: hidden;  REMOVE THIS to allow head to pop out */
      transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    /* Container for background elements that MUST be clipped */
    .pc-bg-box {
      position: absolute;
      inset: 0;
      overflow: hidden;
      border-radius: 4px;
      z-index: 1;
    }

    /* Card Texture Overlay */
    .pc-bg-box::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("https://www.transparenttextures.com/patterns/carbon-fibre.png");
      opacity: 0.1;
      pointer-events: none;
      z-index: 1;
    }

    /* Top Elements */
    .pc-tag {
      position: absolute;
      top: 20px;
      left: 20px;
      font-family: var(--fa);
      font-size: 8px;
      letter-spacing: 3px;
      color: rgba(255, 255, 255, 0.2);
      z-index: 10;
    }

    .pc-role-pill {
      position: absolute;
      top: 20px;
      right: 20px;
      padding: 4px 10px;
      background: var(--red);
      color: #fff;
      font-family: var(--fa);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 1px;
      border-radius: 2px;
      z-index: 5;
    }

    /* Watermark */
    .pc-watermark {
      position: absolute;
      top: 20%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--fd);
      font-size: 140px;
      color: rgba(255, 255, 255, 0.02);
      line-height: 1;
      white-space: nowrap;
      pointer-events: none;
      z-index: 2; /* Inside pc-bg-box */
      transition: all 0.6s;
    }

    /* Player Render */
    .pc-render {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 200px;
      z-index: 5;
      overflow: visible; /* Head can pop out top */
    }

    .pc-render img {
      height: 115%; /* Slightly bigger to pop out top */
      width: auto;
      object-fit: contain;
      filter: drop-shadow(0 20px 40px rgba(0,0,0,0.8));
      transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
      transform-origin: bottom center;
    }

    /* Bottom Info (Glassmorphism) */
    .pc-info-panel {
      position: absolute;
      bottom: 1px;
      left: 1px;
      right: 1px;
      width: auto;
      padding: 30px 25px;
      background: linear-gradient(to top, #000 70%, transparent);
      backdrop-filter: blur(10px);
      z-index: 6;
      border-top: 1px solid rgba(255, 255, 255, 0.05);
      text-align: center;
    }

    .pc-name {
      font-family: var(--fd);
      font-size: 48px;
      line-height: 1;
      color: #fff;
      margin-bottom: 5px;
      letter-spacing: 1px;
    }

    .pc-real {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: rgba(255, 255, 255, 0.3);
      margin-bottom: 20px;
    }

    /* Stats HUD */
    .pc-stats-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      padding-top: 20px;
      margin-top: 20px;
    }

    .pc-stat {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .ps-val {
      font-family: var(--fd);
      font-size: 18px;
      color: var(--red);
    }

    .ps-lbl {
      font-size: 10px;
      color: rgba(255, 255, 255, 0.2);
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .pc-soc-bar {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 25px;
    }

    .pc-soc-bar a {
      color: rgba(255, 255, 255, 0.2);
      font-size: 18px; /* Bigger for Tabler icons */
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      transition: all 0.3s;
    }

    .pc-soc-bar i {
      stroke-width: 1.5;
    }

    .pc-soc-bar a:hover {
      color: var(--red);
      transform: translateY(-2px);
    }

    /* Hover States (The Wow Factor) */
    .pc:hover .pc-inner {
      border-color: var(--red);
      box-shadow: 0 0 50px rgba(225, 6, 0, 0.15);
      transform: translateY(-5px);
    }

    .pc:hover .pc-render img {
      transform: scale(1.08) translateY(-10px);
    }

    .pc:hover .pc-watermark {
      color: rgba(225, 6, 0, 0.05);
      letter-spacing: 10px;
    }

    /* Glint Shine Effect */
    .pc-bg-box::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 50%;
      height: 100%;
      background: linear-gradient(to right, transparent, rgba(255,255,255,0.05), transparent);
      transform: skewX(-25deg);
      transition: 0.75s;
      z-index: 7;
    }

    .pc:hover .pc-bg-box::after {
      left: 150%;
    }

    @media (max-width: 1100px) {
      .rg {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
      }
    }

    @media (max-width: 700px) {
      .rg {
        grid-template-columns: 1fr;
        padding: 0 10px;
        gap: 80px; /* Increased to allow for head-pop without overlapping previous card */
      }
      .pc {
        height: 520px;
      }
      .pc-name {
        font-size: 38px;
      }
      .pc-watermark {
        font-size: 100px;
      }
      .pc-info-panel {
        padding: 20px 15px;
      }
      .pc-stats-grid {
        gap: 10px;
        margin-top: 15px;
        padding-top: 15px;
      }
      .ps-val {
        font-size: 16px;
      }
      .pc-role-pill {
        top: auto;
        bottom: 195px; /* Positioned right above the name info panel */
        right: 50%;
        transform: translateX(50%);
        font-size: 7px;
        padding: 3px 8px;
      }
      .pc-tag {
        top: 15px;
        left: 15px;
        font-size: 7px;
      }
    }

    /* Stylized Section Transition Divider */
    .pc-divider-row {
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.05), transparent);
      margin: 80px 0;
      position: relative;
    }

    .pc-divider-row::after {
      content: 'ETERNAL';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #000;
      padding: 0 20px;
      font-family: var(--fa);
      font-size: 9px;
      letter-spacing: 5px;
      color: rgba(255, 255, 255, 0.2);
    }

    @media (max-width: 1100px) {
      .pc, .pc-alt {
        flex-direction: column;
        gap: 50px;
        text-align: center;
        min-height: auto;
      }

      .pc-stats {
        justify-content: center;
        gap: 20px;
      }

      .pc-divider {
        margin: 0 auto 30px;
      }

      .pc-soc {
        justify-content: center;
      }

      .pc-bg-txt {
        font-size: 150px;
      }
    }

    /* ══ CREATORS ══ */
    #creators {
      position: relative;
      overflow: hidden;
      background: transparent; /* Show global BG */
    }

    .cc-bg-fx {
      display: none; /* Removed section specific FX in favor of global */
    }

    .ccg {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 60px 20px;
      margin-top: 50px;
      position: relative;
      z-index: 5;
    }

    .cc {
      position: relative;
      opacity: 0;
      transform: translateY(30px);
    }

    .cc-inner {
      background: transparent;
      border: none;
      padding: 30px 0;
      text-align: center;
      transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
      position: relative;
      z-index: 10;
    }

    .cc-avatar-wrap {
      width: 170px;
      height: 170px;
      margin: 0 auto 30px;
      border-radius: 50%;
      padding: 4px;
      background: rgba(255, 255, 255, 0.05);
      position: relative;
      z-index: 2;
      transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    /* Animated Border Effect */
    .cc-avatar-wrap::before {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: 50%;
      background: conic-gradient(from 0deg, var(--red), transparent, var(--red), transparent, var(--red));
      animation: rotateBorder 4s linear infinite;
      opacity: 0;
      transition: opacity 0.4s;
    }

    @keyframes rotateBorder {
      to { transform: rotate(360deg); }
    }

    .cc:hover .cc-avatar-wrap {
      transform: scale(1.05) translateY(-10px);
      background: transparent;
    }

    .cc:hover .cc-avatar-wrap::before {
      opacity: 1;
    }

    .cc-pfp {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      border: 6px solid #050505;
      position: relative;
      z-index: 5;
      transition: all 0.5s ease;
    }

    .cc:hover .cc-pfp {
      box-shadow: 0 0 35px var(--red-glow), 0 0 70px rgba(225, 6, 0, 0.2);
    }

    .cc-name {
      font-family: var(--fd);
      font-size: 36px;
      letter-spacing: 2px;
      color: #fff;
      margin-bottom: 12px;
      text-transform: uppercase;
    }

    .cc-socials {
      display: flex;
      justify-content: center;
      gap: 15px;
    }

    .cc-socials a {
      color: rgba(255, 255, 255, 0.2);
      font-size: 20px;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .cc-socials a:hover {
      color: var(--red);
      transform: translateY(-3px);
    }

    @media (max-width: 1200px) {
      .ccg {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px 15px;
      }
      .cc-avatar-wrap {
        width: 140px;
        height: 140px;
      }
      .cc-name {
        font-size: 28px;
      }
    }

    @media (max-width: 650px) {
      .ccg {
        grid-template-columns: repeat(3, 1fr); /* 3 in each row as requested */
        gap: 25px 8px; /* Slightly tighter for better fit */
        padding: 0px;
      }
      .cc-avatar-wrap {
        width: 110px; 
        height: 110px;
        margin-bottom: 12px;
      }
      .cc-name {
        font-size: 15px;
        letter-spacing: 1px;
      }
      .cc-socials {
        gap: 6px;
      }
      .cc-socials a {
        font-size: 13px;
      }
    }

    @media (max-width: 360px) {
      .cc-avatar-wrap {
        width: 92px; /* Scaled down for 320px devices */
        height: 92px;
      }
      .ccg {
        gap: 20px 5px;
      }
      .cc-name {
        font-size: 13px;
      }
    }

    /* ══ LEADERSHIP ══ */
    #leadership {
      background: transparent;
      padding-bottom: 150px;
      position: relative;
    }

    /* Leadership Atmospheric Glow */
    #leadership::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.02) 0%, transparent 70%);
      z-index: 0;
      pointer-events: none;
    }

    .lead-hierarchy {
      max-width: 1200px;
      margin: 60px auto 0;
    }

    .lead-top {
      display: flex;
      justify-content: center;
      margin-bottom: 50px;
    }

    .lead-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr); /* 5 in one row as requested */
      gap: 50px 20px;
    }

    .lead-card {
      text-align: center;
      transition: transform 0.4s ease;
    }

    .lc-img-wrap {
      width: 180px;
      height: 180px;
      margin: 0 auto 25px;
      border-radius: 50%;
      padding: 3px;
      background: linear-gradient(135deg, var(--red) 0%, transparent 100%);
      position: relative;
    }

    .lead-top .lc-img-wrap {
      width: 220px;
      height: 220px;
    }

    .lc-img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      border: 5px solid #050505;
      transition: all 0.4s ease;
    }

    .lead-card:hover .lc-img {
      box-shadow: 0 0 30px var(--red-glow);
      transform: scale(1.05);
    }

    .lc-name {
      font-family: var(--fd);
      font-size: 32px;
      letter-spacing: 2px;
      color: #fff;
      margin-bottom: 5px;
      text-transform: uppercase;
    }

    .lc-role {
      font-family: var(--fu);
      font-size: 13px;
      color: var(--red);
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 15px;
    }

    .lc-soc {
      color: rgba(255, 255, 255, 0.2);
      font-size: 18px;
      transition: color 0.3s;
    }

    .lc-soc:hover {
      color: var(--red);
    }

    @media (max-width: 1200px) {
      .lead-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 15px;
      }
      .lc-img-wrap {
        width: 150px;
        height: 150px;
      }
      .lc-name {
        font-size: 24px;
      }
    }

    @media (max-width: 650px) {
      .lead-grid {
        grid-template-columns: repeat(2, 1fr); /* 3 in each row as requested */
        gap: 30px 6px; /* Slightly tighter gap */
      }
      .lc-img-wrap {
        width: 108px; 
        height: 108px;
        margin-bottom: 12px;
      }
      .lc-name {
        font-size: 14px;
        letter-spacing: 1px;
      }
      .lc-role {
        font-size: 9px;
        letter-spacing: 1px;
        margin-bottom: 10px;
      }
      .lead-top .lc-img-wrap {
        width: 160px; /* Balanced for mobile */
        height: 160px;
      }
    }

    @media (max-width: 360px) {
      .lc-img-wrap {
        width: 90px; /* Scaled down for 320px devices */
        height: 90px;
      }
      .lc-name {
        font-size: 12px;
      }
      .lead-top .lc-img-wrap {
        width: 140px;
      }
    }

    /* ══ MERCH REVAMP ══ */
    #merch {
      background: transparent;
      position: relative;
    }

    .merch-featured-container {
      max-width: 1100px;
      margin: 60px auto 0;
    }

    .merch-card {
      display: flex;
      background: linear-gradient(135deg, rgba(20, 20, 20, 0.4) 0%, rgba(5, 5, 5, 0.4) 100%);
      backdrop-filter: blur(15px);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 4px;
      min-height: 520px;
      overflow: hidden;
      position: relative;
      transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .merch-card:hover {
      border-color: rgba(225, 6, 0, 0.3);
      box-shadow: 0 30px 60px rgba(0,0,0,0.5);
    }

    /* Left Visual Side */
    .merch-visual {
      flex: 1.2;
      position: relative;
      background: radial-gradient(circle at center, rgba(40, 40, 40, 0.1) 0%, transparent 70%);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-right: 1px solid rgba(255, 255, 255, 0.03);
    }

    .merch-spotlight {
      position: absolute;
      top: -20%;
      left: 50%;
      transform: translateX(-50%);
      width: 150%;
      height: 150%;
      background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
      pointer-events: none;
    }

    .merch-glow {
      position: absolute;
      width: 250px;
      height: 250px;
      background: var(--red);
      filter: blur(100px);
      opacity: 0.05;
      z-index: 1;
      transition: opacity 0.5s ease;
    }

    .merch-card:hover .merch-glow {
      opacity: 0.15;
    }

    .merch-watermark {
      position: absolute;
      width: 90%;
      opacity: 0.012; /* Dimmed even more to be subtle */
      filter: grayscale(1) invert(1);
      pointer-events: none;
      z-index: 0;
    }

    .merch-jersey-wrap {
      position: relative;
      width: 95%; /* Increased from 75% */
      height: 95%; /* Increased from 75% */
      z-index: 5;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .jersey-img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      position: absolute;
      transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .jersey-img.back {
      opacity: 0;
      transform: rotateY(180deg); /* Removed scale(0.9) */
    }

    .merch-card:hover .merch-jersey-wrap {
      transform: translateY(-5px); /* Just a subtle lift, no scale */
    }

    .merch-card:hover .jersey-img.front {
      opacity: 0;
      transform: rotateY(-180deg); /* Removed scale(1.1) */
    }

    .merch-card:hover .jersey-img.back {
      opacity: 1;
      transform: rotateY(0deg); /* Removed scale(1.1) */
    }

    /* Right Details Side */
    .merch-details {
      flex: 1;
      padding: 60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .mh-title {
      font-family: var(--fd);
      font-size: 42px;
      letter-spacing: 2px;
      color: #fff;
      margin-bottom: 5px;
    }

    .mh-subtitle {
      font-family: var(--fa);
      font-size: 11px;
      color: var(--red);
      text-transform: uppercase;
      letter-spacing: 4px;
      margin-bottom: 40px;
    }

    .merch-description p {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.6);
      line-height: 1.6;
      margin-bottom: 25px;
    }

    .merch-specs {
      list-style: none;
      padding: 0;
      margin-bottom: 40px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .merch-specs li {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.4);
      letter-spacing: 1px;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .merch-footer {
      display: flex;
      flex-direction: column; /* Button in another line */
      align-items: flex-start;
      gap: 25px;
      margin-top: 10px;
    }

    .price-wrap {
      display: flex;
      flex-direction: row; /* Pricing in one line */
      align-items: center;
      gap: 15px;
      line-height: 1;
    }

    .merch-price-old {
      font-family: var(--fd);
      font-size: 24px;
      color: rgba(255, 255, 255, 0.2);
      text-decoration: line-through;
    }

    .merch-price {
      font-family: var(--fd);
      font-size: 52px;
      color: var(--red);
    }

    .price-tag {
      font-family: var(--fa);
      font-size: 8px;
      letter-spacing: 2px;
      color: #fff;
      padding: 4px 10px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      margin-left: 5px;
    }

    .merch-buy {
      padding: 16px 60px;
      width: auto;
    }

    /* Swiper Styling */
    .merch-swiper {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .merch-swiper .swiper-slide {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .merch-swiper img {
      width: 85%;
      height: auto;
      object-fit: contain;
    }

    .merch-swiper .swiper-pagination {
      bottom: 20px !important; /* Adjusted to not be cut off */
    }

    .swiper-pagination-bullet {
      background: rgba(255, 255, 255, 0.2);
      opacity: 1;
      width: 6px;
      height: 6px;
    }

    .swiper-pagination-bullet-active {
      background: var(--red) !important;
      box-shadow: 0 0 10px var(--red-glow);
      width: 20px;
      border-radius: 10px;
    }

    .merch-side-label {
      position: absolute;
      left: 30px;
      top: 50%;
      transform: translateY(-50%) rotate(-90deg);
      font-family: var(--fa);
      font-size: 8px;
      letter-spacing: 5px;
      color: rgba(255, 255, 255, 0.1);
      white-space: nowrap;
      pointer-events: none;
      z-index: 2;
    }

    .merch-badge {
      position: absolute;
      top: 30px;
      right: 30px;
      background: var(--red);
      color: #fff;
      font-family: var(--fa);
      font-size: 10px;
      padding: 6px 15px;
      letter-spacing: 2px;
      text-transform: uppercase;
      z-index: 10;
      clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
    }

    /* Card Corners */
    .card-corner {
      position: absolute;
      width: 15px;
      height: 15px;
      border: 2px solid rgba(225, 6, 0, 0.4);
      z-index: 10;
      pointer-events: none;
      transition: all 0.4s ease;
    }

    .merch-card:hover .card-corner {
      border-color: var(--red);
      width: 20px;
      height: 20px;
    }

    .card-corner.tl { top: 15px; left: 15px; border-right: none; border-bottom: none; }
    .card-corner.tr { top: 15px; right: 15px; border-left: none; border-bottom: none; }
    .card-corner.bl { bottom: 15px; left: 15px; border-right: none; border-top: none; }
    .card-corner.br { bottom: 15px; right: 15px; border-left: none; border-top: none; }

    /* Responsive */
    @media (max-width: 1000px) {
      .merch-card {
        flex-direction: column;
        overflow: visible; /* Allow images to pop slightly if needed */
      }
      .merch-visual {
        min-height: 370px; /* Reduced from 480px */
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        padding-bottom: 20px; /* Adjusted space for dots */
      }
      .merch-swiper img {
        width: 100%;
        max-width: 360px; /* Increased from 320px */
      }
      .merch-details {
        padding: 50px 30px;
        text-align: center;
        align-items: center;
      }
      .merch-footer {
        align-items: center;
      }
      .merch-price {
        font-size: 48px;
      }
      .merch-buy {
        width: 100%;
        max-width: 300px;
      }
      .merch-side-label {
        left: 15px;
      }
    }

    @media (max-width: 650px) {
      .mh-title {
        font-size: 32px;
      }
      .merch-details {
        padding: 30px 20px;
      }
      .merch-footer {
        flex-direction: column;
        gap: 20px;
      }
      .merch-buy {
        width: 100%;
        text-align: center;
      }
    }

    /* ══ DISCORD ══ */
    #discord {
      padding: 150px 60px;
      text-align: center;
      position: relative;
      overflow: hidden;
      background: transparent;
    }

    .dg {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 55% 70% at 50% 50%, rgba(225, 6, 0, 0.05) 0%, transparent 80%);
      opacity: 0.25; 
    }

    .dgg {
      position: absolute;
      inset: 0;
      background-image: linear-gradient(rgba(225, 6, 0, .015) 1px, transparent 1px), linear-gradient(90deg, rgba(225, 6, 0, .015) 1px, transparent 1px);
      background-size: 44px 44px
    }

    .dc {
      position: relative;
      z-index: 1
    }

    .d-ey {
      font-family: var(--fa);
      font-size: 9px;
      letter-spacing: 5px;
      color: rgba(255, 255, 255, .28);
      text-transform: uppercase;
      margin-bottom: 18px
    }

    .d-title {
      font-family: var(--fd);
      font-size: clamp(52px, 9vw, 118px);
      line-height: .93;
      letter-spacing: 5px;
      text-transform: uppercase;
      margin-bottom: 16px
    }

    .d-title span {
      color: var(--red)
    }

    .d-sub {
      font-size: 13px;
      color: rgba(255, 255, 255, .32);
      letter-spacing: 2px;
      font-weight: 300;
      margin-bottom: 46px
    }

    .btn-disc {
      display: inline-flex;
      align-items: center;
      gap: 16px;
      background: var(--red);
      color: var(--white);
      text-decoration: none;
      padding: 20px 58px;
      font-family: var(--fu);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      cursor: none;
      position: relative;
      overflow: hidden;
      clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
      transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
      box-shadow: 0 10px 30px rgba(225, 6, 0, 0.2);
    }

    .btn-disc i {
      font-size: 24px; /* Slightly larger than text */
      color: #fff;
      transition: transform 0.4s ease;
    }

    .btn-disc:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 50px rgba(225, 6, 0, 0.4), 0 0 20px rgba(225, 6, 0, 0.2);
    }

    .btn-disc:hover i {
      transform: scale(1.1) rotate(-5deg);
    }

    .d-mem {
      margin-top: 30px;
      font-size: 11px;
      color: rgba(255, 255, 255, 0.4);
      letter-spacing: 2px;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .pulse-dot {
      width: 8px;
      height: 8px;
      background: var(--red);
      border-radius: 50%;
      position: relative;
    }

    .pulse-dot::after {
      content: '';
      position: absolute;
      inset: -4px;
      border: 2px solid var(--red);
      border-radius: 50%;
      animation: dotPulse 1.5s infinite;
      opacity: 0;
    }

    @keyframes dotPulse {
      0% { transform: scale(0.5); opacity: 0.8; }
      100% { transform: scale(2.5); opacity: 0; }
    }



    .btn-disc::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .15), transparent);
      transition: left .6s
    }

    .btn-disc:hover::before {
      left: 100%
    }

    .d-mem {
      margin-top: 26px;
      font-family: var(--fa);
      font-size: 10px;
      letter-spacing: 3px;
      color: rgba(255, 255, 255, .2)
    }

    .d-mem strong {
      color: rgba(255, 255, 255, .5)
    }

    /* ══ ANNOUNCEMENTS ══ */
    .ann-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 40px;
    }

    .ann-view-all {
      font-family: var(--fa);
      font-size: 11px;
      letter-spacing: 2px;
      color: rgba(255, 255, 255, .4);
      text-decoration: none;
      transition: color .3s;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .ann-view-all:hover {
      color: var(--red);
    }

    @media (max-width: 900px) {
      .ann-view-all {
        display: none;
      }
    }

    .ann-footer {
      display: flex;
      justify-content: center;
      margin-top: 60px;
    }

    .ann-btn {
      padding: 12px 30px;
      font-size: 11px;
    }

    .ann-grid {
      display: flex;
      flex-direction: column;
      gap: 30px;
    }

    /* Featured Card */
    .ann-featured {
      position: relative;
      width: 100%;
      height: 650px;
      background: rgba(10, 10, 10, 0.4);
      backdrop-filter: blur(10px);
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .04);
      cursor: none;
      transition: all .4s;
      text-decoration: none;
      display: block;
      opacity: 0;
      transform: translateY(30px);
    }

    .ann-featured:hover {
      border-color: var(--red);
    }

    .ann-featured-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      transition: transform .6s cubic-bezier(.165, .84, .44, 1);
      filter: brightness(.6);
    }

    .ann-featured:hover .ann-featured-bg {
      transform: scale(1.04);
      filter: brightness(.7);
    }

    .ann-featured-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .4) 50%, transparent 100%);
    }

    .ann-featured-content {
      position: absolute;
      bottom: 0;
      left: 0;
      padding: 60px;
      z-index: 2;
    }

    .ann-tag {
      display: inline-block;
      padding: 5px 12px;
      background: var(--red);
      font-family: var(--fa);
      font-size: 9px;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 20px;
    }

    .ann-featured-title {
      font-family: var(--fd);
      font-size: clamp(36px, 5vw, 68px);
      line-height: 1;
      margin-bottom: 15px;
      text-transform: uppercase;
      max-width: 800px;
      color: var(--white);
    }

    .ann-meta {
      font-family: var(--fu);
      font-size: 13px;
      color: rgba(255, 255, 255, .5);
      letter-spacing: 2px;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 15px;
    }

    /* Secondary Grid */
    .ann-secondary-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
    }

    .ann-card {
      background: rgba(10, 10, 10, 0.4);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, .04);
      transition: transform .4s, border-color .4s, box-shadow .4s, background .4s;
      cursor: none;
      text-decoration: none;
      display: block;
      overflow: hidden;
      opacity: 0;
      transform: translateY(30px);
    }

    .ann-card:hover {
      transform: translateY(-8px);
      background: rgba(15, 15, 15, 0.6);
      border-color: rgba(225, 6, 0, .4);
      box-shadow: 0 15px 40px rgba(0, 0, 0, .6);
    }

    .ann-card-img {
      width: 100%;
      aspect-ratio: 4/5;
      overflow: hidden;
      background: #111;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .ann-card-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .6s cubic-bezier(.165, .84, .44, 1);
      opacity: .8;
    }

    .ann-card:hover .ann-card-img img {
      transform: scale(1.1);
      opacity: 1;
    }

    .ann-card-info {
      padding: 24px;
    }

    .ann-card-tag {
      font-family: var(--fa);
      font-size: 8px;
      letter-spacing: 2px;
      color: var(--red);
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .ann-card-title {
      font-family: var(--fd);
      font-size: 24px;
      line-height: 1.2;
      margin-bottom: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--white);
    }

    .ann-card-date {
      font-size: 11px;
      color: rgba(255, 255, 255, .3);
      letter-spacing: 1px;
    }

    @media (max-width: 1000px) {
      .ann-secondary-grid {
        grid-template-columns: 1fr;
      }

      .ann-featured {
        height: 400px;
      }

      .ann-featured-content {
        padding: 40px;
      }
    }

    /* ══ FOOTER REVAMP ══ */
    .main-footer {
      position: relative;
      background: rgba(5, 5, 5, 0.4);
      backdrop-filter: blur(20px);
      padding: 100px 60px 40px;
      border-top: 1px solid rgba(255, 255, 255, 0.05);
      overflow: hidden;
    }

    .footer-top {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 80px;
      position: relative;
      z-index: 2;
    }

    /* Logo & Description */
    .footer-logo {
      display: flex;
      align-items: center;
      gap: 15px;
      text-decoration: none;
      margin-bottom: 25px;
    }

    .footer-logo img {
      height: 35px;
      filter: drop-shadow(0 0 10px rgba(225, 6, 0, 0.3));
    }

    .footer-logo span {
      font-family: var(--fa);
      font-size: 20px;
      font-weight: 900;
      color: #fff;
      letter-spacing: 5px;
    }

    .footer-logo span span {
      color: var(--red);
    }

    .brand-desc {
      font-size: 15px;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.5);
      max-width: 320px;
    }

    /* Titles & Links */
    .f-title {
      font-family: var(--fa);
      font-size: 10px;
      letter-spacing: 3px;
      color: var(--red);
      text-transform: uppercase;
      margin-bottom: 30px;
    }

    .f-links {
      list-style: none;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .f-links a {
      color: rgba(255, 255, 255, 0.4);
      text-decoration: none;
      font-size: 14px;
      transition: all 0.3s;
    }

    .f-links a:hover {
      color: #fff;
      padding-left: 5px;
    }

    /* Socials */
    .f-socials {
      display: flex;
      gap: 20px;
    }

    .f-socials a {
      font-size: 22px;
      color: rgba(255, 255, 255, 0.4);
      text-decoration: none;
      transition: all 0.3s;
    }

    .f-socials a:hover {
      color: var(--red);
      transform: translateY(-5px);
    }

    /* Watermark Area */
    .footer-bottom {
      margin-top: 100px;
      text-align: center;
      position: relative;
    }

    .footer-watermark {
      font-family: var(--fd);
      font-size: clamp(120px, 25vw, 400px); /* Massive expansion */
      text-transform: uppercase;
      line-height: 0.7;
      color: rgba(255, 255, 255, 0.03);
      letter-spacing: 20px;
      user-select: none;
      pointer-events: none;
      margin-bottom: -20px; /* Pull down slightly */
      mask-image: linear-gradient(to bottom, black 20%, transparent 80%); /* Fade out gradient */
      -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 80%);
      padding-top: 20px;
    }

    .footer-legal {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 30px;
      border-top: 1px solid rgba(255, 255, 255, 0.03);
      max-width: 1200px;
      margin: 0 auto;
    }

    .copyright {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.2);
    }

    .legal-links {
      display: flex;
      gap: 30px;
    }

    .legal-links a {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.2);
      text-decoration: none;
      transition: color 0.3s;
    }

    .legal-links a:hover {
      color: var(--red);
    }

    /* Responsive */
    @media (max-width: 1000px) {
      .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 50px;
      }
      .footer-brand {
        grid-column: span 2;
      }
    }

    @media (max-width: 650px) {
      .main-footer {
        padding: 60px 20px 30px;
      }
      .footer-top {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
      }
      .footer-brand, .footer-nav, .footer-community {
        grid-column: span 1;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .footer-logo {
        justify-content: center;
      }
      .footer-bottom {
        margin-top: 50px;
      }
      .footer-watermark {
        font-size: clamp(60px, 18vw, 130px);
        letter-spacing: 12px;
        line-height: 1;
        margin-bottom: 0px;
        padding-top: 0;
      }
      .footer-legal {
        flex-direction: column;
        gap: 15px;
        padding-top: 20px;
      }
    }

    /* NOISE */
    .noise {
      position: fixed;
      inset: 0;
      z-index: 99997;
      pointer-events: none;
      opacity: .022;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 200px 200px
    }

    /* SCROLL TO TOP */
    .scroll-to-top {
      position: fixed;
      bottom: 30px;
      right: 30px;
      width: 50px;
      height: 50px;
      background: var(--red);
      color: var(--white);
      border: none;
      clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      cursor: none;
      z-index: 99000;
      opacity: 0;
      visibility: hidden;
      transform: translateY(20px);
      transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
      box-shadow: 0 4px 15px rgba(225, 6, 0, 0.4);
    }

    .scroll-to-top.show {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .scroll-to-top:hover {
      box-shadow: 0 0 25px var(--red-glow);
      transform: translateY(-5px) scale(1.05);
    }

    @media (max-width: 600px) {
      .scroll-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 20px;
      }
    }