/* ---------- Portfolio Hero Section Styling ---------- */
.portfolio-hero {
  position: relative;
  width: 100%;
  min-height: 80vh; /* Adjusts beautifully below the sticky header */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Dark Cherry to Black radial gradient matches your mock screenshot */
  background: radial-gradient(circle at center, #540c1e 0%, #150207 60%, #080103 100%);
  padding: 8rem 2rem 5rem 2rem;
  box-sizing: border-box;
  overflow: hidden;
  text-align: center;
}

.portfolio-hero__content {
  max-width: 900px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* "OUR PORTFOLIO" Header Styling */
.portfolio-hero__eyebrow {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  color: #fd506c; /* Signature Heznex Pink */
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.5px;
  margin: 0;
}

.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.portfolio-hero__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(3.5rem, 9vw, 6.5rem);
  color: #fd506c; /* Signature Heznex Pink */
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -1.5px;
  margin: 0;
  margin-top: -0.5rem; /* Tightly stacks under "OUR" */
}

/* Subtitle Block */
.portfolio-hero__desc {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: clamp(0.95rem, 1.8vw, 1.125rem);
  line-height: 1.6;
  color: #e5e7eb; /* Soft off-white */
  max-width: 820px;
  margin: 0.75rem 0 1.75rem 0;
  opacity: 0.95;
}

/* CTA Buttons Row */
.portfolio-hero__actions {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
}

/* Orange Audit Button */
.portfolio-btn-orange {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15px;
  background: #ff512f; /* Bright orange-red action color */
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 0.9rem 2.2rem;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 81, 47, 0.3);
  white-space: nowrap;
}

.portfolio-btn-orange:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 81, 47, 0.5);
  background: #ff6244;
}

/* White Call Button */
.portfolio-btn-white {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15px;
  background: #ffffff;
  color: #000000;
  border: none;
  border-radius: 8px;
  padding: 0.9rem 2.2rem;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}

.portfolio-btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2);
  background: #f4f4f5;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .portfolio-hero {
    padding-top: 9rem; /* Added spacing to clear the header on mobile screens */
    min-height: auto;
  }
  .portfolio-hero__actions {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
  }
  .portfolio-btn-orange, 
  .portfolio-btn-white {
    width: 100%;
    text-align: center;
  }
}

/* ==========================================================================
   PREMIUM SHOWCASE HERO (OBLO INNER STYLE WITH LIGHT CUSTOM BACKDROP)
   ========================================================================== */
.premium-showcase-hero {
  position: relative;
  width: 100%;
  min-height: 95vh;
  /* Bind your pre-rendered banner layout directly as the root backdrop frame */
  background-image: url('banner.jpg');
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  padding: 8rem 2rem 6rem 2rem;
  box-sizing: border-box;
  overflow: hidden;
}

.ps-hero-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 5.5fr 6.5fr; /* Holds text on left 45%, protects graphics on right 55% */
  gap: 4rem;
  align-items: center;
}

/* --- Left Column Elements --- */
.ps-hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 1.75rem;
  position: relative;
  z-index: 5;
}

.ps-hero-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 4.2vw, 4rem);
  color: #111111; /* Dark display tone contrast against the left white asset wrap */
  line-height: 1.15;
  letter-spacing: -1px;
  margin: 0;
  text-transform: capitalize;
}

.ps-hero-title .ps-highlight {
  color: #fd506c; /* Signature Brand Accent Pink */
}

.ps-hero-subtitle {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.65;
  color: #4b5563; /* Crisp readable charcoal body color */
  max-width: 580px;
  margin: 0;
}

/* --- Action Button Layout (Oblo Wire Box Border Style) --- */
.ps-hero-actions {
  margin-top: 0.5rem;
}

.ps-btn-outline {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.5px;
  color: #111111;
  background-color: transparent;
  border: 2px solid #111111;
  border-radius: 4px; /* Crisp minimal box geometry matches reference view button */
  padding: 0.9rem 2.6rem;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.ps-btn-outline:hover {
  background-color: #111111;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

/* ==================== RESPONSIVE LAYOUT MATRIX RE-INDEX ==================== */
@media (max-width: 1024px) {
  .premium-showcase-hero {
    background-position: 70% center; /* Adjust image crop alignment focal frame on tablets */
    min-height: auto;
    padding: 10rem 2rem 8rem 2rem;
  }
  
  .ps-hero-container {
    grid-template-columns: 1fr; /* Collapse down to single track stream layout stack */
  }
  
  .ps-hero-content {
    max-width: 600px;
    background-color: rgba(255, 255, 255, 0.88); /* Frost glass sheet overlay ensures copy never blends over graphics */
    padding: 3rem;
    border-radius: 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.05);
  }
  
  .ps-hero-visual-space {
    display: none; /* Drop the empty structural placeholder node */
  }
}

@media (max-width: 576px) {
  .premium-showcase-hero {
    padding: 8rem 1rem 4rem 1rem;
    background-position: 78% center;
  }
  
  .ps-hero-content {
    padding: 2rem 1.5rem;
    gap: 1.25rem;
  }
  
  .ps-btn-outline {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
}

/* ---------- Proven Marketplace Optimisations Section ---------- */
.optimisations-section {
  background-color: #fbfbfd;
  padding: 6rem 2rem;
  width: 100%;
  box-sizing: border-box;
}

.opt-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Header Styling */
.opt-header {
  margin-top: 100px;
  text-align: center;
  margin-bottom: 4rem;
}

.opt-eyebrow {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fd506c;
  letter-spacing: 2px;
  margin-bottom: 0.5rem;
}

.opt-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #111111;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0 0 1rem 0;
}

.opt-title-highlight {
  color: #fd506c;
}

.opt-subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  color: #666666;
  max-width: 600px;
  margin: 0 auto;
}

/* 3-Column Brand Grid */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* Full Background Image Card */
.brand-card {
  aspect-ratio: 4 / 4; /* Keeps cards perfectly square; adjust to 4 / 3 if you prefer wider cards */
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.brand-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Overlay & Layout Container (Aligns text and button at the bottom) */
.brand-card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Adjust the 0.85 (85% opacity) or the 30% start point to make it darker/higher */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
}

/* Pure White Title */
.brand-card__title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.65rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 1.25rem 0;
  letter-spacing: -0.5px;
}

/* View Portfolio Button inside Card */
.brand-view-btn {
  display: block;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  color: #ffffff;
  background-color: #fd506c;
  border-radius: 8px;
  padding: 0.9rem 1.5rem;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.brand-view-btn:hover {
  background-color: #ffffff; /* Accents to brand pink on hover */
  color: #000000
}



/* Responsive adjustments */
@media (max-width: 992px) {
  .brand-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 650px) {
  .brand-grid {
    grid-template-columns: 1fr;
  }
  .brand-card {
    aspect-ratio: 4 / 3; /* Slightly wider on mobile screens */
  }
  .optimisations-section {
    padding: 4rem 1.25rem;
  }
}

/* ---------- Web Development Section ---------- */
.webdev-section {
  background-color: #ffffff;
  padding: 6rem 2rem;
  width: 100%;
  box-sizing: border-box;
}

.webdev-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* 2-Column Responsive Grid */
.webdev-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  margin-top: 2rem;
}

/* Card layout */
.webdev-card {
  background: #fbfbfd;
  border-radius: 20px;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.03);
}

/* Aligning title/description to the left and the icon to the right */
.webdev-card__info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* Let the text wrap cleanly next to the icon */
.webdev-card__text {
  flex: 1;
}

.webdev-card__title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #111111;
  margin: 0 0 0.75rem 0;
}

.webdev-card__desc {
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #666666;
  margin: 0;
}

/* Platform Icon Styling */
.webdev-platform-icon {
  width: 54px;   
  height: 54px;  
  object-fit: contain;
  flex-shrink: 0; /* Prevents the logo from squeezing if space gets tight */
}

/* --- Mock Browser UI Window --- */
.browser-window {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
  background: #ffffff;
}

/* Browser Top Header Bar */
.browser-header {
  background-color: #f3f4f6;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #e5e7eb;
}

/* Colored Dots mimicking MacOS style */
.browser-header .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.browser-header .dot.red { background-color: #ff5f56; }
.browser-header .dot.yellow { background-color: #ffbd2e; }
.browser-header .dot.green { background-color: #27c93f; }

/* Mock Address Bar */
.browser-address-bar {
  background-color: #ffffff;
  color: #9ca3af;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  padding: 0.25rem 1rem;
  border-radius: 6px;
  margin-left: 1.5rem;
  flex-grow: 1;
  max-width: 70%;
  border: 1px solid #e5e7eb;
  text-align: left;
}

/* Scroll Viewport Container */
.browser-content {
  height: 420px; /* Fixed screen height showing on desktop */
  overflow: hidden;
  position: relative;
  background-color: #f9fafb;
}

/* Hover-to-scroll Screenshot Mechanism */
.scroll-screenshot {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  /* Smooth transition effect; adjusts duration (6s) if your page layout is extremely long */
  transition: transform 6s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateY(0);
}

/* Hover triggers the CSS shift to exactly bottom-out based on container size */
.browser-window:hover .scroll-screenshot {
  transform: translateY(calc(-100% + 420px));
}

/* Web Dev CTA Button */
.webdev-btn {
  display: block;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  color: #ffffff;
  background-color: #111111;
  border-radius: 8px;
  padding: 1rem 1.5rem;
  text-decoration: none;
  margin-top: 2rem; /* Generates breathing space between browser window and button */
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.webdev-btn:hover {
  background-color: #fd506c; /* Matches your brand highlight pink on hover */
}

/* Responsive Breakpoints */
@media (max-width: 992px) {
  .webdev-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .webdev-card {
    padding: 2rem;
  }
}

@media (max-width: 500px) {
  .browser-content {
    height: 300px; /* Shorter screen heights on small mobile layouts */
  }
  .browser-window:hover .scroll-screenshot {
    transform: translateY(calc(-100% + 300px)); /* Syncs calculations with mobile layout height */
  }
}

@media (max-width: 480px) {
  .webdev-card__info {
    flex-direction: column-reverse; /* Places the icon cleanly on top of text on small mobile devices */
    align-items: flex-start;
    gap: 1rem;
  }
}
/* ==================== ATHLETICS GREEK PORTFOLIO GALLERY ==================== */
.greek-portfolio {
  background-color: #ffffff;
  padding: 8rem 2rem;
  width: 100%;
  box-sizing: border-box;
}

.greek-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Gallery Header Styling */
.greek-gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 2.5rem;
}

.greek-title-area {
  flex: 1;
  min-width: 300px;
}

.greek-eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fd506c;
  display: block;
  margin-bottom: 0.75rem;
}

.greek-main-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 800;
  color: #000000;
  line-height: 1.1;
  margin: 0 0 1rem 0;
}

.greek-main-title .text-highlight {
  color: transparent;
  -webkit-text-stroke: 1px #000000;
}

.greek-subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(97, 97, 97, 0.946);
  max-width: 650px;
  margin: 0;
}

/* Interactive Sorting Filter Tabs */
.greek-filter-tabs {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.filter-tab {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 0.75rem 1.5rem;
  color: #000000;
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.filter-tab:hover,
.filter-tab.active {
  background-color: #fd506c;
  border-color: #fd506c;
  box-shadow: 0 8px 24px rgba(253, 80, 108, 0.25);
  transform: translateY(-2px);
}

/* 3-Column Equal Grid Structure */
.greek-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  min-height: 350px; /* Prevents visual jumping when loading columns */
}

/* Equal Aspect-Ratio Card Styling */
.greek-item {
  width: 100%;
}

.greek-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background-color: #16161a;
  border: 1px solid rgba(255, 255, 255, 0.05);
  aspect-ratio: 1 / 1; /* Forces perfect squares */
  cursor: pointer;
}

.greek-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hover Overlay */
.greek-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14, 14, 18, 0.9) 0%, rgba(14, 14, 18, 0.2) 60%, rgba(14, 14, 18, 0) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.greek-card:hover img {
  transform: scale(1.06);
}

.greek-card:hover .greek-card-overlay {
  opacity: 1;
  transform: translateY(0);
}

.asset-tag {
  background: rgba(253, 80, 108, 0.15);
  border: 1px solid rgba(253, 80, 108, 0.3);
  color: #fd506c;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  width: fit-content;
  margin-bottom: 0.75rem;
}

.greek-card-overlay h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #f2f1fc;
  margin: 0;
}

/* Responsive Grid Adjustments */
@media (max-width: 992px) {
  .greek-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 650px) {
  .greek-grid {
    grid-template-columns: 1fr;
  }
  .greek-gallery-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .greek-filter-tabs {
    width: 100%;
  }
}

/* ==================== ATHLETICS GREEK BRAND STORY SECTION ==================== */
.brand-story-section {
  background-color: #0b0b0e; /* Slightly darker than gallery for beautiful layering */
  padding: 8rem 2rem;
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.brand-story-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 4fr 8fr; /* 40% Text, 60% Wide Cinematic Image */
  gap: 4rem;
  align-items: center;
}

/* Info Column styling */
.brand-story-info {
  display: flex;
  flex-direction: column;
}

.story-eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fd506c; /* Match Brand Pink Accent */
  display: block;
  margin-bottom: 0.75rem;
}

.story-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  color: #f2f1fc;
  line-height: 1.2;
  margin: 0 0 1.5rem 0;
}

.story-title .story-highlight {
  color: transparent;
  -webkit-text-stroke: 1px #f2f1fc;
}

.story-desc {
  font-family: 'Poppins', sans-serif;
  font-size: 0.98rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 2.5rem 0;
}

/* Strategic Meta Layout */
.story-meta {
  display: flex;
  gap: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 2rem;
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.meta-label {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.meta-value {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #f2f1fc;
}

/* --- Immersive Image Viewport Frame --- */
.brand-story-showcase {
  width: 100%;
  min-width: 0;
}

.story-frame {
  position: relative;
  background-color: #16161a;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  min-width: 0;
}

.story-frame-header {
  position: relative;
  z-index: 3;
  background-color: #1a1a22;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.story-frame-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fd506c;
}

.story-frame-title {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.5px;
}

/* Stage = the area below the header that holds banner + cards + arrows */
.story-stage {
  position: relative;
  height: 480px;
  overflow: hidden;
}

.story-banner-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.story-banner-image {
  width: 100%;
  height: 100%;
  object-position: var(--banner-pos, left);
  display: block;
}

.story-image-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  height: 100%;
  padding: 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.story-image-wrapper::-webkit-scrollbar {
  display: none;
}

.story-card {
  height: 70%;
  width: 240px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
  scroll-snap-align: start;
}

/* Arrows now sit above BOTH the banner and the card strip */
.mock-swipe-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 42px;
  height: 42px;
  background-color: rgba(255, 255, 255, 0.9);
  color: #111111;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.mock-prev { left: 20px; }
.mock-next { right: 20px; }

.mock-swipe-btn:hover {
  background-color: #fd506c;
  color: #ffffff;
  transform: translateY(-50%) scale(1.1);
}

/* ==================== RESPONSIVE (mobile — matches Amazon's shrink behavior) ==================== */
@media (max-width: 992px) {
  .brand-story-container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .brand-story-info {
    text-align: center;
    align-items: center;
  }
  .story-meta {
    justify-content: center;
  }
  .story-stage { height: 340px; }
  .story-card { width: 190px; }
}

@media (max-width: 500px) {
  .story-stage { height: 240px; }
  .story-card { width: 140px; }
  .story-image-wrapper { padding: 14px; gap: 10px; }
  .mock-swipe-btn { width: 32px; height: 32px; }
  .mock-prev { left: 10px; }
  .mock-next { right: 10px; }
}



/* ==================== ATHLETICS GREEK EBC SCROLLER SECTION ==================== */
.ebc-scroller-section {
  background-color: #ffffff; /* Matches gallery background */
  padding: 8rem 2rem;
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.ebc-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 5fr 7fr; /* Balanced split for descriptive text and tall tablet */
  gap: 5rem;
  align-items: center;
}

/* EBC Info Area */
.ebc-info {
  display: flex;
  flex-direction: column;
}

.ebc-eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fd506c;
  display: block;
  margin-bottom: 0.75rem;
}

.ebc-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  color: #000000;
  line-height: 1.2;
  margin: 0 0 1.5rem 0;
}

.ebc-title .ebc-highlight {
  color: transparent;
  -webkit-text-stroke: 1px #000000;
}

.ebc-desc {
  font-family: 'Poppins', sans-serif;
  font-size: 0.98rem;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.65);
  margin: 0 0 2.5rem 0;
}

/* Checklist of elements */
.ebc-features-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ebc-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.feature-icon {
  color: #fd506c;
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1.4;
}

.ebc-features-list li strong {
  display: block;
  font-family: 'Poppins', sans-serif;
  color: #000000;
  font-size: 14.5px;
  margin-bottom: 0.25rem;
}

.ebc-features-list li div {
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  color: rgba(0, 0, 0, 0.5);
  line-height: 1.5;
}

/* --- Tablet Mockup Frame --- */
.ebc-visual-column {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.tablet-frame {
  width: 100%;
  height: 850px;
  max-width: 760px;
  background: #1c1c24;
  border: 12px solid #252530;
  border-radius: 36px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
  display: flex;          /* NEW */
  flex-direction: column; /* NEW */
}

.tablet-header {
  height: 24px;
  flex-shrink: 0;         /* NEW — keeps it from being squeezed by the viewport below */
  background-color: #1c1c24;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}


.tablet-camera {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #101015;
}

/* Tablet Interactive Content Screen */
.tablet-viewport {
  flex: 1;                /* NEW — replaces the fixed 520px, fills all remaining tablet height */
  overflow: hidden;
  background: #ffffff;
  position: relative;
}

/* Scroll Container Layer */
.ebc-scroll-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  animation: seamlessAutoScroll 28s linear infinite; /* Smooth continuous run rate */
}

.ebc-scroll-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Pause the scrolling animation on hover so details can be observed closely */
.tablet-viewport:hover .ebc-scroll-wrapper {
  animation-play-state: paused;
}

/* --- Seamless Endless Auto Scroll Animation --- */
@keyframes seamlessAutoScroll {
  0% {
    transform: translateY(0);
  }
  100% {
    /* Shifts exactly 50% down (the length of 1 whole image) and snaps cleanly */
    transform: translateY(-50%);
  }
}

/* ==================== RESPONSIVE BREAKPOINTS ==================== */
@media (max-width: 992px) {
  .ebc-container {
    grid-template-columns: 1fr; /* Single column flow for vertical stack */
    gap: 4rem;
  }
  
  .ebc-info {
    text-align: center;
    align-items: center;
  }

  .ebc-features-list {
    text-align: left;
    max-width: 600px;
  }
}

@media (max-width: 480px) {
  .tablet-frame {
    border-width: 8px;
    border-radius: 24px;
  }
  /* .tablet-viewport height rule removed — flex:1 already handles this at every size */
}

/* Ensure the showcase section expands to fill the screen */
.web-showcase {
  padding: 15rem 2rem;
  background: #0e0e11;
  color: white;
  width: 100%; /* Force full width */
  box-sizing: border-box;
}

.web-showcase-container {
  max-width: 1400px; /* Increased max width */
  margin: 0 auto;
}

/* Force the grid to respect the width and stack properly */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Explicitly create two equal columns */
  gap: 2rem;
  width: 100%;
}

/* Same grid system as .projects-grid, but 3 equal columns — used for
   showcase sections with 3 site cards (e.g. WordPress section). */
.projects-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  width: 100%;
}

/* Ensure the cards don't break the layout.
   position: relative here is what lets the button overlay the whole card. */
.web-card {
  background: #16161a;
  padding: 1.5rem;
  border-radius: 12px;
  min-width: 0; /* Important: prevents content from stretching the container */
  position: relative;
}

/* Ensure the scroll container stays within the card */
.scroll-container {
  height: 600px;
  overflow-y: auto;
  border: 2px solid #333;
  border-radius: 8px;
  position: relative;
}

.scroll-container img {
  width: 100%; /* Ensure the image fits inside the scroll container */
  height: auto;
  display: block;
}

/*
 * View Live Site button — sits in normal document flow BELOW the
 * scroll-container, never on top of the image. This means it never
 * intercepts scroll/mouse input over the screenshot, so the tablet
 * preview always scrolls freely. Always visible, no hover, no JS.
 */
.view-live-popup {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
}

.view-live-popup a {
  background: #ff4d4d;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 0.9rem 2rem;
  border-radius: 50px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.view-live-popup a:hover {
  background: #ff3333;
  transform: translateY(-2px);
}

/* ===== Mobile: collapse both grids to a single column, and shrink
   oversized desktop spacing/heights so cards fit comfortably ===== */
@media (max-width: 900px) {
  .projects-grid,
  .projects-grid-3 {
    grid-template-columns: 1fr;
  }

  .web-showcase {
    padding: 25rem 4rem;
    
  }

  .scroll-container {
    height: 420px;
  }
}

@media (max-width: 480px) {
  .web-showcase {
    padding: 10rem 1rem;
  }

  .scroll-container {
    height: 340px;
  }

  .web-card {
    padding: 1rem;
  }
}

.device-showcase-section{
  --dss-bg: #101615;
  --dss-purple: #5B35E8;
  --dss-purple-hover: #6B45F5;
  --dss-text-white: #F5F5F5;
  --dss-text-gray: #A8ADAC;
 
  position: relative;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-y: visible;
  background: var(--dss-bg);
  min-height: 900px;
  padding: 90px 0 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
 
.device-showcase-section *{
  box-sizing: border-box;
}
 
/* ---------- Top content ---------- */
.device-showcase-content{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
  position: relative;
  z-index: 2;
}
 
.device-showcase-heading{
  margin: 0;
  color: var(--dss-text-white);
  font-size: clamp(30px, 4.2vw, 54px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
 
.device-showcase-subtitle{
  margin: 10px 0 0;
  color: var(--dss-text-gray);
  font-size: clamp(16px, 1.8vw, 28px);
  font-weight: 400;
  line-height: 1.35;
}
 
.device-showcase-button{
  display: inline-block;
  margin: 28px auto 0;
  padding: 16px 28px;
  background: #ff4d4d;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  font-family: inherit;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: filter 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
 
.device-showcase-button:hover{
  filter: brightness(1.12);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px lab(#ff4d4d);
}
 
.device-showcase-button:active{
  transform: translateY(0);
}
 
/* ---------- Phone showcase ---------- */
.device-showcase{
  position: relative;
  width: 100%;
  max-width: 100vw;
  height: clamp(380px, 46vw, 520px);
  margin-top: 60px;
  overflow: hidden; /* extra safety: guarantees this block never pushes the page wider */
}
 
.phone-item{
  position: absolute;
  transform: translate(-50%, 24px);
  opacity: 0;
  animation: dss-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
 
@keyframes dss-rise{
  to{
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
 
/* Horizontal anchor points (percentage of full-bleed showcase width) */
.device-far-left    { left: 4%;  top: 100px; z-index: 1; animation-delay: 0.35s; }
.device-inner-left  { left: 25%; top: 50px;  z-index: 2; animation-delay: 0.2s;  }
.device-center      { left: 50%; top: 0;     z-index: 5; animation-delay: 0s;    }
.device-inner-right { left: 75%; top: 50px;  z-index: 2; animation-delay: 0.2s;  }
.device-far-right   { left: 96%; top: 100px; z-index: 1; animation-delay: 0.35s; }
 
/* keep translateX(-50%) baked into the rise animation via a wrapper trick:
   we already used translate(-50%, ...) above, so nothing else needed */
 
.device-far-left,
.device-far-right{ width: clamp(170px, 16vw, 300px); }
 
.device-inner-left,
.device-inner-right{ width: clamp(200px, 19vw, 330px); }
 
.device-center{ width: clamp(260px, 27vw, 440px); }
 
.device-center.dss-floating .phone-mockup-frame{
  animation: dss-float 6s ease-in-out infinite;
}
 
@keyframes dss-float{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
 
/* ---------- Phone mockup frame ---------- */
.phone-mockup-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19.3;
  background: #0c0c0c;
  border-radius: clamp(26px, 3vw, 46px);
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,0.06),
    0 30px 60px rgba(0,0,0,0.55),
    0 8px 20px rgba(0,0,0,0.4);
  overflow: hidden;
}
 
.device-center .phone-mockup-frame{
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,0.08),
    0 50px 90px rgba(0,0,0,0.65),
    0 16px 32px rgba(0,0,0,0.5);
}
 
.phone-mockup-frame img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: clamp(18px, 2.2vw, 36px);
}
 
.phone-mockup-island{
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  max-width: 120px;
  height: clamp(18px, 2vw, 28px);
  background: #050505;
  border-radius: 999px;
  z-index: 3;
}
 
/* ---------- Tablet ---------- */
@media (max-width: 1100px){
  .device-showcase-section{
    min-height: 660px;
    padding-top: 60px;
  }
  .device-showcase{
    height: clamp(320px, 50vw, 440px);
    margin-top: 40px;
  }
  .device-far-left    { left: -2%;  top: 84px; }
  .device-inner-left  { left: 22%;  top: 42px; }
  .device-inner-right { left: 78%;  top: 42px; }
  .device-far-right   { left: 102%; top: 84px; }
}
 
/* ---------- Mobile ---------- */
@media (max-width: 768px){
  .device-showcase-section{
    min-height: auto;
    padding: 60px 0 0;
  }
  .device-showcase-content{ padding: 0 20px; }
 
  .device-showcase{
    height: clamp(300px, 92vw, 400px);
    margin-top: 34px;
  }
 
  .device-center{ width: clamp(190px, 50vw, 260px); left: 50%; top: 0; z-index: 5; }
 
  .device-inner-left  { left: 6%;  top: 50px; width: clamp(130px, 30vw, 180px); z-index: 2; }
  .device-inner-right { left: 94%; top: 50px; width: clamp(130px, 30vw, 180px); z-index: 2; }
 
  /* Far phones hidden on small screens to avoid clutter / overflow */
  .device-far-left,
  .device-far-right{
    display: none;
  }
}
 
@media (prefers-reduced-motion: reduce){
  .phone-item{
    animation: none;
    opacity: 1;
    transform: translate(-50%, 0);
  }
  .device-center.dss-floating .phone-mockup-frame{
    animation: none;
  }
  .device-showcase-button{
    transition: none;
  }
}

.shop-growth-section{
  --sg-purple: #5935E8;
  --sg-bg: #F5F5F3;
  --sg-heading: #111111;
  --sg-body: #666666;
  /* Tune this if your site header still overlaps the heading on mobile —
     it only pads THIS section; it can't fix a header that uses
     position:fixed/sticky over the whole page (see note below the code). */
  --sg-mobile-header-offset: 90px;
 
  position: relative;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  background: var(--sg-bg);
  padding: 110px 24px 100px;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
 
.shop-growth-section *{
  box-sizing: border-box;
}
 
.shop-growth-section img{
  max-width: 100%;
  display: block;
}
 
/* ---------- Hero layout ---------- */
.shop-growth-hero{
  max-width: 1450px;
  margin: 0 auto;
  min-height: 600px;
  display: grid;
  grid-template-columns: 43% 57%;
  align-items: center;
  gap: 20px;
}
 
.shop-growth-left{
  position: relative;
  z-index: 2;
}
 
.shop-growth-heading{
  margin: 0;
  color: var(--sg-heading);
  font-weight: 400;
  font-size: clamp(38px, 4.8vw, 72px);
  line-height: 1.0;
  letter-spacing: -2.6px;
}
 
.shop-growth-description{
  margin: 22px 0 0;
  color: var(--sg-body);
  font-size: 17px;
  line-height: 1.45;
  font-weight: 400;
}
 
.shop-growth-cta{
  display: inline-block;
  margin-top: 26px;
  padding: 25px 20px 25px 25px;
  background: #ff4d4d;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
}
 
.shop-growth-cta:hover{
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 8px 20px #ff4d4d;
}
 
/* ---------- Right visual ---------- */
.shop-growth-visual{
  position: relative;
  width: 100%;
  height: 640px;
  margin-top: 40px;
  overflow: visible;
}
 
.shop-composition{
  position: relative;
  width: 1000px;
  max-width: none;
  height: 640px;
  margin-left: -70px; /* lets the bag/people bleed slightly toward the text column, matching reference */
  transform-origin: center top;
}
 
/* ---------- Main phone ---------- */
.shop-phone{
  position: absolute;
  left: 400px;
  top: 10px;
  width: 262px;
  z-index: 8;
  opacity: 0;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,0.20));
}
 
.shop-phone-frame{
  position: relative;
  width: 100%;
  height: 535px;
  background: #0c0c0c;
  border-radius: 42px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.08);
  overflow: hidden;
}
 
.shop-phone-screen{
  width: 100%;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: #3c4a3e;
  position: relative;
}
 
.shop-phone-screen-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity 0.9s ease;
}
 
.shop-phone-island{
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  max-width: 92px;
  height: 22px;
  background: #050505;
  border-radius: 999px;
  z-index: 3;
}
 
.shop-phone.sg-float{
  animation: sg-float-phone 6s ease-in-out infinite;
}
 
@keyframes sg-float-phone{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
 
/* ---------- Floating products ---------- */
.shop-product{
  position: absolute;
  opacity: 0;
  filter: drop-shadow(0 15px 18px rgba(0,0,0,0.15));
  cursor: pointer;
  transition: left 2.8s cubic-bezier(0.22,1,0.36,1), top 2.5s cubic-bezier(0.22,1,0.36,1), transform 0.3s ease;
}
 
.shop-product img{ width: 100%; }
 
.shop-product-handbag{ width: 235px; left: 40px;  top: 195px; z-index: 6; }
.shop-product-tumbler{ width: 135px; left: 690px; top: 185px; z-index: 7; }
.shop-product-red    { width: 100px; left: 760px; top: 10px;  z-index: 4; } /* moved closer to the phone */
.shop-product-shoe   { width: 320px; left: 580px; top: 425px; z-index: 9; }
 
.shop-product-handbag.sg-float{ animation: sg-float-bag 6.5s ease-in-out infinite; }
.shop-product-tumbler.sg-float{ animation: sg-float-tumbler 5s ease-in-out infinite; animation-delay: .2s; }
.shop-product-shoe.sg-float{ animation: sg-float-shoe 7s ease-in-out infinite; animation-delay: .1s; }
 
@keyframes sg-float-bag{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes sg-float-tumbler{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes sg-float-shoe{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
 
/* ---------- Hover interactions on products ---------- */
/* 1) hovering a single product makes it pulse and pop to the front */
.shop-product:hover{
  animation: sg-pulse 0.9s ease-in-out infinite;
  z-index: 20;
}
 
@keyframes sg-pulse{
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
 
/* 2) hovering the whole composition swaps bag / tumbler / shoe positions
      (cyclic swap), then they animate back on mouse-leave */
.shop-composition.sg-shuffled .shop-product-handbag{ left: 580px; top: 425px; } /* -> shoe's spot */
.shop-composition.sg-shuffled .shop-product-shoe{ left: 690px; top: 185px; }    /* -> tumbler's spot */
.shop-composition.sg-shuffled .shop-product-tumbler{ left: 40px; top: 195px; }  /* -> bag's spot */
 
/* ---------- Floating people (small silhouettes) ---------- */
.shop-person{
  position: absolute;
  width: 24px;
  opacity: 0;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.12));
}
.shop-person img{ width: 100%; }
 
.shop-person-1{ left: 10px;  top: 405px; width: 24px; z-index: 5; }
.shop-person-2{ left: 65px;  top: 425px; width: 22px; z-index: 5; }
.shop-person-3{ left: 100px; top: 430px; width: 24px; z-index: 5; }
.shop-person-4{ left: 205px; top: 355px; width: 22px; z-index: 8; }
.shop-person-5{ left: 350px; top: 390px; width: 22px; z-index: 4; }
.shop-person-6{ left: 730px; top: 130px; width: 24px; z-index: 7; }
.shop-person-7{ left: 605px; top: 465px; width: 24px; z-index: 10;}
 
/* ---------- Entrance animation states (added by JS on scroll-into-view) ---------- */
.shop-growth-visual.sg-in-view .shop-phone{ animation: sg-rise 0.85s cubic-bezier(0.22,1,0.36,1) 0s forwards; }
.shop-growth-visual.sg-in-view .shop-product{ animation: sg-pop 0.75s cubic-bezier(0.22,1,0.36,1) 0.2s forwards; }
.shop-growth-visual.sg-in-view .shop-person{ animation: sg-pop 0.7s cubic-bezier(0.22,1,0.36,1) 0.4s forwards; }
 
@keyframes sg-rise{
  from{ opacity: 0; transform: translateY(24px); }
  to  { opacity: 1; transform: translateY(0); }
}
@keyframes sg-pop{
  from{ opacity: 0; transform: scale(0.85); }
  to  { opacity: 1; transform: scale(1); }
}
 
/* ---------- Stats ---------- */
.shop-growth-stats{
  max-width: 1450px;
  margin: 90px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
 
.shop-stat-number{
  color: var(--sg-heading);
  font-size: clamp(44px, 5.4vw, 76px);
  font-weight: 400;
  letter-spacing: -1.5px;
  line-height: 1;
}
 
.shop-stat-divider{
  margin-top: 18px;
  height: 1px;
  background: #DDDBD3;
}
 
.shop-stat-title{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  color: var(--sg-heading);
  font-size: 18px;
  font-weight: 500;
}
 
.shop-stat-icon{
  width: 18px;
  height: 18px;
  color: var(--sg-heading);
  flex-shrink: 0;
}
 
.shop-stat-desc{
  margin: 10px 0 0;
  color: var(--sg-body);
  font-size: 15px;
  line-height: 1.45;
}
 
.shop-stat-link{
  color: var(--sg-body);
  text-decoration: underline;
}
 
/* ---------- Tablet ---------- */
@media (max-width: 1199px){
  .shop-growth-hero{
    grid-template-columns: 1fr;
    gap: 20px;
    min-height: 0;
  }
  .shop-growth-left{ text-align: left; }
  .shop-growth-heading{ font-size: clamp(40px, 6vw, 60px); }
  .shop-growth-visual{ height: 560px; margin-top: 20px; }
  .shop-composition{
    position: absolute;
    left: 50%;
    margin-left: 0;
    transform: translateX(-50%) scale(0.82);
  }
  .shop-growth-stats{ margin-top: 50px; }
}
 
@media (max-width: 900px){
  .shop-growth-stats{
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
 
/* ---------- Mobile ---------- */
/* Composition is centered (not left-shifted) and scaled down in steps so
   nothing bleeds past the edges and gets clipped, and extra top padding
   is added so the heading clears a typical mobile header height. */
@media (max-width: 768px){
  .shop-growth-section{
    padding: calc(var(--sg-mobile-header-offset) + 20px) 20px 70px;
  }
  .shop-growth-heading{ font-size: clamp(36px, 10vw, 50px); letter-spacing: -1.8px; }
  .shop-growth-description{ font-size: 15px; }
 
  .shop-growth-visual{
    height: 340px;
    overflow: hidden;
  }
  .shop-composition{
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: 0;
    transform: translateX(-50%) scale(0.5);
    transform-origin: center top;
  }
}
 
@media (max-width: 480px){
  .shop-growth-section{
    padding: calc(var(--sg-mobile-header-offset) + 30px) 16px 60px;
  }
  .shop-growth-visual{ height: 230px; }
  .shop-composition{ transform: translateX(-50%) scale(0.34); }
}
 
@media (prefers-reduced-motion: reduce) {
  .shop-phone, .shop-product, .shop-person {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.shop-growth-cta { 
  transition: none; 
}

/* =====================================================
     FIXED MARQUEE LAYER & WALLET HERO SECTION 
===================================================== */
.premium-features-hero {
  position: relative;
  width: 100%;
  background-color: #ffffff;
  padding: 60px 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-features-container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-graphic-wrap {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 260px;
}

/* Infinite Moving Marquee Layout Layer (LAYER 1 - SIT BEHIND) */
/* Infinite Moving Marquee Layout Layer (LAYER 1 - SIT BEHIND) */
.hero-watermark-text {
  position: absolute;
  top: 50%;
  left: 0;
  font-size: 11vw;
  font-weight: 900;
  color: #f4f4f6;
  white-space: nowrap;
  z-index: 1; 
  pointer-events: none;
  letter-spacing: -2px;
  display: flex;
  gap: 50px;
  width: max-content; /* FORCES TRACK TO EXPAND TO ITS NATURAL FULL WIDTH */
  animation: marqueeContinuous 25s linear infinite;
}

/* Foreground Wallet Image Layout (LAYER 2 - SIT IN FRONT) */
.hero-wallet-img {
    position: relative;
    z-index: 2;
    max-width: 180px;
    width: 100%;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
}

/* =====================================================
     THE INFINITE MARQUEE ANIMATION TIMELINE
===================================================== */
@keyframes marqueeContinuous {
  0% {
    transform: translate3d(0, -50%, 0);
  }
  100% {
    transform: translate3d(-50%, -50%, 0);
  }
}


/* =====================================================
   GLASSMORPHISM PACKAGES LAYOUT SYSTEM
===================================================== */
.premium-pricing-section {
  position: relative;
  width: 100%;
  background-color: #ffffff; /* Rich deep black dark-mode baseline background */
  padding: 10px 0 120px 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pricing-container {
  position: relative;
  width: 100%;
  max-width: 1140px; /* Wider footprint to allow two pricing columns side-by-side */
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
  z-index: 5;
}

/* Typography Header Adjustments */
.pricing-header-stack {
  text-align: center;
  margin-bottom: 60px;
}

.pricing-badge {
  display: inline-block;
  background: rgba(255, 77, 77, 0.1);
  color: #ff4d4d; /* Brand Accent Red */
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 6px 16px;
  border-radius: 30px;
  margin-bottom: 20px;
}

.pricing-main-title {
  font-family: 'Poppins', sans-serif;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.2;
  color: #000000; /* Sharp White text */
  margin: 0 0 16px 0;
}

.pricing-main-title span {
  color: #ff4d4d; /* Brand Accent Red */
}

.pricing-subtitle {
  font-size: 15px;
  color: rgba(0, 0, 0, 0.6); /* Soft Muted White text */
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Flexbox / Grid Split Configurations */
.glass-packages-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  align-items: stretch;
}

/* Core Glassmorphic Panel Element */
.glass-package-card {
  position: relative;
  background: rgba(255, 255, 255, 0.03); 
      border: 1px solid rgb(253 80 108 / 37%);
  border-radius: 24px;
  padding: 45px 40px;
  box-sizing: border-box;
  
  /* Frosted blur background backdrop rule filters */
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.glass-package-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Premium Highlighted Card Configuration Variant */
.glass-package-card.tier-premium-accent {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 77, 77, 0.3); /* Premium accent border tint */
  box-shadow: 0 10px 30px rgba(255, 77, 77, 0.04);
}

.glass-package-card.tier-premium-accent:hover {
  border-color: #ff4d4d; /* Bright neon flash on active cards hover state */
  box-shadow: 0 25px 50px rgba(255, 77, 77, 0.15);
}

/* Card Badge Overlays */
.card-popular-ribbon {
  position: absolute;
  top: 24px;
  right: 28px;
  background: #fd506c;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 5px 14px;
  border-radius: 30px;
}

/* Inside Header Layout Specs */
.package-header {
  margin-bottom: 35px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 25px;
}

.package-tier-title {
  font-size: 22px;
  font-weight: 700;
  color: #000000;
  margin: 0 0 12px 0;
}

.package-price-wrap {
  display: flex;
  align-items: baseline;
  color: #000000;
  margin-bottom: 12px;
}

.package-price-wrap .currency {
  font-size: 24px;
  font-weight: 600;
  color: #ff4d4d;
  margin-right: 2px;
}

.package-price-wrap .amount {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
}

.package-price-wrap .period {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
  margin-left: 6px;
}

.package-tagline {
  font-size: 14px;
  color: rgb(0, 0, 0);
  margin: 0;
  line-height: 1.4;
}

/* Feature Row Elements Layout Blocks */
.package-features-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 40px;
  flex-grow: 1;
}

.pkg-feature-item {
  display: flex;
  align-items: center;
}

.pkg-icon-dot {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #020202;
  flex-shrink: 0;
  margin-right: 16px;
}

.circle-blue { background: #2563eb; }
.circle-pink { background: #db2777; }
.circle-green { background: #059669; }
.circle-purple { background: #7c3aed; }

.pkg-feat-meta {
  flex-grow: 1;
}

.pkg-feat-meta h4 {
  font-size: 14.5px;
  font-weight: 600;
  color: #000000;
  margin: 0 0 3px 0;
}

.pkg-feat-meta span {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

.pkg-save-tag {
  font-size: 11px;
  font-weight: 700;
  color: #ff4d4d;
  background: rgba(255, 77, 77, 0.08);
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
}

/* Call to Action Buttons Interfaces */
.package-action-btn {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgb(253, 80, 108);
  color: #000000;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 15px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.package-action-btn:hover {
    background: #fd506c;
    color: #ffffff;
    border-color: #ff4d4d;
}

.package-action-btn.btn-accent-filled {
  background: #fd506c;
  border-color: #fd506c;
  color: #fffefe;
}

.package-action-btn.btn-accent-filled:hover {
  background: #ffffff;
  border-color: #e03b3b;
  color: #000000;
  transform: translateY(-1px);
}

/* Styling for the extra descriptions inside the card */
.pkg-extra-desc {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.5;
  margin: 8px 0 0 0;
}

/* Increased text size for the "Save $99/yr" block at the bottom */
.pkg-price-large-save {
  font-size: 28px;
  font-weight: 800;
  color: #ff4d4d;
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: -0.5px;
}

/* Adjusting the grid to fit 4 cards side-by-side on desktop layouts */
@media (min-width: 992px) {
  .glass-packages-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}

/* Adaptive Breakpoint Tuning Media Rules */
@media (max-width: 991px) {
  .glass-packages-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
@media (max-width: 580px) {
  .pricing-main-title { font-size: 30px; }
  .glass-package-card { padding: 30px 24px; }
  .pkg-feature-item { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pkg-icon-dot { margin-right: 0; }
  .pkg-save-tag { align-self: flex-start; }
}