/* ======================
   ROOT VARIABLES & GLOBAL RESET
   ====================== */
:root {
  --matte-black: #0b0b0b;
  --accent: #ff6b6b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--matte-black);
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 300;
  letter-spacing: 0.024em;
  line-height: 1.75;
  overflow-x: hidden;
}

/* Header + Hero */
.site-header { position: absolute; width: 100%; z-index: 30; top: 0; left: 0; padding-top: 20px; }
.site-logo { width: 48.4px; height: auto; display: block; filter: brightness(1); }

.hero { position: relative; min-height: 100vh; background-image: url('../assets/igpradeep.svg'); background-size: cover; background-position: right top; }
.hero .container-fluid { padding: 40px 12vw; height: 100%; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,11,11,0.98) 0%, rgba(11,11,11,0.9) 45%, rgba(11,11,11,0.65) 65%, rgba(11,11,11,0.35) 80%, transparent 100%); z-index: 1; }
.hero-grain { position: absolute; inset: 0; z-index: 2; mix-blend-mode: overlay; opacity: 0.06; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='600' preserveAspectRatio='none'><filter id='noise'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23noise)' opacity='1' fill='white'/></svg>"); }

.first-col-content { position: relative; z-index: 3; width: 100%; padding-top: 55vh !important; }
.title { font-family: 'Six Caps', sans-serif; font-size: clamp(24px, 6vw, 54px); letter-spacing: 0.40em; text-transform: uppercase; line-height: 1.05; white-space: nowrap; }
.tagline { font-family: 'Space Grotesk', sans-serif; font-weight: 300; font-size: clamp(12px, 2vw, 18px); letter-spacing: 0.024em; text-transform: uppercase; max-width: 620px; line-height: 1.7; }

@media (max-width: 767px) {
  .title, .tagline { text-align: center; }
  .title { white-space: normal; }
  .tagline { max-width: 92%; }
}

/* Twitter Link - Centered on Mobile */
.hover-link-text { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  gap: 12px; 
  text-decoration: none; 
  cursor: pointer; 
  font-family: 'Six Caps', sans-serif; 
  letter-spacing: 0.32em; 
  font-size: clamp(18px, 2.8vw, 26px); 
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); 
}
.hover-link-text .bracket { color: #ff6b6b; font-weight: 600; }
.hover-link-text .handle { color: #fff; white-space: nowrap; }
.hover-link-text:hover .bracket, .hover-link-text:hover .handle { color: #ff6b6b; }

/* Featured Headings */
.featured-heading { 
  margin-top: 20px; 
  margin-bottom: 120px; 
  display: inline-flex; 
  align-items: center; 
  gap: 10px; 
  font-family: 'Six Caps', sans-serif; 
  font-size: clamp(20px, 2.8vw, 46px); 
  letter-spacing: 0.35em; 
  text-transform: uppercase; 
  color: #fff; 
}
.featured-heading.nft-label { margin-bottom: 160px; }
.fh-bracket { color: var(--accent); font-weight: 600; }
.fh-text { color: #fff; }

/* Featured NFT */
.featured-nft { background: var(--matte-black); min-height: 100vh; padding: 40px 12vw; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.story-heading { font-family: 'Six Caps', sans-serif; font-size: clamp(32px, 5vw, 48px); letter-spacing: 0.2em; margin-bottom: 40px; }
.story-para { font-family: 'Space Grotesk', sans-serif; font-weight: 300; font-size: 18px; line-height: 2; letter-spacing: 0.024em; max-width: 600px; }
.story-image-wrap { padding: 10px; border: 1px solid var(--accent); border-radius: 22px; }
.story-image { border-radius: 16px; width: 100%; max-width: 520px; aspect-ratio: 1/1; object-fit: cover; }

/* Art & Illustration */
.nf-gallery { padding: 40px 12vw; }
.nf-row { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 56px; row-gap: 72px; }
.nf-card {
  position: relative; background-size: cover; background-position: center;
  height: 0; padding-bottom: 56.25%; cursor: pointer; border-radius: 6px; overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.nf-card:hover { transform: scale(1.04); box-shadow: 0 12px 30px rgba(0,0,0,0.5); }
.nf-card .nf-info { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.85)); padding: 25px 15px 15px; font-size: 15px; text-align: center; opacity: 0; transition: opacity 0.3s; text-transform: uppercase; letter-spacing: 0.05em; }
.nf-card:hover .nf-info { opacity: 1; }

/* X BANNERS – 2 COLUMN GRID (2, 2, 2) – SAME WIDTH AS ART & ILLUSTRATION */
.x-banners-section {
  padding: 40px 12vw !important;
}

.x-banner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.wide-card {
  aspect-ratio: 3 / 1;
  background: var(--card-black);
  border: 1px solid #222;
  overflow: hidden;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}

.wide-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}

.wide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile: stack to 1 column */
@media (max-width: 992px) {
  .x-banner-grid {
    grid-template-columns: 1fr;
  }
}

/* Lightbox for Art & Illustration */
.nf-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.95); display: none; align-items: center; justify-content: center; z-index: 9999; }
.nf-lightbox[aria-hidden="false"] { display: flex; }
.nf-lb-img { max-width: 90%; max-height: 85vh; border-radius: 8px; box-shadow: 0 0 40px rgba(0,0,0,0.9); }

/* Separate Lightbox for X Banners */
.x-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.95); display: none; align-items: center; justify-content: center; z-index: 9999; }
.x-lightbox[aria-hidden="false"] { display: flex; }
.x-lb-img { max-width: 90%; max-height: 85vh; border-radius: 8px; box-shadow: 0 0 40px rgba(0,0,0,0.9); }

.nf-btn, .x-btn { 
  position: absolute; 
  background: none; 
  border: none; 
  color: white; 
  font-size: 48px; 
  cursor: pointer; 
  padding: 10px 20px; 
  transition: color 0.2s; 
}
.nf-btn:hover, .x-btn:hover { color: var(--accent); }

.nf-close, .x-close { top: 30px; right: 40px; }
.nf-prev, .x-prev { left: 30px; top: 50%; transform: translateY(-50%); }
.nf-next, .x-next { right: 30px; top: 50%; transform: translateY(-50%); }

/* Responsive */
@media (max-width: 1400px) { .nf-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 992px) { .nf-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .nf-row { grid-template-columns: 1fr; } }

/* Footer */
.site-footer { padding: 60px 12vw 30px; background: var(--matte-black); border-top: 1px solid #222; }
.footer-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.footer-right { font-family: 'Space Grotesk', sans-serif; font-weight: 300; font-size: 14px; opacity: 0.7; }