/* Bootstrap helpers */
:root{
  --sapphire:#0b5ed7;
  --sapphire-2:#173e8f;
  --sapphire-3:#0ea5e9;
  --parallax1:url('https://images.unsplash.com/photo-1558985040-ed4d5029d4b3?q=80&w=1920&auto=format&fit=crop');
  --parallax2:url('https://images.unsplash.com/photo-1516315720917-231ef9d7d7cd?q=80&w=1920&auto=format&fit=crop');
}
.f1-brand{ font-family: 'Teko', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol'; letter-spacing: .5px;}
.f1-headline{ font-family: 'Teko', 'Inter', system-ui; }
.fw-800{ font-weight:800 }
.fw-600{ font-weight:600 }
.text-gradient{ background: linear-gradient(90deg, #38bdf8, #3730a3); -webkit-background-clip: text; background-clip:text; color: transparent; }
.bg-sapphire-subtle{ background: rgba(14,165,233,.12); }
.text-sapphire{ color: var(--sapphire-2); }
.btn-sapphire{ background: linear-gradient(90deg, #38bdf8, #3730a3); color:#fff; border:0; }
.btn-outline-sapphire{ border-color: var(--sapphire); color: var(--sapphire-2); }
.btn-outline-sapphire:hover{ background: var(--sapphire); color:#fff; }
.shadow-sm-sm{ box-shadow:0 2px 10px rgba(0,0,0,.05); }

/* Parallax sections */
.parallax{
  background-image: var(--parallax1);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  padding: 56px 0 64px;
}
.parallax-2{
  background-image: var(--parallax2);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

/* Flip slab */
.slab-3d{ perspective: 1200px; width: 180px; height: 260px; }
.slab-inner{ position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .5s; }
.slab-3d:hover .slab-inner{ transform: rotateY(180deg); }
.slab-front, .slab-back{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; box-shadow:0 10px 30px rgba(0,0,0,.15); backface-visibility: hidden; }
.slab-back{ transform: rotateY(180deg); }
.slab-3d::after{ content:''; position:absolute; inset:-6px; border-radius:16px; background: linear-gradient(135deg, rgba(56,189,248,.25), rgba(55,48,163,.25)); filter: blur(12px); opacity:0; transition: opacity .3s; z-index:-1; }
.slab-3d:hover::after{ opacity:1; }

/* Cards */
.card-slab{ border:1px solid #eaeaea; border-radius:20px; padding:14px; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.06); }
.card-slab h4{ font-size:1rem; margin:0; font-weight:800; }
.badge-id{ background:#eaf2ff; color:#0b5ed7; font-size:.65rem; padding:.15rem .4rem; border-radius:999px;}
.note{ white-space:pre-wrap; word-break:break-word; font-size:.9rem; color:#6b7280; }
.odds{ font-size:.75rem; color:#6b7280; }

/* Reduce vertical spacing a bit */
#tiers .row + .row{ margin-top: 1rem; }

/* RarePull Navbar — crisp + “pop” with gradient accent */
.navbar-rarepull{
  --nav-h:72px;
  min-height:var(--nav-h);
  border-bottom:1px solid rgba(0,0,0,.06);
  backdrop-filter:saturate(160%) blur(6px);
  -webkit-backdrop-filter:saturate(160%) blur(6px); /* Safari */
}
.navbar-rarepull::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:3px;
  background:linear-gradient(90deg,#38bdf8,#3730a3);
  opacity:.95;
}

/* Logo: sharp scaling (works well on Windows/Chrome/Safari) */
.brand-logo{
  height:60px; width:auto; object-fit:contain;
  image-rendering:auto; /* avoid pixelation on Windows */
}
@media (min-width: 992px){
  .brand-logo{ height:68px; }
}

/* Links with animated gradient underline */
.rp-link{
  font-weight:700; letter-spacing:.02em;
  position:relative; padding:.5rem .75rem;
}
.rp-link::after{
  content:""; position:absolute; left:.5rem; right:.5rem; bottom:.35rem;
  height:2px; background:linear-gradient(90deg,#38bdf8,#3730a3);
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.rp-link:hover::after, .rp-link:focus::after{ transform:scaleX(1); }

/* Gradient call-to-action */
.btn-wn{
  border:0; color:#fff; border-radius:999px; padding:.55rem 1rem;
  background:linear-gradient(90deg,#38bdf8,#3730a3);
  box-shadow:0 8px 18px rgba(55,48,163,.22);
}
.btn-wn:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.btn-wn:active{ transform:translateY(0); }

/* Toggler tweaks for visibility on white bg */
.navbar-toggler{ border:none; }
.navbar-toggler:focus{ box-shadow:0 0 0 .15rem rgba(56,189,248,.35); }