/* ============================================================
   CodebyCarter — quickjump.css
   Horizontal strip of "preview tiles" right under the hero.
   Solves the doom-scroll problem: visitors see what's on the
   site at a glance and can teleport to any interactive section.
   ============================================================ */

.quickjump{
  background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.02) 50%, transparent 100%);
  padding:60px 0 80px;
  position:relative;
  overflow:hidden;
}

.quickjump-head{
  text-align:center;margin-bottom:32px;padding:0 24px;
}
.quickjump-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.20em;
  text-transform:uppercase;color:rgba(20,20,30,.55);font-weight:700;
  margin-bottom:10px;display:inline-flex;align-items:center;gap:10px;
}
.quickjump-eyebrow::before,
.quickjump-eyebrow::after{
  content:"";width:24px;height:1px;background:currentColor;display:inline-block;opacity:.5;
}
.quickjump-h{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  font-size:clamp(24px,3vw,36px);color:#0A0A0F;letter-spacing:-.025em;
  line-height:1.2;
}
.quickjump-h b{
  font-family:'Space Grotesk',sans-serif;font-style:normal;font-weight:700;
  background:linear-gradient(135deg,#A855F7,#EC4899,#FB923C);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ============================================================
   STRIP CONTAINER (horizontal scroll on overflow)
   ============================================================ */
.quickjump-strip{
  display:flex;gap:18px;
  overflow-x:auto;overflow-y:visible;
  padding:30px clamp(24px,5vw,60px) 40px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.quickjump-strip::-webkit-scrollbar{display:none}

/* ============================================================
   TILES
   ============================================================ */
.qj-tile{
  flex:0 0 220px;
  height:280px;
  position:relative;
  border-radius:18px;
  overflow:hidden;
  cursor:none;
  scroll-snap-align:start;
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:22px 22px 20px;
  text-decoration:none;color:#F5F5F7;
  box-shadow:0 14px 36px -14px rgba(20,20,30,.18);
  isolation:isolate;
}
.qj-tile::before{
  content:"";position:absolute;inset:0;
  background:var(--qj-bg);
  z-index:-2;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.qj-tile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 30%, rgba(0,0,0,.55) 100%);
  z-index:-1;
}
.qj-tile:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 60px -20px rgba(20,20,30,.30);
}
.qj-tile:hover::before{transform:scale(1.08)}

.qj-tile-emoji{
  position:absolute;top:18px;right:18px;
  font-size:30px;line-height:1;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.35));
  transition:transform .35s cubic-bezier(.16,1,.3,1);
  z-index:2;
}
.qj-tile:hover .qj-tile-emoji{transform:scale(1.18) rotate(-6deg)}

.qj-tile-num{
  position:absolute;top:18px;left:18px;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:700;
  z-index:2;
}

.qj-tile-tag{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.75);font-weight:700;
  margin-bottom:8px;
}
.qj-tile-h{
  font-size:20px;line-height:1.1;letter-spacing:-.02em;
  font-weight:600;color:#FFFFFF;margin-bottom:6px;
}
.qj-tile-h .ital{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  font-size:1.10em;
}
.qj-tile-arrow{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:#FFFFFF;font-weight:700;
  opacity:.85;
  transition:transform .35s ease, opacity .35s ease;
}
.qj-tile:hover .qj-tile-arrow{transform:translateX(4px);opacity:1}

/* === Per-tile palettes (unique gradients) === */
.qj-tile--reel{--qj-bg:linear-gradient(155deg,#0A1F1B 0%,#163F37 50%,#0A1F1B 100%)}
.qj-tile--brand{--qj-bg:linear-gradient(155deg,#3B0F4E 0%,#7B1FA2 50%,#3B0F4E 100%)}
.qj-tile--workshop{--qj-bg:linear-gradient(155deg,#2C2017 0%,#5A3E22 50%,#2C2017 100%)}
.qj-tile--compare{--qj-bg:linear-gradient(155deg,#0A0A14 0%,#3B0F4E 50%,#0A0A14 100%)}
.qj-tile--teardown{--qj-bg:linear-gradient(155deg,#2A0E0E 0%,#7C1F1F 50%,#2A0E0E 100%)}
.qj-tile--pricing{--qj-bg:linear-gradient(155deg,#0A0A0A 0%,#3A3A3A 50%,#0A0A0A 100%)}
.qj-tile--guarantee{--qj-bg:linear-gradient(155deg,#0E0E0C 0%,#5A4318 50%,#0E0E0C 100%)}
.qj-tile--faq{--qj-bg:linear-gradient(155deg,#1A1A24 0%,#374151 50%,#1A1A24 100%)}

/* Animated noise/grain texture overlay on each tile */
.qj-tile-noise{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.5;mix-blend-mode:overlay;
}

/* ============================================================
   Decorative end-cap card — "Or scroll for the full story"
   ============================================================ */
.qj-tile--scroll{
  flex:0 0 220px;
  background:transparent;
  border:2px dashed rgba(20,20,30,.25);
  color:#0A0A0F;
}
.qj-tile--scroll::before,
.qj-tile--scroll::after,
.qj-tile--scroll .qj-tile-noise{display:none !important}
.qj-tile--scroll:hover{transform:translateY(-4px) rotate(-2deg);border-color:#0A0A0F}
.qj-tile--scroll .qj-tile-tag{color:rgba(20,20,30,.55)}
.qj-tile--scroll .qj-tile-h{color:#0A0A0F;font-family:'Instrument Serif',serif;font-style:italic;font-weight:400}
.qj-tile--scroll .qj-tile-arrow{color:#0A0A0F}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width:600px){
  .quickjump{padding:40px 0 60px}
  .qj-tile{flex:0 0 180px;height:240px;padding:18px}
  .qj-tile-h{font-size:17px}
}

/* Theme overrides */
body[data-theme="brutalist"] .qj-tile{
  border-radius:0 !important;box-shadow:5px 5px 0 #000 !important;
}
body[data-theme="brutalist"] .qj-tile::before{background:#000 !important}
body[data-theme="brutalist"] .qj-tile--scroll{
  background:#FFF !important;border:3px solid #000 !important;
  box-shadow:5px 5px 0 #000 !important;
}
body[data-theme="brutalist"] .qj-tile--scroll .qj-tile-h{
  font-family:'JetBrains Mono',monospace !important;font-style:normal !important;
  text-transform:uppercase;font-weight:900 !important;
}