/* ===================================
   PROFUNKY — PREMIUM EDITORIAL FUNK
   =================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=Outfit:wght@300;400;600;800&display=swap');

  --yellow: #FFD700; /* Primary Logo Yellow */
  --orange: #FF8C00; /* Logo Amber/Orange */
  --black: #000000;
  --white: #FFFFFF;
  --off-white: #F9F7F2;
  --blue: #0047ff;
  --pink: #ff006b;
  --grey: #8E8E8E;
  --font-serif: 'Playfair Display', serif;
  --font-sans: 'Outfit', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  --shadow-soft: 0 20px 40px rgba(0,0,0,0.08);
  --shadow-brutal: 5px 5px 0px var(--black);
}

/* SCROLL REVEAL (Premium Editorial) */
.reveal-hidden {
  opacity: 0;
  transform: translateY(100px) scale(0.95) rotateX(10deg);
  filter: blur(10px);
  transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.reveal-visible {
  opacity: 1;
  transform: translateY(0) scale(1) rotateX(0);
  filter: blur(0);
}

/* GLOBAL SECTION TEXTURE (Excluding Hero) */
section:not(.hero-dynamic) {
  position: relative;
  background-color: var(--white);
  width: 100%;
  overflow: visible; /* Allow pattern to bleed */
}

section:not(.hero-dynamic)::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(0,0,0,0.07) 2px, transparent 2px);
  background-size: 60px 60px;
  background-repeat: repeat;
  pointer-events: none;
  z-index: 0;
}

section:not(.hero-dynamic) > * {
  position: relative;
  z-index: 1;
}

/* SCROLL REVEAL */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); background: var(--off-white); color: var(--black); overflow-x: hidden; position: relative; }
body::before {
  content: "";
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: url('https://grainy-gradients.vercel.app/noise.svg');
  opacity: 0.04; pointer-events: none; z-index: 999999;
}

/* CURSOR */

.cursor {
  position: fixed; width: 10px; height: 10px; background: var(--black);
  border-radius: 50%; pointer-events: none; z-index: 99999;
  transform: translate(-50%,-50%); transition: width 0.3s, height 0.3s, background 0.3s;
}
.cursor-trail {
  position: fixed; width: 40px; height: 40px; border: 1px solid var(--black);
  border-radius: 50%; pointer-events: none; z-index: 99998;
  transform: translate(-50%,-50%); transition: transform 0.4s ease, opacity 0.3s;
  opacity: 0.2;
}

/* PREMIUM FLOATING NAV */
nav {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  width: 88%; max-width: 1300px; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2rem; height: 58px;
  background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 100px; box-shadow: 0 20px 40px rgba(0,0,0,0.05);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
nav:hover { background: rgba(255, 255, 255, 0.9); box-shadow: 0 30px 60px rgba(0,0,0,0.1); }
.nav-top-row { display: contents; }

.nav-brand .nav-logo { height: 34px; transition: transform 0.4s ease; }
.nav-brand .nav-logo:hover { transform: rotate(-5deg) scale(1.1); }

.nav-links { display: flex; gap: 2.5rem; list-style: none; order: 2; }
.nav-links a {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 3px; color: var(--black); text-decoration: none;
  text-transform: uppercase; position: relative;
}
.nav-links a::after {
  content: ""; position: absolute; bottom: -5px; left: 0; width: 0;
  height: 2px; background: var(--black); transition: width 0.3s;
}
.nav-links a:hover::after { width: 100%; }

.nav-cta {
  font-family: var(--font-serif); font-size: 0.85rem; font-weight: 900;
  font-style: italic; color: var(--white); background: var(--black);
  padding: 0.55rem 1.8rem; border-radius: 50px; text-decoration: none;
  transition: all 0.3s ease; border: 2px solid transparent;
}
.nav-cta:hover { background: var(--yellow); color: var(--black); border-color: var(--black); }

/* HERO */
.hero {
  position: relative; height: 100vh; min-height: 800px;
  display: flex; align-items: center; padding: 120px 8% 0;
  background: var(--off-white); overflow: hidden;
}

.hero-left { position: relative; z-index: 5; flex: 1; max-width: 50%; }
.hero-eyebrow {
  font-size: 0.75rem; font-weight: 800; letter-spacing: 4px;
  text-transform: uppercase; color: var(--black); margin-bottom: 2rem;
  display: flex; align-items: center; gap: 1rem;
}
.hero-eyebrow::before { content: ''; width: 40px; height: 1px; background: var(--black); }

.hero-bg-pf {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-10deg);
  font-size: 45rem; font-weight: 900;
  color: rgba(0, 0, 0, 0.03); z-index: 1; pointer-events: none;
  transition: color 0.8s ease; font-family: var(--font-serif);
}

/* GRAINY OVERLAY */
.hero-dynamic::after {
  content: ""; position: absolute; inset: 0;
  background: url('https://grainy-gradients.vercel.app/noise.svg');
  opacity: 0.15; pointer-events: none; z-index: 2; mix-blend-mode: overlay;
}

/* MOVING BLOBS */
.hero-blobs {
  position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none;
}
.hero-blob {
  position: absolute; width: 60vw; height: 60vw;
  border-radius: 50%; filter: blur(120px);
  background: rgba(255,255,255,0.1);
  animation: blobMove 25s infinite alternate;
}
.hb-1 { top: -10%; left: -10%; animation-delay: 0s; }
.hb-2 { bottom: -10%; right: -10%; animation-delay: -5s; background: rgba(0,0,0,0.05); }

@keyframes blobMove {
  from { transform: translate(0,0) scale(1); }
  to { transform: translate(100px, 50px) scale(1.2); }
}

.hero-title {
  font-family: var(--font-serif); font-size: 3.5rem; line-height: 1.1;
  font-weight: 900; margin-bottom: 2rem; letter-spacing: -3px;
  text-transform: uppercase;
}

.funky-text {
  font-family: var(--font-mono); font-weight: 400; font-style: normal;
  color: var(--white); background: var(--blue); padding: 0.2rem 1.2rem;
  display: inline-block; transform: rotate(3deg); font-size: 0.6em;
  vertical-align: middle; border-radius: 4px;
}

.hero-sub {
  font-size: 1.3rem; color: inherit; max-width: 420px; margin-bottom: 3rem;
  line-height: 1.6; position: relative; z-index: 5; font-weight: 400;
  letter-spacing: -0.02em;
}

.hero-actions { display: flex; align-items: center; gap: 2rem; }
.btn-primary {
  background: var(--black);
  color: var(--white);
  padding: 1.5rem 2.2rem;
  border-radius: 40px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  line-height: 1;
  transition: var(--transition);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}
.btn-primary strong { font-size: 1.1rem; letter-spacing: 1px; }
.btn-primary span { font-size: 0.8rem; opacity: 0.7; font-family: var(--font-serif); font-style: italic; }
.btn-primary:hover { transform: translateY(-5px); background: #1a1a1a; }


.btn-showcase {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.1;
  transition: var(--transition);
  margin-left: 10px;
}
.btn-showcase span { display: block; }
.btn-showcase .star { font-size: 1.4rem; margin-left: 5px; vertical-align: middle; }
.btn-showcase:hover { opacity: 0.7; transform: translateX(5px); }


/* STICKER STYLES */
.sticker {
  display: inline-block; padding: 0.5rem 1rem; background: var(--yellow);
  color: var(--black); font-family: var(--font-mono); font-size: 0.7rem;
  font-weight: 900; text-transform: uppercase; transform: rotate(-5deg);
  border: 1px solid var(--black); box-shadow: 2px 2px 0 var(--black);
  margin: 10px;
}
.sticker-blue { background: var(--blue); color: var(--white); transform: rotate(3deg); }
.sticker-pink { background: var(--pink); color: var(--white); transform: rotate(-2deg); }
.sticker-abs { position: absolute; top: 20px; left: 20px; z-index: 10; margin: 0; }

.hero-right {
  flex: 1; display: flex; align-items: center; justify-content: center;
  position: relative; padding-left: 5%;
}
.product-reveal-wrap { position: relative; width: 100%; max-width: 600px; display: flex; align-items: center; justify-content: center; }
.hero-product-img {
  width: 100%; height: auto; 
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.1));
  animation: floatProduct 6s ease-in-out infinite;
  mix-blend-mode: multiply;
}

/* FLOATING BADGES */
.floating-badge {
  position: absolute; background: var(--white); padding: 0.8rem 1.5rem;
  border-radius: 100px; box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  font-size: 0.7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px; z-index: 10; pointer-events: none;
  border: 1px solid rgba(0,0,0,0.05);
  animation: badgeFloat 4s ease-in-out infinite alternate;
}
.b1 { top: 10%; right: -5%; animation-delay: 0s; }
.b2 { bottom: 15%; left: -10%; animation-delay: 1s; }
.b3 { top: 45%; left: -15%; animation-delay: 2.5s; }

@keyframes badgeFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-15px); }
}

@keyframes floatProduct {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(2deg); }
}

/* SPECIFICITY FIX FOR ANIMATIONS */
.main-img-wrap img.roll-out {
  animation: rollOut 0.8s cubic-bezier(0.7, 0, 0.3, 1) forwards !important;
  z-index: 1;
}

.main-img-wrap img.roll-in {
  animation: rollIn 1s cubic-bezier(0.2, 1, 0.3, 1) forwards !important;
  z-index: 2;
}

@keyframes rollOut {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(150%, -50%) rotate(180deg) scale(0.5); opacity: 0; }
}

@keyframes rollIn {
  0% { transform: translate(-250%, -50%) rotate(-180deg) scale(0.5); opacity: 0; }
  100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
}

/* Hero Background Transition */
.hero-dynamic {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 8% 120px;
  transition: background-color 0.8s ease;
  overflow: hidden;
}

.dynamic-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  z-index: 10;
  position: relative;
}

.main-img-wrap {
  position: relative;
  width: 100%;
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -5%; /* Reduced overlap for better readability */
  z-index: 20;
}

.main-img-wrap img {
  position: absolute;
  width: 90%;
  max-width: 750px;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 40px 80px rgba(0,0,0,0.2));
  transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.8s;
  background: url('https://grainy-gradients.vercel.app/noise.svg');
  opacity: 0.15; pointer-events: none; z-index: 2; mix-blend-mode: overlay;
}

/* MOVING BLOBS */
.hero-blobs {
  position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none;
}
.hero-blob {
  position: absolute; width: 60vw; height: 60vw;
  border-radius: 50%; filter: blur(120px);
  background: rgba(255,255,255,0.1);
  animation: blobMove 25s infinite alternate;
}
.hb-1 { top: -10%; left: -10%; animation-delay: 0s; }
.hb-2 { bottom: -10%; right: -10%; animation-delay: -5s; background: rgba(0,0,0,0.05); }

@keyframes blobMove {
  from { transform: translate(0,0) scale(1); }
  to { transform: translate(100px, 50px) scale(1.2); }
}

.hero-title {
  font-family: var(--font-serif); font-size: 3.5rem; line-height: 1.1;
  font-weight: 900; margin-bottom: 2rem; letter-spacing: -3px;
  text-transform: uppercase;
}

.funky-text {
  font-family: var(--font-mono); font-weight: 400; font-style: normal;
  color: var(--white); background: var(--blue); padding: 0.2rem 1.2rem;
  display: inline-block; transform: rotate(3deg); font-size: 0.6em;
  vertical-align: middle; border-radius: 4px;
}

.hero-sub {
  font-size: 1.3rem; color: inherit; max-width: 420px; margin-bottom: 3rem;
  line-height: 1.6; position: relative; z-index: 5; font-weight: 400;
  letter-spacing: -0.02em;
}

.hero-actions { display: flex; align-items: center; gap: 2rem; }
.btn-primary {
  background: var(--black);
  color: var(--white);
  padding: 1.5rem 2.2rem;
  border-radius: 40px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  line-height: 1;
  transition: var(--transition);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}
.btn-primary strong { font-size: 1.1rem; letter-spacing: 1px; }
.btn-primary span { font-size: 0.8rem; opacity: 0.7; font-family: var(--font-serif); font-style: italic; }
.btn-primary:hover { transform: translateY(-5px); background: #1a1a1a; }


.btn-showcase {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.1;
  transition: var(--transition);
  margin-left: 10px;
}
.btn-showcase span { display: block; }
.btn-showcase .star { font-size: 1.4rem; margin-left: 5px; vertical-align: middle; }
.btn-showcase:hover { opacity: 0.7; transform: translateX(5px); }


/* STICKER STYLES */
.sticker {
  display: inline-block; padding: 0.5rem 1rem; background: var(--yellow);
  color: var(--black); font-family: var(--font-mono); font-size: 0.7rem;
  font-weight: 900; text-transform: uppercase; transform: rotate(-5deg);
  border: 1px solid var(--black); box-shadow: 2px 2px 0 var(--black);
  margin: 10px;
}
.sticker-blue { background: var(--blue); color: var(--white); transform: rotate(3deg); }
.sticker-pink { background: var(--pink); color: var(--white); transform: rotate(-2deg); }
.sticker-abs { position: absolute; top: 20px; left: 20px; z-index: 10; margin: 0; }

.hero-right {
  flex: 1; display: flex; align-items: center; justify-content: center;
  position: relative; padding-left: 5%;
}
.product-reveal-wrap { position: relative; width: 100%; max-width: 600px; display: flex; align-items: center; justify-content: center; }
.hero-product-img {
  width: 100%; height: auto; 
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.1));
  animation: floatProduct 6s ease-in-out infinite;
  mix-blend-mode: normal;
  opacity: 1;
}

/* FLOATING BADGES */
.floating-badge {
  position: absolute; background: var(--white); padding: 0.8rem 1.5rem;
  border-radius: 100px; box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  font-size: 0.7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px; z-index: 10; pointer-events: none;
  border: 1px solid rgba(0,0,0,0.05);
  animation: badgeFloat 4s ease-in-out infinite alternate;
}
.b1 { top: 10%; right: -5%; animation-delay: 0s; }
.b2 { bottom: 15%; left: -10%; animation-delay: 1s; }
.b3 { top: 45%; left: -15%; animation-delay: 2.5s; }

@keyframes badgeFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-15px); }
}

@keyframes floatProduct {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(2deg); }
}

/* SPECIFICITY FIX FOR ANIMATIONS */
@keyframes rollOut {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(150%, -40%) rotate(90deg) scale(1); opacity: 0; }
}

@keyframes rollIn {
  0% { transform: translate(-250%, -40%) rotate(-90deg) scale(1); opacity: 0; }
  100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
}

.main-img-wrap img {
  position: absolute;
  width: 100%;
  max-width: 1000px;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  mix-blend-mode: normal;
  opacity: 1 !important;
  filter: drop-shadow(0 80px 150px rgba(0,0,0,0.3));
  transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), opacity 1s ease;
  will-change: transform, opacity; /* GPU acceleration to stop vibration */
}

.main-img-wrap img.roll-out {
  animation: rollOut 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards !important;
  transition: none !important; /* Stop vibration/fighting */
}

.main-img-wrap img.roll-in {
  animation: rollIn 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards !important;
  transition: none !important; /* Stop vibration/fighting */
}

/* Hero Background Transition */
.hero-dynamic {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 5% 120px;
  transition: background-color 0.8s ease;
  overflow: hidden;
}

.dynamic-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  z-index: 10;
  position: relative;
}

.main-img-wrap {
  position: relative;
  width: 100%; 
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0 !important;
  margin-top: 40px;
  z-index: 5;
  pointer-events: none;
}

.main-img-wrap img {
  position: absolute;
  width: 35vw !important;
  max-width: 650px !important;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateZ(0);
  pointer-events: none;
  object-fit: contain;
  mix-blend-mode: multiply;
  opacity: 1 !important;
  filter: drop-shadow(0 40px 100px rgba(0,0,0,0.2)) brightness(1.05) contrast(1.05);
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.8s ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
  background: transparent !important;
}

.main-img-wrap img.roll-out {
  animation: rollOut 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards !important;
  transition: none !important;
  z-index: 10;
}

.main-img-wrap img.roll-in {
  animation: rollIn 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards !important;
  transition: none !important;
  z-index: 20;
}

/* Refined Background Watermark */

.showcase-nav {
  position: absolute;
  bottom: 80px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 15px;
  z-index: 30;
}

.nav-item {
  width: 70px;
  height: 90px;
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.1);
  padding: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}

.nav-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: brightness(1.05);
}

.nav-item.active {
  border-color: var(--black);
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

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

.hero-badge {
  position: fixed;
  top: 30px;
  right: 30px;
  width: 110px;
  height: 110px;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.badge-ring {
  width: 100%;
  height: 100%;
  animation: rotate 20s linear infinite;
  fill: var(--black);
  font-family: var(--font-mono);
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.8;
}

.badge-center {
  position: absolute;
  width: 45px;
  height: 45px;
  background: var(--black);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 0.9rem;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

#bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* EDITORIAL COLLAGE */
.editorial-collage { 
  padding: 12rem 8%; background: var(--white); overflow: hidden;
}
.collage-inner { 
  display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 100px;
  max-width: 1400px; margin: 0 auto;
}

.collage-left { position: relative; }
.collage-watermark {
  position: absolute; top: -50px; left: -20px; font-size: 15rem; font-weight: 900;
  color: rgba(0,0,0,0.03); z-index: 1; pointer-events: none; line-height: 1;
}
.collage-label { 
  display: block; font-size: 0.75rem; font-weight: 800; letter-spacing: 4px;
  text-transform: uppercase; color: var(--grey); margin-bottom: 2rem; position: relative; z-index: 2;
}
.collage-left h2 { 
  font-family: var(--font-serif); font-size: 3.8rem; line-height: 1.1; margin-bottom: 2rem;
  position: relative; z-index: 2;
}
.collage-left h2 em { font-style: italic; color: var(--yellow); }
.collage-left p { 
  font-size: 1.1rem; color: #555; line-height: 1.8; margin-bottom: 3.5rem;
  max-width: 450px; position: relative; z-index: 2;
}

.collage-right { position: relative; height: 700px; }
.collage-stack { position: relative; width: 100%; height: 100%; }

.collage-frame { 
  position: absolute; background: var(--white); padding: 15px;
  box-shadow: var(--shadow-brutal); border: 2px solid var(--black);
}
.collage-frame img { width: 100%; height: 100%; object-fit: cover; }

.back-frame {
  width: 450px; height: 550px; top: 0; right: 0; z-index: 1; transform: rotate(2deg);
}
.back-frame::after {
  content: 'TAPE'; position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 30px; background: rgba(255, 140, 0, 0.5); /* Logo Orange */
  border: 1px solid var(--black); font-size: 0.6rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center; z-index: 10;
}
.mid-frame {
  width: 300px; height: 350px; bottom: 50px; right: 250px; z-index: 2;
  transform: rotate(-5deg); border: 2px solid var(--black); background: var(--yellow);
}
.collage-product {
  position: absolute; width: 450px; bottom: -50px; right: -50px; z-index: 3;
  animation: floatProduct 6s ease-in-out infinite;
}
.collage-product img { width: 100%; height: auto; mix-blend-mode: multiply; filter: drop-shadow(15px 15px 0px rgba(0,0,0,0.05)); }

.frame-caption {
  position: absolute; top: -30px; right: 0; font-size: 0.7rem; font-weight: 800;
  letter-spacing: 2px; color: var(--grey);
}
/* SPLIT COMPARISON */
.split-comparison {
  padding: 100px 8%; background: var(--white);
  border-top: 1px solid rgba(0,0,0,0.05);
}
.split-inner {
  display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: center; gap: 40px;
  max-width: 1400px; margin: 0 auto;
}
.split-content { display: flex; flex-direction: column; gap: 1rem; }
.left-content { text-align: right; align-items: flex-end; }
.right-content { text-align: left; align-items: flex-start; }

.feature-list { list-style: none; padding: 0; margin: 1.5rem 0; display: flex; flex-direction: column; gap: 1rem; }
.feature-list li { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--black); }
.left-content .feature-list li { flex-direction: row-reverse; }

.split-product-container { position: relative; display: flex; justify-content: center; }
.split-img-wrapper { 
  position: relative; width: 100%; max-width: 500px; aspect-ratio: 1/1;
  display: flex; align-items: center; justify-content: center;
}
.split-img { 
  position: absolute; width: 100%; height: 100%; object-fit: contain; 
  mix-blend-mode: multiply;
}
.funky-half { clip-path: inset(0 50% 0 0); }
.classic-half { clip-path: inset(0 0 0 50%); }

.split-divider {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: rgba(0,0,0,0.1); z-index: 10;
}
.split-divider::after {
  content: ''; position: absolute; top: 50%; left: 50%; 
  transform: translate(-50%, -50%); width: 40px; height: 40px;
  background: var(--white); border: 1px solid rgba(0,0,0,0.1);
  border-radius: 50%; z-index: 11;
}

.btn-ghost {
  display: inline-block; padding: 0.8rem 1.8rem; border: 1px solid var(--black);
  text-decoration: none; color: var(--black); font-size: 0.75rem;
  font-weight: 800; text-transform: uppercase; letter-spacing: 2px;
  transition: var(--transition);
}
.btn-ghost:hover { background: var(--black); color: var(--white); }
.hero-ticker {
  background: var(--yellow); color: var(--black); padding: 1.5rem 0;
  border-top: 3px solid var(--black); border-bottom: 3px solid var(--black);
  overflow: hidden; white-space: nowrap; display: flex; z-index: 20;
}
.hero-ticker span {
  display: inline-block; font-size: 1.2rem; font-weight: 900;
  letter-spacing: 2px; padding: 0 4rem; text-transform: uppercase;
  animation: ticker 20s linear infinite; font-family: var(--font-mono);
}
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.hero-stats-row {
  display: flex; gap: 4rem; margin-top: 4rem; padding-top: 2rem;
  border-top: 1px solid rgba(0,0,0,0.1);
}
.hs-item strong { 
  display: block; font-family: var(--font-serif); font-size: 2.2rem; 
  font-weight: 900; line-height: 1; margin-bottom: 0.5rem;
}
.hs-item span { font-size: 0.75rem; font-weight: 800; color: var(--grey); text-transform: uppercase; letter-spacing: 2px; }

/* PRODUCTS */
.products { padding: 10rem 4%; }
.products-header {
  margin-bottom: 6rem; max-width: 600px;
}
.products-header h2 {
  font-family: var(--font-serif); font-size: 4rem; line-height: 1;
  margin-bottom: 1.5rem;
}
.products-header p { font-size: 1.1rem; color: #666; line-height: 1.6; }

.product-slider-outer {
  position: relative;
  width: 100%;
}

.product-slider-wrapper {
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  scroll-behavior: smooth;
  padding: 20px 0;
}

.product-slider-wrapper::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.products-grid {
  display: flex;
  gap: 40px;
  width: max-content;
}

.p-card {
  width: 380px;
  flex-shrink: 0;
  transition: var(--transition);
}

.p-slider-arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.p-slider-arrow:hover {
  background: var(--black);
  color: var(--white);
  transform: translateY(-50%) scale(1.1);
}

.p-prev { left: -30px; }
.p-next { right: -30px; }

@media (max-width: 1024px) {
  .p-slider-arrow { 
    display: flex !important; 
    width: 40px !important; 
    height: 40px !important; 
    font-size: 0.8rem !important;
  }
  .p-prev { left: 10px !important; }
  .p-next { right: 10px !important; }
  .p-card { width: 280px !important; }
}

.p-card { transition: var(--transition); }
.p-img {
  position: relative; height: 500px; background: none;
  overflow: hidden; margin-bottom: 2rem;
  display: flex; align-items: center; justify-content: center;
}
.p-img img { 
  width: 100%; height: 100%; object-fit: contain; 
  transition: var(--transition);
  mix-blend-mode: multiply; /* Blends white background of image with page */
}
.p-card:hover .p-img img { transform: scale(1.05); }

.p-tag {
  position: absolute; top: 30px; left: 30px; background: var(--white);
  padding: 0.5rem 1.2rem; font-size: 0.7rem; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase; box-shadow: var(--shadow-soft);
}

.p-info h3 {
  font-family: var(--font-serif); font-size: 1.8rem; margin-bottom: 0.5rem;
}
.p-cat { font-size: 0.75rem; font-weight: 800; color: #AAA; text-transform: uppercase; letter-spacing: 2px; }
.p-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; }
.p-price { font-size: 1.4rem; font-weight: 400; color: #333; }
.p-add {
  background: none; border: 1px solid #DDD; padding: 0.8rem 1.5rem;
  font-size: 0.8rem; font-weight: 800; text-transform: uppercase;
  transition: var(--transition);
}
.p-add:hover { background: var(--black); color: var(--white); border-color: var(--black); }

/* COLLECTIONS (Overlapping) */
.collections { padding: 5rem 4% 10rem; }
.collection-card {
  display: flex; align-items: center; gap: 0; position: relative;
  margin-bottom: 10rem;
}
.collection-card:nth-child(even) { flex-direction: row-reverse; }

.collection-img { 
  flex: 1.5; height: 600px; overflow: hidden; 
  background: var(--off-white); display: flex; align-items: center; justify-content: center;
}
.collection-img img { 
  width: 80%; height: 80%; object-fit: contain; 
  mix-blend-mode: multiply;
}

.collection-info {
  flex: 1; background: var(--white); padding: 5rem;
  margin-left: -100px; position: relative; z-index: 2;
  box-shadow: 0 40px 100px rgba(0,0,0,0.05);
}
.collection-card:nth-child(even) .collection-info { margin-left: 0; margin-right: -100px; }

.collection-info h2 { font-family: var(--font-serif); font-size: 3.5rem; margin-bottom: 2rem; }
.collection-info p { font-size: 1.1rem; color: #666; line-height: 1.8; margin-bottom: 3rem; }

/* FOOTER */
footer { background: var(--white); padding: 8rem 4% 4rem; border-top: 1px solid #EEE; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 4rem; margin-bottom: 6rem; }
.ft-brand .ft-logo { height: 40px; margin-bottom: 2rem; }
.ft-brand p { color: #888; line-height: 1.8; max-width: 250px; }

.ft-col h5 { font-size: 0.75rem; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 2.5rem; }
.ft-col a { display: block; text-decoration: none; color: #555; margin-bottom: 1rem; transition: color 0.3s; }
.ft-col a:hover { color: var(--yellow); }

.footer-bottom {
  display: flex; justify-content: space-between; padding-top: 3rem;
  border-top: 1px solid #F0F0F0; font-size: 0.8rem; color: #AAA;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .hero-bg-img { display: none; }
  .collection-card { flex-direction: column !important; }
  .collection-info { margin: -50px 5% 0; padding: 3rem; }
  .hero-canvas-wrap { width: 80%; right: 10%; top: 40%; }
}

/* ===================================
   REFINED EDITORIAL SECTIONS
   =================================== */

/* MATRIX BACKGROUND UTILITY */
.matrix-bg {
  background-image: radial-gradient(rgba(0,0,0,0.08) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center;
}

/* STATS / NUMBERS */
.numbers {
  padding: 100px 8%;
  display: flex;
  justify-content: space-between;
  background-color: var(--white);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  position: relative;
}

.numbers::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-image: radial-gradient(rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.number-item {
  text-align: center;
}

.n-big {
  display: block;
  font-family: var(--font-serif);
  font-size: 3rem; 
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
  margin-bottom: 5px;
  color: var(--black) !important;
}

.n-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--grey) !important;
}

.n-divider {
  width: 1px;
  height: 80px;
  background: rgba(0,0,0,0.1) !important;
}

/* PREMIUM DARK MATRIX SECTIONS (Limited) */
.editorial-collage, .promo-strip {
  background: #0a0a0a !important;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
  color: #fff !important;
  position: relative;
  overflow: hidden;
}

/* TRENDING DROPS */
.products {
  padding: 150px 8%;
  background-color: var(--white);
  position: relative;
}

.products::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-image: radial-gradient(rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.products-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 80px;
}

.products-header h2 {
  font-family: var(--font-serif);
  font-size: 4rem;
  line-height: 1;
}

.products-header h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--grey);
}

.see-all {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--black);
  text-decoration: none;
  font-weight: 800;
  border-bottom: 2px solid var(--black);
  padding-bottom: 5px;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.p-card {
  background: none;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.p-card:hover {
  transform: translateY(-15px);
}

.p-img {
  position: relative;
  aspect-ratio: 3/4;
  background: var(--white);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  margin-bottom: 25px;
}

.p-img img {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  transition: transform 0.8s ease;
}

.p-card:hover .p-img img {
  transform: scale(1.1) rotate(5deg);
}

.p-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.p-top h3 {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  margin-bottom: 5px;
}

.p-cat {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--grey);
}

.p-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}

.p-price {
  font-family: var(--font-sans);
  font-size: 1.4rem;
  font-weight: 800;
}

.p-add {
  background: var(--black);
  color: var(--white);
  border: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.p-add:hover {
  background: var(--yellow);
  color: var(--black);
  transform: rotate(90deg);
}

/* PREMIUM LIGHT MATRIX SECTIONS */
.editorial-collage, .promo-strip {
  background: var(--off-white) !important;
  background-image: radial-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
  color: var(--black) !important;
  position: relative;
  overflow: hidden;
}

.collage-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  background: url('logo.png') no-repeat center;
  background-size: contain;
  opacity: 0.05;
  z-index: 0;
  pointer-events: none;
}

.collage-left h2, .collage-left p, .collage-label {
  color: var(--black) !important;
}

.collage-left p {
  opacity: 0.7;
}

/* GLOBAL BUTTONS */
.btn-primary {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 900;
  font-style: italic;
  color: #fff;
  background: #000;
  padding: 1.2rem 3rem;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid #000;
}

.btn-primary:hover {
  background: #FFD700;
  color: #000;
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 20px 40px rgba(255,215,0,0.2);
}

.collage-right {
  position: relative;
  height: 650px;
}

.collage-stack {
  position: relative;
  width: 100%;
  height: 100%;
}

.collage-frame {
  position: absolute;
  overflow: hidden;
  box-shadow: 0 50px 100px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.1);
}

.back-frame {
  width: 75%;
  height: 60%;
  top: 0;
  right: 0;
  z-index: 1;
  transform: rotate(3deg);
}

.back-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.5) brightness(0.7);
}

.mid-frame {
  width: 55%;
  height: 45%;
  bottom: 10%;
  left: -5%;
  z-index: 3;
  border: 15px solid #000;
  transform: rotate(-5deg);
}

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

.collage-product {
  position: absolute;
  bottom: -5%;
  right: -10%;
  width: 70%;
  z-index: 10;
  pointer-events: none;
}

.collage-product img {
  width: 100%;
  filter: drop-shadow(0 50px 100px rgba(0,0,0,0.6));
  animation: floatProduct 6s ease-in-out infinite;
}

/* COLLECTIONS SECTION OVERLAP */
.collections {
  padding: 150px 0;
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 250px; /* More breathing room */
}

.collection-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  gap: 150px;
  position: relative;
  overflow: visible; /* Prevent sticker clipping */
}

.collection-img {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  overflow: visible; /* Prevent sticker clipping */
}

.collection-img img {
  width: 100%;
  max-width: 550px;
  filter: drop-shadow(0 50px 100px rgba(0,0,0,0.15));
  animation: floatProduct 6s ease-in-out infinite;
  transition: transform 0.5s ease;
}

.collection-card:hover .collection-img img {
  transform: scale(1.05) rotate(2deg);
}

.collection-info {
  z-index: 2;
}

.collection-info h2 {
  font-family: var(--font-serif);
  font-size: 6rem;
  line-height: 0.9;
  margin-bottom: 30px;
  text-transform: uppercase;
}

.collection-info p {
  font-size: 1.2rem;
  color: var(--grey);
  max-width: 400px;
  margin-bottom: 40px;
  line-height: 1.6;
}

.sticker-abs {
  position: absolute;
  top: -20px;
  left: -20px;
  z-index: 10;
  background: var(--black);
  color: var(--white);
  padding: 10px 25px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 3px;
  transform: rotate(-5deg);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.btn-dark {
  display: inline-block;
  background: var(--black);
  color: var(--white);
  padding: 1.2rem 3rem;
  border-radius: 50px;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

/* COLLECTIONS PAGE EDITORIAL */
.collection-hero-editorial {
  padding: 200px 8% 100px;
  text-align: center;
  background: var(--white);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.hero-label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 5px;
  color: var(--grey);
  margin-bottom: 20px;
}

.collection-hero-editorial h1 {
  font-family: var(--font-serif);
  font-size: 8rem;
  line-height: 0.9;
  margin-bottom: 30px;
}

.funky-text-inverse {
  background: var(--black);
  color: var(--white);
  padding: 0 20px;
  font-style: italic;
}

.collection-hero-editorial p {
  font-size: 1.5rem;
  color: var(--grey);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.4;
}

/* ABOUT PAGE EDITORIAL */
.about-editorial-content {
  padding: 150px 8%;
  background: var(--white);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}

.about-text h2 {
  font-family: var(--font-serif);
  font-size: 5rem;
  line-height: 1;
  margin-bottom: 40px;
}

.about-text h2 em {
  font-style: italic;
  font-weight: 400;
}

.about-text p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--grey);
  margin-bottom: 30px;
}

.about-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 4px;
  color: var(--grey);
  display: block;
  margin-bottom: 20px;
}

.about-stats {
  display: flex;
  gap: 50px;
  margin-top: 60px;
}

.as-item h3 {
  font-family: var(--font-serif);
  font-size: 3rem;
  margin-bottom: 5px;
}

.as-item span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 2px;
  color: var(--grey);
}

.about-visual {
  display: flex;
  justify-content: center;
}

.about-img-frame {
  position: relative;
  width: 100%;
  max-width: 500px;
}

.about-floating-img {
  width: 100%;
  filter: drop-shadow(0 50px 100px rgba(0,0,0,0.15));
  animation: floatProduct 6s ease-in-out infinite;
}

.about-badge {
  position: absolute;
  bottom: 20px;
  right: -20px;
  background: var(--yellow);
  color: var(--black);
  padding: 10px 25px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 900;
  transform: rotate(10deg);
}

.collection-card:nth-child(even) .collection-info {
  transform: translateX(-80px); /* Pushed left */
}

.collection-info h2 {
  font-family: var(--font-serif);
  font-size: 6rem; /* Even larger */
  line-height: 0.8;
  margin-bottom: 40px;
  color: var(--black);
  letter-spacing: -2px;
}

.collection-info p {
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--grey);
  margin-bottom: 50px;
  max-width: 450px;
}

/* MARQUEE / TICKER */
.hero-ticker {
  background: var(--black);
  color: var(--white);
  padding: 25px 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.1rem;
  letter-spacing: 4px;
  position: relative;
  display: flex;
}

.hero-ticker span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 20s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* PROMO STRIP REFINEMENT */
.promo-strip {
  padding: 100px 8%;
  text-align: center;
  border-top: 1px solid rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.ps-inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.ps-badge {
  font-family: var(--font-mono);
  background: var(--yellow);
  color: var(--black);
  padding: 5px 15px;
  font-size: 0.7rem;
  letter-spacing: 2px;
  font-weight: 900;
}

.ps-content h2 {
  font-family: var(--font-serif);
  font-size: 4rem;
  line-height: 1;
  margin-bottom: 15px;
}

.ps-content p {
  font-size: 1.2rem;
  color: var(--grey);
}

.btn-dark {
  display: inline-block;
  background: var(--black);
  color: var(--white);
  padding: 1.2rem 3rem;
  border-radius: 50px;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.btn-dark:hover {
  background: var(--yellow);
  color: var(--black);
  transform: translateY(-5px);
}

/* FOOTER REFINEMENT */
footer {
  padding: 120px 8% 50px;
  border-top: 1px solid rgba(0,0,0,0.05);
  background-color: var(--white);
  position: relative;
}

footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  background-image: radial-gradient(rgba(0,0,0,0.05) 2px, transparent 2px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

footer > * {
  position: relative;
  z-index: 1;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 100px;
  margin-bottom: 80px;
}

.ft-brand {
  max-width: 400px;
}

.ft-logo {
  height: 60px;
  margin-bottom: 30px;
}

.ft-brand p {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--black);
  margin-bottom: 40px;
}

.ft-socials {
  display: flex;
  gap: 20px;
}

.ft-socials a {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black);
  text-decoration: none;
  transition: all 0.3s ease;
}

.ft-socials a:hover {
  background: var(--black);
  color: var(--white);
  transform: translateY(-5px);
}

.ft-links {
  display: flex;
  gap: 80px;
}

.ft-col h5 {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 30px;
  color: var(--grey);
}

.ft-col a {
  display: block;
  font-size: 1rem;
  color: var(--black);
  text-decoration: none;
  margin-bottom: 15px;
  transition: transform 0.3s ease;
}

.ft-col a:hover {
  transform: translateX(10px);
  color: var(--grey);
}

.footer-bottom {
  padding-top: 50px;
  border-top: 1px solid rgba(0,0,0,0.05);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--grey);
}


/* SPLIT COMPARISON SECTION */
.split-comparison {
  padding: 150px 8%;
  background: var(--white);
  overflow: hidden;
}

.split-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 50px;
}

.split-content {
  display: flex;
  flex-direction: column;
  gap: 25px;
  opacity: 0; /* Initial state */
  transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.left-content { 
  text-align: right; 
  align-items: flex-end; 
  transform: translateX(-100px); 
}

.right-content { 
  text-align: left; 
  align-items: flex-start; 
  transform: translateX(100px); 
}

.split-comparison.active-reveal .split-content {
  opacity: 1;
  transform: translateX(0);
}

.split-product-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.split-img-wrapper {
  position: relative;
  width: 400px;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.split-img {
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: contain;
  transition: all 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.funky-half {
  clip-path: inset(0 50% 0 0);
  transform: translateX(-80px); /* Start apart */
}

.classic-half {
  clip-path: inset(0 0 0 50%);
  transform: translateX(80px); /* Start apart */
}

.split-comparison.active-reveal .funky-half,
.split-comparison.active-reveal .classic-half {
  transform: translateX(0); /* Get together */
}

.split-divider {
  position: absolute;
  top: 10%;
  left: 50%;
  width: 1px;
  height: 80%;
  background: rgba(0,0,0,0.1);
  z-index: 10;
  opacity: 0;
  transition: opacity 1s 0.8s ease;
}

.split-comparison.active-reveal .split-divider {
  opacity: 1;
}

.btn-ghost {
  display: inline-block;
  padding: 12px 30px;
  border: 1px solid var(--black);
  color: var(--black);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 900;
  transition: all 0.3s ease;
  margin-top: 30px;
}

/* ========================
   MOBILE OPTIMIZATION (768px)
   ======================== */

/* ========================
   THE ULTIMATE MOBILE FIX
   ======================== */
/* Desktop Nav Alignment Fix */
@media (min-width: 1025px) {
  .nav-brand { order: 1 !important; }
  .nav-links { order: 2 !important; }
  .nav-cta { order: 3 !important; }
}

@media (max-width: 1024px) {
  /* Force page boundaries */
  html, body { 
    overflow-x: hidden !important; 
    width: 100% !important; 
    position: relative !important; 
  }
  
  /* Mobile Nav with Visible Links */
  nav { 
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    z-index: 99999 !important;
    padding: 0 !important;
    border-radius: 0 !important; /* Remove pill shape */
    transform: none !important; /* Remove center offset */
  }
  
  .nav-top-row {
    width: 100% !important;
    height: 55px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
  }
  
  .nav-brand { display: flex !important; align-items: center !important; }
  .nav-logo { height: 20px !important; width: auto !important; }
  
  .nav-links { 
    display: flex !important; 
    width: 100% !important;
    justify-content: center !important;
    gap: 15px !important;
    padding: 8px 0 12px !important;
    border-top: 1px solid rgba(0,0,0,0.02) !important;
    list-style: none !important;
    margin: 0 !important;
    overflow-x: auto !important; /* Allow scroll if too many */
    -webkit-overflow-scrolling: touch !important;
  }
  
  .nav-links li a {
    font-size: 0.75rem !important; /* Slightly larger */
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
    color: #000 !important;
    white-space: nowrap !important;
  }
  
  .nav-cta { 
    background: var(--black) !important;
    color: var(--white) !important;
    padding: 6px 12px !important; 
    border-radius: 3px !important;
    font-size: 0.7rem !important; 
    text-decoration: none !important;
  }
  
  /* Hero Section */
  .hero-dynamic { 
    padding: 110px 5% 40px !important; /* More padding for taller nav */
    text-align: center !important;
  }
  .hero-title { font-size: 2.5rem !important; margin-bottom: 1rem !important; }
  .hero-sub { font-size: 0.85rem !important; margin-bottom: 2rem !important; }

  .dynamic-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 30px !important;
  }
  
  .dynamic-content {
    width: 100% !important;
    order: 1 !important;
  }
  
  .dynamic-visual {
    width: 100% !important;
    order: 2 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Main Visual */
  .main-img-wrap { height: 350px !important; margin-top: 20px !important; }
  .main-img-wrap img { max-width: 90% !important; }

  /* Collections Section */
  .collections { padding: 40px 0 !important; overflow: hidden !important; }
  .collection-card { 
    display: flex !important;
    flex-direction: column !important; 
    align-items: center !important;
    text-align: center !important; 
    gap: 0 !important; 
    width: 100% !important;
    margin-bottom: 80px !important;
  }
  .collection-img { width: 100% !important; height: 350px !important; }

  /* Split Comparison */
  .split-inner { 
    display: flex !important; 
    flex-direction: column !important; 
    gap: 40px !important; 
  }
  .left-content, .right-content { 
    text-align: center !important; 
    align-items: center !important; 
    transform: none !important;
    opacity: 1 !important;
  }
  .split-img-wrapper { width: 100% !important; height: 300px !important; }

  /* Premium Header */
  nav { 
    background: rgba(255,255,255,0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
  }
  .nav-links li a { 
    font-weight: 700 !important; 
    letter-spacing: 0.8px !important;
    color: #111 !important;
  }

  /* Numbers Section Fix */
  .numbers { 
    padding: 60px 5% !important; 
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    background: #fafafa !important;
  }
  .n-divider { display: none !important; }
  .number-item {
    padding: 30px 15px !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    background: #fff !important;
    border-radius: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important;
  }
  .n-big { font-size: 2.5rem !important; color: #000 !important; }
  .n-label { font-size: 0.7rem !important; font-weight: 700 !important; color: #888 !important; }

  /* Product Section & Slider Fix */
  .products { padding: 80px 0 !important; }
  .product-slider-wrapper {
    scroll-snap-type: x mandatory !important;
    padding: 0 !important;
  }
  .products-grid {
    gap: 0 !important;
    width: auto !important;
    display: flex !important;
  }
  .products-header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 15px !important;
    margin-bottom: 40px !important;
    padding: 0 5% !important;
  }
  .products-header h2 { font-size: 3rem !important; line-height: 1 !important; margin-bottom: 0 !important; }
  .see-all { font-size: 0.8rem !important; opacity: 0.8 !important; border-bottom: 1px solid var(--black) !important; }

  .p-card { 
    width: 100vw !important;
    padding: 0 20px !important;
    text-align: center !important;
    scroll-snap-align: center !important;
    flex-shrink: 0 !important;
  }
  .p-img { 
    background: #fdfdfd !important; 
    border-radius: 20px !important;
    margin-bottom: 25px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03) !important;
    height: 450px !important;
  }
  .p-info { padding: 0 !important; }
  .p-top h3 { font-size: 1.8rem !important; margin-bottom: 8px !important; }
  .p-cat { font-size: 0.8rem !important; letter-spacing: 3px !important; }
  .p-bottom { justify-content: center !important; margin-top: 15px !important; }
  .p-price { font-size: 1.6rem !important; font-weight: 900 !important; }
  .p-add { display: none !important; } /* Clean up card for mobile */

  /* Decorations Removal */
  .badge-ring, .hero-badge, .badge-center, .floating-badge, .showcase-cta { display: none !important; }

  /* About Page Mobile Fix */
  .about-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 50px !important;
    text-align: center !important;
  }
  .about-text h2 { font-size: 3rem !important; }
  .about-stats {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
  }

  /* Editorial Collage Mobile Fix */
  .editorial-collage { padding: 80px 5% !important; }
  .collage-inner { 
    display: flex !important;
    flex-direction: column !important;
    gap: 60px !important;
    text-align: center !important;
  }
  .collage-left h2 { font-size: 2.8rem !important; margin-bottom: 20px !important; }
  .collage-left p { margin: 0 auto 30px !important; }
  .collage-right { 
    height: 450px !important; 
    width: 100% !important; 
    display: flex !important;
    justify-content: center !important;
  }
  .collage-stack { width: 100% !important; max-width: 400px !important; }
  .back-frame { width: 280px !important; height: 350px !important; right: 0 !important; top: 0 !important; }
  .mid-frame { width: 200px !important; height: 250px !important; left: 0 !important; bottom: 50px !important; }
  .collage-product { width: 250px !important; right: -20px !important; bottom: -30px !important; }

  /* Collections Mobile Fix */
  .collection-card {
    padding: 0 !important;
    margin-bottom: 60px !important;
  }
  .collection-info {
    padding: 40px 20px !important;
    margin: -40px auto 40px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 90% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08) !important;
    background: #fff !important;
    position: relative !important;
    z-index: 5 !important;
  }
  .collection-info h2 {
    font-size: 2.8rem !important;
    line-height: 0.95 !important;
    margin-bottom: 15px !important;
    letter-spacing: -1px !important;
    text-align: center !important;
    width: 100% !important;
  }
  .collection-info p {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    margin: 0 auto 25px !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  .collection-info .btn-ghost {
    display: table !important; /* Table works better for centering with margin auto */
    margin: 10px auto 0 !important;
    text-align: center !important;
    padding: 12px 30px !important;
  }
}

/* ========================
   MOBILE ROLLING ANIMATION FIX
   ======================== */
@media (max-width: 1024px) {
  /* 1. Correct Animation for Centering */
  @keyframes rollInMobileFinal {
    0% { transform: translate(-150%, -50%) rotate(-120deg) scale(0.7); opacity: 0; }
    100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
  }
  @keyframes rollOutMobileFinal {
    0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
    100% { transform: translate(150%, -50%) rotate(120deg) scale(0.7); opacity: 0; }
  }
  
  /* Slider Controls */
  .slider-controls-wrap { gap: 10px !important; }
  .slider-arrow { width: 40px !important; height: 40px !important; font-size: 0.8rem !important; }

  .main-img-wrap img.roll-in { 
    animation: rollInMobileFinal 0.8s cubic-bezier(0.2, 1, 0.3, 1) both !important; 
  }
  .main-img-wrap img.roll-out { 
    animation: rollOutMobileFinal 0.8s cubic-bezier(0.2, 1, 0.3, 1) both !important; 
  }

  /* 2. Absolute Visibility & Centering */
  .main-img-wrap { 
    overflow: visible !important; 
    height: 400px !important; 
    margin: 0 auto !important; 
  }
  .main-img-wrap img { 
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 85% !important; 
    max-width: 450px !important; 
    height: auto !important; 
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, -50%);
  }

  /* 3. Eliminate Overlapping Text Clutter */
  .badge-ring, .hero-badge, .badge-center, .sticker-abs, .showcase-cta, .floating-badge { 
    display: none !important; 
    visibility: hidden !important; 
    pointer-events: none !important; 
  }
  
  .showcase-nav {
    position: relative !important;
    bottom: 0 !important;
    margin-top: 30px !important;
    padding: 0 15px !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .nav-item { flex-shrink: 0 !important; width: 60px !important; height: 80px !important; }
}

/* ===================================
   ULTIMATE COLLECTIONS MOBILE FIX
   =================================== */
@media (max-width: 1024px) {
  .collections { 
    padding: 40px 0 !important; 
    width: 100% !important;
    overflow-x: hidden !important;
  }
  .collection-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 0 60px 0 !important;
    padding: 0 !important;
  }
  .collection-img {
    width: 100% !important;
    height: 350px !important;
    margin: 0 !important;
  }
  .collection-info {
    width: 90% !important;
    max-width: 500px !important;
    margin: -40px auto 0 !important;
    padding: 40px 20px !important;
    background: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    position: relative !important;
    z-index: 10 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1) !important;
  }
  .collection-info h2 {
    font-size: 2.8rem !important;
    line-height: 1 !important;
    margin-bottom: 15px !important;
    width: 100% !important;
    text-align: center !important;
  }
  .collection-info p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-bottom: 25px !important;
    width: 100% !important;
    text-align: center !important;
  }
  .collection-info .btn-ghost {
    display: inline-block !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* Footer Mobile Fix */
  footer { 
    padding: 60px 5% 40px !important; 
    text-align: center !important;
    display: block !important;
  }
  .footer-top { 
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 50px !important; 
    margin-bottom: 50px !important;
    width: 100% !important;
  }
  .ft-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }
  .ft-brand p { 
    max-width: 300px !important; 
    margin: 0 auto 20px !important; 
  }
  .ft-social { 
    display: flex !important;
    justify-content: center !important; 
    gap: 15px !important;
  }
  .ft-col {
    width: 100% !important;
    text-align: center !important;
  }
  .ft-col h5 { 
    margin-bottom: 20px !important; 
    text-align: center !important;
  }
  .footer-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    text-align: center !important;
    padding-top: 40px !important;
    width: 100% !important;
  }

  /* Collections Page Hero Mobile Fix */
  .collection-hero-editorial {
    padding: 120px 5% 60px !important;
  }
  .collection-hero-editorial h1 {
    font-size: 3.5rem !important;
    line-height: 1 !important;
  }
  .collection-hero-editorial p {
    font-size: 1rem !important;
    max-width: 100% !important;
  }
  .collection-info .btn-dark {
    display: table !important;
    margin: 10px auto 0 !important;
    text-align: center !important;
    padding: 12px 30px !important;
  }

  /* Shop Page Mobile Fix */
  .shop-page .products { padding: 40px 5% !important; }
  .shop-page .products-header { 
    margin-bottom: 30px !important; 
    align-items: center !important;
    gap: 20px !important;
  }
  .filter-pills {
    display: flex !important;
    overflow-x: auto !important;
    width: 100% !important;
    padding: 10px 0 !important;
    gap: 10px !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .filter-pills::-webkit-scrollbar { display: none !important; }
  .filter-pills .p-cat { 
    white-space: nowrap !important; 
    padding: 8px 20px !important;
    font-size: 0.7rem !important;
    background: #f5f5f5 !important;
    border-radius: 50px !important;
  }
  .filter-pills .p-cat.active { background: #000 !important; color: #fff !important; }
  
  .sort-meta { font-size: 0.6rem !important; opacity: 0.5 !important; letter-spacing: 1px !important; }

  .shop-page .products-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* 2-column grid for shop */
    gap: 15px !important;
    width: 100% !important;
  }
  .shop-page .p-card { 
    width: 100% !important; 
    padding: 0 !important;
  }
  .shop-page .p-img { height: 250px !important; margin-bottom: 15px !important; }
  .shop-page .p-top h3 { font-size: 1.1rem !important; }
  .shop-page .p-cat { font-size: 0.6rem !important; letter-spacing: 1px !important; }
  .shop-page .p-price { font-size: 1.2rem !important; }
}