/*Note: The biggest plan used to be called Studio but is now called Elite*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800;900&display=swap');

h1, h2, h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-style: normal;
}

/* Base styles */

:root {
    --bg: #faf8f6;
    --bg-alt: #ffffff;
    --card-bg: #ffffff;
  
    --accent: #c89e8a;
    --accent-strong: #b47b68;
    --accent-soft: rgba(200, 158, 138, 0.14);
  
    --text-main: #2a2623;
    --text-muted: #7a746f;
  
    --border-subtle: #e5ddd7;

    --spheres-parallax-x: 0px;
    --spheres-parallax-y: 0px;
  }
  
  html,
  body {
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      sans-serif;
    background-color: var(--bg);
    color: var(--text-main);
  }


  
/* ===== NAV BAR ===== */

.nav {
  display: flex;
  align-items: center;
  gap: 1.9rem;
  font-size: 0.95rem;
}

/* base nav link */
.nav-link {
  position: relative;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0.4rem;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 0.16s ease;
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--text-main);
}

/* underline animation (single definition) */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0%;
  bottom: -5.5px;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--accent-strong);
  transition: width 0.18s ease;
}

.nav-link.active {
  color: var(--text-main);
  font-weight: 500 !important;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* Navigation styles moved to header.css */

/* Hide mobile-only founder link on desktop */
.mobile-founder-link {
  display: none;
}

/* Mobile founder link animations - defined here for reliable loading */
@-webkit-keyframes founder-shine {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

@keyframes founder-shine {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

@-webkit-keyframes founder-fade-in {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes founder-fade-in {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ============================
   MEGA PANEL BASE STYLES
   ============================ */

.nav-item.nav-has-panel.is-open .nav-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-panel {
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  width: 100%;
  transform: translateY(-10px);
  border-radius: 0 0 1.3rem 1.3rem;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 35px 70px rgba(15, 23, 42, 0.14);
  padding: 1.75rem 0 0.8rem 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.2s ease 0.04s,
    transform 0.2s ease 0.04s,
    visibility 0.18s ease;
  z-index: 1000;
}

.nav-panel-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 2.2rem;
}

.nav-panel-column--wide {
  padding-right: 2.4rem;
  border-right: 1px solid rgba(15, 23, 42, 0.04);
  margin-right: 0.4rem;
}

.platform-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 2rem;
  margin-top: 0.6rem;
}

.nav-panel-column--wide .nav-panel-links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.nav-panel-column--wide .nav-panel-links li {
  padding-bottom: 0.5rem;
}

.nav-panel-column--wide .nav-panel-links a {
  padding: 0.6rem 0.4rem 0.65rem 0.4rem;
  border-radius: 0.75rem;
}

.nav-panel-column--wide .nav-panel-link-desc {
  font-size: 0.76rem;
  line-height: 1.35;
}

.nav-panel-overview-link {
  display: inline-block;
  margin-top: 1.1rem;
  font-size: 0.75rem;
  text-decoration: none;
  color: var(--text-muted);
}

.nav-panel-overview-link:hover {
  color: var(--text-main);
}

.nav-panel-eyebrow {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.35rem;
  color: var(--text-muted);
}

.nav-panel-heading {
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
  color: var(--text-main);
  font-weight: 800;
}

.nav-panel-links {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.nav-panel-links a {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  text-decoration: none;
  border-radius: 0.7rem;
  padding: 0.55rem 0.6rem;
  color: var(--text-main);
  transition: background 0.18s ease, transform 0.18s ease;
}

.nav-panel-links a:hover {
  background: rgba(200, 158, 138, 0.09);
  transform: translateX(2px);
}

.nav-panel-link-icon {
  flex: 0 0 20px;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.9;
  margin-top: 2px;
  margin-right: 8px;
}

.nav-panel-link-icon i {
  width: 18px;
  height: 18px;
  stroke-width: 1.6;
  color: #7a6a63;
}

.nav-panel-link-text {
  display: block;
}

.nav-panel-link-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-main) !important;
}

.nav-panel-link-desc {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.nav-panel-column:nth-child(1) .nav-panel-links a:hover {
  background: rgba(180, 123, 104, 0.10);
}

.nav-panel-column:nth-child(2) .nav-panel-links a:hover {
  background: rgba(45, 94, 243, 0.1);
}

.nav-panel-column:nth-child(3) .nav-panel-links a:hover {
  background: rgba(219, 91, 91, 0.1);
}

.nav-item.nav-has-panel:hover .nav-link::after {
  width: 100%;
}












  /* Header */
  
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-subtle);
  }
  
  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0;
    position: relative;
  }
  
  .logo {
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 0.05em;
  }
  
  .nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 1rem; /* increased from 0.95 / 0.9 */
  }
  
  
  
  .nav a:not(.login-btn) {
  text-decoration: none;
  color: var(--text-muted);
  transition: color 0.15s ease;
  font-weight: 500;
}
  
  .nav a:hover {
    color: var(--accent-strong);
  }


  /* Hide mobile menu brand on desktop */
.mobile-menu-brand {
  display: none;
}


  .brand {
    display: flex;
    align-items: center;
    gap: 0.85rem; /* a bit more room between logo and text */
  }
  
  .logo-mark {
    width: 36px;
    height: 36px;
    display: block;
    border-radius: 8px; /* keeps that soft-square feel */
  }
  
  .brand-text {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;    /* more vertical space between the two lines */
    line-height: 1.1;
  }
  
  .brand-name {
    font-family: "Playfair Display", serif;
    letter-spacing: 0.2em;  /* more character spacing */
    font-size: 1.25rem;
    font-weight: 600;
  }
  
  .brand-tagline {
    font-family: Inter, system-ui, sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.25em; /* wide, airy subtitle */
    color: var(--text-muted);
  }







  
  
  
  /* Layout helpers */
  
  .container {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1.5rem;
  }
  
  .section {
    padding: 2rem 0;
  }
  
  .section-alt {
    background-color: #f5eee9;
  }
  
  .section-header {
    text-align: center;
    margin-bottom: 2.5rem;
  }
  
  .section-header h2 {
    font-size: 2.5rem;   /* who is gadura font size and above and below widths*/
    margin-bottom: 0.5rem;
    margin-top: 1rem;    
  }
  
  .section-header p {
    margin: 0;
    color: var(--text-muted);
  }
  
  .section-dark {
    background-color: #000000;    /* near-black */
    color: #ffffff;
  }

  /* Bigger headline inside the Unlimited/plans section only */
  #plans .section-header h2 {
    font-size: 2.4rem;
  }


/* ----- Dark section (softer charcoal instead of pure black) ----- */

.section-dark {
    /* softer black / charcoal background */
    background: linear-gradient(
      180deg,
      #1b1c21 0%,
      #141417 100%
    );
    padding-top: 1rem;
    padding-bottom: 5rem;
    color: #f7f5f2;
    overflow-x: hidden;  /* prevents 100vw slider from causing horizontal gap */
  }
  
  .section-dark p,
  .section-dark h2,
  .section-dark h3 {
    color: #ffffff;
  }
  
  /* cards / items sitting on the dark background */
  .section-dark .card,
  .section-dark .feature-item,
  .section-dark .faq-item {
    background-color: #222328;                        /* lighter than the bg */
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.55);
  }
  
  .section-dark .card h3 {
    color: #ffffff;
  }
  
  .section-dark .card p,
  .section-dark .card li {
    color: rgba(255, 255, 255, 0.9);
  }
  
  /* Buttons inside dark sections */
  
  .section-dark .btn.primary-btn {
    background: #ffffff;
    color: #1b1c21;
    box-shadow: none;
  }
  
  .section-dark .btn.primary-btn:hover {
    background: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
  }
  
  .section-dark .btn.secondary-btn {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.4);
  }
  
  .section-dark .btn.secondary-btn:hover {
    border-color: #ffffff;
  }
  
  


  
  
  


  /* Hero */
  
  .hero {
    padding: 8rem 0 8rem;      /* Change width of hero here*/
  }
  
  .hero-inner {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .hero-text {
    max-width: 1000px;
    text-align: center;
  }
  
  .hero h1 {
    font-size: clamp(6rem, 4vw, 4rem);  /*Change home page hero text size*/
    margin-bottom: 1rem;
  }
  
  .hero p {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-bottom: 2.75rem;   /* change space between hero caption and buttons*/
  }
  
  .hero-actions {
    margin: 1.5rem 0 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
  
  .hero-subtext {
    font-size: 3rem;
  }

  
  
  /* Buttons */
  
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.6rem;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease,
      border-color 0.12s ease;
  }
  
  .btn:active {
    transform: translateY(1px) scale(0.99);
  }
  
  .primary-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(180, 123, 104, 0.35);
  }
  
  .primary-btn:hover {
    box-shadow: 0 14px 35px rgba(180, 123, 104, 0.45);
  }
  
  .secondary-btn {
    background-color: #ffffff;
    color: var(--accent-strong);
    border-color: var(--border-subtle);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.04);
  }
  
  .secondary-btn:hover {
    border-color: var(--accent-strong);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  }
  
  .ghost-btn {
    background-color: transparent;
    color: var(--text-main);
    border-color: var(--border-subtle);
  }
  
  .ghost-btn:hover {
    border-color: var(--accent);
  }

  
  
  /* Gadura is for You , Who is Gadura for , Create, thrive, impact*/
.highlight-word {
  background: linear-gradient(
    90deg,
    #f8b595,
    #c9a083,
    #a67c52,
    #c9a083,
    #f8b595
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 3.5s ease-in-out infinite;
}


  
  /* Grid */
  
  .grid {
    display: grid;
    gap: 1.5rem;
  }
  
  .three-col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  .four-col {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  
  /* Cards & lists */
  
  .card {
    background-color: var(--card-bg);
    border-radius: 1.25rem;
    padding: 1.75rem 1.5rem;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.05);
  }
  
  .card h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.2rem;
  }
  
  .card p {
    margin: 0.25rem 0 0.75rem;
    color: var(--text-muted);
  }
  
  .list {
    padding-left: 1.25rem;
    margin: 0;
    list-style-type: disc;
    color: var(--text-muted);
    font-size: 0.95rem;
  }
  
  .list li + li {
    margin-top: 0.3rem;
  }


/* Profession Slider */

.profession-slider {
  position: relative;
  overflow: hidden;

  /* 👇 full-width bleed, even inside a centered container */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  margin-top: 1rem;
  margin-bottom: -2rem;

  padding: 1.2rem 0 1.6rem;

  border-top: none;
  border-bottom: none;

  background: radial-gradient(circle at center,
    rgba(200, 158, 138, 0.16),
    #1b1c21 40%);
}

/* make sure tracks sit *under* the fades */
.profession-track {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
  white-space: nowrap;
  min-width: 100%;
  z-index: 1;    
}

/* fade overlays on top, both sides */
.profession-slider::before,
.profession-slider::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  pointer-events: none;
  z-index: 2;
}

.profession-slider::before {
  left: 0;
  background: linear-gradient(to right, #1b1c21, transparent);
}

.profession-slider::after {
  right: 0;
  background: linear-gradient(to left, #1b1c21, transparent);
}

/* little pill tags */
.profession-track span {
  display: inline-block;
  padding: 0.45rem 1.2rem;
  border-radius: 999px;

  border: 1px solid rgba(200, 158, 138, 0.75);
  background: rgba(27, 28, 33, 0.7);
  color: #fdf6f2;

  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;

  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  transition: transform 0.18s ease, 
              box-shadow 0.18s ease,
              background 0.18s ease,
              border-color 0.18s ease;
}

/* tiny extra gap at loop join */
.profession-track span:last-child {
  margin-right: 2.2rem;
}

/* CHANGED: Use class instead of :hover for dynamic highlighting */
.profession-track span.profession-hover {
  transform: translateY(-2px);
  background: rgba(200, 158, 138, 0.2);
  border-color: rgba(200, 158, 138, 1);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6);
}

/* animations – slow & smooth */
.profession-track:nth-child(1) {
  animation: professions-scroll-1 40s linear infinite;
}

.profession-track:nth-child(2) {
  animation: professions-scroll-2 40s linear infinite;
}

@keyframes professions-scroll-1 {
  0%   { transform: translate(0, -50%); }
  100% { transform: translate(-100%, -50%); }
}

@keyframes professions-scroll-2 {
  0%   { transform: translate(100%, -50%); }
  100% { transform: translate(0, -50%); }
}





@keyframes gradient-shift {
  0% {
    background-position: 0% center;
  }
  50% {
    background-position: 100% center;
  }
  100% {
    background-position: 0% center;
  }
}
  
  
  /* Plans (membership cards) */
  
  .plans-grid {
    align-items: stretch;
    gap: 2rem;
  }
  
  .plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 2rem 1.75rem;
  }
  
  .plan-card h3 {
    margin-bottom: 0.25rem;
  }
  
  .plan-tagline {
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
    color: var(--text-muted);
  }
  
  .plan-price {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0.75rem 0 1.25rem;
  }
  
  .plan-price span {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--text-muted);
  }
  
  .plan-card .list {
    margin-top: 0.25rem;
    margin-bottom: 1.75rem;
  }
  
  .plan-card .btn {
    margin-top: auto;
    align-self: flex-start;
    min-width: 9rem;     /* keeps them from looking too tiny */
  }  
  
  /* Extra breathing room for the featured plan */
.plan-card-featured {
    border: 2px solid var(--accent-strong);
    box-shadow: 0 26px 55px rgba(180, 123, 104, 0.25);
    background: linear-gradient(180deg, #ffffff, #faf3ef);
    padding-top: 2.6rem;  
  }
  
  
  /* Badge on featured plan */
  
  .badge {
    position: absolute;
    top: 0.9rem;          /* was 1.1rem – bring it up a bit */
    left: 1.75rem;
    background-color: var(--accent-strong);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
  }
  
  
  /* Buttons inside plan cards */
  
  .plan-card .secondary-btn {
    background-color: #ffffff;
    color: var(--accent-strong);
    border-color: var(--border-subtle);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.04);
  }
  
  .plan-card .secondary-btn:hover {
    border-color: var(--accent-strong);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
  }
  
  .plan-card-featured .primary-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    box-shadow: 0 14px 32px rgba(180, 123, 104, 0.35);
  }
  
  .plans-note {
    margin-top: 1.75rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }









/* =============================================
   GADURA - PLATFORM SHOWCASE STYLES
   Enhanced with Animations & Interactivity
   
   ADD THIS TO YOUR styles.css FILE
   ============================================= */

/* =============================================
   SECTION CONTAINER
   ============================================= */

.platform-showcase {
  position: relative;
  padding: 7rem 0 8rem;
  background: linear-gradient(180deg, #f5eee9 0%, #faf8f6 40%, #f5f0eb 100%);
  overflow: hidden;
}

.platform-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  z-index: 2;
}

/* =============================================
   AMBIENT BACKGROUND
   ============================================= */

.platform-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.platform-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.5;
}

.platform-orb--1 {
  width: 600px;
  height: 600px;
  top: -15%;
  right: -10%;
  background: radial-gradient(circle, rgba(200, 158, 138, 0.45), transparent 70%);
  animation: platformFloat 30s ease-in-out infinite;
}

.platform-orb--2 {
  width: 500px;
  height: 500px;
  bottom: 10%;
  left: -15%;
  background: radial-gradient(circle, rgba(180, 123, 104, 0.35), transparent 70%);
  animation: platformFloat 25s ease-in-out infinite reverse;
}

.platform-orb--3 {
  width: 400px;
  height: 400px;
  top: 50%;
  left: 30%;
  background: radial-gradient(circle, rgba(220, 190, 170, 0.3), transparent 70%);
  animation: platformFloat 20s ease-in-out infinite 5s;
}

@keyframes platformFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.05); }
  66% { transform: translate(-30px, 20px) scale(0.95); }
}

/* =============================================
   SCROLL ANIMATIONS
   ============================================= */

[data-animate] {
  opacity: 0;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

[data-animate="fade-up"] {
  transform: translateY(30px);
}

[data-animate="fade-up"].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Ensure platform cards animate properly */
.platform-card[data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.platform-card[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays for grid items */
[data-animate][data-delay="100"] { transition-delay: 0.1s; }
[data-animate][data-delay="200"] { transition-delay: 0.2s; }
[data-animate][data-delay="300"] { transition-delay: 0.3s; }

/* =============================================
   HEADER
   ============================================= */

.platform-header {
  text-align: center;
  margin-bottom: 4rem;
}

.platform-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-strong, #b47b68);
  background: rgba(200, 158, 138, 0.15);
  padding: 0.6rem 1.5rem;
  border-radius: 2rem;
  margin-bottom: 1.25rem;
}

.platform-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2.5rem, 5.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.12;
  color: var(--text-main, #2a2623);
  margin: 0 0 1.25rem;
  letter-spacing: -0.025em;
}

.platform-subtitle {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--text-muted, #7a746f);
  max-width: 560px;
  margin: 0 auto;
}

/* =============================================
   GRID LAYOUT
   ============================================= */

.platform-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.platform-card--studios { grid-column: 1; grid-row: 1; }
.platform-card--spheres { grid-column: 2; grid-row: 1; }
.platform-card--websites { grid-column: 1 / 3; grid-row: 2; }
.platform-card--journal { grid-column: 1; grid-row: 3; }
.platform-card--email { grid-column: 2; grid-row: 3; }
.platform-card--checkout { grid-column: 1; grid-row: 4; }
.platform-card--funnels { grid-column: 2; grid-row: 4; }

/* =============================================
   CARD BASE STYLES + 3D TILT
   ============================================= */

.platform-card {
  position: relative;
  display: block;
  border-radius: 1.5rem;
  overflow: hidden;
  text-decoration: none;
  background: #1a1a1a;
  min-height: 420px;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.1),
    0 12px 40px rgba(0, 0, 0, 0.08);
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.platform-card.is-visible {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}

.platform-card:hover {
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.2),
    0 15px 30px rgba(0, 0, 0, 0.12);
}

/* 3D Tilt will be applied via JS - this ensures smooth transitions */
.platform-card[data-tilt] {
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
}

.platform-card--studios,
.platform-card--spheres {
  min-height: 460px;
}

.platform-card--websites {
  min-height: 440px;
}

.platform-card--journal,
.platform-card--email,
.platform-card--checkout,
.platform-card--funnels {
  min-height: 400px;
}

/* =============================================
   CARD IMAGE
   ============================================= */

.platform-card__image {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.platform-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.7s ease;
}

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

.platform-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.65) 40%,
    rgba(0, 0, 0, 0.25) 70%,
    rgba(0, 0, 0, 0.1) 100%
  );
}

.platform-card__overlay--darker {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.7) 45%,
    rgba(0, 0, 0, 0.35) 100%
  );
}

/* =============================================
   CARD CONTENT
   ============================================= */

.platform-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  z-index: 10;
  transform: translateZ(30px);
}

.platform-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(200, 158, 138, 0.2);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  margin-bottom: 1rem;
  color: var(--accent, #c89e8a);
}

.platform-card__icon svg {
  width: 22px;
  height: 22px;
}

.platform-card__kicker {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent, #c89e8a);
  margin-bottom: 0.5rem;
}

.platform-card__title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.6rem;
  line-height: 1.2;
}

.platform-card__desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 1rem;
  max-width: 420px;
}

.platform-card__features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.platform-card__features span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
}

.platform-card__features svg {
  width: 14px;
  height: 14px;
  color: #22c55e;
}

.platform-card--websites .platform-card__desc {
  max-width: 600px;
}

/* =============================================
   ARROW BUTTON
   ============================================= */

.platform-card__arrow {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  color: #fff;
  opacity: 0;
  transform: translateX(-10px) translateZ(40px);
  transition: all 0.4s ease;
  z-index: 11;
}

.platform-card:hover .platform-card__arrow {
  opacity: 1;
  transform: translateX(0) translateZ(40px);
}

.platform-card__arrow svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.platform-card:hover .platform-card__arrow svg {
  transform: translateX(3px);
}

/* =============================================
   FLOATING UI ELEMENTS - With Parallax
   ============================================= */

.platform-card__ui {
  position: absolute;
  z-index: 5;
  transition: transform 0.3s ease, opacity 0.4s ease;
  transform: translateZ(50px);
}

.platform-card:hover .platform-card__ui {
  transform: translateZ(60px);
}

/* =============================================
   STUDIOS UI ELEMENTS
   ============================================= */

.platform-card__ui--progress {
  top: 1.25rem;
  left: 1.25rem;
}

.ui-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.ui-progress__ring {
  position: relative;
  width: 40px;
  height: 40px;
}

.ui-progress__ring svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.ui-progress__bg {
  fill: none;
  stroke: #e8e8e8;
  stroke-width: 3;
}

.ui-progress__fill {
  fill: none;
  stroke: var(--accent-strong, #b47b68);
  stroke-width: 3;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.ui-progress__fill.is-animated {
  stroke-dashoffset: 33;
}

.ui-progress__ring span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.6rem;
  font-weight: 800;
  color: var(--text-main);
}

.ui-progress__text {
  display: flex;
  flex-direction: column;
}

.ui-progress__label {
  font-size: 0.55rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ui-progress__detail {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-main);
}

/* Certificate Badge */
.platform-card__ui--certificate {
  top: 8.25rem;
  right: 1.25rem;
}

.ui-certificate {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  font-size: 0.7rem;
  font-weight: 700;
  color: #92400e;
  animation: floatBadge 3s ease-in-out infinite;
}

.ui-certificate svg {
  width: 14px;
  height: 14px;
}

@keyframes floatBadge {
  0%, 100% { transform: translateY(0) translateZ(50px); }
  50% { transform: translateY(-5px) translateZ(55px); }
}

/* =============================================
   SPHERES UI ELEMENTS
   ============================================= */

.platform-card__ui--members {
  top: 1.25rem;
  left: 1.25rem;
}

.ui-members {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.ui-members__avatars {
  display: flex;
  align-items: center;
}

.ui-members__avatars img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
  margin-left: -8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
  background: #ddd;
}

.ui-members__avatars img:first-child {
  margin-left: 0;
}

.ui-members__more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: -8px;
  background: var(--accent);
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 0.5rem;
  font-weight: 700;
  color: #fff;
}

.ui-members__text {
  display: flex;
  flex-direction: column;
}

.ui-members__label {
  font-size: 0.55rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ui-members__count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-main);
}

/* Online Badge */
.platform-card__ui--online {
  top: 16.25rem;
  right: 1.25rem;
}

.ui-online {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  background: rgba(34, 197, 94, 0.95);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.25);
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
}

.ui-online__dot {
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  animation: onlinePulse 2s ease-in-out infinite;
}

@keyframes onlinePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

/* Activity Ticker */
.platform-card__ui--activity-ticker {
  top: 1.25rem;
  right: 1.25rem;
}

.ui-activity-ticker {
  position: relative;
  min-width: 200px;
  height: 40px;
  overflow: hidden;
}

.ui-activity-ticker__item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  font-size: 0.7rem;
  color: var(--text-main);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease;
}

.ui-activity-ticker__item.is-active {
  opacity: 1;
  transform: translateY(0);
}

.ui-activity-ticker__item.is-exiting {
  opacity: 0;
  transform: translateY(-10px);
}

.ui-activity-ticker__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  background: #ddd;
}

.ui-activity-ticker__item strong {
  font-weight: 700;
}

/* =============================================
   WEBSITES UI ELEMENTS
   ============================================= */

.platform-card__ui--page-types {
  top: 1.25rem;
  left: 1.25rem;
  display: flex;
  gap: 8px;
}

.ui-page-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-main);
  animation: floatBadge 3s ease-in-out infinite;
}

.ui-page-pill--1 { animation-delay: 0s; }
.ui-page-pill--2 { animation-delay: 0.3s; }
.ui-page-pill--3 { animation-delay: 0.6s; }

.ui-page-pill svg {
  width: 14px;
  height: 14px;
  color: var(--accent-strong);
}

/* Domain Badge */
.platform-card__ui--domain {
  top: 1.25rem;
  right: 1.25rem;
}

.ui-domain {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-main);
}

.ui-domain svg {
  width: 14px;
  height: 14px;
  color: var(--accent-strong);
}

.ui-domain__status {
  padding: 2px 6px;
  background: #22c55e;
  border-radius: 4px;
  font-size: 0.55rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
}

/* =============================================
   JOURNAL UI ELEMENTS
   ============================================= */

.platform-card__ui--posts {
  top: 1.25rem;
  left: 1.25rem;
}

.ui-posts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  max-width: 260px;
}

.ui-posts__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #f8f8f8;
  border-radius: 8px;
}

.ui-posts__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  flex-shrink: 0;
}

.ui-posts__thumb--blog {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #fff;
}

.ui-posts__thumb--podcast {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
}

.ui-posts__thumb svg {
  width: 14px;
  height: 14px;
}

.ui-posts__info {
  flex: 1;
  min-width: 0;
}

.ui-posts__type {
  display: block;
  font-size: 0.5rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ui-posts__title {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* RSS Badge */
.platform-card__ui--rss {
  top: 1.25rem;
  right: 1.25rem;
}

.ui-rss {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  font-size: 0.7rem;
  font-weight: 700;
  color: #f97316;
}

.ui-rss svg {
  width: 14px;
  height: 14px;
}

/* =============================================
   EMAIL STUDIO UI ELEMENTS
   ============================================= */

.platform-card__ui--email-stats {
  top: 5rem;
  left: 1.9rem;
}

.ui-email-stats {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  min-width: 200px;
}

.ui-email-stats__header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #eee;
}

.ui-email-stats__header svg {
  width: 14px;
  height: 14px;
  color: var(--accent-strong);
}

.ui-email-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.ui-email-stats__item {
  text-align: center;
}

.ui-email-stats__value {
  display: block;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-main);
}

.ui-email-stats__item--highlight .ui-email-stats__value {
  color: var(--accent-strong);
}

.ui-email-stats__label {
  display: block;
  font-size: 0.5rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Sequence */
.platform-card__ui--sequence {
  top: 1.25rem;
  right: 1.25rem;
}

.ui-sequence {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.ui-sequence__badge {
  display: inline-block;
  font-size: 0.55rem;
  font-weight: 700;
  color: #22c55e;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.ui-sequence__flow {
  display: flex;
  align-items: center;
  gap: 3px;
}

.ui-sequence__step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #f0f0f0;
  border-radius: 50%;
  color: #999;
}

.ui-sequence__step svg {
  width: 12px;
  height: 12px;
}

.ui-sequence__step--done {
  background: #22c55e;
  color: #fff;
}

.ui-sequence__step--active {
  background: var(--accent-strong);
  color: #fff;
  animation: stepPulse 2s ease-in-out infinite;
}

@keyframes stepPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(180, 123, 104, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(180, 123, 104, 0); }
}

.ui-sequence__line {
  width: 12px;
  height: 2px;
  background: #22c55e;
}

.ui-sequence__line--pending {
  background: #e0e0e0;
}

/* =============================================
   CHECKOUT UI ELEMENTS
   ============================================= */

.platform-card__ui--payment {
  top: 1.25rem;
  left: 1.25rem;
}

.ui-payment {
  padding: 12px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  width: 180px;
}

.ui-payment__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.ui-payment__name {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-main);
}

.ui-payment__price {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-main);
}

.ui-payment__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 95%;
  padding: 8px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
}

.ui-payment__btn svg {
  width: 12px;
  height: 12px;
}

/* Sale Ticker */
.platform-card__ui--sale-ticker {
  top: 1.25rem;
  right: 1.25rem;
}

.ui-sale-ticker {
  position: relative;
}

.ui-sale {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.3);
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  animation: salePop 4s ease-in-out infinite;
}

@keyframes salePop {
  0%, 100% { transform: scale(1) translateZ(50px); opacity: 1; }
  10% { transform: scale(1.1) translateZ(55px); }
  20%, 80% { transform: scale(1) translateZ(50px); opacity: 1; }
  90% { transform: scale(0.95) translateZ(50px); opacity: 0.8; }
}

.ui-sale svg {
  width: 14px;
  height: 14px;
}

/* =============================================
   FUNNELS UI ELEMENTS
   ============================================= */

.platform-card__ui--funnel {
  top: 1.25rem;
  left: 1.25rem;
}

.ui-funnel {
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.ui-funnel__header {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 10px;
}

.ui-funnel__flow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.ui-funnel__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 10px;
  background: #f5f5f5;
  border-radius: 8px;
}

.ui-funnel__step span {
  font-size: 0.5rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ui-funnel__step b {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-main);
}

.ui-funnel__step--highlight {
  background: var(--accent);
}

.ui-funnel__step--highlight span,
.ui-funnel__step--highlight b {
  color: #fff;
}

.ui-funnel__arrow {
  color: #ccc;
}

.ui-funnel__arrow svg {
  width: 14px;
  height: 14px;
}

.ui-funnel__rate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid #eee;
}

.ui-funnel__rate span {
  font-size: 0.6rem;
  color: var(--text-muted);
}

.ui-funnel__rate b {
  font-size: 0.85rem;
  font-weight: 800;
  color: #22c55e;
}

/* =============================================
   BOTTOM CTA
   ============================================= */

.platform-cta {
  text-align: center;
  margin-top: 4rem;
}

.platform-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 2.5rem;
  background: linear-gradient(135deg, var(--accent, #c89e8a), var(--accent-strong, #b47b68));
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 60px;
  box-shadow: 0 6px 24px rgba(180, 123, 104, 0.4);
  transition: all 0.3s ease;
}

.platform-cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 36px rgba(180, 123, 104, 0.5);
}

.platform-cta-btn svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.platform-cta-btn:hover svg {
  transform: translateX(4px);
}

.platform-cta-note {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* =============================================
   RESPONSIVE - TABLET
   ============================================= */

@media (max-width: 900px) {
  .platform-showcase { padding: 5rem 0 6rem; }
  
  .platform-card { min-height: 380px; }
  .platform-card--studios, .platform-card--spheres { min-height: 420px; }
  .platform-card--websites { min-height: 400px; }
  
  .platform-card__ui--page-types {
    flex-wrap: wrap;
    max-width: 220px;
  }
  
  /* Disable tilt on tablet */
  .platform-card[data-tilt] {
    transform: none !important;
  }
}

/* =============================================
   RESPONSIVE - MOBILE
   ============================================= */

@media (max-width: 700px) {
  .platform-showcase { padding: 4rem 0 5rem; }
  .platform-header { margin-bottom: 3rem; }
  
  .platform-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  
  .platform-card--studios,
  .platform-card--spheres,
  .platform-card--websites,
  .platform-card--journal,
  .platform-card--email,
  .platform-card--checkout,
  .platform-card--funnels {
    grid-column: 1;
    grid-row: auto;
  }
  
  .platform-card { min-height: 340px; border-radius: 1.25rem; }
  .platform-card--studios, .platform-card--spheres { min-height: 380px; }
  .platform-card--websites { min-height: 340px; }
  
  .platform-card__content { padding: 1.5rem; }
  .platform-card__title { font-size: 1.4rem; }
  .platform-card__desc { font-size: 0.85rem; }
  .platform-card__features { display: none; }
  
  /* Arrows - Move to top right on mobile */
  .platform-card__arrow {
    top: 1.25rem;
    bottom: auto;
    right: 1.25rem;
    opacity: 0.4;
    transform: translateX(0);
    width: 38px;
    height: 38px;
  }
  
  .platform-card:hover .platform-card__arrow {
    opacity: 0.6;
  }
  
  .platform-card__arrow svg {
    width: 16px;
    height: 16px;
  }
  
  /* Hide complex UI on mobile */
  .platform-card__ui--page-types,
  .platform-card__ui--sequence,
  .platform-card__ui--activity-ticker {
    display: none;
  }
  
  /* Disable tilt on mobile */
  .platform-card[data-tilt] {
    transform: none !important;
  }
  
  .platform-cta-btn { width: 100%; justify-content: center; }
}

/* =============================================
   REDUCED MOTION
   ============================================= */

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  
  .platform-card,
  .platform-card__image img,
  .platform-card__ui,
  .platform-card__arrow,
  .platform-orb,
  .ui-progress__fill,
  .ui-online__dot,
  .ui-sequence__step--active,
  .ui-certificate,
  .ui-sale,
  .ui-page-pill {
    animation: none !important;
    transition: none !important;
  }
  
  .platform-card[data-tilt] {
    transform: none !important;
  }
}








/* ===== Unlimited section – big & bold ===== */

.unlimited-word {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.unlimited-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
  margin-bottom: 1.9rem;
}

.unlimited-card {
  position: relative;
  border-radius: 1.4rem;
  padding: 1.4rem 1.3rem 1.5rem;
  background: linear-gradient(180deg, #ffffff, #faf8f6);
  border: 1px solid rgba(180, 123, 104, 0.16);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transform: translateY(0);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease;
}

/* subtle “light sweep” accent */
.unlimited-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left,
    rgba(200, 158, 138, 0.22),
    transparent 55%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.unlimited-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.08);
  border-color: rgba(180, 123, 104, 0.4);
  background: linear-gradient(180deg, #ffffff, #f5ebe5);
}

.unlimited-card:hover::before {
  opacity: 1;
}

.unlimited-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.6rem;

  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: 0 10px 24px rgba(180, 123, 104, 0.45);
}

.unlimited-card h3 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
}

.unlimited-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.plans-bridge {
  margin: 0 0 1.8rem;
  font-size: 0.92rem;
  color: var(--text-muted);
  text-align: center;
}

/* small helper for notes already used elsewhere */
.muted-note {
  font-size: 0.85em;
  opacity: 0.9;
}



/* ===== Scaling dial heading ===== */

.plan-scale-heading {
  text-align: left;
  margin-bottom: 1rem;
}

.plan-scale-heading h3 {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
}

.plan-scale-heading p {
  margin: 0 0 1.1rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* ===== LIGHT MODE NOT IN USE SCROLL DOWN: Dial + metrics (you may already have this – if so, keep only one copy) ===== */

.plan-stage-toggle {
  display: inline-flex;
  gap: 0.5rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.03);
  margin: 0 0 1.4rem;
}

.plan-stage-btn {
  border: none;
  background: transparent;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-muted);
  transition:
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.1s ease;
}

.plan-stage-btn.is-active {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(180, 123, 104, 0.35);
  transform: translateY(-1px);
}

.plan-stage-btn:not(.is-active):hover {
  color: var(--text-main);
}

.plans-top-cta {
  margin-top: 1.25rem;
}

.plans-secondary-btn {
  padding-inline: 1.8rem;
}


/* Metrics card */

.plan-metrics-card {
  border-radius: 1.6rem;
  padding: 1.6rem 1.7rem 1.9rem;
  background: linear-gradient(180deg, #ffffff, #faf3ef);
  border: 1px solid rgba(180, 123, 104, 0.18);
  box-shadow:
    0 26px 55px rgba(180, 123, 104, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.7);
  margin-bottom: 2rem;
}

.plan-metrics-header {
  margin-bottom: 1.1rem;
}

.plan-metrics-label {
  margin: 0 0 0.15rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-muted);
}

.plan-metrics-tagline {
  margin: 0;
  font-size: 0.98rem;
  color: var(--text-main);
}

.plan-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.25rem;
  margin-bottom: 0.9rem;
}


.plan-metric {
  padding: 0.85rem 0.9rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(180, 123, 104, 0.16);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.03);
}

.metric-label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.metric-value {
  font-size: 1.3rem;
  font-weight: 600;
}

.plan-metrics-note {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* CTA */

.plan-cta-center {
  margin-top: 1.4rem;
  text-align: center;
}









/* =============================================
   PLAN CAPACITY SECTION - DARK THEME
   ============================================= */

#plan-capacity {
  background: 
    radial-gradient(ellipse at 30% 50%, rgba(54, 42, 36, 0.5) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 50%, rgba(54, 42, 36, 0.5) 0%, transparent 50%),
    #17181c;
  background-size: 200% 200%, 200% 200%, 100% 100%;
  animation: aurora1 2s ease-in-out infinite, aurora2 3s ease-in-out infinite reverse;
}

@keyframes aurora1 {
  0%, 100% { background-position: 0% 50%, 100% 50%, 0% 0%; }
  25% { background-position: 50% 0%, 50% 100%, 0% 0%; }
  50% { background-position: 100% 50%, 0% 50%, 0% 0%; }
  75% { background-position: 50% 100%, 50% 0%, 0% 0%; }
}

@keyframes aurora2 {
  0%, 100% { background-position: 100% 0%, 0% 100%, 0% 0%; }
  50% { background-position: 0% 100%, 100% 0%, 0% 0%; }
}

#plan-capacity .section-header h2 {
  color: #fff;
}

#plan-capacity .section-header p {
  color: rgba(255, 255, 255, 0.7);
}

/* Toggle buttons on dark */
#plan-capacity .plan-stage-toggle {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: inline-flex;
  justify-content: center;
  margin: 0 auto 1.4rem;
}

#plan-capacity .plan-stage-btn {
  color: rgba(255, 255, 255, 0.6);
}

#plan-capacity .plan-stage-btn:not(.is-active):hover {
  color: #fff;
}

#plan-capacity .plan-stage-btn.is-active {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #fff;
}

/* Metrics card on dark */
#plan-capacity .plan-metrics-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 26px 55px rgba(0, 0, 0, 0.3);
}

#plan-capacity .plan-metrics-label {
  color: var(--accent);
}

#plan-capacity .plan-metrics-tagline {
  color: rgba(255, 255, 255, 0.8);
}

/* Metric boxes on dark */
#plan-capacity .plan-metric {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

#plan-capacity .metric-label {
  color: rgba(255, 255, 255, 0.5);
}

#plan-capacity .metric-value {
  color: #fff;
}

#plan-capacity .plan-metrics-note {
  color: rgba(255, 255, 255, 0.5);
}

/* CTA button on dark */
#plan-capacity .primary-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #fff;
}










  
  /* Features */

.feature-item {
  padding: 1.5rem 1.25rem;
  border-radius: 1.25rem;
  border: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, #ffffff, #faf8f6);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.06);
}

.feature-item h3 {
  margin-top: 0;
  font-size: 1rem;
  color: #2a2623;
}

.feature-item p {
  margin: 0.5rem 0 0;
  color: #7a746f;
  font-size: 0.95rem;
}

/* ===== Features: left nav + big screen ===== */

.features-layout {
  display: grid;
  grid-template-columns: minmax(210px, 240px) minmax(0, 1fr);
  gap: 2.75rem;
  align-items: start;
}

/* Left column – feature tabs */

.features-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  height: 680px; /* Increased */
}

.feature-tab {
  width: 100%;
  text-align: left;
  padding: 0.9rem 1.1rem;
  border-radius: 1.1rem;
  border: 1px solid rgba(180, 123, 104, 0.16);
  background: #ffffff;
  cursor: pointer;
  flex: 1; /* Each tab takes equal space */

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;

  font-family: inherit;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.1s ease;
}

.feature-tab-kicker {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}

.feature-tab-title {
  font-size: 0.95rem;
  font-weight: 600;
}

.feature-tab-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.feature-tab.is-active {
  border-color: var(--accent-strong);
  background: linear-gradient(135deg, #ffffff, #faf3ef);
  box-shadow: 0 14px 32px rgba(180, 123, 104, 0.18);
  transform: translateY(-1px);
}

.feature-tab:not(.is-active):hover {
  border-color: rgba(180, 123, 104, 0.5);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

/* Right column – screen + copy */

.feature-display {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  height: 680px;
  padding-bottom: 2rem; /* Add padding instead of overflow hidden */
}

/* Screen frame wrapper for swipe + dots */
.screen-frame-wrapper {
  position: relative;
  flex-shrink: 0;
  flex-grow: 0;
}

/* fixed ratio so the window height doesn't jump between images */
.screen-frame {
  width: 100%;
  max-width: none;
  aspect-ratio: 16 / 10;
  min-height: 420px; /* Slightly reduced to fit better */

  border-radius: 1.8rem;
  overflow: hidden;

  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow:
    0 36px 80px rgba(15, 23, 42, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.8);
  
  cursor: grab;
  user-select: none;
}
.screen-frame:active {
  cursor: grabbing;
}

.screen-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none; /* Prevent image from interfering with swipe */
}

/* Desktop dots - under the screen */
.features-desktop-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.features-desktop-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(200, 158, 138, 0.3);
  transition: all 0.3s ease;
  cursor: pointer;
}

.features-desktop-dots .dot.active {
  background: var(--accent-strong);
  width: 24px;
  border-radius: 4px;
}

.features-desktop-dots .dot:hover:not(.active) {
  background: rgba(200, 158, 138, 0.5);
}

.feature-copy {
  max-width: 100%;
  min-height: 100px;
}

.feature-eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}

.feature-copy h3 {
  margin: 0 0 0.4rem;
  font-size: 1.35rem;
}

.feature-copy p {
  margin: 0;
  color: var(--text-muted);
}

.feature-cta-btn {
  margin-top: 1.25rem;
}







  
  /* Final CTA */
  
  .final-cta {
  text-align: center;
  padding: 5rem 0;
  background: #faf8f6;
  border-top: 3px solid var(--accent-strong);
  border-bottom: 3px solid var(--accent-strong);
}

.final-cta::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(180, 123, 104, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.final-cta .container {
  position: relative;
  z-index: 1;
}

.final-cta h2 {
  margin: 0 0 1rem;
  font-size: 2.2rem;
  font-weight: 800;
}

.final-cta p {
  margin: 0 auto 2rem;
  color: var(--text-muted);
  max-width: 500px;
  font-size: 1.05rem;
  line-height: 1.6;
}

.final-cta .primary-btn {
  padding: 1rem 2.5rem;
  font-size: 1rem;
  box-shadow: 0 10px 30px rgba(180, 123, 104, 0.3);
  transition: all 0.3s ease;
}

.final-cta .primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(180, 123, 104, 0.4);
}
  


  
  













 /* -------- PRICING PAGE -------- */

/* Hero */

.pricing-hero {
  padding-top: 4rem;
  padding-bottom: 2rem;   /*gap between plan cards and hero*/ 
}

.pricing-hero-inner {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.pricing-hero-copy {
  flex: 1.6;
  min-width: 280px;
  max-width: 640px;
}

.pricing-hero h1 {
  font-size: clamp(2.1rem, 4vw, 2.8rem);
  margin-bottom: 0.75rem;
}

.pricing-hero-sub {
  margin: 0 0 0.6rem;
  color: var(--text-muted);
}

/* Reusable highlight accent */
.highlight {
  color: #b36b4c;          /* a touch deeper than your accent */
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* currently removed from html – “Plans from $79/month” line */
.pricing-starting {
  margin: 0.75rem 0 1.25rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.pricing-starting span {
  font-weight: 600;
  color: var(--accent-strong);
}

.pricing-hero-note {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.pricing-hero-actions {
  margin: 1.7rem 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* === Billing area: pill toggle + checklist === */

.billing-toggle-card {
  flex: 1;
  min-width: 260px;
  max-width: 360px;

  /* no big card anymore */
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;

  /* pushes toggle + note downward while list stays high */
  min-height: 240px;
}

/* Toggle row */

.billing-switch-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 8rem;   /* or use 'auto' if you want it as low as possible */
  /* margin-top: auto;  // try this if you want it glued to the bottom */
}

/* Copy on the left of the pill */

.billing-switch-text {
  text-align: right;
}

.billing-switch-title {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-main);
}

.billing-switch-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* The pill switch itself */

.billing-switch {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  border: none;
  padding: 0;
  cursor: pointer;

  background: #ddd6d0;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);

  display: inline-flex;
  align-items: center;

  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.billing-switch-knob {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #ffffff;

  left: 3px;
  transform: translateX(0);
  transition: transform 0.2s ease;
}

/* ON state */

.billing-switch.is-on {
  background: #c89e8a;
  box-shadow: 0 10px 20px rgba(200, 158, 138, 0.65);
}

.billing-switch.is-on .billing-switch-knob {
  transform: translateX(18px);
}


.billing-toggle-note {
  font-size: 0.8rem;     /* smaller */
  color: var(--text-muted);
  margin-top: 0.35rem;
}



/* Plan cards – upgraded */

.pricing-plans {
  padding-top: 2.2rem;
}

.pricing-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.9rem;
  margin-top: -4.5rem;
}

/* Base card for all three plans */

.pricing-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  padding: 2.1rem 1.9rem 2rem;
  border-radius: 1.5rem;

  background: #ffffff;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.03);

  transform: translateY(0);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.pricing-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.06);
  border-color: rgba(180, 123, 104, 0.32);
}

/* Typography inside cards */

.pricing-plan-card h2 {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
}

.pricing-plan-tagline {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.pricing-price {
  margin: 0.45rem 0 0.12rem;
  font-size: 2.5rem;
  font-weight: 600;
}

.pricing-price .currency {
  font-size: 1.5rem;
  vertical-align: top;
  margin-right: 0.1rem;
}

.pricing-price .billing-suffix {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 0.25rem;
}

.pricing-billing-copy {
  margin: 0 0 1.25rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.price-strikethrough {
  text-decoration: line-through;
  opacity: 0.6;
  color: #d64545;
}

/* --- Feature list with icons inside pricing cards --- */

.pricing-plan-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.7rem;
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.55;        /* more breathing room */
  flex: 1; /* This pushes everything below to the bottom */
  margin-bottom: 0;
}

.pricing-plan-list li {
  display: flex;
  align-items: center;
  margin-top: 0.65rem;      /* was 0.35–0.45 */
  gap: 0.75rem;
}


/* little circular icon container */

/* --- Feature icons: bigger & clearer --- */

.plan-feature-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--accent-strong);
}

.plan-feature-icon svg {
  width: 22px;
  height: 22px;
}

/* text block next to icon */

.plan-feature-text {
  flex: 1;
}

/* Dark-card tweak so icons work on Pro too */

.pricing-plan-featured .plan-feature-icon {
  background: transparent;   /* no glow/bubble */
  box-shadow: none;
  color: #ffffff;   
}


/* Button */

.pricing-cta {
  margin-top: auto;
  align-self: flex-start;
  min-width: 9rem;
}


/* Starter – softer, friendlier base */

.pricing-plan-card.starter-soft {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #fbf9f7 95%,
    #f5f2ef 100%
  );
    box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.06),    /* soft outer */
    inset 0 0 0 1px rgba(190, 150, 128, 0.35); /* fake border */
}



/* Featured Pro plan — dark premium look */

.pricing-plan-featured {
  border: 1px solid rgba(200, 158, 138, 0.75);   /* thin brown border */
  
  background: linear-gradient(
  180deg,
  #18191c 0%,
  #0f1012 45%,
  #2d211b 100%
  );
  color: #f6f5f3;

  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.06),    /* soft outer */
    inset 0 0 0 1px rgba(190, 150, 128, 0.35); /* fake border */

  padding-top: 2.6rem;
  transform: translateY(-6px);
  border-radius: 1rem;

  position: relative;
}

.pricing-plan-featured::after {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -1;

  border-radius: 1.8rem;
  background: radial-gradient(
    50% 60% at center,
    rgba(180, 123, 104, 0.18),
    transparent 70%
  );
}

.pricing-plan-featured:hover {
  transform: translateY(-10px);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Text colors inside the dark Pro card */

.pricing-plan-featured h2,
.pricing-plan-featured p,
.pricing-plan-featured li,
.pricing-plan-featured .pricing-billing-copy {
  color: rgba(255, 255, 255, 0.92);
}

.pricing-plan-featured .pricing-price .billing-suffix {
  color: rgba(255, 255, 255, 0.7);
}


/* Badge at the top of Pro */

.pricing-plan-featured .badge {
  position: absolute;
  top: 0.9rem;
  right: 1.9rem;      /* move it to the right */
  left: auto;         /* cancel the old positioning */

  background: linear-gradient(135deg, #dca68e, #c57e63);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.7);

  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;

  padding: 0.28rem 0.95rem;
  border-radius: 999px;
}


/* Slightly stronger headline & price on Pro */

.pricing-plan-featured h2 {
  font-size: 1.3rem;
}

.pricing-plan-featured .pricing-price {
  font-size: 2.2rem;
}

/* Make the Pro CTA feel like the primary action */

.pricing-plan-featured .pricing-cta {
  background: #ffffff;
  color: #0d0d0f;
  border: none;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

.pricing-plan-featured .pricing-cta:hover {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: none;
}


/* Studio (now Elite) – soft rose-gold highlight */

.pricing-plan-card.elite-highlight {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #faf7f4 60%,
    #f3ebe6 72%,
    #e9d9d2 100%
  );

  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.06),    /* soft outer */
    inset 0 0 0 1px rgba(190, 150, 128, 0.35); /* fake border */
}

.pricing-plan-card.elite-highlight::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  /* soft inner shine */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}



.pricing-plan-card.elite-highlight .pricing-plan-list li,
.pricing-plan-card.elite-highlight .pricing-plan-tagline {
  color: #493b35;   /* deeper coffee brown */
}

.pricing-plan-card.elite-highlight .pricing-price {
  color: #2b2320;   /* strong headline */
}

.pricing-plan-card.elite-highlight .plan-feature-icon {
  color: #b06e53;   /* subtle rose, not neon pink */
}


.pricing-plan-card.elite-highlight:hover {
  transform: translateY(-6px);              /* Pro is higher */
  box-shadow: 0 28px 70px rgba(193, 125, 100, 0.26);
}

.pricing-plan-card.elite-highlight .pricing-cta {
  background: linear-gradient(135deg, #dca68e, #c57e63);
  color: #ffffff;
  border: none;
}

.pricing-plan-card.elite-highlight .pricing-cta:hover {
  filter: brightness(1.03);
}

/* +more features*/
.more-features {
  display: block;
  margin-top: 1rem;
  margin-bottom: 2rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.more-features:hover {
  text-decoration: underline;
}

/* White text for Pro plan */
.pricing-plan-featured .more-features {
  color: rgba(255, 255, 255, 0.7);
}

.pricing-plan-featured .more-features:hover {
  color: rgba(255, 255, 255, 0.9);
}



/* Included on every plan (now uses the value strip) */

.pricing-included {
  margin-top: 2.4rem;
}

.pricing-included-inner h3 {
  text-align: center;
  margin: 0 0 1.6rem;
  font-size: 1.4rem;
}

/* Premium value list */

.pricing-value-strip {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.6rem;
  row-gap: 0.6rem;
  font-size: 0.9rem;
}

.pricing-value-item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.value-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(180, 123, 104, 0.08);
  color: var(--accent-strong);
  margin-top: 0.1rem;
}

.pricing-value-item span:last-child {
  color: var(--text-muted);
}

.annual-callout {
  grid-column: 1 / -1;      /* span across all grid columns */
  justify-self: center;     /* center the paragraph inside the grid */
  text-align: center;
  max-width: 36rem;
  margin: 0.2rem 1rem 0;
  margin-top: 2rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}


/* Pricing hero eyebrow */

.pricing-eyebrow {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  margin-bottom: -1rem;
}

/* Refine spacing */

.pricing-hero-sub {
  margin-bottom: 1.1rem;
}

.pricing-hero-note {
  margin-top: 0.75rem;
}







/* Comparison table container - desktop styles.css*/ 
.comparison-table-wrap {
  margin-top: 4rem;
  margin-bottom: 4rem;
  border-radius: 0 0 16px 16px; /* ⬅️ only bottom corners rounded */
  background: #ffffff;
  box-shadow: 
    0 1px 2px rgba(42, 38, 35, 0.08),
    0 8px 24px rgba(42, 38, 35, 0.12);
  overflow: visible;
  border: 1px solid var(--text-main);
  position: relative;
}


/* Base table */
.comparison-table {
  width: 100%;
  border-collapse: separate; /* was collapse */
  border-spacing: 0;         /* keep grid tight */
  font-size: 1.08rem;
  line-height: 1.7;
  position: relative;
}

/* Sticky header container */
.comparison-table thead {
  position: sticky;
  top: 65px;
  z-index: 10;
}


/* Header row - bold dark header */
.comparison-table thead th {
  background: var(--text-main);
  padding: 1.75rem 2rem;
  text-align: center;
  font-weight: 700;
  color: #ffffff;
  border: none;
  border-bottom: 3px solid var(--accent-strong);
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  vertical-align: middle;
}


/* Rounded bottom corners on last row */
.comparison-table tbody tr:last-child th[scope="row"] {
  border-bottom-left-radius: 16px;
}

.comparison-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 16px;
}

/* When header is at end of table, round its bottom corners */
.comparison-table thead.at-table-end th:first-child {
  border-bottom-left-radius: 16px;
}

.comparison-table thead.at-table-end th:last-child {
  border-bottom-right-radius: 16px;
}

/* Gap under last row of table */
.comparison-table tbody tr:last-child th,
.comparison-table tbody tr:last-child td {
  padding-bottom: 1.5rem;
}


.comparison-table thead th.feature-col {
  text-align: left;
  background: var(--text-main);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  font-weight: 600;
  padding-left: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Plan header content wrapper */
.plan-header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
}

.plan-name {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: block;
  color: #ffffff;
}

/* Plan header content wrapper */
.plan-header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.plan-name {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: block;
  color: #ffffff;
}

/* Plan header button - base styles */
.plan-header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.5rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
  min-width: 150px;
  position: relative;
}

.plan-header-btn:hover {
  transform: translateY(-3px);
}

/* Starter button - elegant cream with shine */
.plan-btn-starter {
  background: linear-gradient(165deg, #ffffff 0%, #f9f6f3 50%, #f0ebe6 100%);
  color: var(--text-main);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(190, 150, 128, 0.25);
}

.plan-btn-starter:hover {
  box-shadow: 
    0 8px 20px rgba(0, 0, 0, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 0 0 1px rgba(190, 150, 128, 0.4);
}

/* Pro button - deep luxurious dark */
.plan-btn-pro {
  background: linear-gradient(165deg, #2a2725 0%, #1a1816 50%, #252018 100%);
  color: #f6f5f3;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(200, 158, 138, 0.3);
}

.plan-btn-pro:hover {
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(200, 158, 138, 0.5);
}

/* Elite button - rich rose-gold shimmer */
.plan-btn-elite {
  background: linear-gradient(165deg, #e8d5cc 0%, #d4b5a8 40%, #c9a090 70%, #bf8c7a 100%);
  color: #3d2c25;
  box-shadow: 
    0 4px 12px rgba(180, 123, 104, 0.25),
    0 1px 3px rgba(180, 123, 104, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 0 0 1px rgba(180, 123, 104, 0.2);
}

.plan-btn-elite:hover {
  box-shadow: 
    0 8px 25px rgba(180, 123, 104, 0.35),
    0 2px 6px rgba(180, 123, 104, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px rgba(180, 123, 104, 0.3);
}

/* Subgroup headers */
.comparison-subgroup {
  border: none !important;
}

.comparison-subgroup td {
  padding: 3rem 2rem 0.2rem 2rem !important;  /*gap between subheadings and subsubheadings*/
  font-size: 0.85rem !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #b47b68 !important;
  background: #ffffff !important;
  border: none !important;
  text-align: center;
}

/* No hover on subgroup rows */
.comparison-table tbody tr.comparison-subgroup:hover td {
  background: #ffffff !important;
}

/* First subgroup after main group - less top padding */
.comparison-group + .comparison-subgroup td {
  padding-top: 1.5rem !important; /*gap between subheadings and first row subsubheadings only*/
}

/* Body cells */
.comparison-table tbody th[scope="row"] {
  padding: 1.25rem 2rem;
  text-align: left;
  font-weight: 500;
  font-size: 1.1rem;     /*change font size of first column*/
  color: var(--text-main);
  border-bottom: 1px solid rgba(42, 38, 35, 0.1);
  background: #ffffff;
}

.comparison-table tbody td {
  padding: 1.25rem 2rem;
  text-align: center;
  font-size: 1.1rem; /*change font size of other columns excet groups and subgroups headers*/
  font-weight: 350;
  border-bottom: 1px solid rgba(42, 38, 35, 0.1);
  background: #ffffff;
  color: var(--text-main);
}

/* Keep group and subgroup headers bold */
.comparison-table tbody tr.comparison-group td,
.comparison-table tbody tr.comparison-subgroup td {
  font-weight: 500 !important;
}

/* Main group headers (Build & Engage, Selling & Checkout, etc.) */
.comparison-group {
  border-bottom: none !important;
}

.comparison-group td {
  position: sticky;
  top: 225px;  /*remember to go to json section of pricing to change this value*/
  z-index: 9;
  padding: 1.25rem 2rem;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-main);
  background: rgba(245, 238, 233, 1) !important;
  border: none !important;
  text-align: center;
  box-shadow: 0 2px 0 0 var(--accent), 0 -2px 0 0 var(--accent);
  transition: opacity 0.2s ease, transform 0.2s ease;
  will-change: transform;
}

.comparison-group.is-hidden td {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

/* When sticky is disabled, turn off all sticky positioning */
.comparison-table-wrap.sticky-disabled .comparison-table thead {
  position: relative;
  top: auto;
}

.comparison-table-wrap.sticky-disabled .comparison-group td {
  position: relative;
  top: auto;
}

/* First group header - no top border gap */
.comparison-table tbody tr.comparison-group:first-child td {
  border-top: none !important;
}


/* Remove gap between thead and first row */
.comparison-table tbody {
  border-top: none;
}

.comparison-table thead th {
  border-bottom: none;
}

.comparison-table tbody tr:first-child td {
  border-top: none !important;
}

/* Check / cross icons */
.icon-check,
.icon-cross {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Check - brown accent */
.icon-check {
  background: rgba(180, 123, 104, 0.15);
  color: var(--accent-strong);
}

/* Cross - neutral grey */
.icon-cross {
  background: rgba(42, 38, 35, 0.05);
  color: rgba(42, 38, 35, 0.25);
  font-size: 0.85rem;
}

/* Footnote */
.comparison-footnote {
  margin-top: 2rem;
  padding-bottom: 0rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* Row hover */
.comparison-table tbody tr:not(.comparison-group):hover th,
.comparison-table tbody tr:not(.comparison-group):hover td {
  background: rgba(200, 158, 138, 0.08);
  transition: background 0.15s ease;
}


/* Zero fee indicator */
.zero-fee {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--text-main);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(42, 38, 35, 0.2);
  letter-spacing: 0.05em;
}










/* What Gadura Replaces Section */
.section-replaces {
  padding: 5rem 0;
  background: linear-gradient(180deg, #faf8f6 0%, #ffffff 100%);
}

.replaces-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem;
}

.replaces-eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 0.8rem;
}

.replaces-header h2 {
  font-size: 2.4rem;
  margin-bottom: 1rem;
  font-weight: 700;
  color: var(--text-main);
}

.replaces-subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Replaces Grid */
.replaces-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 4rem;
}

.replaces-category {
  background: #ffffff;
  border-radius: 1rem;
  padding: 2rem;
  border: 1px solid rgba(200, 158, 138, 0.15);
  box-shadow: 0 4px 12px rgba(42, 38, 35, 0.04);
  transition: all 0.3s ease;
}

.replaces-category:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(42, 38, 35, 0.1);
}

.replaces-category-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid rgba(200, 158, 138, 0.15);
  text-align: center;
}

.replaces-category-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-main);
  margin: 0;
}

.replaces-tools {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.tool-logo {
  padding: 0.7rem 1rem;
  background: rgba(200, 158, 138, 0.06);
  border-radius: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-main);
  text-align: center;
  transition: all 0.2s ease;
}

.tool-logo:hover {
  background: rgba(200, 158, 138, 0.12);
}

/* Footer */
.replaces-footer {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(200, 158, 138, 0.15);
}

.replaces-footer p {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}












/* Not Sure section*/
/* Help & Quiz Section - Dark Theme */
.section-help-dark {
  background: linear-gradient(180deg, #1b1c21 0%, #141417 100%);
  padding: 1.5rem 0;
  color: #ffffff;
}

.help-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.section-help-dark h2 {
  font-size: 2.2rem;
  margin-bottom: 1rem;
  color: #ffffff;
  font-weight: 600;
  line-height: 1.3;
}

.section-help-dark p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 2.5rem;
  line-height: 1.6;
}

/* Help action buttons */
.help-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.help-btn-outline {
  padding: 0.9rem 2rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.help-btn-outline:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.help-btn-primary {
  padding: 0.9rem 2rem;
  border: none;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(180, 123, 104, 0.3);
}

.help-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(180, 123, 104, 0.4);
  filter: brightness(1.05);
}




/* =============================================
   FAQ SECTION - PRICING PAGE
   ============================================= */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 700px;
  margin: 0 auto;
}

.faq-item {
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: transparent;
  box-shadow: none;
  padding: 1.25rem 0;
  border-radius: 0;
}

.faq-item:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-main);
  transition: color 0.2s ease;
}

.faq-question:hover {
  color: var(--accent-strong);
}

/* Plus/minus icon */
.faq-chevron {
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--text-muted);
  transition: transform 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-chevron::before {
  content: '+';
}

.faq-item.open .faq-chevron::before {
  content: '−';
}

.faq-item.open .faq-chevron {
  color: var(--accent-strong);
}

/* Hide the original chevron text */
.faq-chevron {
  font-size: 0;
}

.faq-chevron::before {
  font-size: 1.5rem;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.25s ease;
}

.faq-answer p {
  margin: 1rem 0 0.5rem;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
  padding-right: 2rem;
}

.faq-item.open .faq-answer {
  max-height: 400px;
  opacity: 1;
}















/* ========================================
   CHECKOUT PAGE STYLES
   ======================================== */

.checkout-page {
  background: #faf8f6;
}

.checkout-page .site-header {
  border-bottom: none;
}


/* Checkout Hero Image */
.checkout-hero-image {
  width: 100%;
  max-width: 1080px; /* Same as checkout-layout max-width */
  height: 300px;
  margin: 2.5rem auto 0;
  padding: 0; /* Remove padding so it goes edge to edge */
  overflow: hidden;
  border-radius: 1rem;
}

.checkout-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 1rem;
  box-shadow: 0 12px 40px rgba(42, 38, 35, 0.12);
  border: 1px solid rgba(200, 158, 138, 0.15);
}


/* Dancing GADURA Wordmark */
.checkout-dancing-wordmark {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  padding: 2.5rem 0 1.5rem;
  font-family: "Playfair Display", serif;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.25em;
}

.dancing-letter {
  display: inline-block;
  background: linear-gradient(
    135deg,
    #d4a895 0%,
    #c89e8a 20%,
    #b47b68 40%,
    #a66b58 60%,
    #b47b68 80%,
    #c89e8a 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gentleWave 4s ease-in-out infinite, gradientShift 6s ease infinite;
  transform-origin: center center;
}

.dancing-letter:nth-child(1) { 
  animation-delay: 0s, 0s; 
}
.dancing-letter:nth-child(2) { 
  animation-delay: 0.15s, 1s; 
}
.dancing-letter:nth-child(3) { 
  animation-delay: 0.3s, 2s; 
}
.dancing-letter:nth-child(4) { 
  animation-delay: 0.45s, 3s; 
}
.dancing-letter:nth-child(5) { 
  animation-delay: 0.6s, 4s; 
}
.dancing-letter:nth-child(6) { 
  animation-delay: 0.75s, 5s; 
}

@keyframes gentleWave {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.checkout-section {
  padding: 2rem 0 6rem;
  min-height: calc(100vh - 400px);
}

/* Layout */
.checkout-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 3rem;
  max-width: 1100px;
  margin: 0 auto;
}

/* Order Summary (Left) */
.order-summary {
  position: sticky;
  top: 100px;
  height: fit-content;
}

.order-summary-inner {
  background: #ffffff;
  border-radius: 1.5rem;
  padding: 2rem;
  border: 1px solid rgba(200, 158, 138, 0.2);
  box-shadow: 0 20px 50px rgba(42, 38, 35, 0.08);
}

.order-summary h2 {
  margin: 0 0 1.5rem;
  font-size: 1.3rem;
  font-weight: 600;
}

/* Plan Badge */
.plan-badge {
  background: linear-gradient(135deg, #f8f6f4 0%, #f0ebe6 100%);
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(200, 158, 138, 0.2);
  position: relative;
}

.plan-badge-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.plan-badge-name {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-main);
}

/* Pro featured badge */
.plan-badge-featured {
  background: linear-gradient(135deg, #2a2623 0%, #1a1816 100%);
  border-color: var(--accent-strong);
}

.plan-badge-featured .plan-badge-label,
.plan-badge-featured .plan-badge-name {
  color: #ffffff;
}

.popular-badge {
  position: absolute;
  top: -10px;
  right: 15px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(180, 123, 104, 0.35);
}

/* Elite badge */
.plan-badge-elite {
  background: linear-gradient(135deg, #f3ebe6 0%, #e9d9d2 100%);
  border-color: rgba(180, 123, 104, 0.35);
}

/* Billing Toggle */
.checkout-billing-toggle {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.billing-option {
  background: #ffffff;
  border: 2px solid rgba(200, 158, 138, 0.2);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  font-family: inherit;
}

.billing-option:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(200, 158, 138, 0.15);
}

.billing-option.active {
  border-color: var(--accent-strong);
  background: linear-gradient(135deg, #faf8f6 0%, #f9f5f1 100%);
  box-shadow: 0 4px 16px rgba(180, 123, 104, 0.2);
}

.billing-option-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.2rem;
}

.billing-option-price {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-main);
}

.billing-option-badge {
  position: absolute;
  top: -8px;
  right: 12px;
  background: var(--accent-strong);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  letter-spacing: 0.05em;
}

/* Order Total */
.order-total {
  border-top: 1px solid rgba(200, 158, 138, 0.2);
  padding-top: 1.25rem;
  margin-bottom: 1rem;
}

.order-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.order-total-row.total {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
  padding-top: 0.75rem;
  border-top: 1px solid rgba(200, 158, 138, 0.2);
  margin-top: 0.75rem;
  margin-bottom: 0;
}

.order-note {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

/* All Plans Include */
.all-plans-include {
  margin-top: 0.8rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(200, 158, 138, 0.15);
}

.all-plans-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  margin-bottom: 0.9rem;
  text-align: left;
  font-weight: 600;
}

.all-plans-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.all-plans-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.all-plans-list li:last-child {
  margin-bottom: 0;
}

.all-plans-check {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  background: rgba(200, 158, 138, 0.08);
  color: var(--accent-strong);
  margin-top: 0.15rem;
}

/* Highlight last bullet (referral benefit) */
.all-plans-list li:last-child {
  background: rgba(200, 158, 138, 0.10);
  border-left: 3px solid var(--accent-strong);
  border-radius: 6px;
  padding: 0.5rem 0.65rem 0.5rem 0.5rem;
  margin-top: 0.85rem;
  margin-bottom: 0;
  margin-left: -0.5rem; /* Pull the entire item left */
}

.all-plans-list li:last-child .all-plans-check {
  margin-top: 0.15rem;
  /* Checkmark stays in same position as others */
}

/* Checkout Form (Right) */
.checkout-form-container {
  background: #ffffff;
  border-radius: 1.5rem;
  padding: 2.5rem 2.5rem 3rem;
  border: 1px solid rgba(200, 158, 138, 0.2);
  box-shadow: 0 20px 50px rgba(42, 38, 35, 0.08);
}

.checkout-header {
  margin-bottom: 2.5rem;
}

.checkout-header h1 {
  margin: 0 0 0.5rem;
  font-size: 1.8rem;
  font-weight: 700;
}

.checkout-header p {
  margin: 0;
  font-size: 1rem;
  color: var(--text-muted);
}

/* Form Styles */
.checkout-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.5rem;
}

.form-input {
  padding: 0.9rem 1.1rem;
  border: 2px solid rgba(200, 158, 138, 0.25);
  border-radius: 0.65rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text-main);
  background: #ffffff;
  transition: all 0.2s ease;
  outline: none;
}

.form-input::placeholder {
  color: var(--text-muted);
}

.form-input:focus {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px rgba(180, 123, 104, 0.1);
}

/* Stripe Card Element */
.stripe-card-element {
  padding: 0.9rem 1.1rem;
  border: 2px solid rgba(200, 158, 138, 0.25);
  border-radius: 0.65rem;
  background: #ffffff;
  transition: all 0.2s ease;
}

.stripe-card-element.StripeElement--focus {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px rgba(180, 123, 104, 0.1);
}

.form-error {
  color: #e63946;
  font-size: 0.85rem;
  margin-top: 0.5rem;
  min-height: 1.2rem;
}


/* Form Validation States */
.form-input.error,
.form-input:invalid:not(:placeholder-shown) {
  border-color: #e63946;
}

.form-input.success {
  border-color: #2a9d5c;
}

.form-input.error:focus {
  border-color: #e63946;
  box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.1);
}

/* Field Error Message */
.field-error {
  display: none;
  color: #e63946;
  font-size: 0.8rem;
  margin-top: 0.4rem;
  line-height: 1.4;
}

.field-error.visible {
  display: block;
  animation: errorFadeIn 0.2s ease;
}

@keyframes errorFadeIn {
  from { 
    opacity: 0; 
    transform: translateY(-4px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* Password Requirements — minimal, premium inline style */
.password-requirements {
  margin-top: -0.5rem;
  margin-bottom: 1rem;
  padding-top: 0.6rem;
  border-top: 1px dashed rgba(200, 158, 138, 0.35);
  background: transparent;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.password-requirements p {
  margin: 0 0 0.35rem;
  font-weight: 500;
  color: rgba(42, 38, 35, 0.8);
  font-size: 0.8rem;    /*font size of password must contain*/
  letter-spacing: 0.02em;
}

/* Inline rules */
.password-requirements ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
}

.password-requirements li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;  /*font size of requirements for password must contain*/
  color: rgba(42, 38, 35, 0.55);
  transition: color 0.18s ease;
}

/* faint hollow dot */
.password-requirements li::before {
  content: "○";
  font-size: 0.65rem;
  color: rgba(180, 123, 104, 0.65);
}

/* success state — simple, classy */
.password-requirements li.valid {
  color: #2a9d5c;
}

.password-requirements li.valid::before {
  content: "✓";
  color: #2a9d5c;
}


/* Password Input Wrapper */
.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-wrapper .form-input {
  width: 100%;
  padding-right: 3rem;
}

.password-toggle {
  position: absolute;
  right: 0.75rem;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.password-toggle:hover {
  color: var(--text-main);
}

.password-toggle svg {
  width: 20px;
  height: 20px;
}

/* Terms Checkbox Error State */
.terms-checkbox-label.error .terms-checkbox {
  border-color: #e63946;
}

.terms-checkbox-label.error .terms-text {
  color: var(--text-muted); /* Keep original color, don't turn red */
}

.terms-error {
  display: none;
  color: #e63946;
  font-size: 0.8rem;
  margin-top: 0.4rem;
}

.terms-error.visible {
  display: block;
}










/* Submit Button */
.checkout-submit {
  width: 100%;
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
  padding: 1.1rem 2rem;
  font-size: 1.05rem;
  position: relative;
}

.checkout-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.spinner {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spinner 0.6s linear infinite;
}

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

.hidden {
  display: none;
}

/* Footer Note */
.checkout-footer-note {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.checkout-footer-note a {
  color: var(--accent-strong);
  text-decoration: none;
}

.checkout-footer-note a:hover {
  text-decoration: underline;
}

/* Terms Agreement Checkbox */
.checkout-terms-agreement {
  margin-top: 1.5rem;
  margin-bottom: 0;
}

.terms-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.terms-checkbox {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 0.15rem;
  border: 2px solid rgba(200, 158, 138, 0.3);
  border-radius: 4px;
  cursor: pointer;
  accent-color: var(--accent-strong);
}

.terms-checkbox:focus {
  outline: 2px solid rgba(180, 123, 104, 0.3);
  outline-offset: 2px;
}

.terms-text {
  flex: 1;
}

.terms-text a {
  color: var(--accent-strong);
  text-decoration: none;
}

.terms-text a:hover {
  text-decoration: underline;
}

/* Security Badges */
.security-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(200, 158, 138, 0.15);
}

.security-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.security-badge svg {
  color: var(--accent-strong);
}


/*hide subtotal, it is redundant for this type of checkout page*/
.order-total-row:not(.total) {
  display: none !important;
}

/* Remove divider when subtotal is hidden */
.order-total {
  border-top: 1px solid rgba(0,0,0,0.06);
  margin-top: 0.4rem !important;
  padding-top: 0.4rem !important;
}

.order-total-row {
  border-top: none !important;
}

/* Optional: tighten the Total row slightly too */
.order-total-row.total {
  padding-top: 0.25rem !important;
  padding-bottom: 0.35rem !important;
}








/* Responsive */
@media (max-width: 1024px) {
  .checkout-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .order-summary {
    position: static;
    order: 2;
  }

  .checkout-form-container {
    order: 1;
  }
}

@media (max-width: 640px) {
  .checkout-section {
    padding: 2rem 0 4rem;
  }

  .checkout-dancing-wordmark {
    font-size: 1.5rem;
    padding: 2rem 0 1.2rem;
    gap: 0.25rem;
  }

  .order-summary-inner,
  .checkout-form-container {
    padding: 1.5rem;
  }

  .checkout-header h1 {
    font-size: 1.5rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .security-badges {
    flex-direction: column;
    gap: 0.75rem;
  }
}











/* ========================================
   QUIZ PAGE STYLES - COMPLETE WORKING VERSION on styles.css
   ======================================== */

.quiz-page {
  background: #faf8f6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Quiz header – matches main nav but logo is centered */
.quiz-header {
  background: #ffffff;  /* same white bar as main header */
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.quiz-header .header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;   /* ⬅ center the logo row */
}

/* Remove the auto margin that normally pushes nav to the right */
.quiz-header .brand {
  margin-right: 0;
}

.quiz-section {
  padding: 4rem 0 6rem;
  flex: 1;
}

.quiz-page .site-footer {
  margin-top: auto;
}

.quiz-container {
  max-width: 600px;
  margin: 0 auto;
}

/* Progress Bar */
.quiz-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(200, 158, 138, 0.15);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #c89e8a 0%, #b47b68 100%);
  border-radius: 999px;
  transition: width 0.4s ease;
  width: 16.66%;
}

.quiz-progress-text {
  text-align: center;
  font-size: 0.85rem;
  color: #7a746f;
  margin-bottom: 2.5rem;
  font-weight: 500;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Quiz Card */
.quiz-card {
  background: #ffffff;
  border-radius: 1.5rem;
  padding: 3rem 2.5rem;
  border: 1px solid rgba(200, 158, 138, 0.2);
  box-shadow: 0 20px 50px rgba(42, 38, 35, 0.08);
  min-height: 500px;
  max-width: 100%;
  margin: 0 auto;
  padding: 2.25rem 2rem;    /* reduce padding */
  min-height: 440px;        /* less intimidating height */
  border-radius: 1.25rem;   /* slightly softer */
}

/* Quiz Questions */
.quiz-question {
  display: none;
}

.quiz-question.active {
  display: block;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from { 
    opacity: 0; 
    transform: translateY(10px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

.quiz-question-title {
  font-family: "Playfair Display", serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: #2a2623;
  margin: 0 0 0.75rem;
  line-height: 1.3;
}

.quiz-question-subtitle {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  color: #7a746f;
  margin: 0 0 2.5rem;
  line-height: 1.5;
}

/* Quiz Options */
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: #ffffff;
  border: 2px solid rgba(200, 158, 138, 0.25);
  border-radius: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  color: #2a2623;
  font-weight: 500;
  width: 100%;
}

.quiz-option:hover {
  border-color: #b47b68;
  background: rgba(200, 158, 138, 0.03);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(200, 158, 138, 0.15);
}

.option-icon {
  font-size: 1rem;
  flex-shrink: 0;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
  font-weight: normal;
  font-style: normal;
}

.option-text {
  flex: 1;
  line-height: 1.4;
}

/* Quiz option icons – smaller and tidy */
.quiz-page .option-icon,
.quiz-page .option-icon img {
  width: 25px;
  height: 25px;
}

.quiz-page .quiz-option {
  gap: 0.75rem; /* bring text a bit closer to the icon */
}


/* Back Button */
.quiz-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  background: transparent;
  border: 2px solid rgba(200, 158, 138, 0.25);
  border-radius: 0.75rem;
  color: #2a2623;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.quiz-back-btn:hover {
  border-color: #b47b68;
  background: rgba(200, 158, 138, 0.05);
}


/* ========================================
   EMAIL FORM - NUCLEAR OVERRIDE
   ======================================== */

form#email-form,
form.quiz-email-form,
.quiz-email-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
  max-width: 450px !important;
  margin: 0 auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 1 !important;
}

input#quiz-email,
input.quiz-email-input,
.quiz-email-input {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: 1.1rem 1.5rem !important;
  border: 2px solid rgba(200, 158, 138, 0.25) !important;
  border-radius: 0.75rem !important;
  font-size: 1.05rem !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: #2a2623 !important;
  background: #ffffff !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  outline: none !important;
  height: auto !important;
  min-height: 50px !important;
  position: relative !important;
}

input#quiz-email::placeholder,
input.quiz-email-input::placeholder,
.quiz-email-input::placeholder {
  color: #7a746f !important;
  opacity: 1 !important;
}

input#quiz-email:focus,
input.quiz-email-input:focus,
.quiz-email-input:focus {
  border-color: #b47b68 !important;
  box-shadow: 0 0 0 4px rgba(180, 123, 104, 0.1) !important;
}

button.quiz-submit,
.quiz-submit {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 1.2rem 2rem !important;
  font-size: 1.05rem !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 600 !important;
  background: #b47b68 !important;
  color: white !important;
  border: none !important;
  border-radius: 0.75rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  height: auto !important;
  min-height: 50px !important;
  text-align: center !important;
  position: relative !important;
}

button.quiz-submit:hover,
.quiz-submit:hover {
  background: #a66b58 !important;
  transform: translateY(-1px) !important;
}

button.quiz-submit:disabled,
.quiz-submit:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

p.email-terms-note,
.email-terms-note {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important; 
  text-align: center !important;
  font-size: 0.8rem !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: #7a746f !important;
  margin: 1rem 0 0 !important;
  line-height: 1.5 !important;
  position: relative !important;
}

p.email-terms-note a,
.email-terms-note a {
  color: #b47b68 !important;
  text-decoration: none !important;
}

p.email-terms-note a:hover,
.email-terms-note a:hover {
  text-decoration: underline !important;
}

/* ========================================
   QUIZ RESULTS PAGE STYLES
   Replace your existing results styles with this
   ======================================== */

.results-wrapper {
  max-width: 400px;
  margin: 0 auto;
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Header */
.results-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.results-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(145deg, #c89e8a 0%, #b47b68 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(180, 123, 104, 0.25);
}

.results-icon svg {
  width: 32px;
  height: 32px;
  stroke: white;
  stroke-width: 3;
  fill: none;
}

.results-title {
  font-family: "Playfair Display", serif;
  font-size: 2.25rem;
  font-weight: 600;
  color: #2a2623;
  margin: 0 0 0.5rem;
  text-align: center;
}

.results-subtitle {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  color: #7a746f;
  margin: 0;
  text-align: center;
}

/* Card */
.results-card {
  background: #ffffff;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(200, 158, 138, 0.15);
  box-shadow: 0 4px 6px rgba(42, 38, 35, 0.02), 0 12px 40px rgba(42, 38, 35, 0.06);
}

/* Badge */
.results-badge {
  padding: 1.5rem 2rem;
  text-align: center;
  background: linear-gradient(135deg, #f8f6f4 0%, #f0ebe6 100%);
}

.results-badge.pro {
  background: linear-gradient(135deg, #2a2623 0%, #1a1816 100%);
}

.results-badge.elite {
  background: linear-gradient(145deg, #f7ede8 0%, #eeddd4 50%, #e5cfc4 100%);
}

.results-badge-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #b47b68;
  margin-bottom: 0.35rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: center;
}

.results-badge.pro .results-badge-label {
  color: #c89e8a;
}

.results-badge-name {
  font-family: "Playfair Display", serif;
  font-size: 2rem;
  font-weight: 600;
  color: #2a2623;
  margin: 0;
  text-align: center;
}

.results-badge.pro .results-badge-name {
  color: #ffffff;
}

/* Body */
.results-body {
  padding: 1.5rem 2rem 2rem;
}

.results-description {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #7a746f;
  margin: 0 0 1.5rem 0;
  text-align: center;
}

/* Price */
.results-price {
  text-align: center;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(200, 158, 138, 0.12);
}

.results-price-amount {
  font-family: "Playfair Display", serif;
  font-size: 2.75rem;
  font-weight: 600;
  color: #2a2623;
  letter-spacing: -0.02em;
}

.results-price-period {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: #7a746f;
}

/* Features */
.results-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  display: flex;
  flex-direction: column;
  align-items: left;
  gap: 0.6rem;
}

.results-features li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.9rem;
  color: #2a2623;
}

.results-check {
  width: 20px;
  height: 20px;
  min-width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.results-check svg {
  width: 14px;
  height: 14px;
  stroke: #b47b68;
  stroke-width: 2;
  fill: none;
}

/* Buttons */
.results-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.results-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 81%;
  padding: 1rem 2rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  background: #b47b68;
  color: white;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.results-btn-primary:hover {
  background: #a66b58;
}

.results-btn-primary svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.results-btn-secondary {
  display: block;
  width: 100%;
  padding: 0.9rem 2rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  background: transparent;
  color: #2a2623;
  text-decoration: none;
  text-align: center;
  border-radius: 0.5rem;
  border: 1px solid rgba(200, 158, 138, 0.25);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.results-btn-secondary:hover {
  background: rgba(200, 158, 138, 0.04);
  border-color: #c89e8a;
}

/* Footer Note */
.results-note {
  text-align: center;
  margin-top: 1.5rem;
  padding: 0.75rem;
}

.results-note p {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.8rem;
  color: #7a746f;
  margin: 0;
  text-align: center;
}

.results-note strong {
  color: #2a2623;
  font-weight: 600;
}






/* =============================================
   HELP CENTER – PREMIUM GADURA STYLE
   ============================================= */

.help-center-page main {
  background: var(--bg);
}

/* ---------- HERO ---------- */

.help-hero {
  padding: 5rem 0 4rem;
  text-align: center;
  background:
    radial-gradient(circle at top, #f5e6dd 0%, #ffffff 55%, var(--bg) 100%);
}

.help-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(180, 123, 104, 0.2);
  background: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.5rem;
}

.help-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--accent-strong);
}

.help-badge-icon svg {
  width: 16px;
  height: 16px;
}

.help-badge span {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.help-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 1rem;
}

.help-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-main);
  margin: 0 0 1rem;
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.help-subtitle {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto 2rem;
  line-height: 1.7;
}

.help-chat-link {
  color: var(--accent-strong);
  font-weight: 500;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: inherit;
}

.help-chat-link:hover {
  color: #a36b5a;
}

/* Search */
.help-search-wrapper {
  max-width: 540px;
  margin: 0 auto;
  position: relative;
}

.help-search-icon {
  position: absolute;
  left: 1.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  pointer-events: none;
}

.help-search-input {
  width: 100%;
  padding: 1.1rem 1.5rem 1.1rem 3.5rem;
  font-size: 1rem;
  border-radius: 999px;
  border: 1.5px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
  color: var(--text-main);
  outline: none;
  box-shadow: 0 14px 40px rgba(42, 38, 35, 0.1);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.help-search-input::placeholder {
  color: var(--text-muted);
}

.help-search-input:focus {
  border-color: var(--accent-strong);
  box-shadow:
    0 0 0 4px rgba(180, 123, 104, 0.14),
    0 18px 52px rgba(42, 38, 35, 0.14);
  transform: translateY(-1px);
}

/* ---------- QUICK HELP CARDS ---------- */

.help-quick-section {
  padding: 0 0 3rem;
  margin-top: -1.5rem;
  position: relative;
  z-index: 10;
}

.help-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 1000px;
  margin: 0 auto;
}

.help-quick-card {
  background: #ffffff;
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem;
  text-align: left;
  text-decoration: none;
  border: 1px solid rgba(15, 23, 42, 0.05);
  box-shadow: 0 12px 36px rgba(42, 38, 35, 0.09);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease,
    background 0.2s ease;
}

.help-quick-card.highlight {
  background: linear-gradient(135deg, #fef7f4 0%, #faf4ef 100%);
  border-color: rgba(180, 123, 104, 0.25);
  box-shadow: 0 16px 44px rgba(180, 123, 104, 0.2);
}

.help-quick-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 50px rgba(42, 38, 35, 0.14);
  border-color: rgba(180, 123, 104, 0.3);
}

.help-quick-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(180, 123, 104, 0.1);
  color: var(--accent-strong);
  margin-bottom: 0.25rem;
}

.help-quick-icon svg {
  width: 20px;
  height: 20px;
}

.help-quick-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-main);
  margin: 0;
}

.help-quick-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.55;
}

/* ---------- FAQ SECTION ---------- */

.help-faq-section {
  padding: 2rem 0 5rem;
}

.help-faq-container {
  max-width: 900px;
  margin: 0 auto;
}

/* Category tabs */
.help-categories-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: 2.5rem;
}

.help-category-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  font-size: 0.82rem;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 6px 16px rgba(23, 15, 10, 0.06);
}

.help-category-tab .tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.help-category-tab .tab-icon svg {
  width: 14px;
  height: 14px;
}

.help-category-tab .tab-count {
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
}

.help-category-tab:hover {
  border-color: rgba(180, 123, 104, 0.4);
  color: var(--text-main);
  box-shadow: 0 8px 22px rgba(42, 38, 35, 0.09);
}

.help-category-tab.active {
  background: rgba(180, 123, 104, 0.1);
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}

.help-category-tab.active .tab-count {
  background: rgba(180, 123, 104, 0.15);
}

/* Search result info */
.help-search-info {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  border-radius: 0.75rem;
  background: rgba(180, 123, 104, 0.08);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.help-search-info.visible {
  display: flex;
}

.help-search-info span {
  color: var(--text-muted);
}

.help-search-clear {
  border: none;
  background: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-strong);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* FAQ list */
.help-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.help-faq-item {
  background: #ffffff;
  border-radius: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.06);
  overflow: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 10px 28px rgba(23, 15, 10, 0.05);
}

.help-faq-item:hover {
  border-color: rgba(180, 123, 104, 0.25);
}

.help-faq-item.open {
  border-color: rgba(180, 123, 104, 0.35);
  box-shadow: 0 12px 36px rgba(42, 38, 35, 0.1);
}

.help-faq-question {
  width: 100%;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  text-align: left;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

.help-faq-question-content {
  flex: 1;
}

.help-faq-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}

.help-faq-category-badge svg {
  width: 12px;
  height: 12px;
}

.help-faq-question-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.5;
}

.help-faq-toggle {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.help-faq-toggle svg {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.help-faq-item.open .help-faq-toggle {
  background: rgba(180, 123, 104, 0.1);
}

.help-faq-item.open .help-faq-toggle svg {
  transform: rotate(180deg);
  color: var(--accent-strong);
}

.help-faq-answer {
  display: none;
  padding: 0 1.5rem 1.5rem;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.help-faq-item.open .help-faq-answer {
  display: block;
}

.help-faq-answer-text {
  padding-top: 1.25rem;
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.75;
}

/* Empty state */
.help-faq-empty {
  display: none;
  text-align: center;
  padding: 4rem 2rem;
  border-radius: 1.25rem;
  border: 1px dashed rgba(15, 23, 42, 0.1);
  background: #ffffff;
}

.help-faq-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  margin-bottom: 1.25rem;
  color: var(--text-muted);
}

.help-faq-empty-icon svg {
  width: 28px;
  height: 28px;
}

.help-faq-empty h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--text-main);
}

.help-faq-empty p {
  margin: 0 0 1.5rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.help-faq-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.75rem;
  border-radius: 999px;
  border: none;
  background: var(--accent-strong);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.help-faq-empty-btn:hover {
  background: #a36b5a;
  box-shadow: 0 10px 30px rgba(180, 123, 104, 0.3);
}

.help-faq-empty-btn svg {
  width: 16px;
  height: 16px;
}

/* ---------- CTA SECTION ---------- */

.help-cta-section {
  background: #1f1814;
  padding: 5rem 0;
}

.help-cta-container {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.help-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  margin-bottom: 1.25rem;
  color: rgba(255, 255, 255, 0.8);
}

.help-cta-icon svg {
  width: 28px;
  height: 28px;
}

.help-cta-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 1rem;
}

.help-cta-text {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 2rem;
  line-height: 1.7;
}

.help-cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.help-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.75rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.help-cta-btn svg {
  width: 18px;
  height: 18px;
}

.help-cta-btn.primary {
  background: var(--accent-strong);
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(180, 123, 104, 0.35);
}

.help-cta-btn.primary:hover {
  background: #c9887a;
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(180, 123, 104, 0.4);
}

.help-cta-btn.secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.help-cta-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 900px) {
  .help-quick-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .help-quick-card:last-child {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .help-hero {
    padding: 3.5rem 0 3rem;
  }

  .help-title {
    font-size: 2rem;
  }

  .help-quick-section {
    margin-top: -1rem;
  }

  .help-quick-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .help-quick-card:last-child {
    grid-column: span 1;
  }

  .help-faq-section {
    padding: 1.5rem 0 4rem;
  }

  .help-categories-tabs {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    margin: 0 -1rem 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .help-categories-tabs::-webkit-scrollbar {
    display: none;
  }

  .help-category-tab {
    flex-shrink: 0;
  }

  .help-faq-question {
    padding: 1rem 1.25rem;
  }

  .help-faq-answer {
    padding: 0 1.25rem 1.25rem;
  }

  .help-cta-section {
    padding: 4rem 0;
  }

  .help-cta-buttons {
    flex-direction: column;
  }

  .help-cta-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .help-title {
    font-size: 1.75rem;
  }

  .help-search-input {
    padding: 1rem 1rem 1rem 3rem;
    font-size: 0.95rem;
  }

  .help-search-icon {
    left: 1rem;
  }
}



/* =============================================
   CONTACT SUPPORT – PREMIUM GADURA STYLE
   ============================================= */

.support-contact-page main {
  background: var(--bg);
}

/* ---------- HERO ---------- */

.contact-support-hero {
  padding: 5rem 0 4rem;
  text-align: center;
  background:
    radial-gradient(circle at top, #2b1f18 0%, #1d1510 40%, #120c09 70%),
    linear-gradient(180deg, #120c09 0%, var(--bg) 72%);
  color: #ffffff;
}

.contact-support-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.75);
}

.contact-support-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(2.5rem, 5vw, 3.3rem);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}

.contact-support-subtitle {
  font-size: 1.05rem;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
}

/* ---------- MAIN PANEL ---------- */

.contact-support-section {
  padding: 0 0 4.8rem;
  margin-top: -2.4rem;
}

.contact-support-card {
  max-width: 880px;
  margin: 0 auto;
  padding: 2.1rem 2.2rem 2.4rem;
  border-radius: 1.8rem;
  background: #ffffff;
  box-shadow:
    0 26px 70px rgba(18, 11, 7, 0.32),
    0 0 0 1px rgba(15, 23, 42, 0.03);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 1.75rem;
  align-items: stretch;
  position: relative;
  overflow: hidden;
}

/* Subtle accent edge at the top of the card */
.contact-support-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border-top: 3px solid rgba(180, 123, 104, 0.6);
  pointer-events: none;
}

/* Columns */

.contact-support-column {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* Highlighted left side */
.column-primary {
  padding: 1.1rem 1.15rem 1.25rem;
  margin: -0.4rem 0 -0.4rem -0.4rem;
  border-radius: 1.4rem;
  background: radial-gradient(circle at top left, #fef9f5 0%, #f9eee6 40%, #f8f1ea 100%);
  box-shadow: 0 18px 40px rgba(180, 123, 104, 0.18);
  border: 1px solid rgba(180, 123, 104, 0.22);
}

/* Right side stays clean */
.contact-support-column:not(.column-primary) {
  padding-left: 1.25rem;
  border-left: 1px solid rgba(15, 23, 42, 0.06);
}

/* Icons + headings */

.contact-support-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(180, 123, 104, 0.12);
  color: var(--accent-strong);
  margin-bottom: 0.25rem;
}

.contact-support-icon i[data-lucide] {
  width: 20px;
  height: 20px;
}

.contact-support-heading {
  font-size: 1.16rem;
  font-weight: 600;
  color: var(--text-main);
}

.contact-support-body {
  font-size: 0.96rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* Email line */

.contact-support-email {
  font-size: 1rem;
  font-weight: 500;
  margin-top: 0.35rem;
}

.contact-support-email a {
  color: var(--accent-strong);
  text-decoration: none;
  border-bottom: 1px solid rgba(180, 123, 104, 0.4);
  padding-bottom: 1px;
}

.contact-support-email a:hover {
  border-bottom-color: rgba(180, 123, 104, 0.85);
}

/* Meta list */

.contact-support-meta {
  margin-top: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.86rem;
  color: var(--text-muted);
}

.contact-support-meta-row {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.contact-support-meta-row i[data-lucide] {
  width: 14px;
  height: 14px;
}

/* Buttons */

.contact-support-actions {
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.contact-support-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.18s ease;
}

.contact-support-btn i[data-lucide] {
  width: 17px;
  height: 17px;
}

.contact-support-btn.primary {
  background: var(--accent-strong);
  color: #ffffff;
  box-shadow: 0 14px 34px rgba(180, 123, 104, 0.46);
}

.contact-support-btn.primary:hover {
  background: #c9887a;
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(180, 123, 104, 0.52);
}

.contact-support-btn.secondary {
  background: rgba(15, 23, 42, 0.02);
  color: var(--text-main);
  border: 1px solid rgba(15, 23, 42, 0.09);
}

.contact-support-btn.secondary:hover {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.16);
}

/* Small footer text under the card */

.contact-support-footnote {
  max-width: 880px;
  margin: 1.3rem auto 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 900px) {
  .contact-support-card {
    padding: 1.7rem 1.6rem 2rem;
    grid-template-columns: 1fr;
  }

  .column-primary {
    margin: -0.2rem -0.1rem 0.5rem -0.1rem;
  }

  .contact-support-column:not(.column-primary) {
    padding-left: 0;
    border-left: none;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
  }
}

@media (max-width: 600px) {
  .contact-support-hero {
    padding: 3.5rem 0 3rem;
  }

  .contact-support-title {
    font-size: 2.1rem;
    letter-spacing: 0.08em;
  }

  .contact-support-card {
    border-radius: 1.6rem;
  }
}












/* =============================================
   LEGAL PAGES – GADURA
   ============================================= */

/* Shared base */

.legal-page main {
  background: var(--bg);
}

.legal-hero {
  padding: 4rem 0 2.5rem;
  background: #ffffff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.legal-hero .container {
  max-width: 960px;
  margin: 0 auto;
}

.legal-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.8rem;
}

.legal-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-main);
  margin: 0 0 0.8rem;
}

.legal-subtitle {
  font-size: 0.98rem;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 0 1.2rem;
  line-height: 1.7;
}

/* Generic legal content area */

.legal-content-section {
  padding: 2.5rem 0 4.5rem;
}

.legal-content {
  max-width: 960px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 1.1rem;
  border: 1px solid rgba(15, 23, 42, 0.06);
  padding: 2rem 2.25rem;
  box-shadow: 0 16px 40px rgba(23, 15, 10, 0.06);
}

/* Typography inside legal docs */

.legal-body h2,
.legal-body h3,
.legal-body h4 {
  font-family: inherit;
  font-weight: 600;
  color: var(--text-main);
  margin: 1.7rem 0 0.7rem;
}

.legal-body h2 {
  font-size: 1.25rem;
}

.legal-body h3 {
  font-size: 1.05rem;
}

.legal-body h4 {
  font-size: 0.98rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.legal-body p {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.legal-body ul,
.legal-body ol {
  margin: 0.4rem 0 1rem 1.4rem;
  padding: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.legal-body li + li {
  margin-top: 0.25rem;
}

.legal-body a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Simple inline “back to hub” link */

.legal-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  margin-bottom: 1.4rem;
  color: var(--text-muted);
  text-decoration: none;
}

.legal-back-link:hover {
  color: var(--text-main);
}

/* Legal summary box (for affiliate terms, etc.) */
.legal-summary-box {
  background: rgba(200, 158, 138, 0.1);
  border: 1px solid rgba(200, 158, 138, 0.3);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.legal-summary-box h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--accent-strong);
  font-size: 1.1rem;
}

.legal-summary-table {
  width: 100%;
  border-collapse: collapse;
}

.legal-summary-table th,
.legal-summary-table td {
  padding: 0.75rem 1rem;
  border: 1px solid #e5e5e5;
  font-size: 0.9rem;
  text-align: left;
}

.legal-summary-table th {
  background: #f8f8f8;
  font-weight: 600;
  color: var(--text-main);
  width: 35%;
}

.legal-summary-table td {
  color: var(--text-muted);
}

.legal-body code {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.85em;
  font-family: monospace;
}

/* ---------- LEGAL HUB (BALANCED STYLE) ---------- */

.legal-hub-page main {
  background: #f8f6f4;
}

/* Hero */
.legal-hub-hero {
  padding: 4rem 0 2.6rem;
  background: #ffffff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.legal-hub-hero .container {
  max-width: 960px;
  margin: 0 auto;
}

.legal-title {
  margin: 0.2rem 0 0.6rem;
  font-size: clamp(2.2rem, 4vw, 2.7rem);
  font-weight: 700;
  color: #0f172a;
}

.legal-thanks {
  margin: 0 0 0.45rem;
  font-size: 1.02rem;
  font-weight: 500;
  color: #0f172a;
}

.legal-subtitle {
  max-width: 700px;
  font-size: 0.98rem;
  color: rgba(15, 23, 42, 0.7);
  line-height: 1.7;
}

/* Grid */
.legal-hub-grid-section {
  padding: 3.6rem 0 4.2rem;   /*adjust first entry for gap between cards and hero*/
}

.legal-hub-grid {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
}

/* Cards */
.legal-hub-card {
  background: #ffffff;
  border-radius: 0.9rem;
  padding: 1.25rem 1.3rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f172a;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.legal-hub-card-title {
  font-size: 0.95rem;
  font-weight: 600;
}

.legal-hub-card:hover,
.legal-hub-card:focus-visible {
  border-color: rgba(180, 123, 104, 0.55);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(23, 15, 10, 0.06);
}


/* Legal meta text */

.legal-meta {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(15, 23, 42, 0.65);
  padding-top: 2rem;
  padding-bottom: 5rem;       /*gap between meta note and footer*/
}

/* Make the link brown + subtle hover */
.legal-meta a {
  color: var(--accent-strong);
  font-weight: 500;
  text-decoration: none;
}

.legal-meta a:hover {
  text-decoration: underline;
}



/* Responsive */
@media (max-width: 900px) {
  .legal-hub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .legal-hub-grid {
    grid-template-columns: 1fr;
  }

  .legal-hub-grid-section {
  padding: 2rem 0 2.2rem;   /*adjust first entry for gap between cards and hero*/
}

.legal-meta {
  padding-bottom: 2rem;       /*gap between meta note and footer*/
}

}





/* =============================================
   LEARN & GROW – CREATOR INSIGHTS
   ============================================= */

.creator-insights-main {
  background: var(--bg);
}

/* ---------- Hero (dark themed) ---------- */

.page-hero {
  padding: 3.8rem 0 3.1rem;
  background:
    radial-gradient(circle at top left, rgba(200, 158, 138, 0.35), transparent 55%),
    #0b080e;
  border-bottom: 1px solid rgba(0, 0, 0, 0.45);
}

.page-hero-tight {
  padding-bottom: 2.4rem;
}

.page-hero-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.8rem;
}

.page-hero .eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(248, 242, 236, 0.72);
  margin: 0 0 0.7rem;
}

.page-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(2.3rem, 4vw, 2.8rem);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin: 0 0 0.9rem;
  color: #ffffff;
}

.page-subtitle {
  margin: 0 0 1.5rem;
  font-size: 1.02rem;
  max-width: 520px;
  line-height: 1.7;
  color: rgba(245, 238, 232, 0.85);
}

.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 1.4rem;
}

.page-hero-footnote {
  margin: 0;
  font-size: 0.86rem;
  color: rgba(235, 226, 219, 0.8);
}

/* Buttons on this page reuse your existing button styles */

.btn.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #ffffff;
  border-radius: 999px;
  padding: 0.85rem 1.55rem;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.92rem;
  box-shadow: 0 10px 26px rgba(180, 123, 104, 0.35);
  text-decoration: none;
}

.btn.btn-primary:hover {
  box-shadow: 0 14px 36px rgba(180, 123, 104, 0.45);
}

.btn.btn-ghost {
  background-color: #ffffff;
  color: var(--text-main);
  border-radius: 999px;
  padding: 0.85rem 1.55rem;
  border: 1px solid var(--border-subtle);
  font-weight: 500;
  font-size: 0.92rem;
  text-decoration: none;
}

.btn.btn-ghost:hover {
  border-color: var(--accent);
}

/* Make ghost button work better on the dark hero */
.creator-insights-main .page-hero .btn.btn-ghost {
  background-color: transparent;
  color: #f7f3ef;
  border-color: rgba(245, 234, 225, 0.4);
}

/* ---------- Shared section header ---------- */

.section {
  padding: 3.1rem 0 3.4rem;
}

.section-light {
  background: #faf4ef;
  border-top: 1px solid rgba(15, 23, 42, 0.03);
  border-bottom: 1px solid rgba(15, 23, 42, 0.03);
}

.section-alt {
  background: #ffffff;
}

.section-header {
  max-width: 840px;
  margin: 0 auto 2.2rem;
  padding: 0 1.8rem;
  text-align: center;
}

.section-eyebrow {
  margin-bottom: 0.6rem;
}

.section-title {
  margin: 0 0 0.5rem;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.section-intro {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ---------- Foundation cards ---------- */

.card-grid {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.8rem;
  display: grid;
  gap: 1.6rem;
}

.card-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.insight-card {
  position: relative;
  padding: 1.7rem 1.55rem 1.6rem;
  border-radius: 1.3rem;
  background: linear-gradient(180deg, #ffffff, #faf7f4);
  border: 1px solid rgba(200, 158, 138, 0.22);
  box-shadow: 0 18px 40px rgba(42, 38, 35, 0.08);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.insight-card:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 158, 138, 0.7);
  background: linear-gradient(180deg, #ffffff, #f6eee8);
  box-shadow: 0 26px 60px rgba(42, 38, 35, 0.16);
}

.insight-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.28rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(200, 158, 138, 0.6);
  background: rgba(200, 158, 138, 0.12);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6c5141;
  margin-bottom: 0.95rem;
}

.insight-title {
  margin: 0 0 0.5rem;
  font-size: 1.03rem;
}

.insight-excerpt {
  margin: 0 0 0.8rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.insight-meta {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ---------- Signals from the field ---------- */

.creator-signals {
  padding-top: 3.3rem;
}

.insight-split {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.8rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
}

.insight-split-block {
  position: relative;
  padding: 1.6rem 1.5rem 1.5rem;
  border-radius: 1.2rem;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 16px 38px rgba(23, 15, 10, 0.08);
}

.insight-split-block::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border-left: 3px solid rgba(200, 158, 138, 0.9);
  opacity: 0.8;
  pointer-events: none;
}

.insight-split-title {
  margin: 0 0 0.55rem;
  font-size: 1rem;
}

.insight-split-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-muted);
}

/* ---------- Working notes ---------- */

.section-notes {
  background: #faf8f6;
}

.notes-grid {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.8rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.note-card {
  border-radius: 1.15rem;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 18px 40px rgba(23, 15, 10, 0.08);
  padding: 1.6rem 1.5rem 1.6rem;
}

.note-title {
  margin: 0 0 0.55rem;
  font-size: 0.98rem;
}

.note-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ---------- Newsletter block ---------- */

.section-accent {
  padding: 3.4rem 0 3.8rem;
  background:
    radial-gradient(circle at top left, rgba(200, 158, 138, 0.15) 0%, transparent 55%),
    #f7f2ee;
  border-top: 1px solid rgba(15, 23, 42, 0.05);
}

.newsletter-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.8rem;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 1.9rem;
  align-items: center;
}

.newsletter-copy .section-title {
  font-size: 1.5rem;
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  align-items: flex-start;
}

.newsletter-form .input {
  width: 100%;
  padding: 0.95rem 1.1rem;
  border-radius: 0.8rem;
  border: 2px solid rgba(200, 158, 138, 0.38);
  background: #ffffff;
  font-size: 0.96rem;
  font-family: inherit;
  color: var(--text-main);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.newsletter-form .input::placeholder {
  color: var(--text-muted);
}

.newsletter-form .input:focus {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px rgba(180, 123, 104, 0.15);
  background: #ffffff;
}

.newsletter-form .btn {
  min-width: 12rem;
}

.newsletter-footnote {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ---------- Responsive tweaks ---------- */

@media (max-width: 960px) {
  .card-grid-3,
  .insight-split,
  .notes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-header {
    text-align: left;
  }
}

@media (max-width: 720px) {
  .page-hero {
    padding: 3.2rem 0 2.4rem;
  }

  .page-title {
    font-size: 2.05rem;
    letter-spacing: 0.18em;
  }

  .card-grid-3,
  .insight-split,
  .notes-grid {
    grid-template-columns: 1fr;
  }

  .newsletter-inner {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .newsletter-form {
    width: 100%;
  }

  .newsletter-form .input {
    width: 100%;
  }
}

/* ---------------------------------------------
   Creator Insights – hero email signup
   --------------------------------------------- */

.hero-signup {
  margin-top: 0.4rem;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  color: rgba(235, 226, 219, 0.8);
  font-size: 0.8rem;
}

.hero-signup-row {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
}

.hero-input {
  flex: 1 1 auto;
  padding: 0.9rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(246, 232, 222, 0.55);
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.96rem;
  font-family: inherit;
  color: #f7f3ef;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.hero-input::placeholder {
  color: rgba(239, 226, 217, 0.8);
}

.hero-input:focus {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px rgba(180, 123, 104, 0.45);
  background: rgba(10, 7, 10, 0.96);
}

.hero-signup .btn.btn-primary {
  white-space: nowrap;
  padding-inline: 1.7rem;
}

.hero-signup-note {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(235, 226, 219, 0.8);
}

.hero-text-link {
  font-size: 0.84rem;
  color: #f7e0d0;
  text-decoration: none;
}

.hero-text-link:hover {
  text-decoration: underline;
}

/* Mobile adjustments */

@media (max-width: 640px) {
  .hero-signup-row {
    flex-direction: column;
  }

  .hero-signup .btn.btn-primary {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}





/* =============================================
   LEARN & GROW – Guides
   ============================================= */

.guides-main {
  background: radial-gradient(circle at top left,
    rgba(200, 158, 138, 0.11),
    transparent 55%),
    #0d0b10;
  color: #f8f5f3;
}

/* ---------- Hero ---------- */

.guides-hero {
  padding: 3.6rem 0 3.2rem;
}

.guides-hero-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 1.8rem;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 2.4rem;
  align-items: start;
}

.guides-hero-copy .eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.7rem;
}

.guides-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(2.2rem, 4vw, 2.7rem);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin: 0 0 0.9rem;
}

.guides-subtitle {
  margin: 0 0 1.4rem;
  font-size: 1.02rem;
  max-width: 520px;
  line-height: 1.7;
  color: rgba(248, 245, 243, 0.78);
}

.guides-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.guides-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(246, 232, 222, 0.36);
  background: rgba(7, 6, 8, 0.5);
  font-size: 0.78rem;
  color: rgba(249, 245, 240, 0.9);
}

.guides-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
}

/* Hero aside */

.guides-hero-aside {
  border-radius: 1.5rem;
  padding: 1.8rem 1.7rem 1.7rem;
  background: radial-gradient(circle at top left,
      rgba(255, 255, 255, 0.16),
      transparent 60%),
    rgba(17, 12, 18, 0.96);
  border: 1px solid rgba(246, 232, 222, 0.22);
  box-shadow: 0 26px 60px rgba(3, 2, 4, 0.75);
}

.guides-aside-title {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
}

.guides-aside-text {
  margin: 0 0 1.15rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(248, 245, 243, 0.8);
}

.guides-hero-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.guides-hero-input {
  width: 100%;
  padding: 0.9rem 1.1rem;
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(246, 232, 222, 0.35);
  color: #f8f5f3;
  font-size: 0.94rem;
  font-family: inherit;
  color: #f8f5f3;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  box-sizing: border-box;
}

.guides-hero-input:hover {
  background: rgba(255, 255, 255, 0.09);
}

.guides-hero-input::placeholder {
  color: rgba(240, 228, 220, 0.7);
}

.guides-hero-input:focus {
 background: rgba(0, 0, 0, 0.25);
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px rgba(180, 123, 104, 0.35);
}

.guides-hero-btn {
  width: 100%;
  justify-content: center;
}

.guides-hero-footnote {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(243, 235, 229, 0.75);
}

/* Use existing button styles but adjust for dark background */

.guides-hero .btn.btn-primary {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75);
}

/* ---------- Shared section header on dark/light ---------- */

.guides-section-dark {
  background: radial-gradient(circle at top left,
      rgba(255, 255, 255, 0.03),
      transparent 60%),
    #080608;
  color: #f4f0ec;
  border-top: 1px solid rgba(248, 245, 242, 0.08);
  border-bottom: 1px solid rgba(248, 245, 242, 0.08);
}

.guides-section-light {
  background: #f7f1eb;
  color: var(--text-main);
  border-top: 1px solid rgba(15, 23, 42, 0.05);
}

.guides-section-header {
  max-width: 900px;
  margin: 0 auto 2.1rem;
  padding: 0 1.8rem;
  text-align: left;
}

.guides-section-title {
  margin: 0 0 0.5rem;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.guides-section-intro {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(244, 238, 232, 0.86);
}

/* ---------- Featured playbooks list ---------- */

.guides-list {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 1.8rem 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.guide-card {
  border-radius: 1.4rem;
  padding: 1.65rem 1.7rem 1.5rem;
  background: radial-gradient(circle at top left,
      rgba(249, 245, 240, 0.12),
      transparent 65%),
    rgba(9, 7, 12, 0.98);
  border: 1px solid rgba(244, 234, 224, 0.26);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.7);
}

.guide-card-header {
  margin-bottom: 0.95rem;
}

.guide-label {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(245, 232, 222, 0.6);
  background: rgba(8, 6, 10, 0.7);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(250, 244, 240, 0.9);
  margin-bottom: 0.75rem;
}

.guide-label-green {
  border-color: rgba(177, 220, 187, 0.7);
  color: #d9f4df;
}

.guide-label-blue {
  border-color: rgba(189, 210, 246, 0.8);
  color: #deebff;
}

.guide-title {
  margin: 0 0 0.3rem;
  font-size: 1.1rem;
}

.guide-tagline {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(244, 237, 232, 0.8);
}

.guide-steps {
  margin: 0.9rem 0 1rem 1.2rem;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(244, 237, 231, 0.9);
}

.guide-steps li + li {
  margin-top: 0.25rem;
}

.guide-card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: space-between;
  font-size: 0.82rem;
  color: rgba(241, 233, 226, 0.75);
}

.guide-meta {
  font-weight: 500;
}

/* ---------- Browse by focus ---------- */

.guides-focus-grid {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 1.8rem 0.6rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}

.focus-card {
  border-radius: 1.2rem;
  padding: 1.6rem 1.5rem 1.5rem;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(42, 35, 30, 0.12);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.focus-title {
  margin: 0 0 0.45rem;
  font-size: 1.02rem;
}

.focus-text {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.focus-list {
  margin: 0 0 0.6rem 1rem;
  padding: 0;
  list-style-type: disc;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.focus-list li + li {
  margin-top: 0.2rem;
}

.focus-meta {
  display: inline-block;
  margin-top: 0.1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .guides-hero-inner {
    grid-template-columns: 1fr;
  }

  .guides-hero-aside {
    max-width: 420px;
  }

  .guides-section-header {
    text-align: left;
  }

  .guides-focus-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .guides-main {
    background: #0d0b10;
  }

  .guides-hero {
    padding-top: 3rem;
  }

  .guides-hero-inner {
    gap: 1.8rem;
  }

  .guides-section-header,
  .guides-list,
  .guides-focus-grid {
    padding-inline: 1.4rem;
  }

  .guides-focus-grid {
    grid-template-columns: 1fr;
  }
}




/* =============================================
   LEARN & GROW – Creator stories
   ============================================= */

.stories-main {
  background:
    radial-gradient(circle at top center, #f7eee5 0%, #f3e4d9 35%, #221619 82%, #130c10 100%);
  color: var(--text-main);
}

/* MASSIVE breathing room */
.stories-hero {
  padding: 7rem 0 12rem;
}

/* Premium glass panel */
.stories-hero-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 2.6rem 2.3rem 2.3rem;
  border-radius: 1.6rem;

  background:
    radial-gradient(circle at top left,
      rgba(255, 255, 255, 0.18),
      rgba(0, 0, 0, 0) 55%
    ),
    rgba(14, 9, 14, 0.88);

  border: 1px solid rgba(255, 245, 238, 0.16);
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);

  color: #faf6f2;

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Eyebrow + title + copy */

.stories-hero-inner .eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(248, 242, 236, 0.75);
  margin: 0 0 0.8rem;
}

.stories-title {
  font-family: "Playfair Display", serif;
  letter-spacing: 0.1em;
  font-size: clamp(2rem, 3.1vw, 2.45rem);
  text-transform: uppercase;
  margin: 0 0 1.1rem;
  color: #ffffff;
}

.stories-lead {
  margin: 0 0 1.6rem;
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(250, 245, 240, 0.9);
}

/* Coming soon */

.stories-coming {
  margin: 0 0 1.45rem;
}

.stories-badge {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(246, 232, 222, 0.7);
  background: rgba(246, 232, 222, 0.08);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f6e8de;
  margin-bottom: 0.55rem;
}

.stories-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(248, 242, 236, 0.86);
}

/* Notify form */

.stories-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.35rem;
}

.stories-input {
  flex: 1 1 230px;
  padding: 0.95rem 1.15rem;
  border-radius: 999px;
  border: 1px solid rgba(246, 232, 222, 0.55);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  transition: border-color .18s, box-shadow .18s, background .18s;
}

.stories-input::placeholder {
  color: rgba(240, 228, 220, 0.8);
}

.stories-input:focus {
  border-color: var(--accent-strong);
  background: rgba(10, 7, 10, 0.98);
  box-shadow: 0 0 0 3px rgba(180, 123, 104, 0.45);
}

.stories-btn {
  flex: 0 0 auto;
  padding-inline: 1.9rem;
  border-radius: 999px;
  box-shadow: 0 18px 42px rgba(0,0,0,.7);
}

.stories-note {
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: rgba(240, 230, 224, 0.78);
  flex-basis: 100%;
}

/* Mobile */
@media (max-width: 720px) {
  .stories-hero {
    padding-top: 3rem;   /* less space above */
    padding-bottom: 3.5rem;  /* less space below */
  }

  .stories-hero-inner {
    margin-inline: 1.1rem;           /* pull it in a bit */
    padding: 1.8rem 1.5rem 1.7rem;   /* tighter card padding */
    border-radius: 1.3rem;
  }

  .stories-title {
    font-size: 1.9rem;
    letter-spacing: 0.14em;
    margin-bottom: 0.7rem;
  }

  .stories-lead {
    font-size: 0.96rem;
    margin-bottom: 1.2rem;
  }

  .stories-coming {
    margin-bottom: 1.1rem;
  }

  .stories-form {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .stories-input {
    flex: 0 0 auto;
    width: 100%;
  }

  .stories-btn {
    width: 100%;
  }

  .stories-note {
    font-size: 0.78rem;
  }
}










/* =============================================
   PLATFORM – SPHERES
   ============================================= */

.spheres-main {
  background: radial-gradient(circle at top, #151016 0%, #050307 55%, #050307 100%);
  color: #f7f3ef;
}

/* =============================================
   SPHERES HERO - LIGHT THEME
   ============================================= */

.spheres-hero {
  min-height: auto;
  padding: 3rem 0 2rem;
  display: flex;
  align-items: center;
  background: 
    radial-gradient(ellipse 100% 80% at 70% 50%, rgba(200, 158, 138, 0.15), transparent 50%),
    radial-gradient(ellipse 60% 60% at 10% 90%, rgba(180, 123, 104, 0.1), transparent 50%),
    linear-gradient(170deg, #fdfbf9 0%, #f8f4f0 50%, #f3ede7 100%);
  overflow: hidden;
  position: relative;
}

.spheres-hero__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 3rem;
  align-items: center;
}

/* Content */
.spheres-hero__content {
  position: relative;
  z-index: 10;
}

/* Spheres hero entrance animations */
@keyframes spheresFadeSlideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes spheresFadeSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes spheresSceneReveal {
  from { opacity: 0; transform: translateY(40px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.spheres-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent-strong, #b47b68);
  background: rgba(200, 158, 138, 0.15);
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  margin-bottom: 1.25rem;
  animation: spheresFadeSlideDown 0.8s ease forwards;
  opacity: 0;
}

.spheres-hero__title {
  font-size: clamp(2.8rem, 5.5vw, 4rem);
  font-weight: 800;
  line-height: 1.08;
  color: #1f1b18;
  margin: 0 0 1.25rem;
  letter-spacing: -0.02em;
  animation: spheresFadeSlideUp 0.8s ease 0.1s forwards;
  opacity: 0;
}

.spheres-hero__subtitle {
  font-size: 1rem;
  line-height: 1.7;
  color: #6b6158;
  margin: 0 0 1.5rem;
  max-width: 420px;
  animation: spheresFadeSlideUp 0.8s ease 0.2s forwards;
  opacity: 0;
}

.spheres-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2rem;
  animation: spheresFadeSlideDown 0.8s ease 0.3s forwards;
  opacity: 0;
}

.spheres-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(200, 158, 138, 0.4);
  background: rgba(200, 158, 138, 0.1);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-strong, #b47b68);
}

.spheres-hero__cta .btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 2rem;
  background: linear-gradient(135deg, var(--accent, #c89e8a) 0%, var(--accent-strong, #b47b68) 100%);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0.6rem;
  border: none;
  cursor: pointer;
  box-shadow:
    0 4px 12px rgba(180, 123, 104, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  animation: spheresFadeSlideDown 0.8s ease 0.4s forwards;
  opacity: 0;
}

.spheres-hero__cta .btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 8px 20px rgba(180, 123, 104, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.1);
  filter: brightness(1.05);
}

/* Scene */
.spheres-hero__scene {
  position: relative;
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ambient orbs */
.spheres-ambient {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.spheres-ambient--1 {
  width: 200px;
  height: 200px;
  top: -5%;
  right: -8%;
  background: 
    radial-gradient(circle at 35% 35%, rgba(255,255,255,0.8), transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(200, 158, 138, 0.25), rgba(200, 158, 138, 0.08) 50%, transparent 70%);
  filter: blur(1px);
  animation: spheresAmbient1 25s ease-in-out infinite;
}

.spheres-ambient--2 {
  width: 140px;
  height: 140px;
  bottom: 5%;
  right: 15%;
  background: 
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6), transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(180, 123, 104, 0.2), transparent 60%);
  filter: blur(0.5px);
  animation: spheresAmbient2 20s ease-in-out infinite;
}

.spheres-ambient--3 {
  width: 100px;
  height: 100px;
  top: 35%;
  left: -8%;
  background: 
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.7), transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(200, 158, 138, 0.2), transparent 60%);
  animation: spheresAmbient3 18s ease-in-out infinite;
}

@keyframes spheresAmbient1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-20px, 15px) scale(1.05); }
  66% { transform: translate(10px, -10px) scale(0.98); }
}

@keyframes spheresAmbient2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(15px, -20px); }
}

@keyframes spheresAmbient3 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(12px, 10px); }
}

/* Sphere Swarm */
.spheres-swarm {
  position: relative;
  width: 300px;
  height: 300px;
  z-index: 2;
}

.swarm-orb {
  position: absolute;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

/* Dynamic entrance animations for spheres - each comes from a different direction */
@keyframes orbEnterFromLeft {
  0% { opacity: 0; transform: translateX(-120px) rotate(-180deg) scale(0.3); }
  60% { opacity: 1; transform: translateX(10px) rotate(10deg) scale(1.05); }
  100% { opacity: 1; transform: translateX(0) rotate(0deg) scale(1); }
}

@keyframes orbEnterFromRight {
  0% { opacity: 0; transform: translateX(120px) rotate(180deg) scale(0.3); }
  60% { opacity: 1; transform: translateX(-10px) rotate(-10deg) scale(1.05); }
  100% { opacity: 1; transform: translateX(0) rotate(0deg) scale(1); }
}

@keyframes orbEnterFromTop {
  0% { opacity: 0; transform: translateY(-100px) rotate(-90deg) scale(0.4); }
  60% { opacity: 1; transform: translateY(8px) rotate(5deg) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}

@keyframes orbEnterFromBottom {
  0% { opacity: 0; transform: translateY(100px) rotate(90deg) scale(0.4); }
  60% { opacity: 1; transform: translateY(-8px) rotate(-5deg) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}

@keyframes orbEnterSpin {
  0% { opacity: 0; transform: scale(0) rotate(-360deg); }
  70% { opacity: 1; transform: scale(1.1) rotate(15deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.swarm-orb--primary {
  width: 180px;
  height: 180px;
  left: 10%;
  top: 25%;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.95), transparent 35%),
    radial-gradient(circle at 60% 120%, rgba(0, 0, 0, 0.35), transparent 70%),
    radial-gradient(circle at 32% 18%, #f4d1b7, #c07a59 60%, #4a2520 100%);
  box-shadow:
    0 20px 50px rgba(180, 100, 80, 0.35),
    0 8px 20px rgba(0, 0, 0, 0.15),
    inset 0 -5px 20px rgba(0,0,0,0.1);
  animation: orbEnterFromLeft 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both, swarmFloat1 20s ease-in-out 1.5s infinite both;
}

.swarm-orb--peach {
  width: 130px;
  height: 130px;
  left: 50%;
  top: 5%;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.9), transparent 30%),
    radial-gradient(circle at 60% 120%, rgba(0, 0, 0, 0.3), transparent 70%),
    radial-gradient(circle at 35% 20%, #f7dcc4, #d29469 55%, #5a3025 100%);
  box-shadow:
    0 15px 40px rgba(200, 130, 100, 0.3),
    0 5px 15px rgba(0, 0, 0, 0.1);
  animation: orbEnterFromTop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s both, swarmFloat2 24s ease-in-out 1.6s infinite both;
}

.swarm-orb--lavender {
  width: 110px;
  height: 110px;
  left: 5%;
  top: -5%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.95), transparent 32%),
    radial-gradient(circle at 70% 120%, rgba(0, 0, 0, 0.3), transparent 70%),
    radial-gradient(circle at 32% 18%, #fff5eb, #f0c9a8 55%, #6a4530 100%);
  box-shadow:
    0 15px 40px rgba(200, 158, 138, 0.35),
    0 5px 15px rgba(0, 0, 0, 0.1);
  animation: orbEnterSpin 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both, swarmFloat3 18s ease-in-out 1.7s infinite both;
}

.swarm-orb--small-1 {
  width: 50px;
  height: 50px;
  left: 70%;
  top: 55%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.95), transparent 32%),
    radial-gradient(circle at 60% 130%, rgba(0, 0, 0, 0.3), transparent 70%),
    radial-gradient(circle at 30% 20%, #fff9f1, #f6d5b2 55%, #6a4030 100%);
  box-shadow:
    0 8px 20px rgba(200, 150, 120, 0.3);
  animation: orbEnterFromRight 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s both, swarmFloat4 15s ease-in-out 1.6s infinite both;
}

.swarm-orb--small-2 {
  width: 36px;
  height: 36px;
  left: -5%;
  top: 55%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.9), transparent 30%),
    radial-gradient(circle at 70% 130%, rgba(0, 0, 0, 0.3), transparent 70%),
    radial-gradient(circle at 30% 20%, #fff8f0, #e8c4a8 55%, #5a3a28 100%);
  box-shadow:
    0 6px 15px rgba(200, 158, 138, 0.3);
  animation: orbEnterFromBottom 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s both, swarmFloat5 17s ease-in-out 1.75s infinite both;
}

@keyframes swarmFloat1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(3deg); }
}

@keyframes swarmFloat2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(10px, -12px); }
}

@keyframes swarmFloat3 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-8px, 10px); }
}

@keyframes swarmFloat4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-6px, -8px) scale(1.05); }
}

@keyframes swarmFloat5 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6px, -6px) scale(1.05); }
}

/* Floating badges */
.spheres-badge {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
  box-shadow: 
    0 4px 12px rgba(0,0,0,0.04),
    0 12px 32px rgba(180, 123, 104, 0.12);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease;
  cursor: pointer;
  z-index: 5;
}

.spheres-badge:hover {
  transform: scale(1.15) translateY(-4px) !important;
  box-shadow: 
    0 8px 20px rgba(0,0,0,0.06),
    0 20px 50px rgba(180, 123, 104, 0.18);
}

.spheres-badge__glow {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 158, 138, 0.3), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
}

.spheres-badge:hover .spheres-badge__glow {
  opacity: 1;
}

.spheres-badge__icon {
  width: 24px;
  height: 24px;
  color: var(--accent-strong, #b47b68);
}

/* Members badge */
.spheres-badge--members {
  width: auto;
  height: 52px;
  padding: 0 16px;
  border-radius: 30px;
  gap: 8px;
  top: 8%;
  left: 0%;
  animation: spheresBadgeFloat1 7s ease-in-out infinite;
}

.spheres-badge__avatars {
  display: flex;
}

.spheres-badge__avatars img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -10px;
  object-fit: cover;
}

.spheres-badge__avatars img:first-child {
  margin-left: 0;
}

.spheres-badge__count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-strong, #b47b68);
}

/* Chat badge */
.spheres-badge--chat {
  width: 56px;
  height: 56px;
  bottom: 25%;
  right: 5%;
  animation: spheresBadgeFloat2 6s ease-in-out infinite;
}

.spheres-badge--chat .spheres-badge__icon {
  width: 22px;
  height: 22px;
}

/* Heart badge */
.spheres-badge--heart {
  width: 48px;
  height: 48px;
  bottom: 10%;
  left: 10%;
  background: #ec4899;
  animation: spheresBadgeFloat3 5.5s ease-in-out infinite;
}

.spheres-badge--heart .spheres-badge__icon {
  color: #fff;
  width: 20px;
  height: 20px;
}

.spheres-badge--heart .spheres-badge__glow {
  background: radial-gradient(circle, rgba(236, 72, 153, 0.4), transparent 70%);
}

/* Thumbs up badge */
.spheres-badge--thumbsup {
  width: 52px;
  height: 52px;
  top: 15%;
  right: 10%;
  background: #fff;
  animation: spheresBadgeFloat4 6.5s ease-in-out infinite;
}

.spheres-badge--thumbsup .spheres-badge__icon {
  color: #f59e0b;
  width: 22px;
  height: 22px;
}

.spheres-badge--thumbsup .spheres-badge__glow {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.4), transparent 70%);
}

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

@keyframes spheresBadgeFloat2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(-5deg); }
}

@keyframes spheresBadgeFloat3 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes spheresBadgeFloat4 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-11px) rotate(5deg); }
}

/* Responsive */
@media (max-width: 1024px) {
  .spheres-hero__inner {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 2rem;
  }

  .spheres-hero__content {
    display: contents;
  }

  .spheres-eyebrow {
    order: 1;
  }

  .spheres-hero__scene {
    order: 2;
    height: 400px;
  }

  .spheres-hero__title {
    order: 3;
  }

  .spheres-hero__subtitle {
    order: 4;
    max-width: 100%;
  }

  .spheres-hero__pills {
    order: 5;
    justify-content: center;
  }

  .spheres-hero__cta {
    order: 6;
    display: flex;
    justify-content: center;
  }

  .spheres-swarm {
    width: 260px;
    height: 260px;
  }
}

@media (max-width: 600px) {
  .spheres-hero {
    padding: 2.5rem 0 2rem;
  }
  
  .spheres-hero__scene {
    height: 340px;
  }
  
  .spheres-swarm {
    width: 220px;
    height: 220px;
  }
  
  .swarm-orb--primary {
    width: 140px;
    height: 140px;
  }
  
  .swarm-orb--peach {
    width: 100px;
    height: 100px;
  }
  
  .swarm-orb--lavender {
    width: 85px;
    height: 85px;
  }
  
  .spheres-ambient--1 {
    display: none;
  }
  
  .spheres-badge--members {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .spheres-badge--heart {
    bottom: 8%;
    left: 1rem;
    right: 5%;
  }

   .spheres-badge--chat{
    bottom: 20%;
    left: auto;
    right: 5%;
  }

  .spheres-badge--thumbsup {
    bottom: 5%;
    left: 1rem;
    right: 5%;
  }
}

/* ---------- Hero clip ---------- */

.spheres-hero-video {
  max-width: 960px;
  margin: 2.8rem auto 0;
  padding: 0 1.8rem;
  margin-top: 1rem;
}

.sphere-clip {
  position: relative;
  border-radius: 1.4rem;
  overflow: hidden;
  background: 
    radial-gradient(ellipse 100% 100% at 30% 20%, rgba(200, 158, 138, 0.12), transparent 50%),
    radial-gradient(ellipse 80% 80% at 80% 80%, rgba(176, 173, 255, 0.08), transparent 50%),
    linear-gradient(145deg, #1a1614 0%, #0d0b0a 100%);
  box-shadow: 
    0 40px 80px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.sphere-clip::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9 */
}

/* Decorative elements */
.sphere-clip::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(244, 209, 183, 0.08) 0%, transparent 25%),
    radial-gradient(circle at 75% 60%, rgba(176, 173, 255, 0.06) 0%, transparent 20%),
    radial-gradient(circle at 50% 80%, rgba(200, 158, 138, 0.05) 0%, transparent 30%),
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 40px 40px, 40px 40px;
  pointer-events: none;
}

/* Play button */
.sphere-clip-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2), transparent 60%),
    linear-gradient(135deg, rgba(200, 158, 138, 0.95), rgba(180, 123, 104, 1));
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sphere-clip-play:hover {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 
    0 25px 60px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.sphere-clip-play::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
  margin-left: 4px;
}

/* Label */
.sphere-clip-label {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* Video (hidden until loaded) */
.sphere-clip video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.sphere-clip video.is-loaded {
  opacity: 1;
}

.sphere-clip video.is-loaded ~ .sphere-clip-play,
.sphere-clip video.is-loaded ~ .sphere-clip-label {
  display: none;
}

/* ---------- Shared section styling ---------- */

.spheres-section {
  padding: 3.6rem 0 3.9rem;
}

.spheres-section-header {
  max-width: 820px;
  margin: 0 auto 2.2rem;
  padding: 0 1.8rem;
  text-align: left;
}

.spheres-section-header--center {
  text-align: center;
}

.spheres-section-header--center .section-intro {
  max-width: 640px;
  margin-inline: auto;
}

.spheres-section .section-eyebrow {
  margin-bottom: 0.55rem;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 231, 222, 0.78);
}

.spheres-section .section-title {
  margin: 0 0 0.65rem;
  font-size: 1.6rem;
}

.spheres-section .section-intro {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.7;
  color: rgba(233, 220, 212, 0.9);
}

/* ---------- Post-hero sections ---------- */

.spheres-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.8rem;
}

.spheres-section--light {
  background:
    radial-gradient(circle at top left, #f5e3d7 0%, rgba(12, 5, 9, 0.85) 55%),
    linear-gradient(180deg, #12070c 0%, #080306 100%);
}

.spheres-section--dark {
  background:
    radial-gradient(circle at top, #f1e0d7 0%, rgba(14, 7, 16, 0.9) 52%),
    linear-gradient(180deg, #0c050b 0%, #050307 100%);
}

.spheres-section-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2.4rem;
  align-items: center;
}

.spheres-section-grid--reverse {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2.4rem;
  align-items: center;
}

.spheres-section-grid--reverse .spheres-text-block {
  order: 2;
}

.spheres-text-block {
  max-width: 540px;
}

.spheres-bullet-list {
  margin: 1.25rem 0 0;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: 0.95rem;
  color: rgba(245, 232, 223, 0.92);
}

/* =============================================
   SPHERES – LIGHT SECTION (Configure)
   ============================================= */

.spheres-section--light {
  background: #f6ede5;
  color: #2a2623;
  padding: 4.5rem 0;
}

.spheres-section--light .section-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 0.6rem;
}

.spheres-section--light .section-title {
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.25;
  color: #2a2623;
  margin: 0 0 1rem;
}

.spheres-section--light .section-intro {
  font-size: 1rem;
  line-height: 1.7;
  color: #5a534d;
  margin: 0 0 1.8rem;
}

/* Feature list with icons */
.spheres-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.spheres-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.feature-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: 
    radial-gradient(circle at 30% 30%, #fff 0%, transparent 70%),
    linear-gradient(135deg, #f8ebe0 0%, #e8d4c4 100%);
  border: 1px solid rgba(180, 123, 104, 0.2);
  box-shadow: 
    0 4px 12px rgba(180, 123, 104, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-strong);
}

.feature-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4a4540;
  padding-top: 0.1rem;
}

.feature-text strong {
  color: #2a2623;
  font-weight: 600;
}

/* Section grid */
.spheres-section--light .spheres-section-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

.spheres-section--light .spheres-text-block {
  max-width: 520px;
}

/* Video block */
.spheres-video-block {
  display: flex;
  justify-content: flex-end;
}

.section-video-clip {
  position: relative;
  width: 100%;
  max-width: 480px;
  border-radius: 1.2rem;
  overflow: hidden;
  background: 
    radial-gradient(ellipse 80% 60% at 25% 25%, rgba(255, 255, 255, 0.4), transparent 50%),
    radial-gradient(ellipse 60% 60% at 80% 80%, rgba(200, 158, 138, 0.15), transparent 50%),
    linear-gradient(145deg, #1f1a18 0%, #12100f 100%);
  box-shadow: 
    0 30px 60px rgba(90, 60, 40, 0.25),
    0 0 0 1px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.section-video-clip::before {
  content: "";
  display: block;
  padding-top: 66.67%; /* 3:2 aspect ratio */
}

/* Subtle texture overlay */
.section-video-clip::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(244, 209, 183, 0.08) 0%, transparent 30%),
    radial-gradient(circle at 70% 70%, rgba(176, 173, 255, 0.05) 0%, transparent 25%);
  pointer-events: none;
}

/* Play button */
.section-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.25), transparent 60%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(245, 240, 235, 0.98));
  box-shadow: 
    0 12px 30px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.section-video-play:hover {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 
    0 16px 40px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.section-video-play::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent var(--accent-strong);
  margin-left: 3px;
}

/* Video (hidden until loaded) */
.section-video-clip video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.section-video-clip video.is-loaded {
  opacity: 1;
}

.section-video-clip video.is-loaded ~ .section-video-play {
  display: none;
}

/* Responsive */
@media (max-width: 900px) {
  .spheres-section--light .spheres-section-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .spheres-section--light .spheres-text-block {
    max-width: 100%;
  }

  .spheres-video-block {
    justify-content: center;
  }

  .section-video-clip {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .spheres-section--light {
    padding: 3rem 0;
  }

  .spheres-feature-list li {
    flex-direction: column;
    gap: 0.5rem;
  }

  .feature-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .feature-icon svg {
    width: 16px;
    height: 16px;
  }
}

/* =============================================
   SPHERES – FEATURES WITH SCATTERED VIDEOS
   ============================================= */

.spheres-features {
  background: linear-gradient(180deg, #f8f3ef 0%, #f2ebe4 100%);
  padding: 5rem 0;
  overflow: hidden;
}

.spheres-features__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Header */
.spheres-features__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3.5rem;
}

.features-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin: 0 0 0.6rem;
}

.features-title {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  color: #2a2623;
  margin: 0 0 1rem;
}

.features-intro {
  font-size: 1rem;
  line-height: 1.7;
  color: #5a534d;
  margin: 0;
}

/* Bento-style grid */
.spheres-features__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(160px, auto);
  gap: 1.25rem;
}

/* Feature cards */
.feature-card {
  position: relative;
  background: #ffffff;
  border-radius: 1.1rem;
  padding: 1.4rem 1.25rem;
  border: 1px solid rgba(180, 123, 104, 0.1);
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 8px 24px rgba(140, 100, 80, 0.06);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  border-radius: 1.1rem 1.1rem 0 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.05),
    0 16px 40px rgba(140, 100, 80, 0.12);
  border-color: rgba(180, 123, 104, 0.2);
}

.feature-card:hover::before {
  opacity: 1;
}

/* Icon */
.feature-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: linear-gradient(135deg, #fdf8f5 0%, #f5ebe3 100%);
  border: 1px solid rgba(180, 123, 104, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
  color: var(--accent-strong);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.feature-card:hover .feature-card__icon {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(180, 123, 104, 0.3);
}

.feature-card__icon svg {
  width: 20px;
  height: 20px;
}

/* Title & text */
.feature-card__title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #2a2623;
  margin: 0 0 0.35rem;
  line-height: 1.3;
}

.feature-card__text {
  font-size: 0.82rem;
  line-height: 1.5;
  color: #6a635d;
  margin: 0;
}

/* Video cards */
.feature-video {
  border-radius: 1.1rem;
  overflow: hidden;
  position: relative;
}

/* Wide video spans 2 columns */
.feature-video--wide {
  grid-column: span 2;
}

.feature-video__clip {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 160px;
  background: 
    radial-gradient(ellipse 80% 60% at 30% 30%, rgba(200, 158, 138, 0.15), transparent 50%),
    radial-gradient(ellipse 60% 60% at 80% 70%, rgba(176, 173, 255, 0.1), transparent 50%),
    linear-gradient(145deg, #1f1a18 0%, #12100f 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 1.1rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

.feature-video:hover .feature-video__clip {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  transform: translateY(-3px);
}

/* Subtle grid pattern */
.feature-video__clip::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

/* Play button */
.feature-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2), transparent 60%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(245, 240, 235, 0.98));
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.feature-video:hover .feature-video__play {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 
    0 12px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.feature-video__play::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent var(--accent-strong);
  margin-left: 2px;
}

/* Label */
.feature-video__label {
  position: absolute;
  bottom: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.4);
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  backdrop-filter: blur(8px);
}

/* Video element */
.feature-video__clip video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.feature-video__clip video.is-loaded {
  opacity: 1;
}

.feature-video__clip video.is-loaded ~ .feature-video__play,
.feature-video__clip video.is-loaded ~ .feature-video__label {
  opacity: 0;
  pointer-events: none;
}

/* Responsive */
@media (max-width: 1000px) {
  .spheres-features__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(140px, auto);
  }

  .feature-video--wide {
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  .spheres-features {
    padding: 3.5rem 0;
  }

  .spheres-features__inner {
    padding: 0 1.25rem;
  }

  .spheres-features__header {
    margin-bottom: 2.5rem;
  }

  .spheres-features__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 1rem;
  }

  .feature-video--wide {
    grid-column: span 1;
  }

  .feature-video__clip {
    min-height: 180px;
  }

  .feature-card {
    padding: 1.2rem 1.1rem;
  }
}

/* =============================================
   DECORATIVE ELEMENTS (Optional)
   ============================================= */

/* Add floating orb decorations */
.spheres-features__inner {
  position: relative;
}

.spheres-features__inner::before,
.spheres-features__inner::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.4;
}

.spheres-features__inner::before {
  width: 300px;
  height: 300px;
  top: -100px;
  right: -150px;
  background: radial-gradient(circle, rgba(200, 158, 138, 0.2), transparent 70%);
}

.spheres-features__inner::after {
  width: 200px;
  height: 200px;
  bottom: -50px;
  left: -100px;
  background: radial-gradient(circle, rgba(176, 173, 255, 0.15), transparent 70%);
}


/* =============================================
   SPHERE SLIDER – CLEAN CONSOLIDATED CSS
   ============================================= */

.sphere-slider {
  --slider-bg: linear-gradient(180deg, #f8f3ef 0%, #f2ebe4 100%);
  --card-bg: #ffffff;
  --mock-bg: linear-gradient(160deg, #fdfbf9 0%, #f5f0eb 100%);
  --text-primary: #2a2623;
  --text-secondary: #5a534d;
  --text-muted: #8a847e;
  --border-light: rgba(180, 123, 104, 0.12);
  --border-mock: rgba(180, 123, 104, 0.15);

  background: var(--slider-bg);
  padding: 5rem 0 4rem;
  overflow: hidden;
}

/* Header */
.sphere-slider__header {
  text-align: center;
  margin-bottom: 3rem;
  padding: 0 2rem;
}

.sphere-slider__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin: 0 0 0.5rem;
  margin-top: -2rem;
}

.sphere-slider__title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-primary);
  margin: 0;
  max-width: 700px;
  margin-inline: auto;
}

/* Viewport - NO padding, let JS handle centering */
.sphere-slider__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* Track */
.sphere-slider__track {
  display: flex;
  gap: 5rem;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  cursor: grab;
}

.sphere-slider__track:active {
  cursor: grabbing;
}

/* Individual slide - 1.3x scaled */
.sphere-slide {
  flex: 0 0 min(950px, 64.5%);
  width: auto;
  padding: 0;
  box-sizing: border-box;
}

.sphere-slide__inner {
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: 1.8rem;
  padding: 2.1rem;
  min-height: 350px;
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 12px 40px rgba(140, 100, 80, 0.08);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.sphere-slide__inner:hover {
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.06),
    0 20px 60px rgba(140, 100, 80, 0.12);
}

/* =============================================
   BASE MOCK CONTAINER - 1.3x scaled
   ============================================= */

.sphere-slide__mock {
  background: var(--mock-bg);
  border: 1px solid var(--border-mock);
  border-radius: 1.15rem;
  overflow: hidden;
  height: 100%;
  min-height: 365px;
  max-height: 365px;
  display: flex;
  flex-direction: column;
  box-shadow: 
    0 2px 8px rgba(140, 100, 80, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: box-shadow 0.3s ease;
}

.sphere-slide:hover .sphere-slide__mock {
  box-shadow: 
    0 2px 8px rgba(140, 100, 80, 0.08),
    0 0 30px rgba(200, 158, 138, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.slide-mock__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.15rem;
  border-bottom: 1px solid rgba(180, 123, 104, 0.1);
  background: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

.slide-mock__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent), var(--accent-strong));
  box-shadow: 0 0 8px rgba(200, 158, 138, 0.5);
  animation: headerDotPulse 2s ease-in-out infinite;
}

@keyframes headerDotPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(200, 158, 138, 0.5); }
  50% { box-shadow: 0 0 12px rgba(200, 158, 138, 0.8); }
}

.slide-mock__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.slide-mock__badge {
  margin-left: auto;
  font-size: 0.68rem;
  padding: 0.18rem 0.58rem;
  border-radius: 999px;
  background: rgba(200, 158, 138, 0.15);
  color: var(--accent-strong);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.slide-mock__count {
  margin-left: auto;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* =============================================
   1. CHAT MOCK - 1.3x scaled
   ============================================= */

.slide-mock__chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 0.9rem;
}

.chat-messages-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.chat-msg {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  will-change: transform, opacity;
}

.chat-msg--owner {
  flex-direction: row-reverse;
}

.chat-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5e6dc, #e8d4c4);
  border: 1px solid rgba(180, 123, 104, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #5a4a42;
  flex-shrink: 0;
  overflow: hidden;
}

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

.chat-msg--owner .chat-avatar {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border-color: transparent;
  color: #fff;
}

.chat-bubble {
  background: #ffffff;
  border: 1px solid rgba(180, 123, 104, 0.12);
  border-radius: 0 0.78rem 0.78rem 0.78rem;
  padding: 0.48rem 0.78rem;
  max-width: 250px;
  box-shadow: 0 2px 8px rgba(140, 100, 80, 0.08);
}

.chat-msg--owner .chat-bubble {
  background: linear-gradient(135deg, rgba(200, 158, 138, 0.15), rgba(200, 158, 138, 0.08));
  border: 1px solid rgba(200, 158, 138, 0.25);
  border-radius: 0.78rem 0 0.78rem 0.78rem;
}

.chat-name {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.18rem;
}

.chat-text {
  font-size: 0.82rem;
  line-height: 1.42;
  color: var(--text-primary);
}

/* =============================================
   GALLERY MOCK - SLIDING ROWS
   Replace the existing .slide-mock__gallery styles
   ============================================= */

.slide-mock__gallery-scroll {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.75rem;
  overflow: hidden;
}

.gallery-row {
  overflow: hidden;
  border-radius: 0.6rem;
}

.gallery-row__track {
  display: flex;
  gap: 0.6rem;
  width: max-content;
}

/* Top row: slides right to left */
.gallery-row--top .gallery-row__track {
  animation: slideLeft 35s linear infinite;
}

/* Bottom row: slides left to right */
.gallery-row--bottom .gallery-row__track {
  animation: slideRight 35s linear infinite;
}

/* Pause on hover 
.slide-mock__gallery-scroll:hover .gallery-row__track {
  animation-play-state: paused;
} */

/* Gallery items */
.slide-mock__gallery-scroll .gallery-item {
  flex: 0 0 auto;
  width: 160px;
  height: 130px;
  border-radius: 0.6rem;
  overflow: hidden;
  background: linear-gradient(135deg, #f0e8e2 0%, #e8ddd5 100%);
  border: 1px solid rgba(180, 123, 104, 0.1);
}

.slide-mock__gallery-scroll .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Animations */
@keyframes slideLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

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


/* =============================================
   3. LEADERBOARD MOCK - 1.3x scaled
   ============================================= */

.slide-mock__leaders {
  flex: 1;
  padding: 0.7rem;
  position: relative;
  overflow: hidden;
}

.slide-mock__leaders .leader-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.65rem;
  background: #ffffff;
  border: 1px solid rgba(180, 123, 104, 0.1);
  border-radius: 0.6rem;
  box-shadow: 0 2px 6px rgba(140, 100, 80, 0.05);
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  height: 48px;
  transition: 
    top 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease;
  will-change: top, transform;
}

.slide-mock__leaders .leader-row[data-rank="1"] { 
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.18), #ffffff 70%); 
  border-color: rgba(255, 215, 0, 0.3);
}

.slide-mock__leaders .leader-row[data-rank="2"] { 
  background: linear-gradient(90deg, rgba(192, 192, 192, 0.15), #ffffff 70%); 
  border-color: rgba(192, 192, 192, 0.25);
}

.slide-mock__leaders .leader-row[data-rank="3"] { 
  background: linear-gradient(90deg, rgba(205, 127, 50, 0.12), #ffffff 70%); 
  border-color: rgba(205, 127, 50, 0.2);
}

.slide-mock__leaders .leader-row.is-lifting {
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(140, 100, 80, 0.2);
  z-index: 10;
}

.slide-mock__leaders .leader-avatar {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5e6dc, #e8d4c4);
  border: 1px solid rgba(180, 123, 104, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  color: #5a4a42;
  flex-shrink: 0;
  overflow: hidden;
}

.slide-mock__leaders .leader-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.leader-rank {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: rgba(200, 158, 138, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent-strong);
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.slide-mock__leaders .leader-row[data-rank="1"] .leader-rank { 
  background: linear-gradient(135deg, #ffd700, #ffaa00); 
  color: #5a4a20;
  box-shadow: 0 2px 8px rgba(255, 200, 0, 0.4);
}

.slide-mock__leaders .leader-row[data-rank="2"] .leader-rank { 
  background: linear-gradient(135deg, #e0e0e0, #b0b0b0); 
  color: #4a4a4a; 
}

.slide-mock__leaders .leader-row[data-rank="3"] .leader-rank { 
  background: linear-gradient(135deg, #cd7f32, #a05a20); 
  color: #fff; 
}

.leader-name {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-primary);
}

.leader-streak {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.leader-pts {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-strong);
  min-width: 58px;
  text-align: right;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.leader-pts.is-popping {
  transform: scale(1.3);
}

/* =============================================
   4. PROGRESS MOCK - 1.3x scaled
   ============================================= */

.slide-mock__progress {
  flex: 1;
  padding: 1.35rem 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}

.progress-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1.1rem;
  background: linear-gradient(135deg, rgba(200, 158, 138, 0.15), rgba(200, 158, 138, 0.08));
  border: 1px solid rgba(200, 158, 138, 0.25);
  border-radius: 999px;
  animation: badgeFloat 3s ease-in-out infinite;
}

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

.progress-icon {
  font-size: 1.15rem;
}

.progress-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent-strong);
}

.progress-bar {
  width: 100%;
  max-width: 230px;
  height: 7px;
  background: rgba(180, 123, 104, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-strong), var(--accent));
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: progressShine 2s ease-in-out infinite;
}

@keyframes progressShine {
  0% { left: -100%; }
  100% { left: 200%; }
}

.progress-text {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

.progress-text strong {
  color: var(--text-primary);
}

[data-progress-points] {
  display: inline-block;
  font-weight: 700;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.progress-levels {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: center;
}

.lvl {
  font-size: 0.68rem;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: rgba(180, 123, 104, 0.08);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lvl--done {
  background: rgba(138, 180, 160, 0.18);
  color: #4a7a60;
}

.lvl--current {
  background: linear-gradient(135deg, rgba(200, 158, 138, 0.2), rgba(200, 158, 138, 0.1));
  color: var(--accent-strong);
  border: 1px solid rgba(200, 158, 138, 0.3);
  animation: levelGlow 2s ease-in-out infinite;
}

@keyframes levelGlow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(200, 158, 138, 0.1); }
  50% { box-shadow: 0 0 0 4px rgba(200, 158, 138, 0.2); }
}

/* =============================================
   5. ACCESS CONTROL MOCK - 1.3x scaled
   ============================================= */

.slide-mock__access {
  flex: 1;
  padding: 0.78rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.access-option {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem 0.9rem;
  background: #ffffff;
  border: 1px solid rgba(180, 123, 104, 0.1);
  border-radius: 0.7rem;
  box-shadow: 0 1px 3px rgba(140, 100, 80, 0.04);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.access-option.is-active {
  background: linear-gradient(135deg, rgba(200, 158, 138, 0.15), rgba(200, 158, 138, 0.05));
  border-color: rgba(200, 158, 138, 0.3);
  box-shadow: 0 4px 15px rgba(180, 122, 89, 0.15);
}

.access-icon {
  font-size: 1.25rem;
}

.access-info {
  flex: 1;
}

.access-name {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.access-desc {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.access-toggle {
  width: 42px;
  height: 23px;
  border-radius: 999px;
  background: rgba(180, 123, 104, 0.15);
  position: relative;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.access-toggle::before {
  content: "";
  position: absolute;
  top: 3.5px;
  left: 3.5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.access-toggle--on {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: 0 0 12px rgba(180, 122, 89, 0.4);
}

.access-toggle--on::before {
  transform: translateX(19px);
}

/* =============================================
   6. INVITE MOCK - 1.3x scaled
   ============================================= */

.slide-mock__invite {
  flex: 1;
  padding: 1.3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.3rem;
}

.invite-link-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.9rem;
  background: #ffffff;
  border: 1px solid rgba(180, 123, 104, 0.15);
  border-radius: 0.7rem;
  box-shadow: 0 1px 3px rgba(140, 100, 80, 0.04);
}

.invite-url {
  flex: 1;
  font-size: 0.82rem;
  font-family: ui-monospace, monospace;
  color: var(--text-secondary);
}

.invite-copy {
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.36rem 0.82rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 0.45rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.invite-copy:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(180, 122, 89, 0.3);
}

.invite-stats {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.invite-stat {
  text-align: center;
}

.stat-value {
  display: inline-block;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-primary);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stat-label {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* =============================================
   7. ACTIVITY MOCK - 1.3x scaled
   ============================================= */

.slide-mock__activity {
  flex: 1;
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  overflow: hidden;
}

.activity-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.65rem;
  background: #ffffff;
  border: 1px solid rgba(180, 123, 104, 0.1);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(140, 100, 80, 0.04);
}

.activity-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(180, 123, 104, 0.25);
  flex-shrink: 0;
}

.activity-dot--new {
  background: var(--accent);
  animation: dotPing 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes dotPing {
  0% { box-shadow: 0 0 0 0 rgba(180, 122, 89, 0.7); }
  70% { box-shadow: 0 0 0 6px rgba(180, 122, 89, 0); }
  100% { box-shadow: 0 0 0 0 rgba(180, 122, 89, 0); }
}

.activity-text {
  flex: 1;
  font-size: 0.8rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-text strong {
  color: var(--accent-strong);
}

.activity-time {
  font-size: 0.66rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* =============================================
   8. MEMBERS MOCK - 1.3x scaled
   ============================================= */

.slide-mock__members-scroll {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.slide-mock__members-scroll::before,
.slide-mock__members-scroll::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 30px;
  z-index: 2;
  pointer-events: none;
}

.slide-mock__members-scroll::before {
  top: 0;
  background: linear-gradient(180deg, var(--mock-bg, #f0ebe5) 0%, transparent 100%);
}

.slide-mock__members-scroll::after {
  bottom: 0;
  background: linear-gradient(0deg, var(--mock-bg, #f0ebe5) 0%, transparent 100%);
}

.members-grid-track {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.58rem;
  padding: 0.58rem;
  animation: membersGridScroll 12s linear infinite;
}

@keyframes membersGridScroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-33.33%); }
}

/*
.members-grid-track:hover {
  animation-play-state: paused;
} */

.member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.68rem 0.45rem;
  background: #ffffff;
  border: 1px solid rgba(180, 123, 104, 0.1);
  border-radius: 0.65rem;
  box-shadow: 0 2px 6px rgba(140, 100, 80, 0.05);
  transition: all 0.2s ease;
}

.member-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(140, 100, 80, 0.1);
}

.member-card__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5e6dc, #e8d4c4);
  border: 1px solid rgba(180, 123, 104, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #5a4a42;
  overflow: hidden;
}

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

.member-avatar--legend {
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  border-color: rgba(255, 170, 0, 0.3);
  box-shadow: 0 0 8px rgba(255, 200, 0, 0.3);
}

.member-card__name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
}

.member-card__level {
  font-size: 0.56rem;
  padding: 0.12rem 0.4rem;
  background: rgba(200, 158, 138, 0.12);
  color: var(--accent-strong);
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.member-lvl--legend {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 170, 0, 0.15));
  color: #a67c00;
}

.member-lvl--new {
  background: rgba(138, 180, 160, 0.18);
  color: #4a7a60;
}

/* Disable image interaction */
.chat-avatar img,
.leader-avatar img,
.member-card__avatar img,
.gallery-item img {
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* =============================================
   SLIDE CONTENT - 1.3x scaled
   ============================================= */

.sphere-slide__content {
  padding: 1.35rem 0.6rem 1.35rem 0;
}

.sphere-slide__heading {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.9rem;
  line-height: 1.25;
}

.sphere-slide__text {
  font-size: 1.1rem;
  line-height: 1.72;
  color: var(--text-secondary);
  margin: 0;
}

/* =============================================
   NAVIGATION - 1.3x scaled
   ============================================= */

.sphere-slider__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.4rem;
  margin-top: 2.8rem;
  padding: 0 2rem;
}

.sphere-slider__arrow {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: #ffffff;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(140, 100, 80, 0.08);
}

.sphere-slider__arrow:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(180, 123, 104, 0.25);
}

.sphere-slider__arrow:active {
  transform: scale(0.95);
}

.sphere-slider__dots {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.sphere-slider__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(180, 123, 104, 0.25);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.sphere-slider__dot:hover {
  background: rgba(180, 123, 104, 0.5);
}

.sphere-slider__dot.is-active {
  background: var(--accent-strong);
  width: 32px;
  border-radius: 999px;
}

/* =============================================
   RESPONSIVE - TABLET
   ============================================= */

@media (max-width: 900px) {
  .sphere-slider {
    padding: 4rem 0 3rem;
  }

  .sphere-slider__track {
    gap: 1.5rem;
  }

  .sphere-slide {
    flex: 0 0 min(500px, 85%);
  }

  .sphere-slide__inner {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.25rem;
    min-height: auto;
  }

  .sphere-slide__mock {
    min-height: 340px;
    max-height: 340px;
  }

  .sphere-slide__content {
    padding: 0.5rem 0 0 0;
  }

  .sphere-slide__heading {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }

  .sphere-slide__text {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .sphere-slider__nav {
    margin-top: 2rem;
  }

  .slide-mock__gallery-scroll .gallery-item {
    width: 130px;
    height: 105px;
  }
}

/* =============================================
   RESPONSIVE - MOBILE
   ============================================= */

@media (max-width: 600px) {
  .sphere-slider {
    padding: 3rem 0 2.5rem;
  }

  .sphere-slider__header {
    margin-bottom: 2rem;
  }

  .sphere-slider__track {
    gap: 1rem;
  }

  .sphere-slide {
    flex: 0 0 min(400px, 90%);
  }

  .sphere-slide__inner {
    padding: 1rem;
    gap: 1rem;
  }

  .sphere-slide__mock {
    min-height: 300px;
    max-height: 300px;
  }

  .sphere-slider__eyebrow{
    margin-top: 0.8rem;
  }

  .sphere-slide__heading {
    font-size: 1.15rem;
  }

  .sphere-slide__text {
    font-size: 0.88rem;
  }

  /* Smaller elements inside mocks */
  .slide-mock__header {
    padding: 0.6rem 0.8rem;
  }

  .slide-mock__title {
    font-size: 0.8rem;
  }

  .slide-mock__badge,
  .slide-mock__count {
    font-size: 0.6rem;
  }

  /* Chat */
  .chat-avatar {
    width: 26px;
    height: 26px;
  }

  .chat-bubble {
    padding: 0.35rem 0.5rem;
    max-width: 180px;
  }

  .chat-name {
    font-size: 0.55rem;
  }

  .chat-text {
    font-size: 0.72rem;
  }

  /* Leaderboard */
  .slide-mock__leaders .leader-row {
    height: 40px;
    padding: 0.35rem 0.5rem;
    gap: 0.4rem;
  }

  .slide-mock__leaders .leader-avatar {
    width: 22px;
    height: 22px;
  }

  .leader-rank {
    width: 18px;
    height: 18px;
    font-size: 0.55rem;
  }

  .leader-name {
    font-size: 0.7rem;
  }

  .leader-streak {
    font-size: 0.55rem;
  }

  .leader-pts {
    font-size: 0.65rem;
    min-width: 45px;
  }

  /* Progress */
  .slide-mock__progress {
    padding: 1rem 0.75rem;
    gap: 0.6rem;
  }

  .progress-badge {
    padding: 0.3rem 0.7rem;
  }

  .progress-icon {
    font-size: 0.9rem;
  }

  .progress-label {
    font-size: 0.75rem;
  }

  .progress-bar {
    max-width: 160px;
    height: 5px;
  }

  .progress-text {
    font-size: 0.7rem;
  }

  .lvl {
    font-size: 0.5rem;
    padding: 0.15rem 0.35rem;
  }

  /* Access */
  .slide-mock__access {
    padding: 0.5rem;
    gap: 0.4rem;
  }

  .access-option {
    padding: 0.5rem 0.6rem;
    gap: 0.5rem;
  }

  .access-icon {
    font-size: 1rem;
  }

  .access-name {
    font-size: 0.75rem;
  }

  .access-desc {
    font-size: 0.6rem;
  }

  .access-toggle {
    width: 32px;
    height: 18px;
  }

  .access-toggle::before {
    width: 12px;
    height: 12px;
    top: 3px;
    left: 3px;
  }

  .access-toggle--on::before {
    transform: translateX(14px);
  }

  /* Invite */
  .slide-mock__invite {
    padding: 0.75rem;
    gap: 0.75rem;
  }

  .invite-link-box {
    padding: 0.5rem 0.6rem;
  }

  .invite-url {
    font-size: 0.65rem;
  }

  .invite-copy {
    font-size: 0.6rem;
    padding: 0.25rem 0.5rem;
  }

  .stat-value {
    font-size: 1.1rem;
  }

  .stat-label {
    font-size: 0.55rem;
  }

  /* Activity */
  .slide-mock__activity {
    padding: 0.5rem;
    gap: 0.3rem;
  }

  .activity-row {
    padding: 0.35rem 0.45rem;
    gap: 0.4rem;
  }

  .activity-dot {
    width: 5px;
    height: 5px;
  }

  .activity-text {
    font-size: 0.65rem;
  }

  .activity-time {
    font-size: 0.5rem;
  }

  /* Members */
  .members-grid-track {
    gap: 0.4rem;
    padding: 0.4rem;
  }

  .member-card {
    padding: 0.45rem 0.3rem;
    gap: 0.2rem;
  }

  .member-card__avatar {
    width: 28px;
    height: 28px;
  }

  .member-card__name {
    font-size: 0.6rem;
  }

  .member-card__level {
    font-size: 0.45rem;
    padding: 0.08rem 0.25rem;
  }

  /* Gallery - 2x2 on mobile */
  .slide-mock__gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    padding: 0.5rem;
    gap: 0.4rem;
  }

  .gallery-item:nth-child(n+5) {
    display: none;
  }

 .slide-mock__gallery-scroll {
    gap: 0.4rem;
    padding: 0.5rem;
  }

  .gallery-row__track {
    gap: 0.4rem;
  }

  .slide-mock__gallery-scroll .gallery-item {
    width: 100px;
    height: 80px;
    border-radius: 0.4rem;
  }

  /* Navigation */
  .sphere-slider__nav {
    margin-top: 1.5rem;
    gap: 1rem;
  }

  .sphere-slider__arrow {
    width: 38px;
    height: 38px;
  }

  .sphere-slider__dot {
    width: 7px;
    height: 7px;
  }

  .sphere-slider__dot.is-active {
    width: 22px;
  }
}


/* =============================================
   SPHERES ECOSYSTEM — Hub visualization
   ============================================= */

.spheres-ecosystem {
  background: linear-gradient(180deg, #0c0a09 0%, #151210 50%, #0c0a09 100%);
  padding: 3rem 0;
  overflow: hidden;
}

.ecosystem__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

/* Hub visualization */
.ecosystem__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ecosystem__hub {
  position: relative;
  width: 300px;
  height: 300px;
}

/* Center core */
.hub__core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.15), transparent 60%),
    linear-gradient(135deg, var(--accent), var(--accent-strong));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow: 
    0 0 0 4px rgba(200, 158, 138, 0.2),
    0 0 40px rgba(200, 158, 138, 0.3),
    0 20px 40px rgba(0, 0, 0, 0.4);
  animation: corePulse 4s ease-in-out infinite;
}

@keyframes corePulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(200, 158, 138, 0.2), 0 0 40px rgba(200, 158, 138, 0.3), 0 20px 40px rgba(0, 0, 0, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(200, 158, 138, 0.15), 0 0 60px rgba(200, 158, 138, 0.4), 0 20px 40px rgba(0, 0, 0, 0.4); }
}

.hub__label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Connection lines */
.hub__lines {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.connection-line {
  stroke: rgba(200, 158, 138, 0.3);
  stroke-width: 1;
  stroke-dasharray: 6 4;
  animation: dashFlow 20s linear infinite;
}

@keyframes dashFlow {
  to { stroke-dashoffset: -100; }
}

/* Orbiting nodes */
.hub__orbit {
  position: absolute;
  z-index: 2;
}

.hub__orbit--1 { top: 0; left: 50%; transform: translateX(-50%); }
.hub__orbit--2 { top: 50%; right: 0; transform: translateY(-50%); }
.hub__orbit--3 { bottom: 0; left: 50%; transform: translateX(-50%); }
.hub__orbit--4 { top: 50%; left: 0; transform: translateY(-50%); }

.orbit__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  animation: nodeFloat 6s ease-in-out infinite;
}

.hub__orbit--1 .orbit__node { animation-delay: 0s; }
.hub__orbit--2 .orbit__node { animation-delay: -1.5s; }
.hub__orbit--3 .orbit__node { animation-delay: -3s; }
.hub__orbit--4 .orbit__node { animation-delay: -4.5s; }

@keyframes nodeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.node__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: 
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(247, 243, 239, 0.9);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.orbit__node:hover .node__icon {
  background: rgba(200, 158, 138, 0.2);
  border-color: rgba(200, 158, 138, 0.4);
  box-shadow: 0 0 20px rgba(200, 158, 138, 0.3);
  transform: scale(1.1);
}

.node__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(247, 243, 239, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* top node (Courses) — put the label above the icon */
.orbit__node[data-connection="courses"] {
  flex-direction: column-reverse;
}

/* small spacing tweaks */
.orbit__node[data-connection="courses"] .node__label {
  margin-bottom: 0rem;
  margin-top: 0;
}

/* Content side */
.ecosystem__content {
  max-width: 480px;
}

.ecosystem__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.6rem;
}

.ecosystem__title {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  color: #f7f3ef;
  margin: 0 0 1.2rem;
}

.ecosystem__text {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(247, 243, 239, 0.75);
  margin: 0 0 2rem;
}

.ecosystem__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.ecosystem__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.92rem;
  color: rgba(247, 243, 239, 0.85);
}

.list__marker {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  flex-shrink: 0;
  margin-top: 0.1rem;
  position: relative;
}

.list__marker::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

/* Responsive */
@media (max-width: 900px) {
  .ecosystem__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }

  .ecosystem__visual {
    order: -1;
  }

  .ecosystem__hub {
    width: 260px;
    height: 260px;
  }

  .ecosystem__content {
    max-width: 100%;
  }

  .ecosystem__list {
    align-items: center;
  }

  .ecosystem__list li {
    justify-content: center;
    text-align: left;
  }
}


/* =============================================
   PLATFORM COMPARISON — Gadura vs Others
   ============================================= */

.platform-comparison {
  background:
    radial-gradient(ellipse 70% 50% at 80% 20%, rgba(200, 158, 138, 0.06), transparent 50%),
    linear-gradient(180deg, #f9f5f1 0%, #f2ece6 100%);
  padding: 5.5rem 0;
  overflow: hidden;
}

.platform-comparison__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Header */
.platform-comparison__header {
  text-align: center;
  margin-bottom: 3rem;
}

.platform-comparison__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin: 0 0 0.5rem;
}

.platform-comparison__title {
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  font-weight: 800;
  line-height: 1.15;
  color: #2a2623;
  margin: 0;
}

/* Table container */
.platform-comparison__table {
  background: #ffffff;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 16px 50px rgba(140, 100, 80, 0.1);
  border: 1px solid rgba(180, 123, 104, 0.1);
}

/* Rows */
.platform-comparison__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  border-bottom: 1px solid rgba(180, 123, 104, 0.08);
}

.platform-comparison__row:last-child {
  border-bottom: none;
}

/* Header row */
.platform-comparison__row--header {
  background: linear-gradient(180deg, #faf7f4 0%, #f5f0eb 100%);
  border-bottom: 1px solid rgba(180, 123, 104, 0.12);
}

.platform-comparison__row--header .platform-comparison__cell {
  padding: 1.1rem 1.25rem;
}

/* Cells */
.platform-comparison__cell {
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
}

/* Feature column (left) */
.platform-comparison__cell--feature {
  background: transparent;
}

.platform-comparison__feature-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #2a2623;
}

/* Others column (middle) */
.platform-comparison__cell--others {
  background: rgba(0, 0, 0, 0.015);
  justify-content: center;
  text-align: center;
  border-left: 1px solid rgba(180, 123, 104, 0.06);
  border-right: 1px solid rgba(180, 123, 104, 0.06);
}

.platform-comparison__others-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8a847e;
}

.platform-comparison__others-value {
  font-size: 0.85rem;
  color: #8a847e;
}

/* Gadura column (right) */
.platform-comparison__cell--gadura {
  background:
    linear-gradient(135deg, rgba(200, 158, 138, 0.08), rgba(200, 158, 138, 0.03));
  justify-content: center;
  text-align: center;
  position: relative;
}

/* Stronger header glow */
.platform-comparison__row--header .platform-comparison__cell--gadura {
  background:
    linear-gradient(135deg, rgba(200, 158, 138, 0.15), rgba(200, 158, 138, 0.08));
}

.platform-comparison__cell--gadura::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  opacity: 0.7;
}

/* Gadura badge in header */
.platform-comparison__gadura-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent-strong);
}

.platform-comparison__gadura-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  width: auto;
}

.platform-comparison__gadura-logo svg {
  height: 100%;
  width: auto;
  display: block;
}

.platform-comparison__gadura-brand {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  line-height: 1.1;
}

.platform-comparison__gadura-name {
  font-family: "Playfair Display", serif;
  letter-spacing: 0.2em;
  font-size: 1rem;
  font-weight: 1000;
  color: black;
}

/* Gadura values */
.platform-comparison__gadura-value {
  font-size: 0.88rem;
  font-weight: 600;
  color: #2a2623;
  position: relative;
  padding-left: 1.4rem;
}

.platform-comparison__gadura-value::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: 0 2px 6px rgba(180, 123, 104, 0.3);
}

.platform-comparison__gadura-value::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 4px;
  height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
}

/* Row hover */
.platform-comparison__row:not(.platform-comparison__row--header):hover {
  background: rgba(200, 158, 138, 0.03);
}

.platform-comparison__row:not(.platform-comparison__row--header):hover .platform-comparison__cell--gadura {
  background:
    linear-gradient(135deg, rgba(200, 158, 138, 0.12), rgba(200, 158, 138, 0.06));
}

/* Footnote */
.platform-comparison__footnote {
  text-align: center;
  margin: 2.5rem 0 0;
  font-size: 1rem;
  font-weight: 500;
  color: #5a534d;
  font-style: italic;
}

/* =============================================
   RESPONSIVE - TABLET
   ============================================= */

@media (max-width: 900px) {
  .platform-comparison {
    padding: 4.5rem 0;
  }

  .platform-comparison__inner {
    padding: 0 1.5rem;
  }
}

/* =============================================
   RESPONSIVE - MOBILE
   ============================================= */

@media (max-width: 768px) {
  .platform-comparison {
    padding: 3.5rem 0;
  }

  .platform-comparison__inner {
    padding: 0 1rem;
  }

  .platform-comparison__header {
    margin-bottom: 2rem;
  }

  .platform-comparison__title {
    font-size: 1.5rem;
  }

  /* Keep grid layout, just smaller */
  .platform-comparison__row {
    grid-template-columns: 1.2fr 0.9fr 1fr;
  }

  .platform-comparison__cell {
    padding: 0.6rem 0.5rem;
  }

  .platform-comparison__row--header .platform-comparison__cell {
    padding: 0.8rem 0.5rem;
  }

  .platform-comparison__feature-label {
    font-size: 0.72rem;
  }

  .platform-comparison__others-label {
    font-size: 0.6rem;
  }

  .platform-comparison__others-value {
    font-size: 0.7rem;
  }

  .platform-comparison__gadura-badge {
    font-size: 0.75rem;
    gap: 0.3rem;
  }

  .platform-comparison__gadura-logo {
    height: 16px;
  }

  .platform-comparison__gadura-name {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
  }

  .platform-comparison__gadura-value {
    font-size: 0.7rem;
    padding-left: 1.1rem;
  }

  .platform-comparison__gadura-value::before {
    width: 12px;
    height: 12px;
  }

  .platform-comparison__gadura-value::after {
    left: 4px;
    width: 3px;
    height: 5px;
  }

  .platform-comparison__footnote {
    margin-top: 1.5rem;
    font-size: 0.85rem;
  }
}




/* =============================================
   SPHERES CTA SECTION
   ============================================= */

.spheres-cta {
  background: linear-gradient(135deg, #1a1412 0%, #2a2320 50%, #1a1412 100%);
  padding: 5rem 2rem;
  position: relative;
  overflow: hidden;
}

.spheres-cta__inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 3rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Content */
.spheres-cta__content {
  text-align: left;
}

.spheres-cta__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.75rem;
}

.spheres-cta__title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 1rem;
}

.spheres-cta__text {
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 2rem;
  max-width: 480px;
}

/* Buttons */
.spheres-cta__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.spheres-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.8rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: all 0.25s ease;
}

.spheres-cta__btn--primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(180, 123, 104, 0.4);
}

.spheres-cta__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(180, 123, 104, 0.5);
}

.spheres-cta__btn--secondary {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.spheres-cta__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
}

/* Visual - Floating orbs */
.spheres-cta__visual {
  position: relative;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-orb {
  position: absolute;
  border-radius: 50%;
}

.cta-orb--1 {
  width: 120px;
  height: 120px;
  top: 20%;
  left: 25%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.9) 0%, transparent 28%),
    radial-gradient(circle at 50% 50%, #e4a882 0%, #c67b58 40%, #6b3d2a 100%);
  box-shadow: 0 20px 50px rgba(198, 123, 88, 0.4);
  animation: ctaFloat1 8s ease-in-out infinite;
}

.cta-orb--2 {
  width: 70px;
  height: 70px;
  top: 50%;
  right: 20%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 1) 0%, transparent 25%),
    radial-gradient(circle at 50% 50%, #f5d485 0%, #d4a642 40%, #8b6a20 100%);
  box-shadow: 0 15px 35px rgba(212, 166, 66, 0.35);
  animation: ctaFloat2 10s ease-in-out infinite;
}

.cta-orb--3 {
  width: 45px;
  height: 45px;
  bottom: 25%;
  left: 45%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 1) 0%, transparent 30%),
    radial-gradient(circle at 50% 50%, #fff8f0 0%, #e8d4c0 50%, #a08870 100%);
  box-shadow: 0 10px 25px rgba(160, 136, 112, 0.3);
  animation: ctaFloat3 6s ease-in-out infinite;
}

@keyframes ctaFloat1 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@keyframes ctaFloat2 {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-15px) translateX(-10px); }
}

@keyframes ctaFloat3 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(12px); }
}

/* Background glow */
.spheres-cta::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 10%;
  width: 400px;
  height: 400px;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(200, 158, 138, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 768px) {
  .spheres-cta {
    padding: 4rem 1.5rem;
  }

  .spheres-cta__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .spheres-cta__content {
    text-align: center;
  }

  .spheres-cta__text {
    margin-left: auto;
    margin-right: auto;
  }

  .spheres-cta__actions {
    justify-content: center;
  }

  .spheres-cta__visual {
    height: 180px;
    order: -1;
  }

  .cta-orb--1 {
    width: 90px;
    height: 90px;
    left: 30%;
  }

  .cta-orb--2 {
    width: 55px;
    height: 55px;
  }

  .cta-orb--3 {
    width: 35px;
    height: 35px;
  }
}








/* =============================================
   STUDIOS PAGE STYLES - CLEANED
   ============================================= */

/* =============================================
   STUDIOS HERO - FRESH DESIGN
   ============================================= */

.studios-hero {
  min-height: auto;
  padding: 3rem 0 2rem;
  display: flex;
  align-items: center;
  background: 
    radial-gradient(ellipse 100% 80% at 70% 50%, rgba(200, 158, 138, 0.15), transparent 50%),
    radial-gradient(ellipse 60% 60% at 10% 90%, rgba(180, 123, 104, 0.1), transparent 50%),
    linear-gradient(170deg, #fdfbf9 0%, #f8f4f0 50%, #f3ede7 100%);
  overflow: hidden;
  position: relative;
}

.studios-hero__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 3rem;
  align-items: center;
}

/* Content */
.studios-hero__content {
  position: relative;
  z-index: 10;
}

/* Studios hero entrance animation */
@keyframes studiosFadeSlideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes studiosSceneReveal {
  from { opacity: 0; transform: translateY(40px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.studios-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent-strong);
  background: rgba(200, 158, 138, 0.15);
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  margin-bottom: 1.25rem;
  animation: studiosFadeSlideDown 0.8s ease forwards;
  opacity: 0;
}

.studios-hero__title {
  font-size: clamp(2.8rem, 5.5vw, 4rem);
  font-weight: 800;
  line-height: 1.08;
  color: #1f1b18;
  margin: 0 0 1.25rem;
  letter-spacing: -0.02em;
  animation: studiosFadeSlideDown 0.8s ease 0.1s forwards;
  opacity: 0;
}

.studios-hero__subtitle {
  font-size: 1rem;
  line-height: 1.7;
  color: #6b6158;
  margin: 0 0 2rem;
  max-width: 420px;
  animation: studiosFadeSlideDown 0.8s ease 0.2s forwards;
  opacity: 0;
}

.studios-hero__cta {
  display: flex;
  gap: 1rem;
  animation: studiosFadeSlideDown 0.8s ease 0.3s forwards;
  opacity: 0;
}

.studios-hero__cta .btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 2rem;
  background: linear-gradient(135deg, var(--accent, #c89e8a) 0%, var(--accent-strong, #b47b68) 100%);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0.6rem;
  border: none;
  cursor: pointer;
  box-shadow: 
    0 4px 12px rgba(180, 123, 104, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.studios-hero__cta .btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 8px 20px rgba(180, 123, 104, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.1);
  filter: brightness(1.05);
}

.studios-hero__cta .btn--primary:active {
  transform: translateY(0);
  box-shadow: 
    0 2px 8px rgba(180, 123, 104, 0.3);
}

/* Scene container */
.studios-hero__scene {
  position: relative;
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: studiosSceneReveal 1s ease 0.4s forwards;
  opacity: 0;
}

/* Course Stack */
.course-stack {
  position: relative;
  width: 320px;
  height: 340px;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.course-stack:hover {
  transform: rotateY(-5deg) rotateX(5deg) scale(1.02);
}

.course-stack__card {
  position: absolute;
  width: 100%;
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.course-stack__card--1 {
  height: 100%;
  z-index: 3;
  box-shadow: 
    0 2px 4px rgba(0,0,0,0.02),
    0 8px 16px rgba(0,0,0,0.04),
    0 24px 48px rgba(120, 80, 60, 0.12),
    0 48px 80px rgba(120, 80, 60, 0.08);
}

.course-stack__card--2 {
  height: 94%;
  top: -12px;
  left: 12px;
  z-index: 2;
  background: linear-gradient(135deg, #f8f4f0 0%, #f0ebe5 100%);
  box-shadow: 0 20px 50px rgba(120, 80, 60, 0.1);
}

.course-stack__card--3 {
  height: 88%;
  top: -24px;
  left: 24px;
  z-index: 1;
  background: linear-gradient(135deg, #f3ede7 0%, #ebe4dc 100%);
  box-shadow: 0 16px 40px rgba(120, 80, 60, 0.08);
}

.course-stack:hover .course-stack__card--2 {
  transform: translate(8px, -8px);
}

.course-stack:hover .course-stack__card--3 {
  transform: translate(16px, -16px);
}

.stack-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255,255,255,0.5) 50%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s;
}

.course-stack:hover .stack-shimmer {
  animation: shimmer 1.5s ease-in-out;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); opacity: 1; }
  100% { transform: translateX(100%); opacity: 1; }
}

/* Stack Content */
.stack-content {
  padding: 1.25rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.stack-content__header {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(180, 123, 104, 0.1);
  margin-bottom: 1rem;
}

.stack-avatar {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  flex-shrink: 0;
}

.stack-meta__title {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1f1b18;
  margin-bottom: 0.2rem;
}

.stack-meta__author {
  font-size: 0.8rem;
  color: #9a918a;
}

.stack-modules {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stack-module {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #faf8f6;
  border-radius: 10px;
  font-size: 0.85rem;
  color: #9a918a;
  transition: all 0.25s ease;
}

.stack-module--done {
  color: var(--accent-strong);
}

.stack-module--active {
  background: linear-gradient(135deg, rgba(200, 158, 138, 0.12) 0%, rgba(180, 123, 104, 0.08) 100%);
  color: #1f1b18;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(180, 123, 104, 0.1);
}

.sm-check {
  width: 20px;
  height: 20px;
  background: var(--accent-strong);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
}

.sm-dot {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(180, 123, 104, 0.3);
  border-radius: 50%;
}

.stack-module--active .sm-dot {
  border-color: var(--accent-strong);
  background: rgba(180, 123, 104, 0.2);
  animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(180, 123, 104, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(180, 123, 104, 0); }
}

.stack-progress {
  height: 6px;
  background: rgba(180, 123, 104, 0.12);
  border-radius: 3px;
  margin-top: 1rem;
  overflow: hidden;
}

.stack-progress__fill {
  height: 100%;
  width: 65%;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  border-radius: 3px;
  position: relative;
}

.stack-progress__fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: progressShine 2s ease-in-out infinite;
}

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

/* Floating Badges */
.floating-badge {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
  box-shadow: 
    0 4px 12px rgba(0,0,0,0.04),
    0 12px 32px rgba(120, 80, 60, 0.12);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease;
  cursor: pointer;
  z-index: 5;
}

.floating-badge:hover {
  transform: scale(1.15) translateY(-4px) !important;
  box-shadow: 
    0 8px 20px rgba(0,0,0,0.06),
    0 20px 50px rgba(120, 80, 60, 0.18);
}

.badge-glow {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 158, 138, 0.3), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
}

.floating-badge:hover .badge-glow {
  opacity: 1;
}

.badge-icon {
  width: 24px;
  height: 24px;
  color: var(--accent-strong);
}

/* Badge positions & sizes */
.floating-badge--cert {
  width: 64px;
  height: 64px;
  top: 8%;
  right: 12%;
  animation: floatA 7s ease-in-out infinite;
}

.floating-badge--play {
  width: 56px;
  height: 56px;
  bottom: 25%;
  right: 8%;
  animation: floatB 6s ease-in-out infinite;
}

.floating-badge--play .badge-icon {
  width: 20px;
  height: 20px;
  margin-left: 3px;
}

.floating-badge--check {
  width: 52px;
  height: 52px;
  bottom: 12%;
  left: 15%;
  animation: floatC 5.5s ease-in-out infinite;
  background: #10b981;
}

.floating-badge--check .badge-icon {
  color: #fff;
  width: 22px;
  height: 22px;
}

.floating-badge--check .badge-glow {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.4), transparent 70%);
}

.floating-badge--users {
  width: auto;
  height: 52px;
  padding: 0 16px;
  border-radius: 30px;
  gap: 8px;
  top: 20%;
  left: -2%;
  animation: floatD 8s ease-in-out infinite;
}

.badge-avatars {
  display: flex;
}

.badge-avatars img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -10px;
  object-fit: cover;
}

.badge-avatars img:first-child {
  margin-left: 0;
}

.badge-count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-strong);
}

.floating-badge--ring {
  width: 72px;
  height: 72px;
  top: 55%;
  left: 2%;
  animation: floatE 6.5s ease-in-out infinite;
}

.ring-progress {
  width: 44px;
  height: 44px;
}

.ring-bg {
  fill: none;
  stroke: rgba(180, 123, 104, 0.15);
  stroke-width: 4;
}

.ring-fill {
  fill: none;
  stroke: var(--accent-strong);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 82.5 113;
  stroke-dashoffset: 28;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dasharray 0.5s ease;
}

.floating-badge--ring:hover .ring-fill {
  stroke-dasharray: 95 113;
}

.ring-text {
  position: absolute;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--accent-strong);
}

/* Price tag - shaped like actual tag */
.floating-badge--price {
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  bottom: 5%;
  right: 5%;
  animation: floatF 6s ease-in-out infinite;
}

.floating-badge--price .badge-glow {
  background: radial-gradient(circle, rgba(200, 158, 138, 0.3), transparent 70%);
  inset: -8px;
}

.price-tag-shape {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 16px 10px 24px;
  background: linear-gradient(135deg, var(--accent, #c89e8a) 0%, var(--accent-strong, #b47b68) 100%);
  border-radius: 0 8px 8px 0;
  box-shadow: 
    0 4px 16px rgba(180, 123, 104, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.2);
}

/* Pointed left edge */
.price-tag-shape::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 0;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 12px solid var(--accent, #c89e8a);
}

/* String hole */
.price-tag__hole {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: #faf8f6;
  border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
}

.price-tag__amount {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

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

/* Float animations */
@keyframes floatA {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(5deg); }
}

@keyframes floatB {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(-5deg); }
}

@keyframes floatC {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

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

@keyframes floatE {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-11px); }
}

/* Ambient Orbs */
.ambient-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.ambient-orb--1 {
  width: 200px;
  height: 200px;
  top: -5%;
  right: -8%;
  background: 
    radial-gradient(circle at 35% 35%, rgba(255,255,255,0.8), transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(200, 158, 138, 0.35), rgba(200, 158, 138, 0.1) 50%, transparent 70%);
  filter: blur(1px);
  animation: orbDrift1 25s ease-in-out infinite;
}

.ambient-orb--2 {
  width: 140px;
  height: 140px;
  bottom: 5%;
  right: 15%;
  background: 
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6), transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(180, 123, 104, 0.25), transparent 60%);
  filter: blur(0.5px);
  animation: orbDrift2 20s ease-in-out infinite;
}

.ambient-orb--3 {
  width: 100px;
  height: 100px;
  top: 35%;
  left: -8%;
  background: 
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.7), transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(200, 158, 138, 0.3), transparent 60%);
  animation: orbDrift3 18s ease-in-out infinite;
}

.ambient-orb--4 {
  width: 60px;
  height: 60px;
  top: 10%;
  left: 25%;
  background: 
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(180, 123, 104, 0.2), transparent 60%);
  animation: orbDrift4 15s ease-in-out infinite;
}

@keyframes orbDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-20px, 15px) scale(1.05); }
  66% { transform: translate(10px, -10px) scale(0.98); }
}

@keyframes orbDrift2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(15px, -20px); }
}

@keyframes orbDrift3 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(12px, 10px); }
}

@keyframes orbDrift4 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-8px, 12px); }
}

/* Responsive */
@media (max-width: 1024px) {
  .studios-hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }
  
  .studios-hero__content {
    order: 1;
  }
  
  .studios-hero__scene {
    order: 2;
    height: 400px;
  }
  
  .studios-hero__subtitle {
    max-width: 100%;
  }
  
  .studios-hero__cta {
    justify-content: center;
  }
  
  .course-stack {
    width: 280px;
    height: 300px;
  }
  
  .floating-badge--users {
    left: 5%;
  }
  
  .floating-badge--ring {
    left: 8%;
  }
}

@media (max-width: 600px) {
  .studios-hero {
    min-height: auto;
    padding: 3rem 0 2rem;
  }
  
  .studios-hero__scene {
    height: 340px;
  }
  
  .course-stack {
    width: 260px;
    height: 280px;
  }
  
  .floating-badge--cert,
  .floating-badge--play {
    display: none;
  }
  
  .floating-badge--users {
    top: 5%;
    left: 0;
  }
  
  .floating-badge--ring {
    bottom: 5%;
    left: 0;
    top: auto;
  }

  .ring-text {
    font-size: 0.55rem;
  }
  
  .floating-badge--check {
    bottom: 5%;
    left: auto;
    right: 0;
  }

  .ambient-orb--1 {
    display: none;
  }
}
/* =============================================
   STUDIO SLIDER
   ============================================= */

.studio-slider {
  --slider-bg: linear-gradient(180deg, #f8f3ef 0%, #f2ebe4 100%);
  --card-bg: #ffffff;
  --mock-bg: linear-gradient(160deg, #fdfbf9 0%, #f5f0eb 100%);
  --text-primary: #2a2623;
  --text-secondary: #5a534d;
  --text-muted: #8a847e;
  --border-light: rgba(180, 123, 104, 0.12);
  --border-mock: rgba(180, 123, 104, 0.15);

  background: var(--slider-bg);
  padding: 5rem 0 4rem;
  overflow: hidden;

   user-select: none;
  -webkit-user-select: none;
}

.studio-slider__header {
  text-align: center;
  margin-bottom: 3rem;
  padding: 0 2rem;
}

.studio-slider__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin: 0 0 0.5rem;
  margin-top:-2rem;
}

.studio-slider__title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-primary);
  margin: 0;
  max-width: 900px;
  margin-inline: auto;
}

.studio-slider__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.studio-slider__track {
  display: flex;
  gap: 5rem;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
}

.studio-slider__track:active,
.studio-slider__track.is-dragging {
  cursor: grabbing;
  transition: none;
}

.studio-slide {
  flex: 0 0 min(950px, 64.5%);
  width: auto;
  padding: 0;
  box-sizing: border-box;
}

.studio-slide__inner {
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: 1.8rem;
  padding: 2.1rem;
  min-height: 350px;
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 12px 40px rgba(140, 100, 80, 0.08);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.studio-slide__inner:hover {
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.06),
    0 20px 60px rgba(140, 100, 80, 0.12);
}


/* =============================================
   MOCK CONTAINER
   ============================================= */

.studio-slide__mock {
  background: var(--mock-bg);
  border: 1px solid var(--border-mock);
  border-radius: 1.15rem;
  overflow: hidden;
  height: 100%;
  min-height: 365px;
  max-height: 365px;
  display: flex;
  flex-direction: column;
  box-shadow: 
    0 2px 8px rgba(140, 100, 80, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: box-shadow 0.3s ease;
}

.studio-slide:hover .studio-slide__mock {
  box-shadow: 
    0 2px 8px rgba(140, 100, 80, 0.08),
    0 0 30px rgba(200, 158, 138, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.studio-slide__mock .slide-mock__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.15rem;
  border-bottom: 1px solid rgba(180, 123, 104, 0.1);
  background: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

.studio-slide__mock .slide-mock__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent), var(--accent-strong));
  box-shadow: 0 0 8px rgba(200, 158, 138, 0.5);
  animation: studioHeaderDotPulse 2s ease-in-out infinite;
}

@keyframes studioHeaderDotPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(200, 158, 138, 0.5); }
  50% { box-shadow: 0 0 12px rgba(200, 158, 138, 0.8); }
}

.studio-slide__mock .slide-mock__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.studio-slide__mock .slide-mock__badge {
  margin-left: auto;
  font-size: 0.68rem;
  padding: 0.18rem 0.58rem;
  border-radius: 999px;
  background: rgba(200, 158, 138, 0.15);
  color: var(--accent-strong);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.studio-slide__mock .slide-mock__count {
  margin-left: auto;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.studio-slide__content {
  padding: 0.5rem 0;
}

.studio-slide__heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.75rem;
  line-height: 1.2;
}

.studio-slide__text {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}


/* =============================================
   SLIDER CONTROLS
   ============================================= */

.studio-slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
  padding: 0 2rem;
}

.studio-slider__arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: #fff;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.studio-slider__arrow:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
  box-shadow: 0 4px 16px rgba(180, 123, 104, 0.15);
  transform: scale(1.05);
}

.studio-slider__arrow:active {
  transform: scale(0.98);
}

.studio-slider__dots {
  display: flex;
  gap: 0.5rem;
}

.studio-slider__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(180, 123, 104, 0.25);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.studio-slider__dot:hover {
  background: rgba(180, 123, 104, 0.4);
}

.studio-slider__dot.is-active {
  width: 28px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
}


/* =============================================
   SLIDE 1: COURSE BUILDER
   ============================================= */

.slide-mock__builder {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.builder-tree {
  width: 48%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(180, 123, 104, 0.08);
  overflow: hidden;
  position: relative;
  background: linear-gradient(160deg, #fdfbf9 0%, #f5f0eb 100%);
}

.builder-tree::before,
.builder-tree::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 25px;
  pointer-events: none;
  z-index: 2;
}

.builder-tree::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(253, 251, 249, 1) 0%, rgba(253, 251, 249, 0) 100%);
}

.builder-tree::after {
  bottom: 0;
  height: 55px;
  background: linear-gradient(to top, rgba(253, 251, 249, 1) 60%, rgba(253, 251, 249, 0) 100%);
}

.builder-scroll-wrapper {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.builder-scroll {
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.builder-module {
  flex-shrink: 0;
}

.builder-module__head {
  padding: 0.45rem 0.6rem;
  background: #fff;
  border-radius: 0.4rem;
  margin-bottom: 0.25rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.builder-module__name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
}

.builder-lessons {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-left: 0.4rem;
  border-left: 2px solid rgba(180, 123, 104, 0.15);
  margin-left: 0.4rem;
}

.builder-lesson {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.45rem;
  border-radius: 0.3rem;
}

.builder-lesson__icon {
  color: var(--accent-strong);
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.builder-lesson__name {
  font-size: 0.8rem;
  color: var(--text-primary);
}

.builder-add {
  margin: 0.6rem;
  padding: 0.7rem 1rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border: none;
  border-radius: 0.5rem;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  z-index: 3;
  box-shadow: 0 4px 15px rgba(180, 123, 104, 0.4);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s ease,
              filter 0.2s ease;
}

.builder-editor {
  flex: 1;
  padding: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.builder-editor__panel {
  background: #faf8f6;
  border: 1px dashed rgba(180, 123, 104, 0.25);
  border-radius: 0.55rem;
  padding: 0.75rem 0.9rem;
  text-align: center;
  width: 100%;
}

.builder-editor__heading {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.1rem;
}

.builder-editor__sub {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}

.builder-editor__blocks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.3rem;
  max-width: 150px;
  margin: 0 auto;
}

.builder-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.4rem 0.45rem;
  background: #fff;
  border: 1px solid rgba(180, 123, 104, 0.1);
  border-radius: 0.35rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.builder-block__icon { 
  width: 22px;
  height: 22px;
}

.builder-block__icon--red { color: #e05a4e; }
.builder-block__icon--blue { color: #4a9fd4; }
.builder-block__icon--purple { color: #8b6bbf; }
.builder-block__icon--green { color: #4db076; }

.builder-block__label {
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--text-secondary);
}


/* =============================================
   SLIDE 2: VIDEO PLAYER
   ============================================= */

.slide-mock__player {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0.85rem;
  gap: 0.5rem;
}

.player-screen {
  position: relative;
  background: #1a1412;
  border-radius: 0.5rem;
  overflow: hidden;
  aspect-ratio: 16/9;
  max-height: 175px;
  margin-top: -0.5rem;
}

.player-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player-video__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
}

.player-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 0.4rem;
}

.player-controls__play {
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.5rem;
  padding-left: 2px;
  box-shadow: 0 2px 6px rgba(180, 123, 104, 0.3);
}

.player-controls__progress {
  flex: 1;
  height: 5px;
  background: rgba(180, 123, 104, 0.12);
  border-radius: 3px;
  overflow: hidden;
}

.player-controls__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  border-radius: 3px;
}

.player-controls__time {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  min-width: 72px;
  text-align: right;
}

.player-lessons {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
  overflow: hidden;
}

.player-lesson {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.73rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 0.4rem;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.4s ease,
              color 0.4s ease,
              box-shadow 0.4s ease,
              font-weight 0.4s ease;
}

.player-lesson--active {
  background: #fff;
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.player-lesson--complete {
  background: rgba(180, 123, 104, 0.08);
  color: var(--accent-strong);
}

.player-lesson--exiting {
  opacity: 0;
  transform: translateX(-30px);
}

.player-lesson--entering {
  opacity: 0;
  transform: translateY(20px);
}

.player-lesson__icon {
  color: var(--accent-strong);
  font-weight: 700;
  font-size: 0.75rem;
  width: 14px;
  text-align: center;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.player-lesson__dot {
  width: 7px;
  height: 7px;
  background: currentColor;
  border-radius: 50%;
  opacity: 0.3;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.player-lesson--active .player-lesson__dot {
  background: var(--accent-strong);
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(180, 123, 104, 0.15);
}

.player-lesson__text {
  flex: 1;
}


/* =============================================
   SLIDE 3: PROGRESS TRACKING
   ============================================= */

.slide-mock__progress {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  flex: 1;
  gap: 1rem;
  position: relative;
  overflow: hidden;
  transition: background 0.5s ease;
}

.progress-overview {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.progress-ring {
  position: relative;
  width: 150px;
  height: 150px;
  flex-shrink: 0;
}

.progress-ring svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.progress-ring__bg {
  fill: none;
  stroke: rgba(180, 123, 104, 0.12);
  stroke-width: 8;
}

.progress-ring__fill {
  fill: none;
  stroke: var(--accent-strong);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 264;
  stroke-dashoffset: 264;
  transition: stroke 0.3s ease;
}

.progress-ring__value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  transition: all 0.3s ease;
}

.progress-stats {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.progress-stat__value {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  transition: all 0.3s ease;
}

.progress-stat__label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.progress-modules {
  position: relative;
  height: 132px;
  width: 140px;
  margin: 0 auto;
  overflow: hidden;
  margin-top: 0.85rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: transparent;
}

.progress-modules::before,
.progress-modules::after {
  content: none !important;
}

.progress-modules-highlight {
  display: none;
}

.progress-module-scroller {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 2;
}

.progress-module-item {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  opacity: 0.35;
  transform: scale(0.9);
  transition: all 0.35s ease;
  white-space: nowrap;
}

.progress-module-item--prev,
.progress-module-item--next {
  opacity: 0.6;
  transform: scale(0.96);
}

.progress-module-item--active {
  opacity: 1;
  transform: scale(1.08);
  font-weight: 700;
  color: var(--accent-strong);
  font-size: 0.9rem;
}

.progress-module-item--hidden {
  opacity: 0;
  transform: scale(1.06);
}

.progress-module-item--disabled {
  color: var(--text-muted);
  opacity: 0.35;
  font-weight: 500;
  pointer-events: none;
}

@keyframes confettiFall {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(180px) rotate(1080deg) scale(0.2);
    opacity: 0;
  }
}

.confetti-piece {
  pointer-events: none;
}


/* =============================================
   SLIDE 4: QUIZ
   ============================================= */

.slide-mock__quiz {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem 1.1rem;
  flex: 1;
  gap: 0.5rem;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.studio-quiz-question {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

.studio-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.studio-quiz-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  background: linear-gradient(135deg, #fff 0%, #fdfcfb 100%);
  border: 1.5px solid rgba(180, 123, 104, 0.1);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.studio-quiz-option:hover {
  border-color: rgba(180, 123, 104, 0.25);
}

.studio-quiz-option--selected {
  background: linear-gradient(135deg, rgba(200, 158, 138, 0.12) 0%, rgba(200, 158, 138, 0.18) 100%);
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(180, 123, 104, 0.15);
}

.studio-quiz-option__letter {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #f8f5f3 0%, #f0ebe8 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: all 0.15s ease;
  border: 1px solid rgba(180, 123, 104, 0.08);
}

.studio-quiz-option--selected .studio-quiz-option__letter {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #fff;
  border-color: transparent;
  transform: scale(1.08);
  box-shadow: 0 2px 6px rgba(180, 123, 104, 0.3);
}

.studio-quiz-option__text {
  flex: 1;
  font-size: 0.73rem;
  color: var(--text-primary);
  font-weight: 450;
}

.studio-quiz-option--selected .studio-quiz-option__text {
  font-weight: 550;
}

.studio-quiz-option__check {
  color: var(--accent-strong);
  font-weight: 700;
  font-size: 0.75rem;
  opacity: 0;
  transform: scale(0);
  transition: all 0.2s ease;
}

.studio-quiz-option--selected .studio-quiz-option__check {
  opacity: 1;
  transform: scale(1.1);
}

.studio-quiz-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.studio-quiz-btn {
  padding: 0.5rem 1rem;
  border-radius: 0.45rem;
  font-size: 0.73rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
}

.studio-quiz-btn--secondary {
  background: linear-gradient(135deg, #faf8f6 0%, #f5f0ed 100%);
  border: 1px solid rgba(180, 123, 104, 0.15);
  color: var(--text-secondary);
}

.studio-quiz-btn--primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(180, 123, 104, 0.25);
}

.studio-quiz-btn--primary:hover {
  box-shadow: 0 4px 12px rgba(180, 123, 104, 0.35);
  transform: translateY(-1px);
}


/* =============================================
   SLIDE 5: CERTIFICATE
   ============================================= */

.slide-mock__certificate {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  flex: 1;
}

.certificate {
  background: #fff;
  border: 2px solid rgba(180, 123, 104, 0.2);
  border-radius: 0.85rem;
  padding: 1.5rem 2rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  max-width: 300px;
  width: 100%;
}

.certificate__badge {
  font-size: 2.1rem;
  margin-bottom: 0.35rem;
}

.certificate__title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-strong);
  margin-bottom: 0.5rem;
}

.certificate__course {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.7rem;
  min-height: 1.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.cert-text {
  display: inline;
}

.cert-cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: var(--accent-strong);
  animation: cursorBlink 0.5s step-end infinite;
  margin-left: 3px;
  vertical-align: middle;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.certificate__name {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.certificate__date {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.certificate__signature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.certificate__line {
  width: 100px;
  height: 1px;
  background: rgba(0, 0, 0, 0.2);
}

.certificate__signer {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* =============================================
   SLIDE 6: DRIP SCHEDULE - FIXED
   ============================================= */

.slide-mock__drip {
  padding: 0.75rem;
  padding-left: 1.25rem;
  flex: 1;
  overflow: hidden;
  position: relative;
}

.slide-mock__drip::before,
.slide-mock__drip::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 30px;
  pointer-events: none;
  z-index: 2;
}

.slide-mock__drip::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(253, 251, 249, 1) 0%, rgba(253, 251, 249, 0) 100%);
}

.slide-mock__drip::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(253, 251, 249, 1) 0%, rgba(253, 251, 249, 0) 100%);
}

.drip-timeline {
  position: relative;
  margin-left: 8px;
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
}

.drip-timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(180, 123, 104, 0.2);
}

.drip-item {
  position: relative;
  padding: 0.5rem 0;
  flex-shrink: 0;
}

.drip-item__marker {
  position: absolute;
  left: -1.5rem;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(180, 123, 104, 0.3);
  z-index: 1;
  transform: translate(-50%, -50%);
  margin-left: 1px;
}

.drip-item--released .drip-item__marker {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.drip-item--released .drip-item__marker::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
}

.drip-item--upcoming .drip-item__marker {
  border-color: var(--accent);
  border-width: 3px;
  background: #fff;
  animation: studioDripPulse 2s infinite;
}

@keyframes studioDripPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(180, 123, 104, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(180, 123, 104, 0); }
}

.drip-item--locked {
  opacity: 0.5;
}

.drip-item__content {
  background: #fff;
  padding: 0.6rem 0.9rem;
  border-radius: 0.45rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.drip-item--released .drip-item__content {
  background: rgba(180, 123, 104, 0.06);
}

.drip-item--upcoming .drip-item__content {
  border: 1px solid rgba(180, 123, 104, 0.2);
}

.drip-item__title {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.1rem;
}

.drip-item__status {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.drip-item--released .drip-item__status {
  color: var(--accent-strong);
  font-weight: 500;
}

.drip-item--upcoming .drip-item__status {
  color: var(--accent);
}

/* =============================================
   SLIDE 7: TEMPLATES
   ============================================= */

.slide-mock__templates-v2 {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, #f8f5f2 0%, #f3ede7 100%);
  border-radius: 0 0 12px 12px;
}

.slide-mock__templates-v2::before,
.slide-mock__templates-v2::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 25px;
  z-index: 2;
  pointer-events: none;
}

.slide-mock__templates-v2::before {
  top: 0;
  background: linear-gradient(to bottom, #f8f5f2 0%, transparent 100%);
}

.slide-mock__templates-v2::after {
  bottom: 0;
  background: linear-gradient(to top, #f3ede7 0%, transparent 100%);
}

.templates-v2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px;
}

/* Template card */
.tpl-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 
    0 1px 3px rgba(0,0,0,0.04),
    0 4px 12px rgba(0,0,0,0.06);
}

.tpl-card--selected {
  box-shadow: 
    0 0 0 2px var(--accent-strong, #b47b68),
    0 4px 16px rgba(180, 123, 104, 0.2);
}

/* Image container */
.tpl-card__img {
  position: relative;
  height: 80px;
  overflow: hidden;
  background: linear-gradient(135deg, #e8e0d8 0%, #d8cfc5 100%);
}

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

.tpl-card__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 0.5rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent-strong, #b47b68);
  padding: 3px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Info section */
.tpl-card__info {
  padding: 8px 10px;
}

.tpl-card__name {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: #1a1714;
  margin-bottom: 2px;
  line-height: 1.2;
}

.tpl-card__meta {
  font-size: 0.65rem;
  color: #8a8078;
}

/* =============================================
   SLIDE 8: ASSIGNMENTS
   ============================================= */

.slide-mock__assignment {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.assignment-prompt {
  background: #fff;
  padding: 0.9rem 1rem;
  border-radius: 0.5rem;
  border-left: 3px solid var(--accent-strong);
}

.assignment-prompt__label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-strong);
  margin-bottom: 0.3rem;
}

.assignment-prompt__text {
  font-size: 0.85rem;
  color: var(--text-primary);
  line-height: 1.45;
}

.assignment-options {
  display: flex;
  gap: 0.5rem;
}

.assignment-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  background: #fff;
  border: 1.5px solid rgba(180, 123, 104, 0.12);
  border-radius: 0.45rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.assignment-option svg {
  width: 16px;
  height: 16px;
}

.assignment-option--active {
  background: rgba(200, 158, 138, 0.1);
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}

.assignment-option__label {
  font-weight: 500;
}

.assignment-input {
  flex: 1;
  background: #fff;
  border: 1.5px solid rgba(180, 123, 104, 0.12);
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
  min-height: 90px;
  font-size: 0.85rem;
  color: var(--text-primary);
  line-height: 1.5;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.assignment-input--focused {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(180, 123, 104, 0.1);
}

.assignment-input__text {
  color: var(--text-primary);
}

.assignment-input__cursor {
  color: var(--accent-strong);
  font-weight: 400;
  animation: cursorBlink 0.5s step-end infinite;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.assignment-input__placeholder {
  color: var(--text-muted);
}

.assignment-submit {
  align-self: flex-start;
  padding: 0.65rem 1.25rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border: none;
  border-radius: 0.45rem;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(180, 123, 104, 0.3);
}

.assignment-submit--pressed {
  transform: scale(0.92) translateY(2px);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.2), 0 1px 2px rgba(180, 123, 104, 0.2);
}

.assignment-submit--success {
  background: linear-gradient(135deg, #5a9a50, #4a8a42);
  box-shadow: 0 4px 15px rgba(90, 154, 80, 0.4);
  transform: scale(1.02);
}

/* =============================================
   BRANDING SLIDE V3 - LIGHT THEME
   ============================================= */

.slide-mock__branding-v3 {
  position: relative;
  height: 100%;
  padding: 12px;
  overflow: hidden;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(145deg, #fdfbf9 0%, #f5f0eb 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

/* Color wash background */
.brandv3-wash {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 70%;
  background: radial-gradient(ellipse at center, var(--brandv3-color, #E05A4E), transparent 60%);
  opacity: 0.12;
  transition: all 0.5s ease;
  pointer-events: none;
  filter: blur(30px);
}

/* Course card */
.brandv3-card {
  width: 100%;
  flex: 1;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 
    0 2px 4px rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.08);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

/* Card cover with image and color overlay */
.brandv3-card__cover {
  flex: 1;
  min-height: 80px;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 10px;
  overflow: hidden;
  background: #e8e0d8;
}

.brandv3-card__cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brandv3-card__cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--brandv3-color, #E05A4E) 0%, var(--brandv3-color-dark, #c94a3f) 100%);
  opacity: 0.2;  /*opacity of gradient on module cover*/
  mix-blend-mode: multiply;
  transition: background 0.5s ease;
}

.brandv3-card__cover-shine {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.25) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.2) 0%, transparent 30%);
  pointer-events: none;
}

.brandv3-card__badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--brandv3-color, #E05A4E);
  background: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  position: relative;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: color 0.5s ease;
}

/* Card body */
.brandv3-card__body {
  display: flex;
  gap: 12px;
  padding: 5px;
  align-items: center;
}

.brandv3-card__logo {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--brandv3-color, #E05A4E);
  flex-shrink: 0;
  transition: background 0.5s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.brandv3-card__info {
  flex: 1;
  min-width: 0;
}

.brandv3-card__title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a1714;
  line-height: 1.3;
  margin-bottom: 3px;
}

.brandv3-card__meta {
  font-size: 0.7rem;
  color: #8a8078;
}

/* Card footer */
.brandv3-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 14px;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: #faf8f6;
}

.brandv3-card__price {
  font-size: 1rem;
  font-weight: 800;
  color: #1a1714;
}

.brandv3-card__btn {
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: var(--brandv3-color, #E05A4E);
  padding: 8px 16px;
  border-radius: 6px;
  transition: background 0.5s ease, transform 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Color swatches */
.brandv3-swatches {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.8);
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  position: relative;
  z-index: 1;
  margin-top: 10px;
  flex-shrink: 0;
}

.brandv3-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--swatch-color);
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  position: relative;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.brandv3-swatch:hover {
  transform: scale(1.2);
}

.brandv3-swatch--active {
  transform: scale(1.15);
  box-shadow: 
    0 0 0 3px var(--swatch-color),
    0 4px 12px rgba(0,0,0,0.2);
}

/* Ring pulse on active */
.brandv3-swatch--active::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--swatch-color);
  opacity: 0.4;
  animation: brandv3Pulse 1.5s ease-in-out infinite;
}

@keyframes brandv3Pulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.1); opacity: 0.2; }
}
/* =============================================
   SLIDE 10: REFLECTIONS
   ============================================= */

.slide-mock__reflections {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
}

.reflection-prompt {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(180, 123, 104, 0.12);
}

.reflection-responses {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  overflow: hidden;
}

.reflection-item {
  display: flex;
  gap: 0.65rem;
  padding: 0.7rem 0.85rem;
  background: #fff;
  border-radius: 0.55rem;
  border: 1px solid rgba(180, 123, 104, 0.08);
  max-height: 0;
  opacity: 0;
  transform: scale(0.9);
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  transition: max-height 0.4s ease, opacity 0.4s ease, transform 0.4s ease, padding 0.4s ease, margin 0.4s ease;
}

.reflection-item--visible {
  max-height: 100px;
  opacity: 1;
  transform: scale(1);
  padding: 0.7rem 0.85rem;
  margin-bottom: 0;
}

.reflection-item--exiting {
  max-height: 0;
  opacity: 0;
  transform: scale(0.9);
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: -0.5rem;
}

.reflection-item__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}

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

.reflection-item__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.reflection-item__name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
}

.reflection-item__text {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.reflection-item__time {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

/* =============================================
   RESPONSIVE - TABLET
   ============================================= */

@media (max-width: 1024px) {
  /* Hero */
  .studios-hero__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center;
  }

  .studios-hero__content {
    max-width: 100%;
  }

  .studios-hero__subtitle {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .studios-hero__cta {
    justify-content: center;
  }

  .studios-hero__scene {
    height: 400px;
  }

  .course-stack {
    width: 280px;
    height: 300px;
  }

  .floating-badge--users {
    left: 5%;
  }

  .floating-badge--ring {
    left: 8%;
  }

  .floating-badge--check {
    left: 10%;
  }

  /* Slider */
  .studio-slider {
    padding: 4rem 0 3rem;
  }

  .studio-slider__track {
    gap: 3rem;
  }

  .studio-slide {
    flex: 0 0 min(600px, 75%);
  }

  .studio-slide__inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
    min-height: auto;
  }

  .studio-slide__mock {
  height: 360px;
  min-height: 360px;
  max-height: 360px;
  border-radius: 0.85rem;
}

  /* Progress ring */
  .progress-overview {
    flex-direction: column;
    text-align: center;
  }

  .progress-ring {
    width: 120px;
    height: 120px;
  }

  .progress-stats {
    flex-direction: row;
    gap: 1.5rem;
  }

  /* Features grid */
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature-card--hero {
    grid-column: span 2;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .content-types {
    grid-template-columns: repeat(6, 1fr);
  }

  /* CTA */
  .studios-cta__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 3rem;
  }

  .studios-cta__content {
    max-width: 100%;
  }

  .studios-cta__actions {
    justify-content: center;
  }

  .studios-cta__visual {
    height: 280px;
  }
}


/* =============================================
   RESPONSIVE - MOBILE
   ============================================= */

@media (max-width: 600px) {
  /* Hero */
  .studios-hero {
    padding: 2.5rem 0 2rem;
  }

  .studios-hero__inner {
    padding: 0 1.25rem;
    gap: 2rem;
  }

  .studios-hero__title {
    font-size: 3.2rem;
  }

  .studios-hero__subtitle {
    font-size: 0.9rem;
    margin-top: 0.8rem;
    margin-bottom: 0.8rem;
  }

  .studios-hero__cta {
    margin-bottom: -1rem;
  }

  .studios-hero__scene {
    height: 340px;
  }

  .course-stack {
    width: 240px;
    height: 260px;
  }

  .stack-content {
    padding: 1rem;
  }

  .stack-meta__title {
    font-size: 0.9rem;
  }

  .stack-module {
    padding: 0.6rem 0.8rem;
    font-size: 0.75rem;
  }

  .sm-check, .sm-dot {
    width: 16px;
    height: 16px;
  }

  /* Hide some floating badges on mobile */
  .floating-badge--cert,
  .floating-badge--play {
    display: none;
  } 

  .floating-badge--users {
    top: 5%;
    left: 0;
    padding: 0 12px;
    height: 44px;
  }

  .floating-badge--ring {
    width: 60px;
    height: 60px;
    bottom: 5%;
    left: 0;
    top: auto;
  }

  .floating-badge--check {
    width: 44px;
    height: 44px;
    bottom: 5%;
    left: auto;
    right: 0;
  }

  .floating-badge--price {
    bottom: 2%;
    right: 50%;
    transform: translateX(50%);
  }

  .badge-avatars img {
    width: 24px;
    height: 24px;
  }

  .ring-progress {
    width: 36px;
    height: 36px;
  }

  /* Slider */
  .studio-slider {
    padding: 3rem 0 2.5rem;
  }

  .studio-slider__header {
    margin-bottom: 2rem;
  }

  .studio-slider__eyebrow {
    margin-top: -1rem;
  }

  .studio-slider__title {
    font-size: 1.4rem;
  }

  .studio-slider__track {
    gap: 0.4rem;
  }
  
  .studio-slide {
    flex: 0 0 min(350px, 90%);
  }

  .studio-slide__inner {
    padding: 1.25rem;
    border-radius: 1.25rem;
    gap: 1.25rem;
    min-height: 550px;
    max-height: 550px;
    grid-template-rows: 360px 1fr;
  }

  .studio-slide__mock {
    height: 370px !important;
    min-height: 370px !important;
    max-height: 370px !important;
    border-radius: 0.85rem;
}

  .studio-slide__heading {
    font-size: 1.2rem;
  }

  .studio-slide__text {
    font-size: 0.88rem;
  }

  .studio-slider__controls {
    margin-top: 1.75rem;
    gap: 1rem;
  }

  .studio-slider__arrow {
    width: 42px;
    height: 42px;
  }

  .studio-slider__dot {
    width: 8px;
    height: 8px;
  }

  .studio-slider__dot.is-active {
    width: 22px;
  }

  /* Slide 1: Builder */
.slide-mock__builder {
  flex-direction: column;
}

.builder-tree {
  width: 100%;
  min-height: 160px;
  max-height: 180px;
  border-right: none;
  border-bottom: 1px solid rgba(180, 123, 104, 0.08);
}

.builder-editor {
  padding: 0.4rem;
  flex: 0;
}

.builder-editor__panel {
  padding: 0.5rem 0.6rem;
}

.builder-editor__heading {
  font-size: 0.7rem;
  margin-bottom: 0;
}

.builder-editor__sub {
  font-size: 0.55rem;
  margin-bottom: 0.4rem;
}

.builder-editor__blocks {
  gap: 0.2rem;
  max-width: 120px;
}

.builder-block {
  padding: 0.3rem;
}

.builder-block__icon {
  width: 16px;
  height: 16px;
}

.builder-block__label {
  font-size: 0.5rem;
}

.builder-add {
  margin: 0.4rem;
  padding: 0.4rem 0.7rem;
  font-size: 0.7rem;
}

  /* Slide 2: Player */
  .player-screen {
    max-height: 140px;
  }

  .player-lessons {
    gap: 0.2rem;
  }

  .player-lesson {
    padding: 0.3rem 0.5rem;
    font-size: 0.68rem;
  }

  /* Slide 3: Progress */
.slide-mock__progress {
  padding: 1rem;
  gap: 0.5rem;
}

.progress-overview {
  gap: 1rem;
}

.progress-ring {
  width: 90px;
  height: 90px;
}

.progress-ring__value {
  font-size: 1rem;
}

.progress-stat__value {
  font-size: 1rem;
}

.progress-stat__label {
  font-size: 0.7rem;
}

.progress-modules {
  height: 100px;
  width: 120px;
  margin-top: -0.5rem;
}


  /* Slide 4: Quiz */
  .slide-mock__quiz {
    padding: 0.8rem;
    gap: 0.4rem;
  }

  .studio-quiz-question {
    font-size: 0.75rem;
  }

  .studio-quiz-option {
    padding: 0.4rem 0.6rem;
  }

  .studio-quiz-option__letter {
    width: 20px;
    height: 20px;
    font-size: 0.6rem;
  }

  .studio-quiz-option__text {
    font-size: 0.68rem;
  }

  /* Slide 5: Certificate */
  .certificate {
    padding: 1.25rem 1.5rem;
    max-width: 260px;
  }

  .certificate__badge {
    font-size: 1.8rem;
  }

  .certificate__course {
    font-size: 1rem;
  }

  /* Slide 6: Drip */
  .slide-mock__drip {
    padding: 0.6rem;
    padding-left: 1rem;
  }

  .drip-item__content {
    padding: 0.5rem 0.7rem;
  }

  .drip-item__title {
    font-size: 0.72rem;
  }

  .drip-item__status {
    font-size: 0.62rem;
  }

  /* Slide 7: Templates */
  .templates-v2-grid {
    gap: 6px;
    padding: 6px;
  }

  .tpl-card__img {
    height: 60px;
  }

  .tpl-card__info {
    padding: 6px 8px;
  }

  .tpl-card__name {
    font-size: 0.7rem;
  }

  .tpl-card__meta {
    font-size: 0.58rem;
  }

  /* Slide 8: Assignment */
  .slide-mock__assignment {
    padding: 0.8rem;
    gap: 0.6rem;
  }

  .assignment-prompt {
    padding: 0.7rem 0.8rem;
  }

  .assignment-prompt__text {
    font-size: 0.78rem;
  }

  .assignment-options {
    gap: 0.35rem;
  }

  .assignment-option {
    padding: 0.4rem 0.6rem;
    font-size: 0.7rem;
  }

  .assignment-input {
    min-height: 70px;
    padding: 0.7rem;
    font-size: 0.78rem;
  }

  .assignment-submit {
    padding: 0.55rem 1rem;
    font-size: 0.78rem;
  }

  /* Slide 9: Branding */
  .slide-mock__branding-v3 {
    padding: 8px;
  }

  .brandv3-card__cover {
    min-height: 60px;
  }

  .brandv3-card__body {
    padding: 8px;
    gap: 10px;
  }

  .brandv3-card__logo {
    width: 34px;
    height: 34px;
  }

  .brandv3-card__title {
    font-size: 0.8rem;
  }

  .brandv3-card__footer {
    padding: 6px 10px;
  }

  .brandv3-card__price {
    font-size: 0.88rem;
  }

  .brandv3-card__btn {
    padding: 6px 12px;
    font-size: 0.65rem;
  }

  .brandv3-swatches {
    gap: 6px;
    padding: 8px 12px;
    margin-top: 8px;
  }

  .brandv3-swatch {
    width: 18px;
    height: 18px;
  }

  /* Slide 10: Reflections */
  .slide-mock__reflections {
    padding: 0.8rem;
    gap: 0.6rem;
  }

  .reflection-prompt {
    font-size: 0.8rem;
  }

  .reflection-item__avatar {
    width: 30px;
    height: 30px;
  }

  .reflection-item__name {
    font-size: 0.72rem;
  }

  .reflection-item__text {
    font-size: 0.65rem;
  }

  .reflection-item__time {
    display: none;
  }

  /* Features grid */
  .studios-features {
    padding: 3rem 0;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .feature-card--hero {
    grid-column: span 1;
  }

  .content-types {
    grid-template-columns: repeat(3, 1fr);
  }

  .feature-card {
    padding: 1.25rem;
  }

  .feature-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 1rem;
  }

  /* CTA */
  .studios-cta {
    padding: 3.5rem 0;
  }

  .studios-cta__title {
    font-size: 1.8rem;
  }

  .studios-cta__text {
    font-size: 1rem;
  }

  .studios-cta__visual {
    height: 200px;
  }

  .studios-cta-element--card {
    width: 70px;
    height: 90px;
    left: 5%;
  }

  .studios-cta-element--play {
    width: 56px;
    height: 56px;
  }

  .studios-cta-element--ring {
    width: 54px;
    height: 54px;
    right: 8%;
  }

  .studios-cta-element--cert {
    width: 42px;
    height: 42px;
  }

  .studios-cta-element--check {
    width: 38px;
    height: 38px;
  }

  /* Ensure all slide inner content fills the space */
.slide-mock__builder,
.slide-mock__player,
.slide-mock__progress,
.slide-mock__quiz,
.slide-mock__certificate,
.slide-mock__drip,
.slide-mock__templates-v2,
.slide-mock__assignment,
.slide-mock__branding-v3,
.slide-mock__reflections {
  flex: 1;
  min-height: 0;
}
}





/* =============================================
   STUDIOS FEATURES BENTO - DARK THEME
   ============================================= */

.studios-features {
  padding: 5rem 0;
  background: linear-gradient(180deg, #1a1614 0%, #241f1c 100%);
}

.studios-features__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

.studios-features__header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.studios-features__eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent, #c89e8a);
  margin-bottom: 1rem;
}

.studios-features__title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  margin: 0;
}

/* Grid layout */
.studios-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 1.25rem;
}

/* Base card */
.studios-feature-card {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 1.25rem;
  padding: 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 
    0 2px 8px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.04);
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.35s ease, background 0.35s ease;
}

.studios-feature-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 
    0 8px 24px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Hero card - spans 2 columns */
.studios-feature-card--hero {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 2rem;
  align-items: center;
  padding: 2rem 2.5rem;
}

.studios-feature-card--hero .studios-feature-card__content {
  display: flex;
  flex-direction: column;
}

/* Community card */
.studios-feature-card--community {
  display: flex;
  flex-direction: column;
}

/* Icon styles */
.studios-feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  transition: transform 0.3s ease;
}

.studios-feature-card:hover .studios-feature-icon {
  transform: scale(1.08) rotate(-3deg);
}

.studios-feature-icon--coral {
  background: linear-gradient(135deg, rgba(200, 158, 138, 0.25) 0%, rgba(180, 123, 104, 0.18) 100%);
  color: #d4a394;
}

.studios-feature-icon--purple {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(109, 40, 217, 0.15) 100%);
  color: #a78bfa;
}

.studios-feature-icon--blue {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.2) 0%, rgba(2, 132, 199, 0.15) 100%);
  color: #38bdf8;
}

.studios-feature-icon--pink {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.2) 0%, rgba(219, 39, 119, 0.15) 100%);
  color: #f472b6;
}

.studios-feature-icon--green {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.15) 100%);
  color: #34d399;
}

.studios-feature-icon--amber {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22) 0%, rgba(217, 119, 6, 0.15) 100%);
  color: #fbbf24;
}

.studios-feature-icon--teal {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.2) 0%, rgba(13, 148, 136, 0.15) 100%);
  color: #2dd4bf;
}

/* Card typography */
.studios-feature-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.5rem;
}

.studios-feature-card__text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

/* Content types visual */
.studios-feature-card__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.studios-content-types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.studios-content-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.75rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.25s ease;
  cursor: default;
}

.studios-content-type:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.studios-content-type span {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.studios-content-type--video svg { color: #f87171; }

.studios-content-type--audio svg { color: #a78bfa; }

.studios-content-type--pdf svg { color: #fb923c; }

.studios-content-type--text svg { color: #60a5fa; }

.studios-content-type--download svg { color: #34d399; }

.studios-content-type--embed svg { color: #818cf8; }

/* Community preview */
.studios-community-preview {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1.25rem;
}

.studios-community-avatars {
  display: flex;
}

.studios-community-avatars img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #1a1614;
  margin-left: -10px;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.studios-community-avatars img:first-child {
  margin-left: 0;
}

.studios-feature-card:hover .studios-community-avatars img {
  transform: translateY(-2px);
}

.studios-feature-card:hover .studios-community-avatars img:nth-child(2) {
  transition-delay: 0.05s;
}

.studios-feature-card:hover .studios-community-avatars img:nth-child(3) {
  transition-delay: 0.1s;
}

.studios-feature-card:hover .studios-community-avatars img:nth-child(4) {
  transition-delay: 0.15s;
}

.studios-community-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent, #c89e8a);
}

/* Responsive */
@media (max-width: 900px) {
  .studios-features__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .studios-feature-card--hero {
    grid-column: span 2;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .studios-content-types {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 600px) {
  .studios-features {
    padding: 3.5rem 0;
  }
  
  .studios-features__grid {
    grid-template-columns: 1fr;
  }
  
  .studios-feature-card--hero {
    grid-column: span 1;
  }
  
  .studios-content-types {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .studios-feature-card {
    padding: 1.5rem;
  }
  
  .studios-feature-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 1rem;
  }
}






/* =============================================
   CTA SECTION - STUDIOS THEMED
   ============================================= */

.studios-cta {
  padding: 5rem 0;
  background: linear-gradient(135deg, #1a1614 0%, #2d2420 50%, #1a1614 100%);
  position: relative;
  overflow: hidden;
}

.studios-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(ellipse 60% 50% at 70% 50%, rgba(200, 158, 138, 0.08), transparent 50%),
    radial-gradient(ellipse 40% 40% at 20% 60%, rgba(180, 123, 104, 0.06), transparent 50%);
  pointer-events: none;
}

.studios-cta__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

.studios-cta__content {
  max-width: 480px;
}

.studios-cta__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent, #c89e8a);
  margin: 0 0 1rem;
}

.studios-cta__title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 1.25rem;
}

.studios-cta__text {
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 2rem;
}

.studios-cta__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.studios-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0.6rem;
  transition: all 0.25s ease;
}

.studios-cta__btn--primary {
  background: linear-gradient(135deg, var(--accent, #c89e8a) 0%, var(--accent-strong, #b47b68) 100%);
  color: #fff;
  box-shadow: 0 4px 15px rgba(180, 123, 104, 0.4);
}

.studios-cta__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(180, 123, 104, 0.5);
}

.studios-cta__btn--secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.studios-cta__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

/* Visual elements */
.studios-cta__visual {
  position: relative;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.studios-cta-element {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: transform 0.4s ease;
}

.studios-cta-element:hover {
  transform: scale(1.1) translateY(-4px);
}

.studios-cta-element--play:hover {
  transform: translate(-50%, -50%) scale(1.12);
}

/* Play button - CENTER FOCAL POINT */
.studios-cta-element--play {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--accent, #c89e8a), var(--accent-strong, #b47b68));
  box-shadow: 
    0 8px 30px rgba(180, 123, 104, 0.5),
    0 0 60px rgba(180, 123, 104, 0.2);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  animation: studiosFloatPlay 6s ease-in-out infinite;
}

.studios-cta-element--play svg {
  width: 28px;
  height: 28px;
  color: #fff;
  margin-left: 4px;
}

/* Course card - TOP LEFT */
.studios-cta-element--card {
  width: 90px;
  height: 115px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  top: 8%;
  left: 10%;
  z-index: 2;
  animation: studiosFloatCard 8s ease-in-out infinite;
}

.studios-cta-card {
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.studios-cta-card__progress {
  height: 45px;
  background: linear-gradient(135deg, rgba(200, 158, 138, 0.35), rgba(180, 123, 104, 0.2));
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

.studios-cta-card__progress::after {
  content: '▶';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
}

.studios-cta-card__lines span {
  display: block;
  height: 7px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  margin-bottom: 5px;
}

.studios-cta-card__lines span:last-child {
  width: 65%;
}

/* Progress ring - TOP RIGHT */
.studios-cta-element--ring {
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  top: 5%;
  right: 15%;
  z-index: 2;
  animation: studiosFloatRing 7s ease-in-out infinite;
}

.studios-cta-element--ring svg {
  width: 42px;
  height: 42px;
  color: var(--accent, #c89e8a);
}

/* Certificate - UPPER RIGHT */
.studios-cta-element--cert {
  width: 52px;
  height: 52px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.25);
  top: 35%;
  right: 5%;
  z-index: 2;
  animation: studiosFloatCert 6.5s ease-in-out infinite;
}

.studios-cta-element--cert svg {
  width: 26px;
  height: 26px;
  color: #fbbf24;
}

/* Checkmark - BOTTOM RIGHT */
.studios-cta-element--check {
  width: 48px;
  height: 48px;
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.25);
  bottom: 15%;
  right: 20%;
  z-index: 2;
  animation: studiosFloatCheck 5.5s ease-in-out infinite;
}

.studios-cta-element--check svg {
  width: 22px;
  height: 22px;
  color: #34d399;
}

/* Float animations */
@keyframes studiosFloatCard {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}

@keyframes studiosFloatPlay {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, calc(-50% - 10px)) scale(1.05); }
}

@keyframes studiosFloatCert {
  0%, 100% { transform: translateY(0) rotate(3deg); }
  50% { transform: translateY(-10px) rotate(-3deg); }
}

@keyframes studiosFloatCheck {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes studiosFloatRing {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Responsive */
@media (max-width: 900px) {
  .studios-cta__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 3rem;
  }
  
  .studios-cta__content {
    max-width: 100%;
  }
  
  .studios-cta__actions {
    justify-content: center;
  }
  
  .studios-cta__visual {
    height: 280px;
  }
}

@media (max-width: 600px) {
  .studios-cta {
    padding: 4rem 0;
  }
  
  .studios-cta__visual {
    height: 220px;
  }
  
  .studios-cta-element--card {
    width: 75px;
    height: 95px;
    left: 5%;
  }
  
  .studios-cta-element--play {
    width: 64px;
    height: 64px;
  }
  
  .studios-cta-element--ring {
    width: 56px;
    height: 56px;
    right: 8%;
  }
  
  .studios-cta-element--cert {
    width: 44px;
    height: 44px;
  }
  
  .studios-cta-element--check {
    width: 40px;
    height: 40px;
  }
}







/* =============================================
   COMPARISON TABLE (studios-specific prefix)
   ============================================= */

.studios-comparison {
  padding: 5rem 0;
  background: 
    radial-gradient(ellipse 70% 50% at 80% 20%, rgba(200, 158, 138, 0.06), transparent 50%),
    linear-gradient(180deg, #faf8f6 0%, #f2ece6 100%);
}

.studios-comparison__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2rem;
}

.studios-comparison__header {
  text-align: center;
  margin-bottom: 3rem;
}

.studios-comparison__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin: 0 0 0.5rem;
}

.studios-comparison__title {
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  font-weight: 800;
  color: #2a2623;
  margin: 0;
}

.studios-comparison__table {
  background: #fff;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 16px 50px rgba(140, 100, 80, 0.1);
  border: 1px solid rgba(180, 123, 104, 0.1);
}

.studios-comparison__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  border-bottom: 1px solid rgba(180, 123, 104, 0.08);
}

.studios-comparison__row:last-child {
  border-bottom: none;
}

.studios-comparison__row--header {
  background: linear-gradient(180deg, #faf7f4 0%, #f5f0eb 100%);
}

.studios-comparison__cell {
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
}

.studios-comparison__cell--others {
  background: rgba(0, 0, 0, 0.015);
  justify-content: center;
  border-left: 1px solid rgba(180, 123, 104, 0.06);
  border-right: 1px solid rgba(180, 123, 104, 0.06);
}

.studios-comparison__cell--gadura {
  background: linear-gradient(135deg, rgba(200, 158, 138, 0.08), rgba(200, 158, 138, 0.03));
  justify-content: center;
  position: relative;
}

.studios-comparison__cell--gadura::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
}

.studios-comparison__others-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8a847e;
}

.studios-comparison__gadura-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.studios-comparison__gadura-logo {
  height: 22px;
}

.studios-comparison__gadura-logo svg {
  height: 100%;
  width: auto;
}

.studios-comparison__gadura-name {
  font-family: "Playfair Display", serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #2a2623;
}

.studios-comparison__feature-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #2a2623;
}

.studios-comparison__others-value {
  font-size: 0.85rem;
  color: #8a847e;
}

.studios-comparison__gadura-value {
  font-size: 0.88rem;
  font-weight: 600;
  color: #2a2623;
  padding-left: 1.4rem;
  position: relative;
}

.studios-comparison__gadura-value::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
}

.studios-comparison__gadura-value::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 4px;
  height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
}

.studios-comparison__footnote {
  text-align: center;
  margin-top: 2.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: #5a534d;
  font-style: italic;
}


/* =============================================
   CTA SECTION
   ============================================= */

.studios-cta {
  background: linear-gradient(135deg, #1a1412 0%, #2a2320 50%, #1a1412 100%);
  padding: 5rem 2rem;
  position: relative;
  overflow: hidden;
}

.studios-cta__inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 3rem;
  align-items: center;
}

.studios-cta__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.studios-cta__title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 1rem;
}

.studios-cta__text {
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 2rem;
}

.studios-cta__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.studios-cta__btn {
  padding: 0.9rem 1.8rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: all 0.25s ease;
}

.studios-cta__btn--primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #fff;
  box-shadow: 0 4px 20px rgba(180, 123, 104, 0.4);
}

.studios-cta__btn--primary:hover {
  transform: translateY(-2px);
}

.studios-cta__btn--secondary {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.studios-cta__visual {
  position: relative;
  height: 250px;
}

.studios-cta::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 10%;
  width: 400px;
  height: 400px;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(200, 158, 138, 0.15), transparent 60%);
}


/* =============================================
   RESPONSIVE - TABLET
   ============================================= */

@media (max-width: 900px) {

  .studios-bento {
    grid-template-columns: repeat(2, 1fr);
  }

  .studios-cta__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .studios-cta__actions {
    justify-content: center;
  }

  .studios-cta__visual {
    order: -1;
    height: 180px;
  }
}


/* =============================================
   RESPONSIVE - MOBILE
   ============================================= */

@media (max-width: 600px) {

  .studios-bento {
    grid-template-columns: 1fr;
  }

  .bento-card--large,
  .bento-card--medium {
    grid-column: span 1;
  }

  .studios-comparison__row {
  grid-template-columns: 0.9fr 0.9fr 1.2fr;
}

.studios-comparison__cell {
  padding: 0.7rem 0.5rem;
}

.studios-comparison__feature-label,
.studios-comparison__others-value,
.studios-comparison__gadura-value {
  font-size: 0.72rem;
}

.studios-comparison__gadura-value {
  padding-left: 1rem;
}

.studios-comparison__gadura-value::before {
  width: 12px;
  height: 12px;
}

  .studios-cta {
    padding: 3.5rem 1.5rem;
  }
}

































/* =============================================
   OFFERS PAGE STYLES - V2 WITH DEPTH
   ============================================= */

/* =============================================
   OFFERS HERO - DEEP & LAYERED
   ============================================= */
.offers-hero {
  position: relative;
  padding: 7rem 2rem 4rem;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg) 0%, #fff 100%);
}

.offers-hero__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
  align-items: center;
}

/* Deep ambient orbs */
.offers-hero__ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.offers-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  animation: orb-float 8s ease-in-out infinite;
}

.offers-orb--1 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  top: -10%;
  right: 10%;
  animation-delay: 0s;
}

.offers-orb--2 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, #d4a574 0%, transparent 70%);
  bottom: 10%;
  left: 5%;
  animation-delay: -2s;
}

.offers-orb--3 {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, #e8c4b0 0%, transparent 70%);
  top: 40%;
  right: 25%;
  animation-delay: -4s;
}

.offers-orb--4 {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(200, 158, 138, 0.6) 0%, transparent 70%);
  top: 60%;
  left: 30%;
  animation-delay: -1s;
}

.offers-orb--5 {
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, #f0e6df 0%, transparent 70%);
  bottom: 30%;
  right: 5%;
  animation-delay: -3s;
}

@keyframes orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(20px, -20px) scale(1.05); }
  66% { transform: translate(-10px, 15px) scale(0.95); }
}

/* Hero Content */
.offers-hero__content {
  position: relative;
  z-index: 2;
}

.offers-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-strong);
  margin-bottom: 1rem;
}

.offers-hero__title {
  font-size: clamp(2.5rem, 5vw, 3.8rem);
  line-height: 1.1;
  color: var(--text-main);
  margin: 0 0 1.5rem;
}

@keyframes underline-grow {
  to { transform: scaleX(1); }
}

.offers-hero__subtitle {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 1.5rem;
  max-width: 480px;
}

.offers-hero__pills {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.offers-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background: var(--accent-soft);
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent-strong);
}

.offers-hero__cta .btn--primary {
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 2rem;
  background: var(--accent-strong);
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(180, 123, 104, 0.4);
}

.offers-hero__cta .btn--primary:hover {
  background: var(--text-main);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

/* =============================================
   HERO - FLOATING OFFER CARDS
   ============================================= */
.offers-hero__scene {
  position: relative;
  height: 480px;
}

/* Base offer card */
.offer-card {
  position: absolute;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 
    0 2px 8px rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.06),
    0 16px 48px rgba(0,0,0,0.06);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.offer-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 
    0 4px 12px rgba(0,0,0,0.06),
    0 12px 32px rgba(0,0,0,0.08),
    0 24px 64px rgba(0,0,0,0.08);
}

/* Gradient film overlay */
.offer-card__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.1) 0%,
    transparent 40%,
    transparent 60%,
    rgba(0,0,0,0.03) 100%
  );
  z-index: 3;
  pointer-events: none;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.6);
}

/* Image area */
.offer-card__image {
  width: 100%;
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--accent-soft) 0%, #e8ddd6 50%, var(--accent) 100%);
  background-size: 200% 200%;
  animation: card-gradient-shift 8s ease infinite;
  position: relative;
}

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

@keyframes card-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Content */
.offer-card__content {
  padding: 1rem 1.25rem;
}

.offer-card__tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-strong);
  background: var(--accent-soft);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.offer-card__title {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.35rem;
}

.offer-card__price {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
}

.offer-card__price small {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* ========== SIZE VARIANTS ========== */

/* Large card */
.offer-card--large {
  width: 280px;
  left: 10%;
  top: 15%;
  z-index: 4;
  animation: float-1 6s ease-in-out infinite;
}

.offer-card--large .offer-card__image {
  aspect-ratio: 16/9;
}

.offer-card--large .offer-card__content {
  padding: 1.25rem 1.5rem;
}

.offer-card--large .offer-card__title {
  font-size: 1.15rem;
}

.offer-card--large .offer-card__price {
  font-size: 1.25rem;
}

/* Medium card */
.offer-card--medium {
  width: 220px;
  z-index: 3;
  animation: float-2 7s ease-in-out infinite;
}

.offer-card--medium .offer-card__content {
  padding: 0.9rem 1.1rem;
}

.offer-card--medium .offer-card__title {
  font-size: 0.95rem;
}

.offer-card--medium .offer-card__price {
  font-size: 1rem;
}

/* Small card */
.offer-card--small {
  width: 170px;
  z-index: 2;
  animation: float-3 5s ease-in-out infinite;
}

.offer-card--small .offer-card__image {
  aspect-ratio: 16/11;
}

.offer-card--small .offer-card__content {
  padding: 0.75rem 0.9rem;
}

.offer-card--small .offer-card__tag {
  font-size: 0.55rem;
  padding: 0.2rem 0.4rem;
}

.offer-card--small .offer-card__title {
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

.offer-card--small .offer-card__price {
  font-size: 0.9rem;
}

/* ========== POSITIONS ========== */
.offer-card--pos-1 {
  right: 5%;
  top: 5%;
}

.offer-card--pos-2 {
  left: 0%;
  bottom: 10%;
}

.offer-card--pos-3 {
  right: 15%;
  bottom: 20%;
}

/* ========== FLOAT ANIMATIONS ========== */
@keyframes float-1 {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-15px) rotate(1deg); }
}

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

@keyframes float-3 {
  0%, 100% { transform: translateY(0) rotate(0.5deg); }
  50% { transform: translateY(-10px) rotate(-0.5deg); }
}

/* ========== FLOATING BADGES ========== */
.offers-float-badge {
  position: absolute;
  z-index: 5;
}

/* Positions */
.offers-float-badge--discount {
  right: 44%;
  top: 17%;
  animation: float-badge-1 5s ease-in-out infinite;
}

.offers-float-badge--check {
  left: 0%;
  bottom: 30%;
  animation: float-badge-2 6s ease-in-out infinite 0.5s;
}

.offers-float-badge--popular {
  right: 6%;
  top: 35%;
  animation: float-badge-3 5.5s ease-in-out infinite 1s;
}

.offers-float-badge--new {
  left: 5%;
  top: 5%;
  animation: float-badge-1 4.5s ease-in-out infinite 0.3s;
}

.offers-float-badge--recurring {
  right: 40%;
  bottom: 5%;
  animation: float-badge-2 5s ease-in-out infinite 0.8s;
}

.offers-float-badge--bundle {
  left: 15%;
  top: 55%;
  animation: float-badge-3 6s ease-in-out infinite 0.2s;
}

.offers-float-badge--nofees {
  right: 5%;
  bottom: 15%;
  animation: float-badge-1 5.5s ease-in-out infinite 1.2s;
}

/* Glow colors */
.offers-float-badge__glow {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  opacity: 0.5;
  z-index: -1;
  filter: blur(10px);
}

.offers-float-badge__glow--green {
  background: radial-gradient(circle, rgba(34, 197, 94, 0.5) 0%, transparent 70%);
}

.offers-float-badge__glow--coral {
  background: radial-gradient(circle, rgba(244, 114, 82, 0.5) 0%, transparent 70%);
}

.offers-float-badge__glow--amber {
  background: radial-gradient(circle, rgba(251, 191, 36, 0.5) 0%, transparent 70%);
}

.offers-float-badge__glow--blue {
  background: radial-gradient(circle, rgba(59, 130, 246, 0.5) 0%, transparent 70%);
}

.offers-float-badge__glow--purple {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.5) 0%, transparent 70%);
}

.offers-float-badge__glow--red {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.5) 0%, transparent 70%);
}

/* Inner badge */
.offers-float-badge__inner {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.8rem;
  background: #fff;
  border-radius: 10px;
  box-shadow: 
    0 2px 8px rgba(0,0,0,0.06),
    0 4px 16px rgba(0,0,0,0.06);
}

/* Checkmark circle variants */
.offers-float-badge__inner--check {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  padding: 0;
  justify-content: center;
}

.offers-float-badge__inner--green {
  background: #5a9a6e;
}

.offers-float-badge__inner--check svg {
  width: 16px;
  height: 16px;
  color: #fff;
}

/* Pill variants */
.offers-float-badge__inner--pill {
  padding: 0.4rem 0.7rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.offers-float-badge__inner--amber {
  background: linear-gradient(135deg, #d9a963 0%, #c4944d 100%);
  color: #fff;
}

.offers-float-badge__inner--coral-outline {
  background: #fff;
  border: 1.5px solid var(--accent-strong);
  color: var(--accent-strong);
}

.offers-float-badge__text--red {
  color: #ef4444;
}

.offers-float-badge--popular .offers-float-badge__icon {
  color: #ef4444;
  width: 14px;
  height: 14px;
}

/* Icon */
.offers-float-badge__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.offers-float-badge__icon--spin {
  animation: spin-slow 4s linear infinite;
}

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

/* Text colors */
.offers-float-badge__text {
  font-size: 0.8rem;
  font-weight: 600;
}

.offers-float-badge__text--coral {
  color: var(--accent-strong);
}

.offers-float-badge__text--coral .offers-float-badge__icon {
  color: var(--accent-strong);
}

.offers-float-badge__percent--green {
  color: #22c55e;
}

.offers-float-badge__inner--green {
  background: #22c55e;
}

.offers-float-badge__text--green {
  color: #22c55e;
}

.offers-float-badge__text--amber {
  color: #f59e0b;
}

.offers-float-badge__text--blue {
  color: #3b82f6;
}

.offers-float-badge__text--purple {
  color: #a855f7;
}

.offers-float-badge--recurring .offers-float-badge__icon {
  color: #3b82f6;
}

.offers-float-badge--bundle .offers-float-badge__icon {
  color: #a855f7;
}

.offers-float-badge__inner--amber {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #fff;
}

/* Percent text */
.offers-float-badge__percent {
  font-size: 0.95rem;
  font-weight: 800;
}

.offers-float-badge__percent--green {
  color: #5a9a6e;
}

/* Float animations - varied timing */
@keyframes float-badge-1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(3deg); }
}

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

@keyframes float-badge-3 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}


/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
  .offers-hero__scene {
    height: 400px;
  }
  
  .offer-card--large {
    width: 240px;
    left: 5%;
  }
  
  .offer-card--medium {
    width: 190px;
  }
  
  .offer-card--small {
    width: 150px;
  }

  .offers-float-badge--bundle {
    display: none;
  }
}

@media (max-width: 768px) {
  .offers-hero__scene {
    height: 380px;
    margin-top: 2rem;
  }

  .offers-hero__subtitle{
    font-size: 0.9rem;
  }
  
  /* Show 3 cards, repositioned */
  .offer-card--large {
    width: 170px;
    left: 5%;
    top: 5%;
    transform: none;
  }
  
  .offer-card--medium.offer-card--pos-1 {
    display: block;
    width: 150px;
    right: 5%;
    top: 12%;
  }
  
  .offer-card--small.offer-card--pos-2 {
    display: block;
    width: 130px;
    left: 25%;
    bottom: 5%;
    top: auto;
  }
  
  /* Hide only the 4th card */
  .offer-card--pos-3 {
    display: none;
  }
  
  /* Show 3 badges */
  .offers-float-badge--discount {
    display: block;
    right: 8%;
    top: 0%;
  }
  
  .offers-float-badge--check {
    display: block;
    left: 8%;
    bottom: 28%;
    top: auto;
  }
  
  .offers-float-badge--popular {
    display: block;
    right: 5%;
    bottom: 18%;
    top: auto;
  }
  
  /* Hide less important badges */
  .offers-float-badge--new{
    display: none;
  }
  
  /* Smaller card content */
  .offer-card__content {
    padding: 0.7rem 0.9rem;
  }
  
  .offer-card__tag {
    font-size: 0.55rem;
    padding: 0.2rem 0.4rem;
    margin-bottom: 0.35rem;
  }
  
  .offer-card__title {
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
  }
  
  .offer-card__price {
    font-size: 0.9rem;
  }

  .offers-orb--1 {
    display: none;
  }
}

@media (max-width: 480px) {
  .offers-hero__scene {
    height: 340px;
  }
  
  .offer-card--large {
    width: 145px;
    left: 3%;
    top: 8%;
  }
  
  .offer-card--medium.offer-card--pos-1 {
    width: 130px;
    right: 3%;
    top: 18%;
  }
  
  .offer-card--small.offer-card--pos-2 {
    width: 115px;
    left: 28%;
    bottom: 3%;
  }
  
  /* Keep 2 badges on very small */
  .offers-float-badge--popular {
    right: 3%;
    top: 2%;
  }
  
  .offers-float-badge--discount {
    right: 3%;
    top: 5%;
  }
  
  .offers-float-badge--check {
    left: 5%;
    bottom: 25%;
  }

  .offers-float-badge--recurring {
    right: 20%;
    bottom: 2%;
  }

    .offers-float-badge--nofees{
    right: 40%;
    top: 40%;
    }
}



/* =============================================
   OFFERS SHOWCASE - MOCKUPS GRID
   ============================================= */
.offers-showcase {
  padding: 6rem 2rem;
  background: var(--bg);
}

.offers-showcase__header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 4rem;
}

.offers-showcase__eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-strong);
  margin-bottom: 0.75rem;
  margin-top: -2rem;
}

.offers-showcase__title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  color: var(--text-main);
  margin: 0 0 1rem;
}

.offers-showcase__subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin: 0;
}

.offers-showcase__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

/* Section Headers */
.offers-section-header {
  grid-column: span 2;
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 3rem 0 1.5rem 0;
}

.offers-section-header:first-child {
  margin-top: 0;
}

.offers-section-header__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200, 158, 138, 0.2) 20%,
    rgba(200, 158, 138, 0.2) 80%,
    transparent 100%
  );
}

.offers-section-header__title {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-strong);
  margin: 0;
  white-space: nowrap;
  position: relative;
}

.offers-section-header__title::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-strong), transparent);
  border-radius: 2px;
}

/* Mockup Card */
.offers-mock {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.offers-mock--wide {
  grid-column: span 2;
}

.offers-mock__screen {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(253, 252, 251, 0.95) 100%);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(200, 158, 138, 0.1),
    0 8px 24px rgba(42, 38, 35, 0.06),
    0 20px 48px rgba(42, 38, 35, 0.08),
    0 40px 80px rgba(42, 38, 35, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.offers-mock__screen::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(200, 158, 138, 0.2), transparent 40%, transparent 60%, rgba(200, 158, 138, 0.15));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.offers-mock__screen:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow:
    0 0 0 1px rgba(200, 158, 138, 0.15),
    0 12px 32px rgba(42, 38, 35, 0.08),
    0 28px 64px rgba(42, 38, 35, 0.1),
    0 48px 96px rgba(42, 38, 35, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.offers-mock__screen:hover::before {
  opacity: 1;
}

/* Chrome bar */
.offers-mock__chrome {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.5rem;
  background:
    linear-gradient(180deg, rgba(250, 248, 246, 0.95) 0%, rgba(245, 243, 241, 0.9) 100%);
  border-bottom: 1px solid rgba(200, 158, 138, 0.1);
  position: relative;
}

.offers-mock__chrome::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 158, 138, 0.15), transparent);
}

.chrome-dots {
  display: flex;
  gap: 7px;
}

.chrome-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ddd;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.15),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.5);
  transition: all 0.2s ease;
}

.chrome-dots span:first-child {
  background: linear-gradient(135deg, #ff6b63 0%, #ff5247 100%);
}

.chrome-dots span:nth-child(2) {
  background: linear-gradient(135deg, #ffc438 0%, #ffb814 100%);
}

.chrome-dots span:last-child {
  background: linear-gradient(135deg, #32d74b 0%, #28c840 100%);
}

.chrome-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

.chrome-badge {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.6rem;
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-radius: 6px;
}

.chrome-badge--live {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: #dcfce7;
  color: #16a34a;
}

.chrome-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
  animation: pulse-dot 1.5s ease infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

.chrome-count {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.chrome-step {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.offers-mock__body {
  padding: 2rem;
  height: 420px;
  overflow: hidden;
}

.offers-mock__caption {
  padding: 0 0.5rem;
}

.offers-mock__caption h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.5rem;
}

.offers-mock__caption p {
  font-size: 1rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.6;
}

/* Center caption for wide mockups (like mockup 1) */
.offers-mock--wide .offers-mock__caption {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Add extra spacing below mockup 1 */
.offers-mock--wide {
  margin-bottom: 3rem;
}


/* =============================================
   MOCKUP 1: OFFER BUILDER V2 - Split Layout
   ============================================= */
.offers-mock__body--builder-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  height: 650px;
  padding: 0;
}

/* ========== LEFT PANEL: Form ========== */
.builder-form-panel {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 3rem 3rem 3rem;
  background:
    linear-gradient(135deg, rgba(250, 248, 246, 0.6) 0%, rgba(245, 243, 241, 0.5) 100%);
  border-right: 1px solid rgba(200, 158, 138, 0.12);
  height: 650px;
  position: relative;
}

.builder-form-panel::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(200, 158, 138, 0.15), transparent);
}

.builder-form-panel__inner {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  width: 100%;
  max-width: 300px;
}

.builder-field {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.builder-field__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.builder-field__input {
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
  border: 2px solid rgba(200, 158, 138, 0.15);
  border-radius: 12px;
  min-height: 52px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow:
    0 2px 8px rgba(42, 38, 35, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.builder-field__input--active {
  border-color: var(--accent-strong);
  box-shadow:
    0 0 0 4px rgba(200, 158, 138, 0.1),
    0 4px 12px rgba(42, 38, 35, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  transform: translateY(-1px);
}

.builder-typed {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-main);
}

.builder-cursor {
  width: 2px;
  height: 20px;
  background: var(--accent-strong);
  margin-left: 2px;
  animation: cursor-blink 0.7s step-end infinite;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Radio buttons */
.builder-radios {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.builder-radio {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 1rem;
  background: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.builder-radio:hover {
  border-color: #ccc;
}

.builder-radio--active {
  background: var(--accent-soft);
  border-color: var(--accent-strong);
  color: var(--accent-strong);
  transform: scale(1.02);
  box-shadow: 0 2px 12px rgba(180, 123, 104, 0.2);
}

.builder-radio__dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #ccc;
  position: relative;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.builder-radio--active .builder-radio__dot {
  border-color: var(--accent-strong);
  border-width: 5px;
}

/* Price field */
.builder-field__price {
  display: flex;
  align-items: baseline;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
}

.builder-field__currency {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-right: 0.15rem;
}

.builder-field__amount {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-main);
  transition: transform 0.3s ease, color 0.3s ease;
}

/* ========== RIGHT PANEL: Preview ========== */
.builder-preview-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem 2.5rem 2.5rem 2.5rem;
  background: #fff;
  position: relative;
}

.builder-preview-panel__badge {
  position: absolute;
  top: 0rem;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0.4rem 0.85rem;
  background: #f5f5f5;
  border-radius: 6px;
}

.badge-dot {
  width: 6px;
  height: 6px;
  background: #16a34a;
  border-radius: 50%;
  animation: pulse-dot 1.5s ease infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

/* ========== THE STAR: Pricing Card ========== */
.pricing-card {
  position: relative;
  width: 300px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 20px;
  padding: 2rem 1.75rem;
  text-align: center;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.03),
    0 4px 12px rgba(0,0,0,0.05),
    0 12px 36px rgba(0,0,0,0.08),
    0 24px 60px rgba(0,0,0,0.06);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
  overflow: hidden;
  margin-top: 2.5rem;
}

.pricing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-20deg);
  animation: card-shimmer 4s ease-in-out infinite;
}

@keyframes card-shimmer {
  0% { left: -150%; }
  30%, 100% { left: 150%; }
}

.pricing-card__glow {
  position: absolute;
  inset: -8px;
  background: linear-gradient(135deg, var(--accent-soft), var(--accent), var(--accent-strong));
  border-radius: 28px;
  z-index: -1;
  opacity: 0;
  filter: blur(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transform: scale(0.95);
}

.pricing-card--pulse {
  transform: scale(1.04) translateY(-4px);
  box-shadow: 
    0 0 0 1px rgba(0,0,0,0.03),
    0 8px 24px rgba(180, 123, 104, 0.15),
    0 20px 48px rgba(0,0,0,0.12),
    0 32px 72px rgba(0,0,0,0.08);
}

.pricing-card--pulse .pricing-card__glow {
  opacity: 0.8;
  transform: scale(1);
  animation: glow-breathe 1s ease-in-out infinite alternate;
}

@keyframes glow-breathe {
  0% { opacity: 0.6; filter: blur(18px); }
  100% { opacity: 0.85; filter: blur(24px); }
}

.pricing-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.75rem;
  min-height: 30px;
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.1rem;
  margin-bottom: 0.75rem;
}

.pricing-card__currency {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 0.4rem;
}

.pricing-card__amount {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}

.pricing-card__amount--bump {
  transform: scale(1.15);
  color: var(--accent-strong);
}

.pricing-card__dropdown {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-main);
  margin-bottom: 1.5rem;
}

.pricing-card__dropdown svg {
  color: var(--text-muted);
}

/* Features list */
.pricing-card__features {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
  text-align: left;
  min-height: 140px;
}

.pricing-feature {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.85rem;
  background: #f8f8f8;
  border-radius: 10px;
  border: 2px solid transparent;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pricing-feature--highlight {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: translateX(6px) scale(1.02);
  box-shadow: 0 4px 16px rgba(180, 123, 104, 0.2);
}

.pricing-feature__check {
  width: 18px;
  height: 18px;
  color: #16a34a;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.pricing-feature--highlight .pricing-feature__check {
  transform: scale(1.2);
}

.pricing-feature__text {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-main);
}

.pricing-feature--new {
  opacity: 0;
  transform: translateX(-20px) scale(0.95);
  height: 0;
  padding: 0 0.85rem;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: linear-gradient(135deg, var(--accent-soft), rgba(200, 158, 138, 0.2));
  border: 2px solid var(--accent);
}

.pricing-feature--visible {
  opacity: 1;
  transform: translateX(0) scale(1);
  height: auto;
  padding: 0.65rem 0.85rem;
}

.pricing-feature__text--typing {
  min-width: 100px;
}

.pricing-feature__cursor {
  width: 2px;
  height: 16px;
  background: var(--accent-strong);
  animation: cursor-blink 0.6s step-end infinite;
  margin-left: 2px;
}

/* Add feature button */
.pricing-card__add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: transparent;
  border: 2px dashed #ddd;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin-bottom: 1rem;
}

.pricing-card__add-btn svg {
  transition: transform 0.3s ease;
}

.pricing-card__add-btn:hover {
  background: #f8f8f8;
  border-color: #bbb;
  color: var(--text-main);
}

.pricing-card__add-btn:hover svg {
  transform: rotate(90deg);
}

.pricing-card__add-btn--clicked {
  background: var(--accent-soft);
  border-color: var(--accent-strong);
  border-style: solid;
  color: var(--accent-strong);
  transform: scale(0.95);
}

.pricing-card__add-btn--clicked svg {
  transform: rotate(180deg);
}

/* CTA button */
.pricing-card__cta {
  width: 100%;
  padding: 1rem 1.5rem;
  background: var(--text-main);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  margin-top: auto;
}

.pricing-card__cta:hover {
  background: var(--accent-strong);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(180, 123, 104, 0.35);
}

/* Chrome step badge */
.chrome-step {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ========== Responsive ========== */
@media (max-width: 900px) {
  .offers-mock__body--builder-v2 {
    grid-template-columns: 1fr;
  }
  
  .builder-form-panel {
    border-right: none;
    border-bottom: 1px solid #eee;
    padding: 2rem;
  }
  
  .builder-preview-panel {
    padding: 2rem;
  }
  
  .builder-preview-panel__badge {
    position: static;
    transform: none;
    margin-bottom: 1.25rem;
  }
}


/* =============================================
   SIDE CAPTION VARIANT (3/4 + 1/4)
   ============================================= */
.offers-mock--side-caption {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 2.5rem;
  align-items: center;
}

.offers-mock--side-caption .offers-mock__caption {
  padding: 0;
}

.offers-mock--side-caption .offers-mock__caption h3 {
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
}

.offers-mock--side-caption .offers-mock__caption p {
  font-size: 1rem;
  line-height: 1.65;
}

/* =============================================
   MOCKUP 1.5: PRICING TIERS
   ============================================= */
.offers-mock__body--tiers {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 2rem;
  gap: 1.25rem;
  height: 470px;
}

.tiers-header__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.2rem;
}

.tiers-header__subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

/* Option selector */
.tiers-selector {
  display: flex;
  gap: 0.75rem;
}

.tiers-selector__btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 2px solid #e5e5e5;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tiers-selector__btn:hover {
  border-color: #d0d0d0;
}

.tiers-selector__btn--active {
  background: var(--accent-soft);
  border-color: var(--accent-strong);
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(180, 123, 104, 0.15);
}

.tiers-selector__bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 20px;
}

.tiers-selector__bars span {
  width: 8px;
  height: 16px;
  background: #d5d5d5;
  border-radius: 3px;
  transition: background 0.3s ease;
}

.tiers-selector__btn--active .tiers-selector__bars span {
  background: var(--accent-strong);
}

.tiers-selector__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.3s ease;
}

.tiers-selector__btn--active .tiers-selector__label {
  color: var(--accent-strong);
}

/* Cards container */
.tiers-cards {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: stretch;
  padding: 0.75rem 0;
}

/* Tier card */
.tier-card {
  flex: 0 0 160px;
  position: relative;
  display: none;
  opacity: 0;
  transform: translateY(15px) scale(0.95);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tier-card--visible {
  display: flex;
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Card glow */
.tier-card__glow {
  position: absolute;
  inset: -4px;
  background: linear-gradient(135deg, var(--accent-soft), var(--accent));
  border-radius: 18px;
  opacity: 0;
  z-index: -1;
  filter: blur(12px);
  transition: opacity 0.4s ease;
}

.tier-card__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 2px solid #e8e8e8;
  border-radius: 14px;
  padding: 1.25rem 1rem;
  text-align: center;
  box-shadow: 
    0 2px 8px rgba(0,0,0,0.04),
    0 4px 16px rgba(0,0,0,0.04);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tier-card:hover .tier-card__inner {
  transform: translateY(-4px);
  box-shadow: 
    0 4px 12px rgba(0,0,0,0.06),
    0 8px 24px rgba(0,0,0,0.06);
}

/* Popular badge */
.tier-card__badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  background: linear-gradient(135deg, var(--accent-strong) 0%, #9d6554 100%);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 12px;
  white-space: nowrap;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 10;
  box-shadow: 0 4px 12px rgba(180, 123, 104, 0.4);
}

.tier-card__badge svg {
  width: 10px;
  height: 10px;
}

.tier-card__badge--visible {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* Popular card styling */
.tier-card--popular {
  z-index: 5;
  transform: translateY(0) scale(1.05);
}

.tier-card--popular .tier-card__glow {
  opacity: 0.5;
}

.tier-card--popular .tier-card__inner {
  background: linear-gradient(180deg, #fffbf9 0%, #fff 100%);
  border-color: var(--accent-strong);
  box-shadow: 
    0 0 0 3px var(--accent-soft),
    0 8px 24px rgba(180, 123, 104, 0.18),
    0 16px 48px rgba(180, 123, 104, 0.1);
}

.tier-card--popular .tier-card__name {
  color: var(--accent-strong);
}

.tier-card--popular .tier-card__amount {
  color: var(--accent-strong);
}

.tier-card--popular .tier-card__feature svg {
  color: var(--accent-strong);
}

/* Card content */
.tier-card__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.6rem;
  transition: color 0.3s ease;
}

.tier-card__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 0.4rem;
}

.tier-card__currency {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
}

.tier-card__amount {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1;
  transition: color 0.3s ease;
}

.tier-card__dropdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  background: #f5f5f5;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

/* Features */
.tier-card__features {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1rem;
  flex: 1;
}

.tier-card__feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  background: #f9f9f9;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-main);
  text-align: left;
}

.tier-card__feature svg {
  width: 13px;
  height: 13px;
  color: #22c55e;
  flex-shrink: 0;
  transition: color 0.3s ease;
}

/* Popular checkbox */
.tier-card__popular-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  padding-top: 0.75rem;
  border-top: 1px solid #f0f0f0;
  margin-top: auto;
}

.tier-card__checkbox {
  width: 16px;
  height: 16px;
  border: 2px solid #d0d0d0;
  border-radius: 4px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}

.tier-card__checkbox--checked {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.tier-card__checkbox--checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Responsive */
/* Mockup 1.5 Responsive */
@media (max-width: 900px) {
  .offers-mock--side-caption {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .offers-mock--side-caption .offers-mock__caption h3 {
    font-size: 1.15rem;
  }
  
  .offers-mock--side-caption .offers-mock__caption p {
    font-size: 0.95rem;
  }
}

@media (max-width: 600px) {
  .offers-mock__body--tiers {
    padding: 1.25rem 1rem;
    gap: 1rem;
  }
  
  .tiers-header__title {
    font-size: 1rem;
  }
  
  .tiers-header__subtitle {
    font-size: 0.8rem;
  }
  
  /* Selector buttons */
  .tiers-selector {
    gap: 0.5rem;
  }
  
  .tiers-selector__btn {
    padding: 0.6rem 0.5rem;
    gap: 0.35rem;
  }
  
  .tiers-selector__bars {
    height: 16px;
  }
  
  .tiers-selector__bars span {
    width: 6px;
    height: 12px;
  }
  
  .tiers-selector__label {
    font-size: 0.65rem;
  }
  
  /* Cards */
  .tiers-cards {
    gap: 0.6rem;
    min-height: 220px;
    padding: 0.5rem 0;
  }
  
  .tier-card {
    flex: 0 0 110px;
  }
  
  .tier-card__inner {
    padding: 1rem 0.7rem;
    border-radius: 12px;
  }
  
  .tier-card__badge {
    padding: 0.2rem 0.5rem;
    font-size: 0.5rem;
    top: -8px;
  }
  
  .tier-card__name {
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
  }
  
  .tier-card__currency {
    font-size: 0.85rem;
  }
  
  .tier-card__amount {
    font-size: 1.75rem;
  }
  
  .tier-card__dropdown {
    padding: 0.3rem 0.5rem;
    font-size: 0.6rem;
    margin-bottom: 0.75rem;
  }
  
  .tier-card__features {
    gap: 0.3rem;
    margin-bottom: 0.75rem;
  }
  
  .tier-card__feature {
    padding: 0.35rem 0.45rem;
    gap: 0.35rem;
    font-size: 0.6rem;
  }
  
  .tier-card__feature svg {
    width: 10px;
    height: 10px;
  }
  
  .tier-card__popular-label {
    padding-top: 0.5rem;
    gap: 0.35rem;
    font-size: 0.55rem;
  }
  
  .tier-card__checkbox {
    width: 12px;
    height: 12px;
  }
  
  .tier-card__checkbox--checked::after {
    top: 1px;
    left: 3px;
    width: 3px;
    height: 6px;
  }
  
  /* Popular card scale */
  .tier-card--popular {
    transform: translateY(0) scale(1.03);
  }
}

@media (max-width: 400px) {
  .tier-card {
    flex: 0 0 95px;
  }
  
  .tier-card__amount {
    font-size: 1.5rem;
  }
  
  .tier-card__feature {
    font-size: 0.55rem;
    padding: 0.3rem 0.4rem;
  }
}


/* =============================================
   SIDE CAPTION VARIANT (WIDE ROW)
   ============================================= */
.offers-mock--side-caption {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 2rem;
  align-items: center;
}

.offers-mock--side-caption .offers-mock__caption {
  padding: 0;
}

.offers-mock--side-caption .offers-mock__caption h3 {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.offers-mock--side-caption .offers-mock__caption p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .offers-mock--side-caption {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .offers-mock--side-caption .offers-mock__screen {
    max-width: 420px;
    margin: 0 auto;
  }
  
  .offers-mock--side-caption .offers-mock__caption {
    text-align: center;
  }
  
  .offers-mock--side-caption .offers-mock__caption h3 {
    font-size: 1.15rem;
  }
  
  .offers-mock--side-caption .offers-mock__caption p {
    font-size: 0.95rem;
  }
}

@media (max-width: 600px) {
  .offers-mock--side-caption .offers-mock__screen {
    max-width: 100%;
  }
}


.pricing-feature--new {
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: linear-gradient(135deg, var(--accent-soft), rgba(200, 158, 138, 0.2));
  border: 2px solid var(--accent);
}

.pricing-feature--visible {
  opacity: 1;
  transform: translateX(0);
}

/* =============================================
   MOCKUP 2: BUNDLE BUILDER
   ============================================= */
.offers-mock__body--bundle {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  gap: 0.85rem;
  height: 490px;
}

.bundle-header__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
}

/* Product rows */
.bundle-products {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.bundle-product {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #fff;
  border: 1.5px solid #e8e8e8;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bundle-product__glow {
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--accent-soft), var(--accent));
  border-radius: 14px;
  opacity: 0;
  z-index: -1;
  filter: blur(8px);
  transition: opacity 0.4s ease;
}

.bundle-product--selected {
  border-color: var(--accent);
  background: #fffcfa;
  transform: translateX(4px);
  box-shadow: 0 2px 12px rgba(180, 123, 104, 0.1);
}

.bundle-product--selected .bundle-product__glow {
  opacity: 0.3;
}

/* Checkbox */
.bundle-product__check {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border: 1.5px solid #ddd;
  border-radius: 5px;
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bundle-product__check svg {
  width: 11px;
  height: 11px;
  color: #fff;
  opacity: 0;
  transform: scale(0) rotate(-45deg);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bundle-product--selected .bundle-product__check {
  background: #5a9a6e;
  border-color: #5a9a6e;
}

.bundle-product--selected .bundle-product__check svg {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* Product icon */
.bundle-product__icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f8f8;
  border-radius: 8px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.bundle-product__icon svg {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  transition: color 0.3s ease;
}

.bundle-product--selected .bundle-product__icon {
  background: var(--accent-soft);
}

.bundle-product--selected .bundle-product__icon svg {
  color: var(--accent-strong);
}

/* Product info */
.bundle-product__info {
  flex: 1;
  min-width: 0;
}

.bundle-product__name {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.1rem;
}

.bundle-product__meta {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.bundle-product__price {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  transition: all 0.3s ease;
}

.bundle-product--selected .bundle-product__price {
  color: var(--accent-strong);
}

/* Result bar */
.bundle-result {
  position: relative;
  margin-top: 5rem;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bundle-result--visible {
  opacity: 1;
  transform: translateY(0);
}

.bundle-result__glow {
  position: absolute;
  inset: -6px;
  background: linear-gradient(135deg, rgba(90, 154, 110, 0.2), rgba(90, 154, 110, 0.1));
  border-radius: 20px;
  opacity: 0;
  filter: blur(14px);
  transition: opacity 0.5s ease;
  z-index: -1;
}

.bundle-result--visible .bundle-result__glow {
  opacity: 1;
}

.bundle-result__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, #f9fcfa 0%, #f0f7f2 100%);
  border: 2px solid #c8dccf;
  border-radius: 14px;
}

.bundle-result__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5a9a6e;
  margin-bottom: 0.3rem;
}

.bundle-result__pricing {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
}

.bundle-result__original {
  font-size: 1.1rem;
  color: var(--text-muted);
  text-decoration: line-through;
}

.bundle-result__final {
  font-size: 2rem;
  font-weight: 800;
  color: #4a8a5e;
}

.bundle-result__save {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1rem;
  background: #5a9a6e;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #fff;
  transform: scale(0);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bundle-result__save svg {
  width: 16px;
  height: 16px;
}

.bundle-result__save--visible {
  transform: scale(1);
}

.bundle-result__save strong {
  font-weight: 700;
}

/* =============================================
   MOCKUP 3: PRODUCT LINKING
   ============================================= */
.offers-mock__body--linking {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  gap: 1rem;
  height: 490px;
}

.linking-header {
  margin-bottom: 0.25rem;
}

.linking-header__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.25rem;
}

.linking-header__subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

/* Standalone option */
.linking-option {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: #fafafa;
  border: 2px solid #e5e5e5;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.linking-option--active {
  background: var(--accent-soft);
  border-color: var(--accent-strong);
  box-shadow: 0 4px 16px rgba(180, 123, 104, 0.2);
  transform: scale(1.02);
}

.linking-option__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 10px;
  color: var(--accent-strong);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.linking-option--active .linking-option__icon {
  background: var(--accent-strong);
  color: #fff;
}

.linking-option__content {
  flex: 1;
  min-width: 0;
}

.linking-option__title {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.2rem;
}

.linking-option__desc {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.linking-option__check {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e5e5e5;
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.linking-option__check svg {
  width: 14px;
  height: 14px;
  color: #fff;
}

.linking-option--active .linking-option__check {
  opacity: 1;
  transform: scale(1);
  background: #16a34a;
}

/* Divider */
.linking-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
}

.linking-divider::before,
.linking-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e5e5e5;
}

.linking-divider span {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Studio options */
.linking-studios {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.linking-studio {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 2px solid #e5e5e5;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.linking-studio--active {
  background: var(--accent-soft);
  border-color: var(--accent-strong);
  box-shadow: 0 4px 16px rgba(180, 123, 104, 0.2);
  transform: scale(1.02) translateX(4px);
}

.linking-studio__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 8px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.linking-studio--active .linking-studio__icon {
  background: var(--accent-strong);
  color: #fff;
}

.linking-studio__content {
  flex: 1;
  min-width: 0;
}

.linking-studio__name {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
}

.linking-studio__badge {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.linking-studio__check {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e5e5e5;
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}

.linking-studio__check svg {
  width: 12px;
  height: 12px;
  color: #fff;
}

.linking-studio--active .linking-studio__check {
  opacity: 1;
  transform: scale(1);
  background: #16a34a;
}

/* Footer */
.linking-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

.linking-footer__cancel {
  padding: 0.6rem 1rem;
  background: transparent;
  border: none;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s ease;
}

.linking-footer__cancel:hover {
  color: var(--text-main);
}

.linking-footer__continue {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.25rem;
  background: #f5f5f5;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.2s ease;
}

.linking-footer__continue:hover {
  background: #eee;
}

.linking-footer__continue svg {
  transition: transform 0.2s ease;
}

.linking-footer__continue:hover svg {
  transform: translateX(3px);
}

/* =============================================
   MOCKUP 4: COUPON SYSTEM
   ============================================= */
.offers-mock__body--coupon {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  height: 420px;
}

.coupon-product {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #f8f8f8;
  border-radius: 12px;
}

.coupon-product__image {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--accent-soft), var(--accent));
  border-radius: 10px;
}

.coupon-product__info {
  flex: 1;
}

.coupon-product__name {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.15rem;
}

.coupon-product__original {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.coupon-input-row {
  display: flex;
  gap: 0.5rem;
}

.coupon-input {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0.9rem 1rem;
  background: #f8f8f8;
  border: 2px solid #e5e5e5;
  border-radius: 10px;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
}

.coupon-input__code {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: 0.08em;
}

.coupon-input__cursor {
  width: 2px;
  height: 18px;
  background: var(--accent-strong);
  margin-left: 2px;
  animation: cursor-blink 0.7s step-end infinite;
}

.coupon-apply {
  padding: 0.9rem 1.5rem;
  background: var(--text-main);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.coupon-apply--clicked {
  background: var(--accent-strong);
  transform: scale(0.95);
}

/* Breakdown */
.coupon-breakdown {
  background: #f8f8f8;
  border-radius: 12px;
  padding: 1rem 1.25rem;
}

.coupon-breakdown__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.coupon-breakdown__row--discount {
  color: #16a34a;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.coupon-breakdown__row--active {
  opacity: 1;
}

.coupon-discount-value {
  font-weight: 700;
  transition: transform 0.3s ease;
}

.coupon-discount--show {
  transform: scale(1.2);
  animation: discount-pop 0.4s ease;
}

@keyframes discount-pop {
  0% { transform: scale(0.5); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1.2); }
}

.coupon-breakdown__row--total {
  border-top: 1px solid #e5e5e5;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  font-weight: 600;
  color: var(--text-main);
}

.coupon-total-value {
  font-size: 1.15rem;
  font-weight: 800;
  transition: all 0.3s ease;
}

.coupon-total--highlight {
  color: var(--accent-strong);
  transform: scale(1.1);
}

/* Success message */
.coupon-success {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  background: #dcfce7;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #16a34a;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.coupon-success--show {
  opacity: 1;
  transform: translateY(0);
}

.coupon-success__icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #16a34a;
  border-radius: 50%;
}

.coupon-success__icon svg {
  width: 14px;
  height: 14px;
  color: #fff;
}


/* =============================================
   MOCKUP 5: LAUNCH COUNTDOWN - PREMIUM
   ============================================= */
.offers-mock__body--launch {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.75rem;
  gap: 1.25rem;
  background: linear-gradient(180deg, #fdfcfb 0%, #fff 100%);
  height: 420px;
}

/* Header */
.launch-header {
  text-align: center;
}

.launch-header__label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* Timer */
.launch-timer {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
}

.launch-timer__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.launch-timer__card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  min-width: 52px;
  text-align: center;
  box-shadow: 
    0 1px 2px rgba(0,0,0,0.04),
    0 4px 12px rgba(0,0,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.8);
  position: relative;
  overflow: hidden;
}

/* Subtle shine effect */
.launch-timer__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, transparent 100%);
  border-radius: 10px 10px 0 0;
}

.launch-timer__card--accent {
  background: linear-gradient(135deg, var(--accent-soft) 0%, #fff 100%);
  border-color: var(--accent);
}

.launch-timer__value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1;
}

.launch-timer__card--accent .launch-timer__value {
  color: var(--accent-strong);
}

.launch-timer__label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.launch-timer__sep {
  font-size: 1.25rem;
  font-weight: 700;
  color: #d0d0d0;
  margin-top: 0.6rem;
}

/* Stats */
.launch-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.launch-stat {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.launch-stat__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  flex-shrink: 0;
}

.launch-stat__icon svg {
  width: 18px;
  height: 18px;
}

.launch-stat__icon--sales {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%);
  color: #22c55e;
}

.launch-stat__icon--revenue {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.05) 100%);
  color: #3b82f6;
}

.launch-stat__content {
  flex: 1;
  min-width: 0;
}

.launch-stat__value {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.2;
  transition: all 0.3s ease;
}

.launch-stat__value--bump {
  transform: scale(1.1);
  color: #22c55e;
}

.launch-stat__label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.launch-stat__spark {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.launch-stat__spark svg {
  width: 18px;
  height: 18px;
  color: #22c55e;
}

.launch-stat__spark--visible {
  opacity: 1;
  animation: spark-pop 0.5s ease;
}

@keyframes spark-pop {
  0% { transform: translateY(-50%) scale(0); }
  60% { transform: translateY(-50%) scale(1.3); }
  100% { transform: translateY(-50%) scale(1); }
}

/* Progress */
.launch-progress {
  background: linear-gradient(135deg, #f9f9f9 0%, #fff 100%);
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 1rem 1.25rem;
}

.launch-progress__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.launch-progress__title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-main);
}

.launch-progress__title svg {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

.launch-progress__count {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}

.launch-progress__track {
  height: 10px;
  background: #eee;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.launch-progress__fill {
  height: 100%;
  width: 85%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-strong) 100%);
  border-radius: 10px;
  transition: width 0.6s ease;
  position: relative;
}

.launch-progress__fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 100%);
  border-radius: 10px 10px 0 0;
}

.launch-progress__glow {
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 0;
  width: 85%;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent));
  border-radius: 10px;
  filter: blur(6px);
  opacity: 0.5;
  z-index: -1;
}

.launch-progress__hint {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent-strong);
  text-align: center;
}

/* Live badge animation */
.chrome-badge--live {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #ef4444;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.chrome-badge__dot {
  width: 6px;
  height: 6px;
  background: #ef4444;
  border-radius: 50%;
  animation: live-pulse 1.5s ease infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

/* =============================================
   MOCKUP 6: OFFERS DASHBOARD
   ============================================= */
.offers-mock__body--dashboard {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 420px;
  padding: 2rem 2.5rem;
  overflow: hidden;
}

/* Dashboard Header */
.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.dashboard-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.dashboard-new-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 8px rgba(180, 123, 104, 0.2);
}

.dashboard-new-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(180, 123, 104, 0.3);
}

.dashboard-new-btn svg {
  flex-shrink: 0;
}

/* Stats Row */
.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.dashboard-stat-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(250, 248, 246, 0.8) 100%);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(200, 158, 138, 0.12);
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.5) inset,
    0 4px 12px rgba(42, 38, 35, 0.04),
    0 8px 24px rgba(42, 38, 35, 0.06);
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  animation: stat-card-pop-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.dashboard-stat-card[data-stat-card="1"] {
  animation-delay: 0.1s;
}

.dashboard-stat-card[data-stat-card="2"] {
  animation-delay: 0.3s;
}

.dashboard-stat-card[data-stat-card="3"] {
  animation-delay: 0.5s;
}

@keyframes stat-card-pop-in {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dashboard-stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(200, 158, 138, 0.08), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.dashboard-stat-card:hover::before {
  opacity: 1;
}

.dashboard-stat-card__icon {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent-soft), rgba(200, 158, 138, 0.25));
  border-radius: 12px;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0) rotate(-180deg);
  animation: icon-pop-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.dashboard-stat-card[data-stat-card="1"] .dashboard-stat-card__icon {
  animation-delay: 0.2s;
}

.dashboard-stat-card[data-stat-card="2"] .dashboard-stat-card__icon {
  animation-delay: 0.4s;
}

.dashboard-stat-card[data-stat-card="3"] .dashboard-stat-card__icon {
  animation-delay: 0.6s;
}

@keyframes icon-pop-in {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-180deg);
  }
  70% {
    transform: scale(1.1) rotate(10deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.dashboard-stat-card__icon svg {
  width: 24px;
  height: 24px;
  color: var(--accent-strong);
}

.dashboard-stat-card__content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dashboard-stat-card__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
}

.dashboard-stat-card__value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1;
}

.dashboard-stat-card__meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Offers Section */
.dashboard-offers-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.dashboard-section-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
  margin: 0;
}

.dashboard-offers-list {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.dashboard-offers-scroll {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-right: 0.5rem;
  animation: scroll-offers-seamless 20s linear infinite;
}

@keyframes scroll-offers-seamless {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-33.333%);
  }
}

/* Offer Row */
.dashboard-offer-row {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(248, 248, 248, 0.6);
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid transparent;
}

.dashboard-offer-row:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(200, 158, 138, 0.15);
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(42, 38, 35, 0.04);
}

.dashboard-offer-row--placeholder {
  opacity: 0.4;
}

.dashboard-offer-row__name {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
}

.dashboard-offer-row__dot {
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  border-radius: 50%;
  flex-shrink: 0;
}

.dashboard-offer-row__price {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
  opacity: 0.7;
}

.dashboard-offer-row__stats {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  justify-content: flex-end;
}

.dashboard-offer-stat {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
}

.dashboard-offer-stat svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.dashboard-offer-stat--revenue {
  color: var(--accent-strong);
  font-weight: 700;
}


/* =============================================
   OFFERS FEATURES BENTO GRID
   ============================================= */
.offers-features {
  padding: 6rem 2rem;
  background: #fff;
}

.offers-features__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.offers-features__header {
  text-align: center;
  margin-bottom: 3rem;
}

.offers-features__eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-strong);
  margin-bottom: 0.75rem;
}

.offers-features__title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  color: var(--text-main);
  margin: 0;
}

.offers-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.offers-feature-card {
  background: var(--bg);
  border-radius: 20px;
  padding: 1.75rem;
  border: 1px solid var(--border-subtle);
  transition: all 0.3s ease;
}

.offers-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.1);
}

.offers-feature-card--hero {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.offers-feature-card--fees {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
}

.offers-feature-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  margin-bottom: 1.25rem;
}

.offers-feature-icon--coral {
  background: rgba(200, 158, 138, 0.15);
  color: var(--accent-strong);
}

.offers-feature-icon--green {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.offers-feature-icon--purple {
  background: rgba(139, 92, 246, 0.12);
  color: #7c3aed;
}

.offers-feature-icon--blue {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
}

.offers-feature-icon--amber {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

.offers-feature-icon--teal {
  background: rgba(20, 184, 166, 0.12);
  color: #0d9488;
}

.offers-feature-card__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.5rem;
}

.offers-feature-card__text {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.6;
}

/* Hero card visual */
.offers-pricing-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.offers-pricing-tag {
  padding: 0.6rem 1.1rem;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  animation: float-tag 3s ease infinite;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.offers-pricing-tag--free {
  background: #f3f4f6;
  color: var(--text-muted);
  animation-delay: 0s;
}

.offers-pricing-tag--onetime {
  background: var(--accent-soft);
  color: var(--accent-strong);
  animation-delay: 0.5s;
}

.offers-pricing-tag--sub {
  background: rgba(139, 92, 246, 0.12);
  color: #7c3aed;
  animation-delay: 1s;
}

.offers-pricing-tag--plan {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
  animation-delay: 1.5s;
}

@keyframes float-tag {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Fee comparison */
.offers-fee-comparison {
  margin-top: auto;
  padding-top: 1.5rem;
  display: flex;
  gap: 1rem;
}

.fee-compare-item {
  flex: 1;
  padding: 1.25rem;
  border-radius: 12px;
  text-align: center;
}

.fee-compare-item--others {
  background: #f3f4f6;
}

.fee-compare-item--gadura {
  background: rgba(34, 197, 94, 0.12);
}

.fee-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.fee-value {
  font-size: 1.5rem;
  font-weight: 800;
}

.fee-compare-item--others .fee-value {
  color: var(--text-muted);
  text-decoration: line-through;
}

.fee-compare-item--gadura .fee-value {
  color: #16a34a;
}


/* =============================================
   CTA SECTION - DARK THEME
   ============================================= */
.offers-cta {
  position: relative;
  padding: 6rem 2rem;
  background: #1a1a1a;
  overflow: hidden;
}

/* Ambient glows */
.offers-cta__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}

.offers-cta__glow--1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(180, 123, 104, 0.25) 0%, transparent 70%);
  top: -20%;
  left: -10%;
}

.offers-cta__glow--2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(200, 158, 138, 0.2) 0%, transparent 70%);
  bottom: -30%;
  right: -5%;
}

.offers-cta__inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

/* Content */
.offers-cta__content {
  position: relative;
  z-index: 2;
}

.offers-cta__eyebrow {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 1rem;
}

.offers-cta__title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 1.25rem;
}

.offers-cta__text {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  margin: 0 0 2rem;
  max-width: 440px;
}

.offers-cta__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.offers-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.offers-cta__btn--primary {
  background: var(--accent-strong);
  color: #fff;
  box-shadow: 0 4px 20px rgba(180, 123, 104, 0.4);
}

.offers-cta__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(180, 123, 104, 0.5);
}

.offers-cta__btn--secondary {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
}

.offers-cta__btn--secondary:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
}

/* Visual side */
.offers-cta__visual {
  position: relative;
  height: 320px;
}

/* Floating elements */
.cta-float {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: #fff;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

/* Price card */
.cta-float--price {
  flex-direction: column;
  align-items: flex-start;
  padding: 1.25rem 1.5rem;
  top: 10%;
  left: 10%;
  animation: cta-float-1 6s ease-in-out infinite;
}

.cta-float__tag {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: 0.35rem;
}

.cta-float__amount {
  font-size: 2rem;
  font-weight: 800;
}

/* Discount badge */
.cta-float--discount {
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 800;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  top: 5%;
  right: 20%;
  animation: cta-float-2 5s ease-in-out infinite 0.5s;
}

/* Check badge */
.cta-float--check {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  bottom: 25%;
  left: 25%;
  animation: cta-float-3 5.5s ease-in-out infinite 0.8s;
}

.cta-float--check svg {
  width: 22px;
  height: 22px;
  color: #22c55e;
}

/* Star badge */
.cta-float--star {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  top: 35%;
  right: 5%;
  animation: cta-float-1 6s ease-in-out infinite 1s;
}

.cta-float--star svg {
  width: 20px;
  height: 20px;
  color: #ef4444;
}

/* Recurring badge */
.cta-float--recurring {
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  bottom: 10%;
  right: 15%;
  animation: cta-float-2 5.5s ease-in-out infinite 0.3s;
}

.cta-float--recurring svg {
  width: 18px;
  height: 18px;
  color: #3b82f6;
  animation: spin-slow 4s linear infinite;
}

.cta-float--recurring span {
  font-size: 0.85rem;
  font-weight: 600;
  color: #3b82f6;
}

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

/* Float animations */
@keyframes cta-float-1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(2deg); }
}

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

@keyframes cta-float-3 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(3deg); }
}

/* Responsive */
@media (max-width: 900px) {
  .offers-cta__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 3rem;
  }
  
  .offers-cta__title {
    font-size: 2rem;
  }
  
  .offers-cta__text {
    max-width: none;
  }
  
  .offers-cta__actions {
    justify-content: center;
  }
  
  .offers-cta__visual {
    height: 250px;
  }
}

@media (max-width: 600px) {
  .offers-cta {
    padding: 4rem 1.5rem;
  }
  
  .offers-cta__title {
    font-size: 1.75rem;
  }
  
  .offers-cta__visual {
    display: none;
  }
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  .offers-hero__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .offers-hero__scene {
    height: 420px;
  }

  .offers-showcase__grid {
    grid-template-columns: 1fr;
  }

  .offers-mock--wide {
    grid-column: span 1;
  }

  .offers-mock__body--builder-v2,
  .offers-mock__body--access {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .builder-sidebar {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  .builder-sidebar__section {
    flex: 1;
    min-width: 140px;
  }
  
  .builder-sidebar__radios {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .builder-sidebar__radio {
    flex: 1;
    justify-content: center;
    text-align: center;
  }

  .offers-features__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .offers-feature-card--hero {
    grid-column: span 2;
  }

  .offers-feature-card--fees {
    grid-row: span 1;
  }

  .offers-cta__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .offers-cta__visual {
    display: none;
  }
}

@media (max-width: 768px) {
  .offers-hero {
    padding: 5rem 1.5rem 4rem;
    min-height: auto;
  }

  .offers-hero__scene {
    height: 360px;
  }

  .offers-card-stack {
    width: 200px;
  }

  .offers-stack-card--back,
  .offers-stack-card--mid {
    display: none;
  }

  .offers-float-badge--discount,
  .offers-float-badge--price {
    display: none;
  }

  .offers-showcase {
    padding: 4rem 1.5rem;
  }

  .offers-mock__body {
    padding: 1.25rem;
    min-height: auto;
  }

  .builder-options {
    flex-direction: column;
  }

  .launch-timer__value {
    font-size: 1.5rem;
    padding: 0.4rem 0.6rem;
    min-width: 44px;
  }

  .offers-features__grid {
    grid-template-columns: 1fr;
  }

  .offers-feature-card--hero,
  .offers-feature-card--fees {
    grid-column: span 1;
    grid-row: span 1;
  }

  .offers-feature-card--hero {
    grid-template-columns: 1fr;
  }

  .offers-cta {
    padding: 4rem 1.5rem;
  }
}
























/* =============================================
   CHECKOUT PAGE STYLES
   ============================================= */

/* =============================================
   CHECKOUT HERO - REFINED
   ============================================= */
.checkout-hero {
  position: relative;
  padding: 7rem 2rem 2rem;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg) 0%, #fff 100%);
}

/* Ambient Orbs for 3D Depth */
.checkout-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.checkout-orb--1 {
  width: 180px;
  height: 180px;
  top: 5%;
  right: 8%;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,0.85), transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(200, 158, 138, 0.4), rgba(200, 158, 138, 0.1) 50%, transparent 70%);
  filter: blur(1px);
  animation: checkoutOrbSlideIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both, checkoutOrbDrift1 25s ease-in-out 1.2s infinite both;
}

.checkout-orb--2 {
  width: 140px;
  height: 140px;
  bottom: 10%;
  right: 20%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.7), transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(180, 123, 104, 0.35), transparent 60%);
  filter: blur(0.5px);
  animation: checkoutOrbSwirl 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both, checkoutOrbDrift2 20s ease-in-out 1.35s infinite both;
}

.checkout-orb--3 {
  width: 120px;
  height: 120px;
  top: 35%;
  left: 5%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.75), transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(200, 158, 138, 0.38), transparent 60%);
  animation: checkoutOrbPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both, checkoutOrbDrift3 18s ease-in-out 1.4s infinite both;
}

.checkout-orb--4 {
  width: 90px;
  height: 90px;
  top: 8%;
  left: 25%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(180, 123, 104, 0.3), transparent 60%);
  animation: checkoutOrbSwirl 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both, checkoutOrbDrift4 15s ease-in-out 1.15s infinite both;
}

.checkout-orb--5 {
  width: 100px;
  height: 100px;
  bottom: 25%;
  left: 15%;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,0.8), transparent 38%),
    radial-gradient(circle at 50% 50%, rgba(200, 158, 138, 0.32), transparent 55%);
  animation: checkoutOrbPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s both, checkoutOrbDrift5 22s ease-in-out 1.4s infinite both;
}

@keyframes checkoutOrbDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-25px, 20px) scale(1.08); }
  66% { transform: translate(15px, -15px) scale(0.95); }
}

@keyframes checkoutOrbDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -25px) scale(1.05); }
}

@keyframes checkoutOrbDrift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(18px, 15px) scale(1.03); }
}

@keyframes checkoutOrbDrift4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-12px, 18px) scale(1.1); }
}

@keyframes checkoutOrbDrift5 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40% { transform: translate(10px, -10px) scale(1.06); }
  70% { transform: translate(-8px, 8px) scale(0.98); }
}

.checkout-hero__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

/* Content */
.checkout-hero__content {
  position: relative;
  z-index: 2;
}

/* Checkout hero entrance animations */
@keyframes checkoutFadeSlideUp {
  from { opacity: 0; transform: translateY(25px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes checkoutSceneReveal {
  from { opacity: 0; transform: translateX(50px) scale(0.95); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

/* Dynamic orb entrances */
@keyframes checkoutOrbSwirl {
  0% { opacity: 0; transform: scale(0.3) rotate(-90deg); }
  70% { opacity: 1; transform: scale(1.08) rotate(5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes checkoutOrbSlideIn {
  0% { opacity: 0; transform: translateX(80px) scale(0.5); }
  70% { opacity: 1; transform: translateX(-5px) scale(1.02); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes checkoutOrbPop {
  0% { opacity: 0; transform: scale(0); }
  70% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

.checkout-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-strong);
  margin-bottom: 1.25rem;
  animation: checkoutFadeSlideUp 0.8s ease forwards;
  opacity: 0;
}

.checkout-hero__title {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-main);
  margin: 0 0 1.5rem;
  width: 650px;
  animation: checkoutFadeSlideUp 0.8s ease 0.1s forwards;
  opacity: 0;
}

.checkout-hero__subtitle {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 1.75rem;
  max-width: 440px;
  animation: checkoutFadeSlideUp 0.8s ease 0.2s forwards;
  opacity: 0;
}

.checkout-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2rem;
  animation: checkoutFadeSlideUp 0.8s ease 0.3s forwards;
  opacity: 0;
}

.checkout-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(200, 158, 138, 0.4);
  background: rgba(200, 158, 138, 0.1);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.checkout-hero__cta .btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 2rem;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0.6rem;
  border: none;
  cursor: pointer;
  box-shadow:
    0 4px 12px rgba(180, 123, 104, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: checkoutFadeSlideUp 0.8s ease 0.4s forwards;
  opacity: 0;
}

.checkout-hero__cta .btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 8px 20px rgba(180, 123, 104, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Scene */
.checkout-hero__scene {
  position: relative;
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 3rem;
  animation: checkoutSceneReveal 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
}



/* ========== AMBIENT ORBS ========== */
.checkout-ambient {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

.checkout-ambient--1 {
  width: 320px;
  height: 200px;
  top: 12%;
  right: 5%;
  background:
    linear-gradient(135deg, rgba(200, 158, 138, 0.15), rgba(255, 255, 255, 0.08)),
    linear-gradient(45deg, rgba(200, 158, 138, 0.1), transparent);
  border-radius: 42% 58% 70% 30% / 45% 55% 45% 55%;
  animation: ambientMorph1 16s ease-in-out infinite;
  filter: blur(40px);
}

.checkout-ambient--2 {
  width: 240px;
  height: 240px;
  bottom: 8%;
  left: 8%;
  background:
    linear-gradient(225deg, rgba(34, 197, 94, 0.1), rgba(255, 255, 255, 0.06)),
    linear-gradient(-45deg, rgba(34, 197, 94, 0.08), transparent);
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: ambientMorph2 20s ease-in-out infinite;
  filter: blur(45px);
}

@keyframes ambientMorph1 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    border-radius: 42% 58% 70% 30% / 45% 55% 45% 55%;
  }
  33% {
    transform: translate(-20px, 15px) rotate(5deg);
    border-radius: 58% 42% 45% 55% / 70% 30% 60% 40%;
  }
  66% {
    transform: translate(15px, -10px) rotate(-3deg);
    border-radius: 50% 50% 60% 40% / 55% 45% 50% 50%;
  }
}

@keyframes ambientMorph2 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  33% {
    transform: translate(18px, -12px) rotate(-4deg);
    border-radius: 45% 55% 60% 40% / 50% 50% 45% 55%;
  }
  66% {
    transform: translate(-12px, 18px) rotate(6deg);
    border-radius: 40% 60% 50% 50% / 65% 35% 55% 45%;
  }
}

@keyframes ambientMorph1 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    border-radius: 42% 58% 70% 30% / 45% 55% 45% 55%;
  }
  33% {
    transform: translate(-20px, 15px) rotate(5deg);
    border-radius: 58% 42% 45% 55% / 70% 30% 60% 40%;
  }
  66% {
    transform: translate(15px, -10px) rotate(-3deg);
    border-radius: 50% 50% 60% 40% / 55% 45% 50% 50%;
  }
}

@keyframes ambientMorph2 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  33% {
    transform: translate(18px, -12px) rotate(-4deg);
    border-radius: 45% 55% 60% 40% / 50% 50% 45% 55%;
  }
  66% {
    transform: translate(-12px, 18px) rotate(6deg);
    border-radius: 40% 60% 50% 50% / 65% 35% 55% 45%;
  }
}

/* ========== CARD STACK ========== */
.checkout-stack {
  position: relative;
  width: 260px;
  height: 340px;
  z-index: 1;
  transform-style: preserve-3d;
  animation: stackFloat 7s ease-in-out infinite;
}

@keyframes stackFloat {
  0%, 100% { transform: translateY(0) rotateX(2deg) rotateY(-2deg); }
  50% { transform: translateY(-10px) rotateX(0deg) rotateY(1deg); }
}

.checkout-stack:hover .checkout-stack__card--2 {
  transform: translate(12px, -12px) rotate(5deg);
}

.checkout-stack:hover .checkout-stack__card--3 {
  transform: translate(24px, -24px) rotate(9deg);
}

.checkout-stack__card {
  position: absolute;
  width: 100%;
  border-radius: 20px;
  background: #fff;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.checkout-stack__card--1 {
  height: 100%;
  z-index: 3;
}

.checkout-stack__card--2 {
  height: 94%;
  top: -8px;
  left: 8px;
  z-index: 2;
  background: linear-gradient(145deg, #faf8f6 0%, #f5f0eb 100%);
  box-shadow: 0 10px 30px rgba(120, 80, 60, 0.08);
  transform: translate(8px, -8px) rotate(3deg);
}

.checkout-stack__card--3 {
  height: 88%;
  top: -16px;
  left: 16px;
  z-index: 1;
  background: linear-gradient(145deg, #f5f0eb 0%, #efe8e1 100%);
  box-shadow: 0 8px 25px rgba(120, 80, 60, 0.06);
  transform: translate(16px, -16px) rotate(6deg);
}

/* ========== FRONT CARD ========== */
.checkout-card__glow {
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle at 40% 40%, rgba(200, 158, 138, 0.25) 0%, transparent 60%);
  border-radius: 50%;
  z-index: -1;
  filter: blur(40px);
}

.checkout-card__inner {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 20px;
  padding: 1.4rem;
  position: relative;
  box-shadow:
    0 4px 6px rgba(0,0,0,0.02),
    0 10px 20px rgba(0,0,0,0.04),
    0 20px 40px rgba(120, 80, 60, 0.08),
    0 40px 60px rgba(120, 80, 60, 0.06),
    inset 0 1px 1px rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.8);
}

.checkout-card__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: radial-gradient(circle at 10% 0%, rgba(255,255,255,0.8), transparent 40%);
  pointer-events: none;
}

/* Card content */
.cc-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.cc-product {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: 1;
}

.cc-thumb {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent) 100%);
  border-radius: 10px;
  flex-shrink: 0;
}

.cc-info {
  min-width: 0;
}

.cc-name {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.1rem;
}

.cc-creator {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.cc-price {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
}

.cc-divider {
  height: 1px;
  background: #f0f0f0;
  margin-bottom: 1rem;
}

.cc-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.cc-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cc-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
}

.cc-input {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.8rem;
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  font-size: 0.8rem;
  color: var(--text-main);
}

.cc-input svg {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

.cc-btn {
  width: 100%;
  padding: 0.75rem;
  background: var(--text-main);
  border: none;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
}

.cc-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-muted);
}

.cc-trust svg {
  width: 12px;
  height: 12px;
}

/* ========== FLOATING BADGES ========== */
.checkout-badge {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  cursor: pointer;
  z-index: 5;
}

.checkout-badge:hover {
  transform: scale(1.12) !important;
}

.checkout-badge svg {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
}

/* Check - Scattered placement */
.checkout-badge--check {
  width: 44px;
  height: 44px;
  top: 10%;
  left: 5%;
  background: linear-gradient(145deg, #22c55e 0%, #16a34a 100%);
  border-radius: 38% 62% 55% 45% / 48% 58% 42% 52%;
  box-shadow:
    0 8px 24px rgba(22, 163, 74, 0.4),
    inset 0 1px 2px rgba(255,255,255,0.4);
  animation: badgeOrbit1 25s linear infinite, badgeAbstract1 9s ease-in-out infinite;
}

.checkout-badge--check svg {
  width: 18px;
  height: 18px;
  color: #fff;
  stroke-width: 3;
}

/* Star - Scattered placement */
.checkout-badge--star {
  width: 38px;
  height: 38px;
  bottom: 6%;
  left: 12%;
  background: linear-gradient(145deg, #f59e0b 0%, #d97706 100%);
  border-radius: 45% 55% 60% 40% / 55% 45% 55% 45%;
  box-shadow:
    0 6px 20px rgba(217, 119, 6, 0.4),
    inset 0 1px 2px rgba(255,255,255,0.4);
  animation: badgeOrbit2 25s linear infinite, badgeAbstract2 7s ease-in-out infinite;
}

.checkout-badge--star svg {
  width: 16px;
  height: 16px;
  color: #fff;
}

/* Bolt - Scattered placement */
.checkout-badge--bolt {
  width: 40px;
  height: 40px;
  top: 10%;
  right: 30%;
  background: linear-gradient(145deg, #3b82f6 0%, #2563eb 100%);
  border-radius: 52% 48% 45% 55% / 60% 40% 50% 50%;
  box-shadow:
    0 7px 22px rgba(37, 99, 235, 0.4),
    inset 0 1px 2px rgba(255,255,255,0.4);
  animation: badgeOrbit3 25s linear infinite, badgeAbstract3 8s ease-in-out infinite;
}

.checkout-badge--bolt svg {
  width: 16px;
  height: 16px;
  color: #fff;
}

/* Shield - Scattered placement */
.checkout-badge--shield {
  width: 42px;
  height: 42px;
  bottom: 32%;
  right: 3%;
  background: linear-gradient(145deg, var(--accent) 0%, var(--accent-strong) 100%);
  border-radius: 48% 52% 58% 42% / 52% 48% 55% 45%;
  box-shadow:
    0 7px 20px rgba(180, 123, 104, 0.35),
    inset 0 1px 2px rgba(255,255,255,0.4);
  animation: badgeOrbit4 25s linear infinite, badgeAbstract4 10s ease-in-out infinite;
}

.checkout-badge--shield svg {
  width: 18px;
  height: 18px;
  color: #fff;
}

/* 0% Tag - Scattered placement */
.checkout-badge--tag {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  top: 3%;
  right: 5%;
  background: #fff;
  box-shadow: 0 5px 18px rgba(120, 80, 60, 0.15);
  animation: badgeOrbit5 25s linear infinite, badgeAbstract5 7.5s ease-in-out infinite;
}

.checkout-badge--tag span {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--accent-strong);
}

/* Refresh - Scattered placement */
.checkout-badge--refresh {
  width: 38px;
  height: 38px;
  bottom: 6%;
  right: 35%;
  background: #fff;
  border-radius: 55% 45% 48% 52% / 50% 50% 48% 52%;
  box-shadow:
    0 5px 18px rgba(120, 80, 60, 0.12),
    0 10px 28px rgba(120, 80, 60, 0.08),
    inset 0 1px 2px rgba(255,255,255,0.9);
  animation: badgeOrbit6 25s linear infinite, badgeAbstract6 9.5s ease-in-out infinite;
}

.checkout-badge--refresh svg {
  width: 16px;
  height: 16px;
  color: var(--accent-strong);
}

/* Globe - Scattered placement */
.checkout-badge--globe {
  width: 36px;
  height: 36px;
  bottom: 0%;
  left: 8%;
  background: #fff;
  border-radius: 50% 50% 55% 45% / 48% 52% 50% 50%;
  box-shadow:
    0 5px 18px rgba(120, 80, 60, 0.12),
    0 10px 28px rgba(120, 80, 60, 0.08),
    inset 0 1px 2px rgba(255,255,255,0.9);
  animation: badgeOrbit7 25s linear infinite, badgeAbstract7 8.5s ease-in-out infinite;
}

.checkout-badge--globe svg {
  width: 20px;
  height: 20px;
  color: var(--accent-strong);
}

/* ========== ANIMATIONS ========== */
@keyframes badgeAbstract1 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    border-radius: 38% 62% 55% 45% / 48% 58% 42% 52%;
  }
  33% {
    transform: translate(-8px, 12px) rotate(8deg);
    border-radius: 55% 45% 60% 40% / 50% 50% 48% 52%;
  }
  66% {
    transform: translate(10px, -6px) rotate(-5deg);
    border-radius: 48% 52% 45% 55% / 58% 42% 55% 45%;
  }
}

@keyframes badgeAbstract2 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    border-radius: 45% 55% 60% 40% / 55% 45% 55% 45%;
  }
  33% {
    transform: translate(12px, -10px) rotate(-7deg);
    border-radius: 60% 40% 50% 50% / 48% 52% 50% 50%;
  }
  66% {
    transform: translate(-6px, 8px) rotate(6deg);
    border-radius: 52% 48% 55% 45% / 60% 40% 52% 48%;
  }
}

@keyframes badgeAbstract3 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    border-radius: 52% 48% 45% 55% / 60% 40% 50% 50%;
  }
  33% {
    transform: translate(-10px, -8px) rotate(9deg);
    border-radius: 45% 55% 58% 42% / 52% 48% 55% 45%;
  }
  66% {
    transform: translate(8px, 12px) rotate(-4deg);
    border-radius: 50% 50% 48% 52% / 55% 45% 50% 50%;
  }
}

@keyframes badgeAbstract4 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    border-radius: 48% 52% 58% 42% / 52% 48% 55% 45%;
  }
  33% {
    transform: translate(14px, 10px) rotate(-6deg);
    border-radius: 58% 42% 45% 55% / 50% 50% 48% 52%;
  }
  66% {
    transform: translate(-8px, -12px) rotate(7deg);
    border-radius: 50% 50% 52% 48% / 58% 42% 50% 50%;
  }
}

@keyframes badgeAbstract5 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    border-radius: 45% 55% 50% 50% / 52% 48% 55% 45%;
  }
  33% {
    transform: translate(-12px, 8px) rotate(5deg);
    border-radius: 55% 45% 58% 42% / 48% 52% 50% 50%;
  }
  66% {
    transform: translate(10px, -10px) rotate(-8deg);
    border-radius: 48% 52% 50% 50% / 55% 45% 52% 48%;
  }
}

@keyframes badgeAbstract6 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    border-radius: 55% 45% 48% 52% / 50% 50% 48% 52%;
  }
  33% {
    transform: translate(10px, 12px) rotate(-9deg);
    border-radius: 48% 52% 55% 45% / 58% 42% 50% 50%;
  }
  66% {
    transform: translate(-14px, -6px) rotate(6deg);
    border-radius: 50% 50% 45% 55% / 52% 48% 55% 45%;
  }
}

@keyframes badgeAbstract7 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    border-radius: 50% 50% 55% 45% / 48% 52% 50% 50%;
  }
  33% {
    transform: translate(-10px, -12px) rotate(7deg);
    border-radius: 58% 42% 48% 52% / 55% 45% 52% 48%;
  }
  66% {
    transform: translate(12px, 8px) rotate(-5deg);
    border-radius: 45% 55% 50% 50% / 50% 50% 48% 52%;
  }
}

/* Orbital rotation animations */
@keyframes badgeOrbit1 {
  0% { transform: rotate(0deg) translateX(180px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(180px) rotate(-360deg); }
}

@keyframes badgeOrbit2 {
  0% { transform: rotate(51deg) translateX(180px) rotate(-51deg); }
  100% { transform: rotate(411deg) translateX(180px) rotate(-411deg); }
}

@keyframes badgeOrbit3 {
  0% { transform: rotate(103deg) translateX(180px) rotate(-103deg); }
  100% { transform: rotate(463deg) translateX(180px) rotate(-463deg); }
}

@keyframes badgeOrbit4 {
  0% { transform: rotate(154deg) translateX(180px) rotate(-154deg); }
  100% { transform: rotate(514deg) translateX(180px) rotate(-514deg); }
}

@keyframes badgeOrbit5 {
  0% { transform: rotate(206deg) translateX(180px) rotate(-206deg); }
  100% { transform: rotate(566deg) translateX(180px) rotate(-566deg); }
}

@keyframes badgeOrbit6 {
  0% { transform: rotate(257deg) translateX(180px) rotate(-257deg); }
  100% { transform: rotate(617deg) translateX(180px) rotate(-617deg); }
}

@keyframes badgeOrbit7 {
  0% { transform: rotate(309deg) translateX(180px) rotate(-309deg); }
  100% { transform: rotate(669deg) translateX(180px) rotate(-669deg); }
}


/* =============================================
   CHECKOUT MOCKUPS SECTION
   ============================================= */
.checkout-mockups {
  padding: 2rem 2rem 5rem;
  background: #fff;
}

.checkout-mockups__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6rem;
}

/* Mock row layout */
.checkout-mock {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 4rem;
  align-items: center;
}

.checkout-mock--left .checkout-mock__visual {
  order: 1;
}

.checkout-mock--left .checkout-mock__content {
  order: 2;
}

.checkout-mock--right {
  grid-template-columns: 1fr 1.5fr;
}

.checkout-mock--right .checkout-mock__visual {
  order: 2;
}

.checkout-mock--right .checkout-mock__content {
  order: 1;
}

/* Content side */
.checkout-mock__title {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 1rem;
  line-height: 1.2;
}

.checkout-mock__text {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0 0 1.5rem;
}

.checkout-mock__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.checkout-mock__list li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-main);
}

.checkout-mock__list svg {
  width: 18px;
  height: 18px;
  color: #22c55e;
  flex-shrink: 0;
}

/* Visual / Screen */
.checkout-mock__visual {
  position: relative;
}

.checkout-mock__screen {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1.25rem;
  padding: 1.5rem;
  background: var(--bg);
  border-radius: 20px;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.06),
    0 24px 48px rgba(0,0,0,0.06);
}

/* =============================================
   BRAND MOCK - SETTINGS PANEL
   ============================================= */
.brand-mock__panel {
  background: #fff;
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.brand-mock__tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.brand-mock__tab {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.brand-mock__tab svg {
  width: 14px;
  height: 14px;
}

.brand-mock__tab--active {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.brand-mock__field {
  margin-bottom: 1.25rem;
}

.brand-mock__field:last-child {
  margin-bottom: 0;
}

.brand-mock__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-strong);
  margin-bottom: 0.6rem;
}

/* Upload area */
.brand-mock__upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem;
  border: 2px dashed #ddd;
  border-radius: 12px;
  background: #fafafa;
  transition: all 0.3s ease;
}

.brand-mock__upload svg {
  width: 24px;
  height: 24px;
  color: #bbb;
}

.brand-mock__upload span {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Color picker row */
.brand-mock__color-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem;
  background: #fafafa;
  border-radius: 12px;
  border: 1px solid #eee;
}

.brand-mock__color-swatch {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #C89E8A;
  box-shadow: 
    0 4px 12px rgba(200, 158, 138, 0.4),
    inset 0 2px 4px rgba(255,255,255,0.3);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: swatch-pulse 1.2s ease-in-out infinite;
}

@keyframes swatch-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.brand-mock__color-info {
  flex: 1;
}

.brand-mock__color-title {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.15rem;
}

.brand-mock__color-desc {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.brand-mock__color-hex {
  padding: 0.4rem 0.65rem;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: monospace;
  color: var(--text-main);
  transition: all 0.3s ease;
}

/* Brand name input */
.brand-mock__input-wrap {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  background: #fff;
  border: 2px solid #e5e5e5;
  border-radius: 10px;
  margin-bottom: 0.85rem;
  transition: border-color 0.3s ease;
}

.brand-mock__input-wrap:focus-within {
  border-color: var(--accent);
}

.brand-mock__input {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-main);
  white-space: nowrap;
}

.brand-mock__cursor {
  width: 2px;
  height: 18px;
  background: var(--accent-strong);
  margin-left: 1px;
  flex-shrink: 0;
  animation: cursor-blink 0.5s step-end infinite;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Toggle */
.brand-mock__toggle-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.brand-mock__toggle {
  cursor: pointer;
}

.brand-mock__toggle-track {
  display: flex;
  align-items: center;
  width: 40px;
  height: 22px;
  padding: 2px;
  background: #ddd;
  border-radius: 20px;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.brand-mock__toggle--active .brand-mock__toggle-track {
  background: #22c55e;
}

.brand-mock__toggle-thumb {
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.brand-mock__toggle--active .brand-mock__toggle-thumb {
  transform: translateX(18px);
}

.brand-mock__toggle-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* =============================================
   BRAND MOCK - LIVE PREVIEW
   ============================================= */
.brand-mock__preview {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand-mock__preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  background: #f5f5f5;
  border-radius: 12px 12px 0 0;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.brand-mock__preview-header svg {
  width: 16px;
  height: 16px;
  color: #bbb;
}

.brand-mock__preview-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1.25rem;
  background: #fff;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  text-align: center;
  min-height: 420px;
}

.brand-mock__preview-brand {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.75rem;
  min-height: 1.2em;
  transition: opacity 0.3s ease;
}

.brand-mock__preview-brand--hidden {
  opacity: 0;
}

.brand-mock__preview-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 0.35rem;
}

.brand-mock__preview-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0 0 1rem;
}

.brand-mock__preview-price {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.brand-mock__preview-amount {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-main);
}

.brand-mock__preview-period {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.brand-mock__preview-btn {
  width: 100%;
  padding: 0.85rem 1.25rem;
  background: #C89E8A;
  border: none;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  margin-bottom: 0.85rem;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 16px rgba(200, 158, 138, 0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-mock__preview-btn:hover {
  transform: translateY(-2px) scale(1.02);
}

/* Button color change animation */
.brand-mock__preview-btn--pop {
  animation: btn-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes btn-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Trust mockup button override - blue */
[data-trust-preview] .brand-mock__preview-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
}

.brand-mock__preview-trust {
  display: flex;
  gap: 0.85rem;
  margin-bottom: 0.75rem;
}

.brand-mock__preview-trust span {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  color: var(--text-muted);
}

.brand-mock__preview-trust svg {
  width: 12px;
  height: 12px;
}

.brand-mock__preview-guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.6rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #16a34a;
  margin-bottom: 0.85rem;
  transition: all 0.3s ease;
}

.brand-mock__preview-guarantee svg {
  width: 14px;
  height: 14px;
}

/* Guarantee border matches accent */
.brand-mock__preview-guarantee--accent {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.brand-mock__preview-powered {
  font-size: 0.65rem;
  color: #bbb;
}

.brand-mock__preview-powered strong {
  color: var(--text-muted);
}

/* Responsive */
@media (max-width: 900px) {
  .checkout-mock {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  
  .checkout-mock--left .checkout-mock__content,
  .checkout-mock--right .checkout-mock__content {
    order: -1;
  }

  .checkout-mock--left .checkout-mock__visual,
  .checkout-mock--right .checkout-mock__visual {
    order: 1;
  }
  
  .checkout-mock__title {
    font-size: 1.85rem;
  }
  
  .checkout-mock__screen {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }
}


/* Better shadows on main screen */
.checkout-mock__screen {
  background: linear-gradient(145deg, #fafafa 0%, #fff 100%);
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 
    0 0 0 1px rgba(0,0,0,0.02),
    0 4px 12px rgba(0,0,0,0.04),
    0 20px 40px rgba(0,0,0,0.06);
}

/* Tabs - cleaner pill style */
.brand-mock__tabs {
  padding: 0.3rem;
  background: #f3f3f3;
  border-radius: 10px;
  border-bottom: none;
}

.brand-mock__tab {
  border-radius: 7px;
  transition: all 0.25s ease;
}

.brand-mock__tab--active {
  background: #fff;
  color: var(--accent-strong);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* Color swatch - add shine */
.brand-mock__color-swatch {
  position: relative;
  overflow: hidden;
}

.brand-mock__color-swatch::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: swatch-shine 2.5s ease-in-out infinite;
}

@keyframes swatch-shine {
  0%, 100% { left: -100%; }
  50% { left: 150%; }
}

/* Hex display - monospace */
.brand-mock__color-hex {
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Input wrap - focus glow */
.brand-mock__input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Toggle track - gradient when active */
.brand-mock__toggle--active .brand-mock__toggle-track {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.25);
}

/* Preview header - live dot pulses */
.brand-mock__preview-header svg {
  color: #22c55e;
  animation: live-pulse 2s ease infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.9); }
}

/* Preview brand - pill style */
.brand-mock__preview-brand {
  padding: 0.3rem 0.7rem;
  background: #f5f5f5;
  border-radius: 5px;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Button - shine on color change */
.brand-mock__preview-btn {
  position: relative;
  overflow: hidden;
}

.brand-mock__preview-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
}

.brand-mock__preview-btn--pop::after {
  animation: btn-shine 0.6s ease;
}

@keyframes btn-shine {
  0% { left: -100%; }
  100% { left: 150%; }
}

/* Guarantee - slightly richer */
.brand-mock__preview-guarantee {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-color: #86efac;
}

/* =============================================
   CONTENT MOCK - SETTINGS PANEL
   ============================================= */
.content-mock__panel {
  background: #fff;
  border-radius: 16px;
  padding: 0.65rem 0.85rem;
  padding-bottom: -0.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.content-mock__notice {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
  border: 1px solid #fde047;
  border-radius: 10px;
  margin-bottom: 3rem;
}

.content-mock__notice svg {
  width: 14px;
  height: 14px;
  color: #ca8a04;
  flex-shrink: 0;
  margin-top: 1px;
}

.content-mock__notice span {
  font-size: 0.65rem;
  font-weight: 500;
  color: #854d0e;
  line-height: 1.3;
}

.content-mock__field {
  margin-bottom: 1.5rem;
}

.content-mock__field:first-child {
  margin-top: 3rem;
}

.content-mock__field:last-child {
  margin-bottom: 0;
}

.content-mock__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-strong);
  margin-bottom: 0.3rem;
}

.content-mock__tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 3rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
   padding: 0.3rem;
  background: #f3f3f3;
  border-radius: 10px;
  border-bottom: none;
}


.content-mock__tab {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.content-mock__tab svg {
  width: 14px;
  height: 14px;
}

.content-mock__tab--active {
  background: #fff;
  color: var(--accent-strong);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.content-mock__input {
  padding: 0.55rem 0.75rem;
  background: #fff;
  border: 1.5px solid #e5e5e5;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-main);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  min-height: 20px;
  line-height: 1.3;
}

/* Maintain height when empty */
.content-mock__input:empty::before {
  content: '\200b';
  display: inline-block;
}

.content-mock__input--active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Highlight flash when content changes */
.content-mock__input--flash {
  animation: input-flash 0.5s ease;
}

@keyframes input-flash {
  0% { background: #fff; }
  30% { background: var(--accent-soft); }
  100% { background: #fff; }
}

.content-mock__textarea {
  padding: 0.55rem 0.75rem;
  background: #fff;
  border: 1.5px solid #e5e5e5;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-main);
  line-height: 1.3;
  min-height: 40px;
  transition: all 0.3s ease;
}

/* Maintain height when empty */
.content-mock__textarea:empty::before {
  content: '\200b';
  display: inline-block;
}

.content-mock__textarea--active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.content-mock__textarea--flash {
  animation: input-flash 0.5s ease;
}

/* Toggle in label */
.content-mock__toggle {
  cursor: pointer;
}

.content-mock__toggle-track {
  display: flex;
  align-items: center;
  width: 36px;
  height: 20px;
  padding: 2px;
  background: #ddd;
  border-radius: 20px;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.content-mock__toggle--active .content-mock__toggle-track {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.25);
}

.content-mock__toggle-thumb {
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.content-mock__toggle--active .content-mock__toggle-thumb {
  transform: translateX(16px);
}

/* Preview text highlight animation */
.preview-text--changing {
  animation: text-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes text-pop {
  0% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}




/* =============================================
   TRUST MOCK - SETTINGS PANEL
   ============================================= */
.trust-mock__panel {
  background: #fff;
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* Tip Banner */
.trust-mock__tip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: #fafafa;
  border-radius: 8px;
  margin-bottom: 1.25rem;
}

.trust-mock__tip svg {
  width: 14px;
  height: 14px;
  color: #C89E8A;
  flex-shrink: 0;
}

.trust-mock__tip span {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Section */
.trust-mock__section {
  margin-bottom: 0;
}

.trust-mock__section-header {
  margin-bottom: 1rem;
}

.trust-mock__section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.25rem;
}

.trust-mock__section-desc {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin: 0;
}

/* Row Items */
.trust-mock__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.trust-mock__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.trust-mock__row--disabled {
  opacity: 0.5;
}

.trust-mock__row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #f5f5f5;
  border-radius: 8px;
  flex-shrink: 0;
}

.trust-mock__row-icon svg {
  width: 16px;
  height: 16px;
  color: #666;
}

.trust-mock__row-icon--accent {
  background: linear-gradient(135deg, #fef3ee 0%, #fde8dc 100%);
}

.trust-mock__row-icon--accent svg {
  color: #C89E8A;
}

.trust-mock__row-content {
  flex: 1;
  min-width: 0;
}

.trust-mock__row-title {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.15rem;
}

.trust-mock__row-desc {
  display: block;
  font-size: 0.65rem;
  color: var(--text-muted);
}

/* Toggle */
.trust-mock__toggle {
  cursor: pointer;
  flex-shrink: 0;
}

.trust-mock__toggle-track {
  display: flex;
  align-items: center;
  width: 40px;
  height: 22px;
  padding: 2px;
  background: #e0e0e0;
  border-radius: 22px;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.trust-mock__toggle--active .trust-mock__toggle-track {
  background: linear-gradient(135deg, #C89E8A 0%, #b8876f 100%);
  box-shadow: 0 2px 8px rgba(200, 158, 138, 0.4);
}

.trust-mock__toggle-thumb {
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.trust-mock__toggle--active .trust-mock__toggle-thumb {
  transform: translateX(18px);
}

/* Real-time indicator */
.trust-mock__realtime {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.65rem;
  font-weight: 500;
  color: #22c55e;
}

.trust-mock__realtime-dot {
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

/* =============================================
   TRUST PREVIEW ELEMENTS
   ============================================= */
.trust-preview__badges {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.trust-preview__badges span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.65rem;
  color: var(--text-muted);
  transition: all 0.4s ease;
}

.trust-preview__badges span.trust-badge--hidden {
  opacity: 0;
  transform: scale(0.8);
}

.trust-preview__badges svg {
  width: 12px;
  height: 12px;
}

.trust-preview__powered {
  text-align: center;
  font-size: 0.65rem;
  color: #bbb;
  padding-top: 0.75rem;
  margin-top: 0.5rem;
  border-top: 1px solid #f0f0f0;
  transition: all 0.4s ease;
}

.trust-preview__powered strong {
  color: #C89E8A;
  font-weight: 600;
}

.trust-preview__powered.trust-powered--hidden {
  opacity: 0;
  transform: translateY(5px);
}

/* Badge/element hide animation */
.trust-element--hiding {
  animation: element-hide 0.4s ease forwards;
}

.trust-element--showing {
  animation: element-show 0.4s ease forwards;
}

@keyframes element-hide {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.8); }
}

@keyframes element-show {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

/* Row highlight when toggling */
.trust-mock__row--flash {
  background: rgba(200, 158, 138, 0.1);
}


/* =============================================
   CHECKOUT FLOW / SHOWCASE
   ============================================= */
.checkout-showcase {
  padding: 5rem 2rem;
  background: var(--bg);
}

.checkout-showcase__header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 4rem;
}

.checkout-showcase__title {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 1rem;
}

.checkout-showcase__subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.6;
}

.checkout-showcase__flow {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.checkout-step {
  flex: 1;
  max-width: 340px;
  text-align: center;
}

.checkout-step__number {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-strong);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 50%;
  margin: 0 auto 1.25rem;
}

.checkout-step__mock {
  margin-bottom: 1.5rem;
}

.checkout-step__screen {
  background: #fff;
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 
    0 1px 3px rgba(0,0,0,0.04),
    0 4px 12px rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.04);
  border: 1px solid #eee;
}

.checkout-step__content h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.5rem;
}

.checkout-step__content p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Connector arrow */
.checkout-step__connector {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 140px;
}

.checkout-step__connector svg {
  width: 24px;
  height: 24px;
  color: #d0d0d0;
}

/* Step 1: Product Mock */
.step-mock__product {
  display: flex;
  gap: 1rem;
}

.step-mock__image {
  width: 100px;
  height: 75px;
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent) 100%);
  border-radius: 10px;
  flex-shrink: 0;
}

.step-mock__details {
  flex: 1;
  text-align: left;
}

.step-mock__tag {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-strong);
  background: var(--accent-soft);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  margin-bottom: 0.35rem;
}

.step-mock__title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.25rem;
}

.step-mock__desc {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
  line-height: 1.4;
}

.step-mock__meta {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.step-mock__meta span {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  color: var(--text-muted);
}

.step-mock__meta svg {
  width: 12px;
  height: 12px;
}

.step-mock__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.step-mock__price {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
}

.step-mock__btn {
  padding: 0.6rem 1rem;
  background: var(--accent-strong);
  border: none;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(200, 158, 138, 0.35);
}

/* Shake attention */
.step-mock__btn.btn--shake {
  animation: btn-shake 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes btn-shake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-6px) rotate(-3deg); }
  20% { transform: translateX(6px) rotate(3deg); }
  30% { transform: translateX(-5px) rotate(-2deg); }
  40% { transform: translateX(5px) rotate(2deg); }
  50% { transform: translateX(-3px); }
  60% { transform: translateX(3px); }
}

/* Heartbeat */
.step-mock__btn.btn--heartbeat {
  animation: btn-heartbeat 0.8s ease-in-out;
}

@keyframes btn-heartbeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.2); }
  30% { transform: scale(1); }
  45% { transform: scale(1.15); }
  60% { transform: scale(1); }
}

/* Step 2: Payment Mock */
.step-mock__payment {
  text-align: left;
}

.step-mock__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #eee;
  margin-bottom: 1rem;
}

.step-mock__summary-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
}

.step-mock__summary-price {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
}

.step-mock__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.step-mock__field label {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.step-mock__input {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.75rem;
  background: #f8f8f8;
  border: 1px solid #eee;
  border-radius: 8px;
  font-size: 0.8rem;
  color: var(--text-main);
}

.step-mock__input--card svg {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

.step-mock__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.step-mock__input--small {
  padding: 0.6rem 0.75rem;
}

.step-mock__pay-btn {
  width: 100%;
  padding: 0.7rem;
  background: var(--text-main);
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.step-mock__secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
  font-size: 0.65rem;
  color: var(--text-muted);
}

.step-mock__secure svg {
  width: 12px;
  height: 12px;
}

/* Typing animation */
.typing-cursor {
  width: 2px;
  height: 14px;
  background: var(--accent-strong);
  animation: cursor-blink 0.6s step-end infinite;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Step 3: Success Mock */
.checkout-step__screen--success {
  background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%);
  border-color: #bbf7d0;
}

.step-mock__success {
  text-align: center;
  padding: 1rem 0;
}

.success-check {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #22c55e;
  border-radius: 50%;
  margin: 0 auto 1rem;
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.success--animate .success-check {
  transform: scale(1);
}

.success-check svg {
  width: 28px;
  height: 28px;
  color: #fff;
}

.success-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.35rem;
  position: relative;
  display: inline-block;
}

.success-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0 0 1.25rem;
}

.success-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  text-align: left;
}

.success-card__thumb {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent) 100%);
  border-radius: 8px;
  flex-shrink: 0;
}

.success-card__info {
  flex: 1;
}

.success-card__name {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.15rem;
}

.success-card__action {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-strong);
}

/* =============================================
   CHECKOUT FLOW BUTTON ANIMATIONS
   ============================================= */

/* Pulse animation */
.step-mock__btn.btn--pulse,
.step-mock__pay-btn.btn--pulse {
  animation: btn-pulse 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes btn-pulse {
  0% { transform: scale(1); box-shadow: 0 4px 12px rgba(200, 158, 138, 0.3); }
  50% { transform: scale(1.1); box-shadow: 0 8px 24px rgba(200, 158, 138, 0.5); }
  100% { transform: scale(1); box-shadow: 0 4px 12px rgba(200, 158, 138, 0.3); }
}

/* Wiggle animation */
.step-mock__btn.btn--wiggle,
.step-mock__pay-btn.btn--wiggle {
  animation: btn-wiggle 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes btn-wiggle {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-4deg); }
  40% { transform: rotate(4deg); }
  60% { transform: rotate(-3deg); }
  80% { transform: rotate(3deg); }
}

/* Bounce animation */
.step-mock__btn.btn--bounce,
.step-mock__pay-btn.btn--bounce {
  animation: btn-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes btn-bounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-10px); }
  50% { transform: translateY(-5px); }
  70% { transform: translateY(-8px); }
}

/* =============================================
   SUCCESS CHECKMARK ANIMATIONS
   ============================================= */

/* Check bounce */
.success-check.check--bounce {
  animation: check-bounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes check-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  25% { transform: translateY(-14px) scale(1.15); }
  50% { transform: translateY(-6px) scale(1.05); }
  75% { transform: translateY(-10px) scale(1.1); }
}

/* Check wiggle */
.success-check.check--wiggle {
  animation: check-wiggle 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes check-wiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  20% { transform: rotate(-18deg) scale(1.15); }
  40% { transform: rotate(18deg) scale(1.08); }
  60% { transform: rotate(-12deg) scale(1.1); }
  80% { transform: rotate(12deg) scale(1.05); }
}

/* Check pop */
.success-check.check--pop {
  animation: check-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes check-pop {
  0% { transform: scale(1); }
  30% { transform: scale(1.35); }
  50% { transform: scale(0.85); }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* =============================================
   SUCCESS TITLE ANIMATIONS
   ============================================= */

.success-title.title--celebrate {
  animation: title-celebrate 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes title-celebrate {
  0%, 100% { 
    transform: scale(1) translateY(0); 
  }
  25% { 
    transform: scale(1.12) translateY(-5px); 
  }
  50% { 
    transform: scale(1.08) translateY(-3px);
  }
  75% { 
    transform: scale(1.1) translateY(-4px); 
  }
}

/* =============================================
   FEATURES GRID
   ============================================= */
.checkout-features {
  padding: 5rem 2rem;
  background: #fff;
}

.checkout-features__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.checkout-features__header {
  text-align: center;
  margin-bottom: 3rem;
}

.checkout-features__title {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.checkout-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.checkout-feature {
  text-align: center;
  padding: 1.5rem;
}

.checkout-feature__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  border-radius: 16px;
  margin: 0 auto 1.25rem;
}

.checkout-feature__icon svg {
  width: 26px;
  height: 26px;
  color: var(--accent-strong);
}

.checkout-feature__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.5rem;
}

.checkout-feature__text {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}


/* =============================================
   CUSTOMIZATION SECTION
   ============================================= */
.checkout-customize {
  padding: 5rem 2rem;
  background: var(--bg);
}

.checkout-customize__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.checkout-customize__title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 1rem;
}

.checkout-customize__text {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0 0 1.5rem;
}

.checkout-customize__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.checkout-customize__list li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.95rem;
  color: var(--text-main);
}

.checkout-customize__list svg {
  width: 18px;
  height: 18px;
  color: #22c55e;
  flex-shrink: 0;
}

/* Visual - Stacked checkout cards */
.checkout-customize__visual {
  position: relative;
  height: 360px;
}

.customize-preview {
  position: relative;
  width: 100%;
  height: 100%;
}

.customize-preview__card {
  position: absolute;
  width: 200px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 
    0 2px 8px rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.06);
  transition: transform 0.4s ease;
}

.customize-preview__card--1 {
  top: 20%;
  left: 10%;
  transform: rotate(-4deg);
  animation: card-float-1 6s ease-in-out infinite;
}

.customize-preview__card--2 {
  top: 15%;
  left: 35%;
  transform: rotate(2deg);
  z-index: 2;
  animation: card-float-2 5s ease-in-out infinite 0.5s;
}

.customize-preview__card--3 {
  top: 30%;
  right: 10%;
  transform: rotate(5deg);
  animation: card-float-3 5.5s ease-in-out infinite 1s;
}

@keyframes card-float-1 {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50% { transform: rotate(-4deg) translateY(-8px); }
}

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

@keyframes card-float-3 {
  0%, 100% { transform: rotate(5deg) translateY(0); }
  50% { transform: rotate(5deg) translateY(-6px); }
}

.customize-preview__header {
  height: 40px;
}

.customize-preview__header--coral {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
}

.customize-preview__header--blue {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
}

.customize-preview__header--green {
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
}

.customize-preview__body {
  padding: 1rem;
}

.customize-preview__logo {
  width: 32px;
  height: 32px;
  background: #eee;
  border-radius: 8px;
  margin-bottom: 0.75rem;
}

.customize-preview__lines {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.customize-preview__lines span {
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
}

.customize-preview__lines span:first-child {
  width: 100%;
}

.customize-preview__lines span:last-child {
  width: 65%;
}

.customize-preview__btn {
  width: 100%;
  height: 32px;
  border-radius: 8px;
}

.customize-preview__btn--coral {
  background: var(--accent-strong);
}

.customize-preview__btn--blue {
  background: #3b82f6;
}

.customize-preview__btn--green {
  background: #22c55e;
}


/* =============================================
   CTA SECTION - DARK
   ============================================= */
.checkout-cta {
  position: relative;
  padding: 5rem 2rem;
  background: #1a1a1a;
  overflow: hidden;
  text-align: center;
}

.checkout-cta__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}

.checkout-cta__glow--1 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(180, 123, 104, 0.2) 0%, transparent 70%);
  top: -20%;
  left: 20%;
}

.checkout-cta__glow--2 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(200, 158, 138, 0.15) 0%, transparent 70%);
  bottom: -20%;
  right: 20%;
}

.checkout-cta__inner {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
}

.checkout-cta__eyebrow {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 1rem;
}

.checkout-cta__title {
  font-size: 2.25rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 1rem;
}

.checkout-cta__text {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.6);
  margin: 0 0 2rem;
}

.checkout-cta__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.checkout-cta__btn {
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.checkout-cta__btn--primary {
  background: var(--accent-strong);
  color: #fff;
  box-shadow: 0 4px 20px rgba(180, 123, 104, 0.4);
}

.checkout-cta__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(180, 123, 104, 0.5);
}

.checkout-cta__btn--secondary {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
}

.checkout-cta__btn--secondary:hover {
  background: rgba(255,255,255,0.12);
}

.checkout-philosophy .fade-in,
.checkout-showcase .fade-in,
.checkout-features .fade-in,
.checkout-customize .fade-in {
  opacity: 1;
  transform: none;
}


/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  .checkout-hero__inner {
    gap: 3rem;
  }
  
  .checkout-hero__title {
    font-size: 2.75rem;
  }
  
  .checkout-hero__scene {
    height: 420px;
  }
  
  .checkout-preview__card {
    width: 280px;
  }
  
  .checkout-showcase__flow {
    gap: 0.5rem;
  }
  
  .checkout-step {
    max-width: 280px;
  }
}

@media (max-width: 900px) {
  .checkout-hero__inner {
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  .checkout-hero__content {
    display: contents;
  }

  .checkout-eyebrow {
    order: 1;
  }

  .checkout-hero__title {
    order: 2;
  }

  .checkout-hero__scene {
    order: 3;
    margin-left: 0;
    margin-top: 1rem;
  }

  .checkout-hero__subtitle {
    order: 4;
  }

  .checkout-hero__pills {
    order: 5;
  }

  .checkout-hero__cta {
    order: 6;
  }
  
  .checkout-hero__subtitle {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .checkout-hero__pills {
    justify-content: center;
  }
  
  .checkout-philosophy__grid {
    grid-template-columns: 1fr;
  }
  
  .checkout-showcase__flow {
    flex-direction: column;
    align-items: center;
  }
  
  .checkout-step {
    max-width: 360px;
  }
  
  .checkout-step__connector {
    padding: 1.5rem 0;
    transform: rotate(90deg);
  }
  
  .checkout-features__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .checkout-customize__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .checkout-customize__visual {
    height: 280px;
    margin-top: 2rem;
  }
}

@media (max-width: 600px) {
  .checkout-hero {
    padding: 3rem 1.25rem 2rem;
  }

  .checkout-hero__inner {
    gap: 1.5rem;
  }

  .checkout-hero__title {
    font-size: 2.5rem;
    line-height: 1.15;
    margin-bottom: 0;
  }

  .checkout-hero__subtitle {
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
  }

  .checkout-hero__pills {
    margin-bottom: 0.75rem;
  }

  .checkout-hero__scene {
    height: 360px;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    margin-left: -30px;
    position: relative;
  }

  /* Subtle stack depth with all 3 cards */
  .checkout-stack {
    width: 280px;
    height: 360px;
    z-index: 1;
    margin: 0 auto;
  }

  .checkout-stack__card--3 {
    height: 92%;
    top: -6px;
    left: 6px;
    opacity: 0.3;
    transform: translate(6px, -6px) rotate(2deg);
    box-shadow: 0 4px 16px rgba(120, 80, 60, 0.04);
  }

  .checkout-stack__card--2 {
    height: 96%;
    top: -3px;
    left: 3px;
    opacity: 0.5;
    transform: translate(3px, -3px) rotate(1.5deg);
    box-shadow: 0 5px 18px rgba(120, 80, 60, 0.05);
  }

  .checkout-stack:hover .checkout-stack__card--2 {
    transform: translate(4px, -4px) rotate(2deg);
  }

  .checkout-stack:hover .checkout-stack__card--3 {
    transform: translate(8px, -8px) rotate(3deg);
  }

  /* Reduce glow and shadow intensity */
  .checkout-card__glow {
    inset: -20px;
    background: radial-gradient(circle at 40% 40%, rgba(200, 158, 138, 0.15) 0%, transparent 50%);
  }

  .checkout-stack__card--1 {
    box-shadow: 0 8px 24px rgba(120, 80, 60, 0.12);
  }

  /* Hide some badges, keep check, shield, and 0% tag */
  .checkout-badge--star,
  .checkout-badge--refresh,
  .checkout-badge--bolt,
  .checkout-badge--globe {
    display: none;
  }

  /* Z-index hierarchy - badges on top of card */
  .checkout-badge {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    z-index: 10;
  }

  .checkout-stack {
    z-index: 1;
  }

  /* Position badges - check on left, shield and 0% tag on right */
  .checkout-badge--check {
    top: 12%;
    left: 5%;
    z-index: 10;
  }

  .checkout-badge--shield {
    bottom: 25%;
    right: 8%;
    z-index: 10;
  }

  .checkout-badge--tag {
    display: flex;
    top: 15%;
    left: auto;
    right: 5%;
    z-index: 10;
    width: 38px;
    height: 38px;
    padding: 0;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 5px 18px rgba(120, 80, 60, 0.15);
  }

  .checkout-badge--tag span {
    color: var(--accent-strong);
  }

  .checkout-preview__card {
    width: 260px;
    padding: 1.25rem;
  }

  .checkout-float--card,
  .checkout-float--instant {
    display: none;
  }
  
  .checkout-philosophy__title {
    font-size: 1.75rem;
  }
  
  .philosophy-card {
    padding: 1.5rem;
  }
  
  .checkout-showcase__title {
    font-size: 1.75rem;
  }
  
  .checkout-features__grid {
    grid-template-columns: 1fr;
  }
  
  .checkout-features__title {
    font-size: 1.75rem;
  }
  
  .checkout-customize__title {
    font-size: 1.75rem;
  }
  
  .customize-preview__card {
    width: 140px;
  }
  
  .checkout-cta__title {
    font-size: 1.75rem;
  }
}











/*Note: The biggest plan used to be called Studio but is now called Elite*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800;900&display=swap');

h1, h2, h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-style: normal;
}

/* Base styles */

:root {
    --bg: #faf8f6;
    --bg-alt: #ffffff;
    --card-bg: #ffffff;
  
    --accent: #c89e8a;
    --accent-strong: #b47b68;
    --accent-soft: rgba(200, 158, 138, 0.14);
  
    --text-main: #2a2623;
    --text-muted: #7a746f;
  
    --border-subtle: #e5ddd7;

    --spheres-parallax-x: 0px;
    --spheres-parallax-y: 0px;
  }
  
  html,
  body {
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      sans-serif;
    background-color: var(--bg);
    color: var(--text-main);
  }


  
/* ===== NAV BAR ===== */

.nav {
  display: flex;
  align-items: center;
  gap: 1.9rem;
  font-size: 0.95rem;
}

/* base nav link */
.nav-link {
  position: relative;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0.4rem;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 0.16s ease;
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--text-main);
}

/* underline animation (single definition) */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0%;
  bottom: -5.5px;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--accent-strong);
  transition: width 0.18s ease;
}

.nav-link.active {
  color: var(--text-main);
  font-weight: 500 !important;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* Navigation styles moved to header.css */

/* Old mega panel and nav login styles removed - now in header.css */












  /* Header */
  
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-subtle);
  }
  
  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0;
    position: relative;
  }
  
  .logo {
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 0.05em;
  }
  
  .nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 1rem; /* increased from 0.95 / 0.9 */
  }
  
  
  
  .nav a:not(.login-btn) {
  text-decoration: none;
  color: var(--text-muted);
  transition: color 0.15s ease;
  font-weight: 500;
}
  
  .nav a:hover {
    color: var(--accent-strong);
  }


  /* Hide mobile menu brand on desktop */
.mobile-menu-brand {
  display: none;
}


  .brand {
    display: flex;
    align-items: center;
    gap: 0.85rem; /* a bit more room between logo and text */
  }
  
  .logo-mark {
    width: 36px;
    height: 36px;
    display: block;
    border-radius: 8px; /* keeps that soft-square feel */
  }
  
  .brand-text {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;    /* more vertical space between the two lines */
    line-height: 1.1;
  }
  
  .brand-name {
    font-family: "Playfair Display", serif;
    letter-spacing: 0.2em;  /* more character spacing */
    font-size: 1.25rem;
    font-weight: 600;
  }
  
  .brand-tagline {
    font-family: Inter, system-ui, sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.25em; /* wide, airy subtitle */
    color: var(--text-muted);
  }







  
  
  
  /* Layout helpers */
  
  .container {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1.5rem;
  }
  
  .section {
    padding: 2rem 0;
  }
  
  .section-alt {
    background-color: #f5eee9;
  }
  
  .section-header {
    text-align: center;
    margin-bottom: 2.5rem;
  }
  
  .section-header h2 {
    font-size: 2.5rem;   /* who is gadura font size and above and below widths*/
    margin-bottom: 0.5rem;
    margin-top: 1rem;    
  }
  
  .section-header p {
    margin: 0;
    color: var(--text-muted);
  }
  
  .section-dark {
    background-color: #0f0f11;    /* near-black */
    color: #ffffff;
  }

  /* Bigger headline inside the Unlimited/plans section only */
  #plans .section-header h2 {
    font-size: 2.4rem;
  }


/* ----- Dark section (softer charcoal instead of pure black) ----- */

.section-dark {
    /* softer black / charcoal background */
    background: linear-gradient(
      180deg,
      #1b1c21 0%,
      #141417 100%
    );
    padding-top: 1rem;
    padding-bottom: 5rem;
    color: #f7f5f2;
    overflow-x: hidden;  /* prevents 100vw slider from causing horizontal gap */
  }
  
  .section-dark p,
  .section-dark h2,
  .section-dark h3 {
    color: #ffffff;
  }
  
  /* cards / items sitting on the dark background */
  .section-dark .card,
  .section-dark .feature-item,
  .section-dark .faq-item {
    background-color: #222328;                        /* lighter than the bg */
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.55);
  }
  
  .section-dark .card h3 {
    color: #ffffff;
  }
  
  .section-dark .card p,
  .section-dark .card li {
    color: rgba(255, 255, 255, 0.9);
  }
  
  /* Buttons inside dark sections */
  
  .section-dark .btn.primary-btn {
    background: #ffffff;
    color: #1b1c21;
    box-shadow: none;
  }
  
  .section-dark .btn.primary-btn:hover {
    background: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
  }
  
  .section-dark .btn.secondary-btn {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.4);
  }
  
  .section-dark .btn.secondary-btn:hover {
    border-color: #ffffff;
  }
  
  


  
  
  


  /* Hero */
  
  .hero {
    padding: 8rem 0 8rem;      /* Change width of hero here*/
  }
  
  .hero-inner {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .hero-text {
    max-width: 1000px;
    text-align: center;
  }
  
  .hero h1 {
    font-size: clamp(6rem, 4vw, 4rem);  /*Change home page hero text size*/
    margin-bottom: 1rem;
  }
  
  .hero p {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-bottom: 2.75rem;   /* change space between hero caption and buttons*/
  }
  
  .hero-actions {
    margin: 1.5rem 0 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
  
  .hero-subtext {
    font-size: 3rem;
  }
  
  /* Buttons */
  
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.6rem;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease,
      border-color 0.12s ease;
  }
  
  .btn:active {
    transform: translateY(1px) scale(0.99);
  }
  
  .primary-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(180, 123, 104, 0.35);
  }
  
  .primary-btn:hover {
    box-shadow: 0 14px 35px rgba(180, 123, 104, 0.45);
  }
  
  .secondary-btn {
    background-color: #ffffff;
    color: var(--accent-strong);
    border-color: var(--border-subtle);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.04);
  }
  
  .secondary-btn:hover {
    border-color: var(--accent-strong);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  }
  
  .ghost-btn {
    background-color: transparent;
    color: var(--text-main);
    border-color: var(--border-subtle);
  }
  
  .ghost-btn:hover {
    border-color: var(--accent);
  }

  
  
  
  /* Grid */
  
  .grid {
    display: grid;
    gap: 1.5rem;
  }
  
  .three-col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  .four-col {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  
  /* Cards & lists */
  
  .card {
    background-color: var(--card-bg);
    border-radius: 1.25rem;
    padding: 1.75rem 1.5rem;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.05);
  }
  
  .card h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.2rem;
  }
  
  .card p {
    margin: 0.25rem 0 0.75rem;
    color: var(--text-muted);
  }
  
  .list {
    padding-left: 1.25rem;
    margin: 0;
    list-style-type: disc;
    color: var(--text-muted);
    font-size: 0.95rem;
  }
  
  .list li + li {
    margin-top: 0.3rem;
  }


/* Profession Slider */

.profession-slider {
  position: relative;
  overflow: hidden;

  /* 👇 full-width bleed, even inside a centered container */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  margin-top: 1rem;
  margin-bottom: -2rem;

  padding: 1.2rem 0 1.6rem;

  border-top: none;
  border-bottom: none;

  background: radial-gradient(circle at center,
    rgba(200, 158, 138, 0.16),
    #1b1c21 40%);
}

/* make sure tracks sit *under* the fades */
.profession-track {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
  white-space: nowrap;
  min-width: 100%;
  z-index: 1;    
}

/* fade overlays on top, both sides */
.profession-slider::before,
.profession-slider::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  pointer-events: none;
  z-index: 2;
}

.profession-slider::before {
  left: 0;
  background: linear-gradient(to right, #1b1c21, transparent);
}

.profession-slider::after {
  right: 0;
  background: linear-gradient(to left, #1b1c21, transparent);
}

/* little pill tags */
.profession-track span {
  display: inline-block;
  padding: 0.45rem 1.2rem;
  border-radius: 999px;

  border: 1px solid rgba(200, 158, 138, 0.75);
  background: rgba(27, 28, 33, 0.7);
  color: #fdf6f2;

  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;

  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  transition: transform 0.18s ease, 
              box-shadow 0.18s ease,
              background 0.18s ease,
              border-color 0.18s ease;
}

/* tiny extra gap at loop join */
.profession-track span:last-child {
  margin-right: 2.2rem;
}

/* CHANGED: Use class instead of :hover for dynamic highlighting */
.profession-track span.profession-hover {
  transform: translateY(-2px);
  background: rgba(200, 158, 138, 0.2);
  border-color: rgba(200, 158, 138, 1);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6);
}

/* animations – slow & smooth */
.profession-track:nth-child(1) {
  animation: professions-scroll-1 40s linear infinite;
}

.profession-track:nth-child(2) {
  animation: professions-scroll-2 40s linear infinite;
}

@keyframes professions-scroll-1 {
  0%   { transform: translate(0, -50%); }
  100% { transform: translate(-100%, -50%); }
}

@keyframes professions-scroll-2 {
  0%   { transform: translate(100%, -50%); }
  100% { transform: translate(0, -50%); }
}


/* Gadura is for You , Who is Gadura for , Create, thrive, impact*/
.highlight-word {
  background: linear-gradient(
    90deg,
    #f8b595,
    #c9a083,
    #a67c52,
    #c9a083,
    #f8b595
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 3.5s ease-in-out infinite;
}


@keyframes gradient-shift {
  0% {
    background-position: 0% center;
  }
  50% {
    background-position: 100% center;
  }
  100% {
    background-position: 0% center;
  }
}
  
  
  /* Plans (membership cards) */
  
  .plans-grid {
    align-items: stretch;
    gap: 2rem;
  }
  
  .plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 2rem 1.75rem;
  }
  
  .plan-card h3 {
    margin-bottom: 0.25rem;
  }
  
  .plan-tagline {
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
    color: var(--text-muted);
  }
  
  .plan-price {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0.75rem 0 1.25rem;
  }
  
  .plan-price span {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--text-muted);
  }
  
  .plan-card .list {
    margin-top: 0.25rem;
    margin-bottom: 1.75rem;
  }
  
  .plan-card .btn {
    margin-top: auto;
    align-self: flex-start;
    min-width: 9rem;     /* keeps them from looking too tiny */
  }  
  
  /* Extra breathing room for the featured plan */
.plan-card-featured {
    border: 2px solid var(--accent-strong);
    box-shadow: 0 26px 55px rgba(180, 123, 104, 0.25);
    background: linear-gradient(180deg, #ffffff, #faf3ef);
    padding-top: 2.6rem;   
  }
  
  
  /* Badge on featured plan */
  
  .badge {
    position: absolute;
    top: 0.9rem;          /* was 1.1rem – bring it up a bit */
    left: 1.75rem;
    background-color: var(--accent-strong);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
  }
  
  
  /* Buttons inside plan cards */
  
  .plan-card .secondary-btn {
    background-color: #ffffff;
    color: var(--accent-strong);
    border-color: var(--border-subtle);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.04);
  }
  
  .plan-card .secondary-btn:hover {
    border-color: var(--accent-strong);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
  }
  
  .plan-card-featured .primary-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    box-shadow: 0 14px 32px rgba(180, 123, 104, 0.35);
  }
  
  .plans-note {
    margin-top: 1.75rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

/* ===== Unlimited section – big & bold ===== */

.unlimited-word {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.unlimited-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
  margin-bottom: 1.9rem;
}

.unlimited-card {
  position: relative;
  border-radius: 1.4rem;
  padding: 1.4rem 1.3rem 1.5rem;
  background: linear-gradient(180deg, #ffffff, #faf8f6);
  border: 1px solid rgba(180, 123, 104, 0.16);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transform: translateY(0);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease;
}

/* subtle “light sweep” accent */
.unlimited-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left,
    rgba(200, 158, 138, 0.22),
    transparent 55%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.unlimited-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.08);
  border-color: rgba(180, 123, 104, 0.4);
  background: linear-gradient(180deg, #ffffff, #f5ebe5);
}

.unlimited-card:hover::before {
  opacity: 1;
}

.unlimited-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.6rem;

  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: 0 10px 24px rgba(180, 123, 104, 0.45);
}

.unlimited-card h3 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
}

.unlimited-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.plans-bridge {
  margin: 0 0 1.8rem;
  font-size: 0.92rem;
  color: var(--text-muted);
  text-align: center;
}

/* small helper for notes already used elsewhere */
.muted-note {
  font-size: 0.85em;
  opacity: 0.9;
}



/* ===== Scaling dial heading ===== */

.plan-scale-heading {
  text-align: left;
  margin-bottom: 1rem;
}

.plan-scale-heading h3 {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
}

.plan-scale-heading p {
  margin: 0 0 1.1rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* ===== LIGHT MODE NOT IN USE SCROLL DOWN: Dial + metrics (you may already have this – if so, keep only one copy) ===== */

.plan-stage-toggle {
  display: inline-flex;
  gap: 0.5rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.03);
  margin: 0 0 1.4rem;
}

.plan-stage-btn {
  border: none;
  background: transparent;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-muted);
  transition:
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.1s ease;
}

.plan-stage-btn.is-active {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(180, 123, 104, 0.35);
  transform: translateY(-1px);
}

.plan-stage-btn:not(.is-active):hover {
  color: var(--text-main);
}

.plans-top-cta {
  margin-top: 1.25rem;
}

.plans-secondary-btn {
  padding-inline: 1.8rem;
}


/* Metrics card */

.plan-metrics-card {
  border-radius: 1.6rem;
  padding: 1.6rem 1.7rem 1.9rem;
  background: linear-gradient(180deg, #ffffff, #faf3ef);
  border: 1px solid rgba(180, 123, 104, 0.18);
  box-shadow:
    0 26px 55px rgba(180, 123, 104, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.7);
  margin-bottom: 2rem;
}

.plan-metrics-header {
  margin-bottom: 1.1rem;
}

.plan-metrics-label {
  margin: 0 0 0.15rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-muted);
}

.plan-metrics-tagline {
  margin: 0;
  font-size: 0.98rem;
  color: var(--text-main);
}

.plan-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.25rem;
  margin-bottom: 0.9rem;
}


.plan-metric {
  padding: 0.85rem 0.9rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(180, 123, 104, 0.16);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.03);
}

.metric-label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.metric-value {
  font-size: 1.3rem;
  font-weight: 600;
}

.plan-metrics-note {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* CTA */

.plan-cta-center {
  margin-top: 1.4rem;
  text-align: center;
}









/* =============================================
   PLAN CAPACITY SECTION - DARK THEME
   ============================================= */

#plan-capacity {
  background: 
    radial-gradient(ellipse at 30% 50%, rgba(54, 42, 36, 0.5) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 50%, rgba(54, 42, 36, 0.5) 0%, transparent 50%),
    #17181c;
  background-size: 200% 200%, 200% 200%, 100% 100%;
  animation: aurora1 2s ease-in-out infinite, aurora2 3s ease-in-out infinite reverse;
}

@keyframes aurora1 {
  0%, 100% { background-position: 0% 50%, 100% 50%, 0% 0%; }
  25% { background-position: 50% 0%, 50% 100%, 0% 0%; }
  50% { background-position: 100% 50%, 0% 50%, 0% 0%; }
  75% { background-position: 50% 100%, 50% 0%, 0% 0%; }
}

@keyframes aurora2 {
  0%, 100% { background-position: 100% 0%, 0% 100%, 0% 0%; }
  50% { background-position: 0% 100%, 100% 0%, 0% 0%; }
}

#plan-capacity .section-header h2 {
  color: #fff;
}

#plan-capacity .section-header p {
  color: rgba(255, 255, 255, 0.7);
}

/* Toggle buttons on dark */
#plan-capacity .plan-stage-toggle {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: inline-flex;
  justify-content: center;
  margin: 0 auto 1.4rem;
}

#plan-capacity .plan-stage-btn {
  color: rgba(255, 255, 255, 0.6);
}

#plan-capacity .plan-stage-btn:not(.is-active):hover {
  color: #fff;
}

#plan-capacity .plan-stage-btn.is-active {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #fff;
}

/* Metrics card on dark */
#plan-capacity .plan-metrics-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 26px 55px rgba(0, 0, 0, 0.3);
}

#plan-capacity .plan-metrics-label {
  color: var(--accent);
}

#plan-capacity .plan-metrics-tagline {
  color: rgba(255, 255, 255, 0.8);
}

/* Metric boxes on dark */
#plan-capacity .plan-metric {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

#plan-capacity .metric-label {
  color: rgba(255, 255, 255, 0.5);
}

#plan-capacity .metric-value {
  color: #fff;
}

#plan-capacity .plan-metrics-note {
  color: rgba(255, 255, 255, 0.5);
}

/* CTA button on dark */
#plan-capacity .primary-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #fff;
}










  
  /* Features */

.feature-item {
  padding: 1.5rem 1.25rem;
  border-radius: 1.25rem;
  border: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, #ffffff, #faf8f6);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.06);
}

.feature-item h3 {
  margin-top: 0;
  font-size: 1rem;
  color: #2a2623;
}

.feature-item p {
  margin: 0.5rem 0 0;
  color: #7a746f;
  font-size: 0.95rem;
}

/* ===== Features: left nav + big screen ===== */

.features-layout {
  display: grid;
  grid-template-columns: minmax(210px, 240px) minmax(0, 1fr);
  gap: 2.75rem;
  align-items: start;
}

/* Left column – feature tabs */

.features-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  height: 680px; /* Increased */
}

.feature-tab {
  width: 100%;
  text-align: left;
  padding: 0.9rem 1.1rem;
  border-radius: 1.1rem;
  border: 1px solid rgba(180, 123, 104, 0.16);
  background: #ffffff;
  cursor: pointer;
  flex: 1; /* Each tab takes equal space */

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;

  font-family: inherit;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.1s ease;
}

.feature-tab-kicker {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}

.feature-tab-title {
  font-size: 0.95rem;
  font-weight: 600;
}

.feature-tab-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.feature-tab.is-active {
  border-color: var(--accent-strong);
  background: linear-gradient(135deg, #ffffff, #faf3ef);
  box-shadow: 0 14px 32px rgba(180, 123, 104, 0.18);
  transform: translateY(-1px);
}

.feature-tab:not(.is-active):hover {
  border-color: rgba(180, 123, 104, 0.5);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

/* Right column – screen + copy */

.feature-display {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  height: 680px;
  padding-bottom: 2rem; /* Add padding instead of overflow hidden */
}

/* Screen frame wrapper for swipe + dots */
.screen-frame-wrapper {
  position: relative;
  flex-shrink: 0;
  flex-grow: 0;
}

/* fixed ratio so the window height doesn't jump between images */
.screen-frame {
  width: 100%;
  max-width: none;
  aspect-ratio: 16 / 10;
  min-height: 420px; /* Slightly reduced to fit better */

  border-radius: 1.8rem;
  overflow: hidden;

  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow:
    0 36px 80px rgba(15, 23, 42, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.8);
  
  cursor: grab;
  user-select: none;
}
.screen-frame:active {
  cursor: grabbing;
}

.screen-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none; /* Prevent image from interfering with swipe */
}

/* Desktop dots - under the screen */
.features-desktop-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.features-desktop-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(200, 158, 138, 0.3);
  transition: all 0.3s ease;
  cursor: pointer;
}

.features-desktop-dots .dot.active {
  background: var(--accent-strong);
  width: 24px;
  border-radius: 4px;
}

.features-desktop-dots .dot:hover:not(.active) {
  background: rgba(200, 158, 138, 0.5);
}

.feature-copy {
  max-width: 100%;
  min-height: 100px;
}

.feature-eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}

.feature-copy h3 {
  margin: 0 0 0.4rem;
  font-size: 1.35rem;
}

.feature-copy p {
  margin: 0;
  color: var(--text-muted);
}

.feature-cta-btn {
  margin-top: 1.25rem;
}







  
  /* Final CTA */
  
  .final-cta {
  text-align: center;
  padding: 5rem 0;
  background: #faf8f6;
  border-top: 3px solid var(--accent-strong);
  border-bottom: 3px solid var(--accent-strong);
}

.final-cta::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(180, 123, 104, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.final-cta .container {
  position: relative;
  z-index: 1;
}

.final-cta h2 {
  margin: 0 0 1rem;
  font-size: 2.2rem;
  font-weight: 800;
}

.final-cta p {
  margin: 0 auto 2rem;
  color: var(--text-muted);
  max-width: 500px;
  font-size: 1.05rem;
  line-height: 1.6;
}

.final-cta .primary-btn {
  padding: 1rem 2.5rem;
  font-size: 1rem;
  box-shadow: 0 10px 30px rgba(180, 123, 104, 0.3);
  transition: all 0.3s ease;
}

.final-cta .primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(180, 123, 104, 0.4);
}
  


  
  













 /* -------- PRICING PAGE -------- */

/* Hero */

.pricing-hero {
  padding-top: 4rem;
  padding-bottom: 2rem;   /*gap between plan cards and hero*/ 
}

.pricing-hero-inner {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.pricing-hero-copy {
  flex: 1.6;
  min-width: 280px;
  max-width: 640px;
}

.pricing-hero h1 {
  font-size: clamp(2.1rem, 4vw, 2.8rem);
  margin-bottom: 0.75rem;
}

.pricing-hero-sub {
  margin: 0 0 0.6rem;
  color: var(--text-muted);
}

/* Reusable highlight accent */
.highlight {
  color: #b36b4c;          /* a touch deeper than your accent */
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* currently removed from html – “Plans from $79/month” line */
.pricing-starting {
  margin: 0.75rem 0 1.25rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.pricing-starting span {
  font-weight: 600;
  color: var(--accent-strong);
}

.pricing-hero-note {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.pricing-hero-actions {
  margin: 1.7rem 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* === Billing area: pill toggle + checklist === */

.billing-toggle-card {
  flex: 1;
  min-width: 260px;
  max-width: 360px;

  /* no big card anymore */
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;

  /* pushes toggle + note downward while list stays high */
  min-height: 240px;
}

/* Toggle row */

.billing-switch-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 8rem;   /* or use 'auto' if you want it as low as possible */
  /* margin-top: auto;  // try this if you want it glued to the bottom */
}

/* Copy on the left of the pill */

.billing-switch-text {
  text-align: right;
}

.billing-switch-title {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-main);
}

.billing-switch-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* The pill switch itself */

.billing-switch {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  border: none;
  padding: 0;
  cursor: pointer;

  background: #ddd6d0;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);

  display: inline-flex;
  align-items: center;

  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.billing-switch-knob {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #ffffff;

  left: 3px;
  transform: translateX(0);
  transition: transform 0.2s ease;
}

/* ON state */

.billing-switch.is-on {
  background: #c89e8a;
  box-shadow: 0 10px 20px rgba(200, 158, 138, 0.65);
}

.billing-switch.is-on .billing-switch-knob {
  transform: translateX(18px);
}


.billing-toggle-note {
  font-size: 0.8rem;     /* smaller */
  color: var(--text-muted);
  margin-top: 0.35rem;
}



/* Plan cards – upgraded */

.pricing-plans {
  padding-top: 2.2rem;
}

.pricing-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.9rem;
  margin-top: -4.5rem;
}

/* Base card for all three plans */

.pricing-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  padding: 2.1rem 1.9rem 2rem;
  border-radius: 1.5rem;

  background: #ffffff;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.03);

  transform: translateY(0);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.pricing-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.06);
  border-color: rgba(180, 123, 104, 0.32);
}

/* Typography inside cards */

.pricing-plan-card h2 {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
}

.pricing-plan-tagline {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.pricing-price {
  margin: 0.45rem 0 0.12rem;
  font-size: 2.5rem;
  font-weight: 600;
}

.pricing-price .currency {
  font-size: 1.5rem;
  vertical-align: top;
  margin-right: 0.1rem;
}

.pricing-price .billing-suffix {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 0.25rem;
}

.pricing-billing-copy {
  margin: 0 0 1.25rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.price-strikethrough {
  text-decoration: line-through;
  opacity: 0.6;
  color: #d64545;
}

/* --- Feature list with icons inside pricing cards --- */

.pricing-plan-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.7rem;
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.55;        /* more breathing room */
  flex: 1; /* This pushes everything below to the bottom */
  margin-bottom: 0;
}

.pricing-plan-list li {
  display: flex;
  align-items: center;
  margin-top: 0.65rem;      /* was 0.35–0.45 */
  gap: 0.75rem;
}


/* little circular icon container */

/* --- Feature icons: bigger & clearer --- */

.plan-feature-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--accent-strong);
}

.plan-feature-icon svg {
  width: 22px;
  height: 22px;
}

/* text block next to icon */

.plan-feature-text {
  flex: 1;
}

/* Dark-card tweak so icons work on Pro too */

.pricing-plan-featured .plan-feature-icon {
  background: transparent;   /* no glow/bubble */
  box-shadow: none;
  color: #ffffff;   
}


/* Button */

.pricing-cta {
  margin-top: auto;
  align-self: flex-start;
  min-width: 9rem;
}


/* Starter – softer, friendlier base */

.pricing-plan-card.starter-soft {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #fbf9f7 95%,
    #f5f2ef 100%
  );
    box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.06),    /* soft outer */
    inset 0 0 0 1px rgba(190, 150, 128, 0.35); /* fake border */
}



/* Featured Pro plan — dark premium look */

.pricing-plan-featured {
  border: 1px solid rgba(200, 158, 138, 0.75);   /* thin brown border */
  
  background: linear-gradient(
  180deg,
  #18191c 0%,
  #0f1012 45%,
  #2d211b 100%
  );
  color: #f6f5f3;

  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.06),    /* soft outer */
    inset 0 0 0 1px rgba(190, 150, 128, 0.35); /* fake border */

  padding-top: 2.6rem;
  transform: translateY(-6px);
  border-radius: 1rem;

  position: relative;
}

.pricing-plan-featured::after {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -1;

  border-radius: 1.8rem;
  background: radial-gradient(
    50% 60% at center,
    rgba(180, 123, 104, 0.18),
    transparent 70%
  );
}

.pricing-plan-featured:hover {
  transform: translateY(-10px);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Text colors inside the dark Pro card */

.pricing-plan-featured h2,
.pricing-plan-featured p,
.pricing-plan-featured li,
.pricing-plan-featured .pricing-billing-copy {
  color: rgba(255, 255, 255, 0.92);
}

.pricing-plan-featured .pricing-price .billing-suffix {
  color: rgba(255, 255, 255, 0.7);
}


/* Badge at the top of Pro */

.pricing-plan-featured .badge {
  position: absolute;
  top: 0.9rem;
  right: 1.9rem;      /* move it to the right */
  left: auto;         /* cancel the old positioning */

  background: linear-gradient(135deg, #dca68e, #c57e63);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.7);

  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;

  padding: 0.28rem 0.95rem;
  border-radius: 999px;
}


/* Slightly stronger headline & price on Pro */

.pricing-plan-featured h2 {
  font-size: 1.3rem;
}

.pricing-plan-featured .pricing-price {
  font-size: 2.2rem;
}

/* Make the Pro CTA feel like the primary action */

.pricing-plan-featured .pricing-cta {
  background: #ffffff;
  color: #0d0d0f;
  border: none;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

.pricing-plan-featured .pricing-cta:hover {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: none;
}


/* Studio (now Elite) – soft rose-gold highlight */

.pricing-plan-card.elite-highlight {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #faf7f4 60%,
    #f3ebe6 72%,
    #e9d9d2 100%
  );

  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.06),    /* soft outer */
    inset 0 0 0 1px rgba(190, 150, 128, 0.35); /* fake border */
}

.pricing-plan-card.elite-highlight::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  /* soft inner shine */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}



.pricing-plan-card.elite-highlight .pricing-plan-list li,
.pricing-plan-card.elite-highlight .pricing-plan-tagline {
  color: #493b35;   /* deeper coffee brown */
}

.pricing-plan-card.elite-highlight .pricing-price {
  color: #2b2320;   /* strong headline */
}

.pricing-plan-card.elite-highlight .plan-feature-icon {
  color: #b06e53;   /* subtle rose, not neon pink */
}


.pricing-plan-card.elite-highlight:hover {
  transform: translateY(-6px);              /* Pro is higher */
  box-shadow: 0 28px 70px rgba(193, 125, 100, 0.26);
}

.pricing-plan-card.elite-highlight .pricing-cta {
  background: linear-gradient(135deg, #dca68e, #c57e63);
  color: #ffffff;
  border: none;
}

.pricing-plan-card.elite-highlight .pricing-cta:hover {
  filter: brightness(1.03);
}

/* +more features*/
.more-features {
  display: block;
  margin-top: 1rem;
  margin-bottom: 2rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.more-features:hover {
  text-decoration: underline;
}

/* White text for Pro plan */
.pricing-plan-featured .more-features {
  color: rgba(255, 255, 255, 0.7);
}

.pricing-plan-featured .more-features:hover {
  color: rgba(255, 255, 255, 0.9);
}



/* Included on every plan (now uses the value strip) */

.pricing-included {
  margin-top: 2.4rem;
}

.pricing-included-inner h3 {
  text-align: center;
  margin: 0 0 1.6rem;
  font-size: 1.4rem;
}

/* Premium value list */

.pricing-value-strip {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.6rem;
  row-gap: 0.6rem;
  font-size: 0.9rem;
}

.pricing-value-item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.value-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(180, 123, 104, 0.08);
  color: var(--accent-strong);
  margin-top: 0.1rem;
}

.pricing-value-item span:last-child {
  color: var(--text-muted);
}

.annual-callout {
  grid-column: 1 / -1;      /* span across all grid columns */
  justify-self: center;     /* center the paragraph inside the grid */
  text-align: center;
  max-width: 36rem;
  margin: 0.2rem 1rem 0;
  margin-top: 2rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}


/* Pricing hero eyebrow */

.pricing-eyebrow {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  margin-bottom: -1rem;
}

/* Refine spacing */

.pricing-hero-sub {
  margin-bottom: 1.1rem;
}

.pricing-hero-note {
  margin-top: 0.75rem;
}







/* Comparison table container - desktop styles.css*/ 
.comparison-table-wrap {
  margin-top: 4rem;
  margin-bottom: 4rem;
  border-radius: 0 0 16px 16px; /* ⬅️ only bottom corners rounded */
  background: #ffffff;
  box-shadow: 
    0 1px 2px rgba(42, 38, 35, 0.08),
    0 8px 24px rgba(42, 38, 35, 0.12);
  overflow: visible;
  border: 1px solid var(--text-main);
  position: relative;
}


/* Base table */
.comparison-table {
  width: 100%;
  border-collapse: separate; /* was collapse */
  border-spacing: 0;         /* keep grid tight */
  font-size: 1.08rem;
  line-height: 1.7;
  position: relative;
}

/* Sticky header container */
.comparison-table thead {
  position: sticky;
  top: 65px;
  z-index: 10;
}


/* Header row - bold dark header */
.comparison-table thead th {
  background: var(--text-main);
  padding: 1.75rem 2rem;
  text-align: center;
  font-weight: 700;
  color: #ffffff;
  border: none;
  border-bottom: 3px solid var(--accent-strong);
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  vertical-align: middle;
}


/* Rounded bottom corners on last row */
.comparison-table tbody tr:last-child th[scope="row"] {
  border-bottom-left-radius: 16px;
}

.comparison-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 16px;
}

/* When header is at end of table, round its bottom corners */
.comparison-table thead.at-table-end th:first-child {
  border-bottom-left-radius: 16px;
}

.comparison-table thead.at-table-end th:last-child {
  border-bottom-right-radius: 16px;
}

/* Gap under last row of table */
.comparison-table tbody tr:last-child th,
.comparison-table tbody tr:last-child td {
  padding-bottom: 1.5rem;
}


.comparison-table thead th.feature-col {
  text-align: left;
  background: var(--text-main);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  font-weight: 600;
  padding-left: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Plan header content wrapper */
.plan-header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
}

.plan-name {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: block;
  color: #ffffff;
}

/* Plan header content wrapper */
.plan-header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.plan-name {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: block;
  color: #ffffff;
}

/* Plan header button - base styles */
.plan-header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.5rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
  min-width: 150px;
  position: relative;
}

.plan-header-btn:hover {
  transform: translateY(-3px);
}

/* Starter button - elegant cream with shine */
.plan-btn-starter {
  background: linear-gradient(165deg, #ffffff 0%, #f9f6f3 50%, #f0ebe6 100%);
  color: var(--text-main);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(190, 150, 128, 0.25);
}

.plan-btn-starter:hover {
  box-shadow: 
    0 8px 20px rgba(0, 0, 0, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 0 0 1px rgba(190, 150, 128, 0.4);
}

/* Pro button - deep luxurious dark */
.plan-btn-pro {
  background: linear-gradient(165deg, #2a2725 0%, #1a1816 50%, #252018 100%);
  color: #f6f5f3;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(200, 158, 138, 0.3);
}

.plan-btn-pro:hover {
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(200, 158, 138, 0.5);
}

/* Elite button - rich rose-gold shimmer */
.plan-btn-elite {
  background: linear-gradient(165deg, #e8d5cc 0%, #d4b5a8 40%, #c9a090 70%, #bf8c7a 100%);
  color: #3d2c25;
  box-shadow: 
    0 4px 12px rgba(180, 123, 104, 0.25),
    0 1px 3px rgba(180, 123, 104, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 0 0 1px rgba(180, 123, 104, 0.2);
}

.plan-btn-elite:hover {
  box-shadow: 
    0 8px 25px rgba(180, 123, 104, 0.35),
    0 2px 6px rgba(180, 123, 104, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px rgba(180, 123, 104, 0.3);
}

/* Subgroup headers */
.comparison-subgroup {
  border: none !important;
}

.comparison-subgroup td {
  padding: 3rem 2rem 0.2rem 2rem !important;  /*gap between subheadings and subsubheadings*/
  font-size: 0.85rem !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #b47b68 !important;
  background: #ffffff !important;
  border: none !important;
  text-align: center;
}

/* No hover on subgroup rows */
.comparison-table tbody tr.comparison-subgroup:hover td {
  background: #ffffff !important;
}

/* First subgroup after main group - less top padding */
.comparison-group + .comparison-subgroup td {
  padding-top: 1.5rem !important; /*gap between subheadings and first row subsubheadings only*/
}

/* Body cells */
.comparison-table tbody th[scope="row"] {
  padding: 1.25rem 2rem;
  text-align: left;
  font-weight: 500;
  font-size: 1.1rem;     /*change font size of first column*/
  color: var(--text-main);
  border-bottom: 1px solid rgba(42, 38, 35, 0.1);
  background: #ffffff;
}

.comparison-table tbody td {
  padding: 1.25rem 2rem;
  text-align: center;
  font-size: 1.1rem; /*change font size of other columns excet groups and subgroups headers*/
  font-weight: 350;
  border-bottom: 1px solid rgba(42, 38, 35, 0.1);
  background: #ffffff;
  color: var(--text-main);
}

/* Keep group and subgroup headers bold */
.comparison-table tbody tr.comparison-group td,
.comparison-table tbody tr.comparison-subgroup td {
  font-weight: 500 !important;
}

/* Main group headers (Build & Engage, Selling & Checkout, etc.) */
.comparison-group {
  border-bottom: none !important;
}

.comparison-group td {
  position: sticky;
  top: 225px;  /*remember to go to json section of pricing to change this value*/
  z-index: 9;
  padding: 1.25rem 2rem;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-main);
  background: rgba(245, 238, 233, 1) !important;
  border: none !important;
  text-align: center;
  box-shadow: 0 2px 0 0 var(--accent), 0 -2px 0 0 var(--accent);
  transition: opacity 0.2s ease, transform 0.2s ease;
  will-change: transform;
}

.comparison-group.is-hidden td {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

/* When sticky is disabled, turn off all sticky positioning */
.comparison-table-wrap.sticky-disabled .comparison-table thead {
  position: relative;
  top: auto;
}

.comparison-table-wrap.sticky-disabled .comparison-group td {
  position: relative;
  top: auto;
}

/* First group header - no top border gap */
.comparison-table tbody tr.comparison-group:first-child td {
  border-top: none !important;
}


/* Remove gap between thead and first row */
.comparison-table tbody {
  border-top: none;
}

.comparison-table thead th {
  border-bottom: none;
}

.comparison-table tbody tr:first-child td {
  border-top: none !important;
}

/* Check / cross icons */
.icon-check,
.icon-cross {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Check - brown accent */
.icon-check {
  background: rgba(180, 123, 104, 0.15);
  color: var(--accent-strong);
}

/* Cross - neutral grey */
.icon-cross {
  background: rgba(42, 38, 35, 0.05);
  color: rgba(42, 38, 35, 0.25);
  font-size: 0.85rem;
}

/* Footnote */
.comparison-footnote {
  margin-top: 2rem;
  padding-bottom: 0rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* Row hover */
.comparison-table tbody tr:not(.comparison-group):hover th,
.comparison-table tbody tr:not(.comparison-group):hover td {
  background: rgba(200, 158, 138, 0.08);
  transition: background 0.15s ease;
}


/* Zero fee indicator */
.zero-fee {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--text-main);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(42, 38, 35, 0.2);
  letter-spacing: 0.05em;
}










/* What Gadura Replaces Section */
.section-replaces {
  padding: 5rem 0;
  background: linear-gradient(180deg, #faf8f6 0%, #ffffff 100%);
}

.replaces-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem;
}

.replaces-eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 0.8rem;
}

.replaces-header h2 {
  font-size: 2.4rem;
  margin-bottom: 1rem;
  font-weight: 700;
  color: var(--text-main);
}

.replaces-subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Replaces Grid */
.replaces-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 4rem;
}

.replaces-category {
  background: #ffffff;
  border-radius: 1rem;
  padding: 2rem;
  border: 1px solid rgba(200, 158, 138, 0.15);
  box-shadow: 0 4px 12px rgba(42, 38, 35, 0.04);
  transition: all 0.3s ease;
}

.replaces-category:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(42, 38, 35, 0.1);
}

.replaces-category-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid rgba(200, 158, 138, 0.15);
  text-align: center;
}

.replaces-category-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-main);
  margin: 0;
}

.replaces-tools {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.tool-logo {
  padding: 0.7rem 1rem;
  background: rgba(200, 158, 138, 0.06);
  border-radius: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-main);
  text-align: center;
  transition: all 0.2s ease;
}

.tool-logo:hover {
  background: rgba(200, 158, 138, 0.12);
}

/* Footer */
.replaces-footer {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(200, 158, 138, 0.15);
}

.replaces-footer p {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}












/* Not Sure section*/
/* Help & Quiz Section - Dark Theme */
.section-help-dark {
  background: linear-gradient(180deg, #1b1c21 0%, #141417 100%);
  padding: 1.5rem 0;
  color: #ffffff;
}

.help-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.section-help-dark h2 {
  font-size: 2.2rem;
  margin-bottom: 1rem;
  color: #ffffff;
  font-weight: 600;
  line-height: 1.3;
}

.section-help-dark p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 2.5rem;
  line-height: 1.6;
}

/* Help action buttons */
.help-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.help-btn-outline {
  padding: 0.9rem 2rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.help-btn-outline:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.help-btn-primary {
  padding: 0.9rem 2rem;
  border: none;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(180, 123, 104, 0.3);
}

.help-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(180, 123, 104, 0.4);
  filter: brightness(1.05);
}




/* =============================================
   FAQ SECTION - PRICING PAGE
   ============================================= */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 700px;
  margin: 0 auto;
}

.faq-item {
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: transparent;
  box-shadow: none;
  padding: 1.25rem 0;
  border-radius: 0;
}

.faq-item:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-main);
  transition: color 0.2s ease;
}

.faq-question:hover {
  color: var(--accent-strong);
}

/* Plus/minus icon */
.faq-chevron {
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--text-muted);
  transition: transform 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-chevron::before {
  content: '+';
}

.faq-item.open .faq-chevron::before {
  content: '−';
}

.faq-item.open .faq-chevron {
  color: var(--accent-strong);
}

/* Hide the original chevron text */
.faq-chevron {
  font-size: 0;
}

.faq-chevron::before {
  font-size: 1.5rem;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.25s ease;
}

.faq-answer p {
  margin: 1rem 0 0.5rem;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
  padding-right: 2rem;
}

.faq-item.open .faq-answer {
  max-height: 400px;
  opacity: 1;
}















/* ========================================
   CHECKOUT PAGE STYLES
   ======================================== */

.checkout-page {
  background: #faf8f6;
}

.checkout-page .site-header {
  border-bottom: none;
}


/* Checkout Hero Image */
.checkout-hero-image {
  width: 100%;
  max-width: 1080px; /* Same as checkout-layout max-width */
  height: 300px;
  margin: 2.5rem auto 0;
  padding: 0; /* Remove padding so it goes edge to edge */
  overflow: hidden;
  border-radius: 1rem;
}

.checkout-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 1rem;
  box-shadow: 0 12px 40px rgba(42, 38, 35, 0.12);
  border: 1px solid rgba(200, 158, 138, 0.15);
}


/* Dancing GADURA Wordmark */
.checkout-dancing-wordmark {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  padding: 2.5rem 0 1.5rem;
  font-family: "Playfair Display", serif;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.25em;
}

.dancing-letter {
  display: inline-block;
  background: linear-gradient(
    135deg,
    #d4a895 0%,
    #c89e8a 20%,
    #b47b68 40%,
    #a66b58 60%,
    #b47b68 80%,
    #c89e8a 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gentleWave 4s ease-in-out infinite, gradientShift 6s ease infinite;
  transform-origin: center center;
}

.dancing-letter:nth-child(1) { 
  animation-delay: 0s, 0s; 
}
.dancing-letter:nth-child(2) { 
  animation-delay: 0.15s, 1s; 
}
.dancing-letter:nth-child(3) { 
  animation-delay: 0.3s, 2s; 
}
.dancing-letter:nth-child(4) { 
  animation-delay: 0.45s, 3s; 
}
.dancing-letter:nth-child(5) { 
  animation-delay: 0.6s, 4s; 
}
.dancing-letter:nth-child(6) { 
  animation-delay: 0.75s, 5s; 
}

@keyframes gentleWave {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.checkout-section {
  padding: 2rem 0 6rem;
  min-height: calc(100vh - 400px);
}

/* Layout */
.checkout-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 3rem;
  max-width: 1100px;
  margin: 0 auto;
}

/* Order Summary (Left) */
.order-summary {
  position: sticky;
  top: 100px;
  height: fit-content;
}

.order-summary-inner {
  background: #ffffff;
  border-radius: 1.5rem;
  padding: 2rem;
  border: 1px solid rgba(200, 158, 138, 0.2);
  box-shadow: 0 20px 50px rgba(42, 38, 35, 0.08);
}

.order-summary h2 {
  margin: 0 0 1.5rem;
  font-size: 1.3rem;
  font-weight: 600;
}

/* Plan Badge */
.plan-badge {
  background: linear-gradient(135deg, #f8f6f4 0%, #f0ebe6 100%);
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(200, 158, 138, 0.2);
  position: relative;
}

.plan-badge-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.plan-badge-name {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-main);
}

/* Pro featured badge */
.plan-badge-featured {
  background: linear-gradient(135deg, #2a2623 0%, #1a1816 100%);
  border-color: var(--accent-strong);
}

.plan-badge-featured .plan-badge-label,
.plan-badge-featured .plan-badge-name {
  color: #ffffff;
}

.popular-badge {
  position: absolute;
  top: -10px;
  right: 15px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(180, 123, 104, 0.35);
}

/* Elite badge */
.plan-badge-elite {
  background: linear-gradient(135deg, #f3ebe6 0%, #e9d9d2 100%);
  border-color: rgba(180, 123, 104, 0.35);
}

/* Billing Toggle */
.checkout-billing-toggle {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.billing-option {
  background: #ffffff;
  border: 2px solid rgba(200, 158, 138, 0.2);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  font-family: inherit;
}

.billing-option:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(200, 158, 138, 0.15);
}

.billing-option.active {
  border-color: var(--accent-strong);
  background: linear-gradient(135deg, #faf8f6 0%, #f9f5f1 100%);
  box-shadow: 0 4px 16px rgba(180, 123, 104, 0.2);
}

.billing-option-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.2rem;
}

.billing-option-price {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-main);
}

.billing-option-badge {
  position: absolute;
  top: -8px;
  right: 12px;
  background: var(--accent-strong);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  letter-spacing: 0.05em;
}

/* Order Total */
.order-total {
  border-top: 1px solid rgba(200, 158, 138, 0.2);
  padding-top: 1.25rem;
  margin-bottom: 1rem;
}

.order-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.order-total-row.total {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
  padding-top: 0.75rem;
  border-top: 1px solid rgba(200, 158, 138, 0.2);
  margin-top: 0.75rem;
  margin-bottom: 0;
}

.order-note {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

/* All Plans Include */
.all-plans-include {
  margin-top: 0.8rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(200, 158, 138, 0.15);
}

.all-plans-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  margin-bottom: 0.9rem;
  text-align: left;
  font-weight: 600;
}

.all-plans-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.all-plans-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.all-plans-list li:last-child {
  margin-bottom: 0;
}

.all-plans-check {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  background: rgba(200, 158, 138, 0.08);
  color: var(--accent-strong);
  margin-top: 0.15rem;
}

/* Highlight last bullet (referral benefit) */
.all-plans-list li:last-child {
  background: rgba(200, 158, 138, 0.10);
  border-left: 3px solid var(--accent-strong);
  border-radius: 6px;
  padding: 0.5rem 0.65rem 0.5rem 0.5rem;
  margin-top: 0.85rem;
  margin-bottom: 0;
  margin-left: -0.5rem; /* Pull the entire item left */
}

.all-plans-list li:last-child .all-plans-check {
  margin-top: 0.15rem;
  /* Checkmark stays in same position as others */
}

/* Checkout Form (Right) */
.checkout-form-container {
  background: #ffffff;
  border-radius: 1.5rem;
  padding: 2.5rem 2.5rem 3rem;
  border: 1px solid rgba(200, 158, 138, 0.2);
  box-shadow: 0 20px 50px rgba(42, 38, 35, 0.08);
}

.checkout-header {
  margin-bottom: 2.5rem;
}

.checkout-header h1 {
  margin: 0 0 0.5rem;
  font-size: 1.8rem;
  font-weight: 700;
}

.checkout-header p {
  margin: 0;
  font-size: 1rem;
  color: var(--text-muted);
}

/* Form Styles */
.checkout-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.5rem;
}

.form-input {
  padding: 0.9rem 1.1rem;
  border: 2px solid rgba(200, 158, 138, 0.25);
  border-radius: 0.65rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text-main);
  background: #ffffff;
  transition: all 0.2s ease;
  outline: none;
}

.form-input::placeholder {
  color: var(--text-muted);
}

.form-input:focus {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px rgba(180, 123, 104, 0.1);
}

/* Stripe Card Element */
.stripe-card-element {
  padding: 0.9rem 1.1rem;
  border: 2px solid rgba(200, 158, 138, 0.25);
  border-radius: 0.65rem;
  background: #ffffff;
  transition: all 0.2s ease;
}

.stripe-card-element.StripeElement--focus {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px rgba(180, 123, 104, 0.1);
}

.form-error {
  color: #e63946;
  font-size: 0.85rem;
  margin-top: 0.5rem;
  min-height: 1.2rem;
}


/* Form Validation States */
.form-input.error,
.form-input:invalid:not(:placeholder-shown) {
  border-color: #e63946;
}

.form-input.success {
  border-color: #2a9d5c;
}

.form-input.error:focus {
  border-color: #e63946;
  box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.1);
}

/* Field Error Message */
.field-error {
  display: none;
  color: #e63946;
  font-size: 0.8rem;
  margin-top: 0.4rem;
  line-height: 1.4;
}

.field-error.visible {
  display: block;
  animation: errorFadeIn 0.2s ease;
}

@keyframes errorFadeIn {
  from { 
    opacity: 0; 
    transform: translateY(-4px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* Password Requirements — minimal, premium inline style */
.password-requirements {
  margin-top: -0.5rem;
  margin-bottom: 1rem;
  padding-top: 0.6rem;
  border-top: 1px dashed rgba(200, 158, 138, 0.35);
  background: transparent;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.password-requirements p {
  margin: 0 0 0.35rem;
  font-weight: 500;
  color: rgba(42, 38, 35, 0.8);
  font-size: 0.8rem;    /*font size of password must contain*/
  letter-spacing: 0.02em;
}

/* Inline rules */
.password-requirements ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
}

.password-requirements li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;  /*font size of requirements for password must contain*/
  color: rgba(42, 38, 35, 0.55);
  transition: color 0.18s ease;
}

/* faint hollow dot */
.password-requirements li::before {
  content: "○";
  font-size: 0.65rem;
  color: rgba(180, 123, 104, 0.65);
}

/* success state — simple, classy */
.password-requirements li.valid {
  color: #2a9d5c;
}

.password-requirements li.valid::before {
  content: "✓";
  color: #2a9d5c;
}


/* Password Input Wrapper */
.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-wrapper .form-input {
  width: 100%;
  padding-right: 3rem;
}

.password-toggle {
  position: absolute;
  right: 0.75rem;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.password-toggle:hover {
  color: var(--text-main);
}

.password-toggle svg {
  width: 20px;
  height: 20px;
}

/* Terms Checkbox Error State */
.terms-checkbox-label.error .terms-checkbox {
  border-color: #e63946;
}

.terms-checkbox-label.error .terms-text {
  color: var(--text-muted); /* Keep original color, don't turn red */
}

.terms-error {
  display: none;
  color: #e63946;
  font-size: 0.8rem;
  margin-top: 0.4rem;
}

.terms-error.visible {
  display: block;
}










/* Submit Button */
.checkout-submit {
  width: 100%;
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
  padding: 1.1rem 2rem;
  font-size: 1.05rem;
  position: relative;
}

.checkout-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.spinner {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spinner 0.6s linear infinite;
}

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

.hidden {
  display: none;
}

/* Footer Note */
.checkout-footer-note {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.checkout-footer-note a {
  color: var(--accent-strong);
  text-decoration: none;
}

.checkout-footer-note a:hover {
  text-decoration: underline;
}

/* Terms Agreement Checkbox */
.checkout-terms-agreement {
  margin-top: 1.5rem;
  margin-bottom: 0;
}

.terms-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.terms-checkbox {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 0.15rem;
  border: 2px solid rgba(200, 158, 138, 0.3);
  border-radius: 4px;
  cursor: pointer;
  accent-color: var(--accent-strong);
}

.terms-checkbox:focus {
  outline: 2px solid rgba(180, 123, 104, 0.3);
  outline-offset: 2px;
}

.terms-text {
  flex: 1;
}

.terms-text a {
  color: var(--accent-strong);
  text-decoration: none;
}

.terms-text a:hover {
  text-decoration: underline;
}

/* Security Badges */
.security-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(200, 158, 138, 0.15);
}

.security-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.security-badge svg {
  color: var(--accent-strong);
}


/*hide subtotal, it is redundant for this type of checkout page*/
.order-total-row:not(.total) {
  display: none !important;
}

/* Remove divider when subtotal is hidden */
.order-total {
  border-top: 1px solid rgba(0,0,0,0.06);
  margin-top: 0.4rem !important;
  padding-top: 0.4rem !important;
}

.order-total-row {
  border-top: none !important;
}

/* Optional: tighten the Total row slightly too */
.order-total-row.total {
  padding-top: 0.25rem !important;
  padding-bottom: 0.35rem !important;
}








/* Responsive */
@media (max-width: 1024px) {
  .checkout-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .order-summary {
    position: static;
    order: 2;
  }

  .checkout-form-container {
    order: 1;
  }
}

@media (max-width: 640px) {
  .checkout-section {
    padding: 2rem 0 4rem;
  }

  .checkout-dancing-wordmark {
    font-size: 1.5rem;
    padding: 2rem 0 1.2rem;
    gap: 0.25rem;
  }

  .order-summary-inner,
  .checkout-form-container {
    padding: 1.5rem;
  }

  .checkout-header h1 {
    font-size: 1.5rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .security-badges {
    flex-direction: column;
    gap: 0.75rem;
  }
}











/* ========================================
   QUIZ PAGE STYLES - COMPLETE WORKING VERSION on styles.css
   ======================================== */

.quiz-page {
  background: #faf8f6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Quiz header – matches main nav but logo is centered */
.quiz-header {
  background: #ffffff;  /* same white bar as main header */
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.quiz-header .header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;   /* ⬅ center the logo row */
}

/* Remove the auto margin that normally pushes nav to the right */
.quiz-header .brand {
  margin-right: 0;
}

.quiz-section {
  padding: 4rem 0 6rem;
  flex: 1;
}

.quiz-page .site-footer {
  margin-top: auto;
}

.quiz-container {
  max-width: 600px;
  margin: 0 auto;
}

/* Progress Bar */
.quiz-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(200, 158, 138, 0.15);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #c89e8a 0%, #b47b68 100%);
  border-radius: 999px;
  transition: width 0.4s ease;
  width: 16.66%;
}

.quiz-progress-text {
  text-align: center;
  font-size: 0.85rem;
  color: #7a746f;
  margin-bottom: 2.5rem;
  font-weight: 500;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Quiz Card */
.quiz-card {
  background: #ffffff;
  border-radius: 1.5rem;
  padding: 3rem 2.5rem;
  border: 1px solid rgba(200, 158, 138, 0.2);
  box-shadow: 0 20px 50px rgba(42, 38, 35, 0.08);
  min-height: 500px;
  max-width: 100%;
  margin: 0 auto;
  padding: 2.25rem 2rem;    /* reduce padding */
  min-height: 440px;        /* less intimidating height */
  border-radius: 1.25rem;   /* slightly softer */
}

/* Quiz Questions */
.quiz-question {
  display: none;
}

.quiz-question.active {
  display: block;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from { 
    opacity: 0; 
    transform: translateY(10px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

.quiz-question-title {
  font-family: "Playfair Display", serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: #2a2623;
  margin: 0 0 0.75rem;
  line-height: 1.3;
}

.quiz-question-subtitle {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  color: #7a746f;
  margin: 0 0 2.5rem;
  line-height: 1.5;
}

/* Quiz Options */
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: #ffffff;
  border: 2px solid rgba(200, 158, 138, 0.25);
  border-radius: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  color: #2a2623;
  font-weight: 500;
  width: 100%;
}

.quiz-option:hover {
  border-color: #b47b68;
  background: rgba(200, 158, 138, 0.03);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(200, 158, 138, 0.15);
}

.option-icon {
  font-size: 1rem;
  flex-shrink: 0;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
  font-weight: normal;
  font-style: normal;
}

.option-text {
  flex: 1;
  line-height: 1.4;
}

/* Quiz option icons – smaller and tidy */
.quiz-page .option-icon,
.quiz-page .option-icon img {
  width: 25px;
  height: 25px;
}

.quiz-page .quiz-option {
  gap: 0.75rem; /* bring text a bit closer to the icon */
}


/* Back Button */
.quiz-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  background: transparent;
  border: 2px solid rgba(200, 158, 138, 0.25);
  border-radius: 0.75rem;
  color: #2a2623;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.quiz-back-btn:hover {
  border-color: #b47b68;
  background: rgba(200, 158, 138, 0.05);
}


/* ========================================
   EMAIL FORM - NUCLEAR OVERRIDE
   ======================================== */

form#email-form,
form.quiz-email-form,
.quiz-email-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
  max-width: 450px !important;
  margin: 0 auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 1 !important;
}

input#quiz-email,
input.quiz-email-input,
.quiz-email-input {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: 1.1rem 1.5rem !important;
  border: 2px solid rgba(200, 158, 138, 0.25) !important;
  border-radius: 0.75rem !important;
  font-size: 1.05rem !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: #2a2623 !important;
  background: #ffffff !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  outline: none !important;
  height: auto !important;
  min-height: 50px !important;
  position: relative !important;
}

input#quiz-email::placeholder,
input.quiz-email-input::placeholder,
.quiz-email-input::placeholder {
  color: #7a746f !important;
  opacity: 1 !important;
}

input#quiz-email:focus,
input.quiz-email-input:focus,
.quiz-email-input:focus {
  border-color: #b47b68 !important;
  box-shadow: 0 0 0 4px rgba(180, 123, 104, 0.1) !important;
}

button.quiz-submit,
.quiz-submit {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 1.2rem 2rem !important;
  font-size: 1.05rem !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 600 !important;
  background: #b47b68 !important;
  color: white !important;
  border: none !important;
  border-radius: 0.75rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  height: auto !important;
  min-height: 50px !important;
  text-align: center !important;
  position: relative !important;
}

button.quiz-submit:hover,
.quiz-submit:hover {
  background: #a66b58 !important;
  transform: translateY(-1px) !important;
}

button.quiz-submit:disabled,
.quiz-submit:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

p.email-terms-note,
.email-terms-note {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important; 
  text-align: center !important;
  font-size: 0.8rem !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: #7a746f !important;
  margin: 1rem 0 0 !important;
  line-height: 1.5 !important;
  position: relative !important;
}

p.email-terms-note a,
.email-terms-note a {
  color: #b47b68 !important;
  text-decoration: none !important;
}

p.email-terms-note a:hover,
.email-terms-note a:hover {
  text-decoration: underline !important;
}

/* ========================================
   QUIZ RESULTS PAGE STYLES
   Replace your existing results styles with this
   ======================================== */

.results-wrapper {
  max-width: 400px;
  margin: 0 auto;
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Header */
.results-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.results-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(145deg, #c89e8a 0%, #b47b68 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(180, 123, 104, 0.25);
}

.results-icon svg {
  width: 32px;
  height: 32px;
  stroke: white;
  stroke-width: 3;
  fill: none;
}

.results-title {
  font-family: "Playfair Display", serif;
  font-size: 2.25rem;
  font-weight: 600;
  color: #2a2623;
  margin: 0 0 0.5rem;
  text-align: center;
}

.results-subtitle {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  color: #7a746f;
  margin: 0;
  text-align: center;
}

/* Card */
.results-card {
  background: #ffffff;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(200, 158, 138, 0.15);
  box-shadow: 0 4px 6px rgba(42, 38, 35, 0.02), 0 12px 40px rgba(42, 38, 35, 0.06);
}

/* Badge */
.results-badge {
  padding: 1.5rem 2rem;
  text-align: center;
  background: linear-gradient(135deg, #f8f6f4 0%, #f0ebe6 100%);
}

.results-badge.pro {
  background: linear-gradient(135deg, #2a2623 0%, #1a1816 100%);
}

.results-badge.elite {
  background: linear-gradient(145deg, #f7ede8 0%, #eeddd4 50%, #e5cfc4 100%);
}

.results-badge-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #b47b68;
  margin-bottom: 0.35rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: center;
}

.results-badge.pro .results-badge-label {
  color: #c89e8a;
}

.results-badge-name {
  font-family: "Playfair Display", serif;
  font-size: 2rem;
  font-weight: 600;
  color: #2a2623;
  margin: 0;
  text-align: center;
}

.results-badge.pro .results-badge-name {
  color: #ffffff;
}

/* Body */
.results-body {
  padding: 1.5rem 2rem 2rem;
}

.results-description {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #7a746f;
  margin: 0 0 1.5rem 0;
  text-align: center;
}

/* Price */
.results-price {
  text-align: center;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(200, 158, 138, 0.12);
}

.results-price-amount {
  font-family: "Playfair Display", serif;
  font-size: 2.75rem;
  font-weight: 600;
  color: #2a2623;
  letter-spacing: -0.02em;
}

.results-price-period {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: #7a746f;
}

/* Features */
.results-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  display: flex;
  flex-direction: column;
  align-items: left;
  gap: 0.6rem;
}

.results-features li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.9rem;
  color: #2a2623;
}

.results-check {
  width: 20px;
  height: 20px;
  min-width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.results-check svg {
  width: 14px;
  height: 14px;
  stroke: #b47b68;
  stroke-width: 2;
  fill: none;
}

/* Buttons */
.results-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.results-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 81%;
  padding: 1rem 2rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  background: #b47b68;
  color: white;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.results-btn-primary:hover {
  background: #a66b58;
}

.results-btn-primary svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.results-btn-secondary {
  display: block;
  width: 100%;
  padding: 0.9rem 2rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  background: transparent;
  color: #2a2623;
  text-decoration: none;
  text-align: center;
  border-radius: 0.5rem;
  border: 1px solid rgba(200, 158, 138, 0.25);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.results-btn-secondary:hover {
  background: rgba(200, 158, 138, 0.04);
  border-color: #c89e8a;
}

/* Footer Note */
.results-note {
  text-align: center;
  margin-top: 1.5rem;
  padding: 0.75rem;
}

.results-note p {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.8rem;
  color: #7a746f;
  margin: 0;
  text-align: center;
}

.results-note strong {
  color: #2a2623;
  font-weight: 600;
}






/* =============================================
   HELP CENTER – PREMIUM GADURA STYLE
   ============================================= */

.help-center-page main {
  background: var(--bg);
}

/* ---------- HERO ---------- */

.help-hero {
  padding: 5rem 0 4rem;
  text-align: center;
  background:
    radial-gradient(circle at top, #f5e6dd 0%, #ffffff 55%, var(--bg) 100%);
}

.help-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(180, 123, 104, 0.2);
  background: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.5rem;
}

.help-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--accent-strong);
}

.help-badge-icon svg {
  width: 16px;
  height: 16px;
}

.help-badge span {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.help-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 1rem;
}

.help-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-main);
  margin: 0 0 1rem;
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.help-subtitle {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto 2rem;
  line-height: 1.7;
}

.help-chat-link {
  color: var(--accent-strong);
  font-weight: 500;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: inherit;
}

.help-chat-link:hover {
  color: #a36b5a;
}

/* Search */
.help-search-wrapper {
  max-width: 540px;
  margin: 0 auto;
  position: relative;
}

.help-search-icon {
  position: absolute;
  left: 1.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  pointer-events: none;
}

.help-search-input {
  width: 100%;
  padding: 1.1rem 1.5rem 1.1rem 3.5rem;
  font-size: 1rem;
  border-radius: 999px;
  border: 1.5px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
  color: var(--text-main);
  outline: none;
  box-shadow: 0 14px 40px rgba(42, 38, 35, 0.1);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.help-search-input::placeholder {
  color: var(--text-muted);
}

.help-search-input:focus {
  border-color: var(--accent-strong);
  box-shadow:
    0 0 0 4px rgba(180, 123, 104, 0.14),
    0 18px 52px rgba(42, 38, 35, 0.14);
  transform: translateY(-1px);
}

/* ---------- QUICK HELP CARDS ---------- */

.help-quick-section {
  padding: 0 0 3rem;
  margin-top: -1.5rem;
  position: relative;
  z-index: 10;
}

.help-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 1000px;
  margin: 0 auto;
}

.help-quick-card {
  background: #ffffff;
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem;
  text-align: left;
  text-decoration: none;
  border: 1px solid rgba(15, 23, 42, 0.05);
  box-shadow: 0 12px 36px rgba(42, 38, 35, 0.09);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease,
    background 0.2s ease;
}

.help-quick-card.highlight {
  background: linear-gradient(135deg, #fef7f4 0%, #faf4ef 100%);
  border-color: rgba(180, 123, 104, 0.25);
  box-shadow: 0 16px 44px rgba(180, 123, 104, 0.2);
}

.help-quick-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 50px rgba(42, 38, 35, 0.14);
  border-color: rgba(180, 123, 104, 0.3);
}

.help-quick-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(180, 123, 104, 0.1);
  color: var(--accent-strong);
  margin-bottom: 0.25rem;
}

.help-quick-icon svg {
  width: 20px;
  height: 20px;
}

.help-quick-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-main);
  margin: 0;
}

.help-quick-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.55;
}

/* ---------- FAQ SECTION ---------- */

.help-faq-section {
  padding: 2rem 0 5rem;
}

.help-faq-container {
  max-width: 900px;
  margin: 0 auto;
}

/* Category tabs */
.help-categories-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: 2.5rem;
}

.help-category-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  font-size: 0.82rem;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 6px 16px rgba(23, 15, 10, 0.06);
}

.help-category-tab .tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.help-category-tab .tab-icon svg {
  width: 14px;
  height: 14px;
}

.help-category-tab .tab-count {
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
}

.help-category-tab:hover {
  border-color: rgba(180, 123, 104, 0.4);
  color: var(--text-main);
  box-shadow: 0 8px 22px rgba(42, 38, 35, 0.09);
}

.help-category-tab.active {
  background: rgba(180, 123, 104, 0.1);
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}

.help-category-tab.active .tab-count {
  background: rgba(180, 123, 104, 0.15);
}

/* Search result info */
.help-search-info {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  border-radius: 0.75rem;
  background: rgba(180, 123, 104, 0.08);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.help-search-info.visible {
  display: flex;
}

.help-search-info span {
  color: var(--text-muted);
}

.help-search-clear {
  border: none;
  background: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-strong);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* FAQ list */
.help-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.help-faq-item {
  background: #ffffff;
  border-radius: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.06);
  overflow: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 10px 28px rgba(23, 15, 10, 0.05);
}

.help-faq-item:hover {
  border-color: rgba(180, 123, 104, 0.25);
}

.help-faq-item.open {
  border-color: rgba(180, 123, 104, 0.35);
  box-shadow: 0 12px 36px rgba(42, 38, 35, 0.1);
}

.help-faq-question {
  width: 100%;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  text-align: left;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

.help-faq-question-content {
  flex: 1;
}

.help-faq-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}

.help-faq-category-badge svg {
  width: 12px;
  height: 12px;
}

.help-faq-question-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.5;
}

.help-faq-toggle {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.help-faq-toggle svg {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.help-faq-item.open .help-faq-toggle {
  background: rgba(180, 123, 104, 0.1);
}

.help-faq-item.open .help-faq-toggle svg {
  transform: rotate(180deg);
  color: var(--accent-strong);
}

.help-faq-answer {
  display: none;
  padding: 0 1.5rem 1.5rem;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.help-faq-item.open .help-faq-answer {
  display: block;
}

.help-faq-answer-text {
  padding-top: 1.25rem;
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.75;
}

/* Empty state */
.help-faq-empty {
  display: none;
  text-align: center;
  padding: 4rem 2rem;
  border-radius: 1.25rem;
  border: 1px dashed rgba(15, 23, 42, 0.1);
  background: #ffffff;
}

.help-faq-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  margin-bottom: 1.25rem;
  color: var(--text-muted);
}

.help-faq-empty-icon svg {
  width: 28px;
  height: 28px;
}

.help-faq-empty h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--text-main);
}

.help-faq-empty p {
  margin: 0 0 1.5rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.help-faq-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.75rem;
  border-radius: 999px;
  border: none;
  background: var(--accent-strong);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.help-faq-empty-btn:hover {
  background: #a36b5a;
  box-shadow: 0 10px 30px rgba(180, 123, 104, 0.3);
}

.help-faq-empty-btn svg {
  width: 16px;
  height: 16px;
}

/* ---------- CTA SECTION ---------- */

.help-cta-section {
  background: #1f1814;
  padding: 5rem 0;
}

.help-cta-container {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.help-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  margin-bottom: 1.25rem;
  color: rgba(255, 255, 255, 0.8);
}

.help-cta-icon svg {
  width: 28px;
  height: 28px;
}

.help-cta-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 1rem;
}

.help-cta-text {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 2rem;
  line-height: 1.7;
}

.help-cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.help-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.75rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.help-cta-btn svg {
  width: 18px;
  height: 18px;
}

.help-cta-btn.primary {
  background: var(--accent-strong);
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(180, 123, 104, 0.35);
}

.help-cta-btn.primary:hover {
  background: #c9887a;
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(180, 123, 104, 0.4);
}

.help-cta-btn.secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.help-cta-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 900px) {
  .help-quick-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .help-quick-card:last-child {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .help-hero {
    padding: 3.5rem 0 3rem;
  }

  .help-title {
    font-size: 2rem;
  }

  .help-quick-section {
    margin-top: -1rem;
  }

  .help-quick-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .help-quick-card:last-child {
    grid-column: span 1;
  }

  .help-faq-section {
    padding: 1.5rem 0 4rem;
  }

  .help-categories-tabs {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    margin: 0 -1rem 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .help-categories-tabs::-webkit-scrollbar {
    display: none;
  }

  .help-category-tab {
    flex-shrink: 0;
  }

  .help-faq-question {
    padding: 1rem 1.25rem;
  }

  .help-faq-answer {
    padding: 0 1.25rem 1.25rem;
  }

  .help-cta-section {
    padding: 4rem 0;
  }

  .help-cta-buttons {
    flex-direction: column;
  }

  .help-cta-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .help-title {
    font-size: 1.75rem;
  }

  .help-search-input {
    padding: 1rem 1rem 1rem 3rem;
    font-size: 0.95rem;
  }

  .help-search-icon {
    left: 1rem;
  }
}



/* =============================================
   CONTACT SUPPORT – PREMIUM GADURA STYLE
   ============================================= */

.support-contact-page main {
  background: var(--bg);
}

/* ---------- HERO ---------- */

.contact-support-hero {
  padding: 5rem 0 4rem;
  text-align: center;
  background:
    radial-gradient(circle at top, #2b1f18 0%, #1d1510 40%, #120c09 70%),
    linear-gradient(180deg, #120c09 0%, var(--bg) 72%);
  color: #ffffff;
}

.contact-support-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.75);
}

.contact-support-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(2.5rem, 5vw, 3.3rem);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}

.contact-support-subtitle {
  font-size: 1.05rem;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
}

/* ---------- MAIN PANEL ---------- */

.contact-support-section {
  padding: 0 0 4.8rem;
  margin-top: -2.4rem;
}

.contact-support-card {
  max-width: 880px;
  margin: 0 auto;
  padding: 2.1rem 2.2rem 2.4rem;
  border-radius: 1.8rem;
  background: #ffffff;
  box-shadow:
    0 26px 70px rgba(18, 11, 7, 0.32),
    0 0 0 1px rgba(15, 23, 42, 0.03);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 1.75rem;
  align-items: stretch;
  position: relative;
  overflow: hidden;
}

/* Subtle accent edge at the top of the card */
.contact-support-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border-top: 3px solid rgba(180, 123, 104, 0.6);
  pointer-events: none;
}

/* Columns */

.contact-support-column {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* Highlighted left side */
.column-primary {
  padding: 1.1rem 1.15rem 1.25rem;
  margin: -0.4rem 0 -0.4rem -0.4rem;
  border-radius: 1.4rem;
  background: radial-gradient(circle at top left, #fef9f5 0%, #f9eee6 40%, #f8f1ea 100%);
  box-shadow: 0 18px 40px rgba(180, 123, 104, 0.18);
  border: 1px solid rgba(180, 123, 104, 0.22);
}

/* Right side stays clean */
.contact-support-column:not(.column-primary) {
  padding-left: 1.25rem;
  border-left: 1px solid rgba(15, 23, 42, 0.06);
}

/* Icons + headings */

.contact-support-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(180, 123, 104, 0.12);
  color: var(--accent-strong);
  margin-bottom: 0.25rem;
}

.contact-support-icon i[data-lucide] {
  width: 20px;
  height: 20px;
}

.contact-support-heading {
  font-size: 1.16rem;
  font-weight: 600;
  color: var(--text-main);
}

.contact-support-body {
  font-size: 0.96rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* Email line */

.contact-support-email {
  font-size: 1rem;
  font-weight: 500;
  margin-top: 0.35rem;
}

.contact-support-email a {
  color: var(--accent-strong);
  text-decoration: none;
  border-bottom: 1px solid rgba(180, 123, 104, 0.4);
  padding-bottom: 1px;
}

.contact-support-email a:hover {
  border-bottom-color: rgba(180, 123, 104, 0.85);
}

/* Meta list */

.contact-support-meta {
  margin-top: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.86rem;
  color: var(--text-muted);
}

.contact-support-meta-row {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.contact-support-meta-row i[data-lucide] {
  width: 14px;
  height: 14px;
}

/* Buttons */

.contact-support-actions {
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.contact-support-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.18s ease;
}

.contact-support-btn i[data-lucide] {
  width: 17px;
  height: 17px;
}

.contact-support-btn.primary {
  background: var(--accent-strong);
  color: #ffffff;
  box-shadow: 0 14px 34px rgba(180, 123, 104, 0.46);
}

.contact-support-btn.primary:hover {
  background: #c9887a;
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(180, 123, 104, 0.52);
}

.contact-support-btn.secondary {
  background: rgba(15, 23, 42, 0.02);
  color: var(--text-main);
  border: 1px solid rgba(15, 23, 42, 0.09);
}

.contact-support-btn.secondary:hover {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.16);
}

/* Small footer text under the card */

.contact-support-footnote {
  max-width: 880px;
  margin: 1.3rem auto 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 900px) {
  .contact-support-card {
    padding: 1.7rem 1.6rem 2rem;
    grid-template-columns: 1fr;
  }

  .column-primary {
    margin: -0.2rem -0.1rem 0.5rem -0.1rem;
  }

  .contact-support-column:not(.column-primary) {
    padding-left: 0;
    border-left: none;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
  }
}

@media (max-width: 600px) {
  .contact-support-hero {
    padding: 3.5rem 0 3rem;
  }

  .contact-support-title {
    font-size: 2.1rem;
    letter-spacing: 0.08em;
  }

  .contact-support-card {
    border-radius: 1.6rem;
  }
}












/* =============================================
   LEGAL PAGES – GADURA
   ============================================= */

/* Shared base */

.legal-page main {
  background: var(--bg);
}

.legal-hero {
  padding: 4rem 0 2.5rem;
  background: #ffffff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.legal-hero .container {
  max-width: 960px;
  margin: 0 auto;
}

.legal-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.8rem;
}

.legal-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-main);
  margin: 0 0 0.8rem;
}

.legal-subtitle {
  font-size: 0.98rem;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 0 1.2rem;
  line-height: 1.7;
}

/* Generic legal content area */

.legal-content-section {
  padding: 2.5rem 0 4.5rem;
}

.legal-content {
  max-width: 960px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 1.1rem;
  border: 1px solid rgba(15, 23, 42, 0.06);
  padding: 2rem 2.25rem;
  box-shadow: 0 16px 40px rgba(23, 15, 10, 0.06);
}

/* Typography inside legal docs */

.legal-body h2,
.legal-body h3,
.legal-body h4 {
  font-family: inherit;
  font-weight: 600;
  color: var(--text-main);
  margin: 1.7rem 0 0.7rem;
}

.legal-body h2 {
  font-size: 1.25rem;
}

.legal-body h3 {
  font-size: 1.05rem;
}

.legal-body h4 {
  font-size: 0.98rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.legal-body p {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.legal-body ul,
.legal-body ol {
  margin: 0.4rem 0 1rem 1.4rem;
  padding: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.legal-body li + li {
  margin-top: 0.25rem;
}

.legal-body a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Simple inline “back to hub” link */

.legal-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  margin-bottom: 1.4rem;
  color: var(--text-muted);
  text-decoration: none;
}

.legal-back-link:hover {
  color: var(--text-main);
}

/* Legal summary box (for affiliate terms, etc.) */
.legal-summary-box {
  background: rgba(200, 158, 138, 0.1);
  border: 1px solid rgba(200, 158, 138, 0.3);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.legal-summary-box h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--accent-strong);
  font-size: 1.1rem;
}

.legal-summary-table {
  width: 100%;
  border-collapse: collapse;
}

.legal-summary-table th,
.legal-summary-table td {
  padding: 0.75rem 1rem;
  border: 1px solid #e5e5e5;
  font-size: 0.9rem;
  text-align: left;
}

.legal-summary-table th {
  background: #f8f8f8;
  font-weight: 600;
  color: var(--text-main);
  width: 35%;
}

.legal-summary-table td {
  color: var(--text-muted);
}

.legal-body code {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.85em;
  font-family: monospace;
}

/* ---------- LEGAL HUB (BALANCED STYLE) ---------- */

.legal-hub-page main {
  background: #f8f6f4;
}

/* Hero */
.legal-hub-hero {
  padding: 4rem 0 2.6rem;
  background: #ffffff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.legal-hub-hero .container {
  max-width: 960px;
  margin: 0 auto;
}

.legal-title {
  margin: 0.2rem 0 0.6rem;
  font-size: clamp(2.2rem, 4vw, 2.7rem);
  font-weight: 700;
  color: #0f172a;
}

.legal-thanks {
  margin: 0 0 0.45rem;
  font-size: 1.02rem;
  font-weight: 500;
  color: #0f172a;
}

.legal-subtitle {
  max-width: 700px;
  font-size: 0.98rem;
  color: rgba(15, 23, 42, 0.7);
  line-height: 1.7;
}

/* Grid */
.legal-hub-grid-section {
  padding: 3.6rem 0 4.2rem;   /*adjust first entry for gap between cards and hero*/
}

.legal-hub-grid {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
}

/* Cards */
.legal-hub-card {
  background: #ffffff;
  border-radius: 0.9rem;
  padding: 1.25rem 1.3rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f172a;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.legal-hub-card-title {
  font-size: 0.95rem;
  font-weight: 600;
}

.legal-hub-card:hover,
.legal-hub-card:focus-visible {
  border-color: rgba(180, 123, 104, 0.55);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(23, 15, 10, 0.06);
}


/* Legal meta text */

.legal-meta {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(15, 23, 42, 0.65);
  padding-top: 2rem;
  padding-bottom: 5rem;       /*gap between meta note and footer*/
}

/* Make the link brown + subtle hover */
.legal-meta a {
  color: var(--accent-strong);
  font-weight: 500;
  text-decoration: none;
}

.legal-meta a:hover {
  text-decoration: underline;
}



/* Responsive */
@media (max-width: 900px) {
  .legal-hub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .legal-hub-grid {
    grid-template-columns: 1fr;
  }

  .legal-hub-grid-section {
  padding: 2rem 0 2.2rem;   /*adjust first entry for gap between cards and hero*/
}

.legal-meta {
  padding-bottom: 2rem;       /*gap between meta note and footer*/
}

}





/* =============================================
   LEARN & GROW – CREATOR INSIGHTS
   ============================================= */

.creator-insights-main {
  background: var(--bg);
}

/* ---------- Hero (dark themed) ---------- */

.page-hero {
  padding: 3.8rem 0 3.1rem;
  background:
    radial-gradient(circle at top left, rgba(200, 158, 138, 0.35), transparent 55%),
    #0b080e;
  border-bottom: 1px solid rgba(0, 0, 0, 0.45);
}

.page-hero-tight {
  padding-bottom: 2.4rem;
}

.page-hero-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.8rem;
}

.page-hero .eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(248, 242, 236, 0.72);
  margin: 0 0 0.7rem;
}

.page-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(2.3rem, 4vw, 2.8rem);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin: 0 0 0.9rem;
  color: #ffffff;
}

.page-subtitle {
  margin: 0 0 1.5rem;
  font-size: 1.02rem;
  max-width: 520px;
  line-height: 1.7;
  color: rgba(245, 238, 232, 0.85);
}

.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 1.4rem;
}

.page-hero-footnote {
  margin: 0;
  font-size: 0.86rem;
  color: rgba(235, 226, 219, 0.8);
}

/* Buttons on this page reuse your existing button styles */

.btn.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #ffffff;
  border-radius: 999px;
  padding: 0.85rem 1.55rem;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.92rem;
  box-shadow: 0 10px 26px rgba(180, 123, 104, 0.35);
  text-decoration: none;
}

.btn.btn-primary:hover {
  box-shadow: 0 14px 36px rgba(180, 123, 104, 0.45);
}

.btn.btn-ghost {
  background-color: #ffffff;
  color: var(--text-main);
  border-radius: 999px;
  padding: 0.85rem 1.55rem;
  border: 1px solid var(--border-subtle);
  font-weight: 500;
  font-size: 0.92rem;
  text-decoration: none;
}

.btn.btn-ghost:hover {
  border-color: var(--accent);
}

/* Make ghost button work better on the dark hero */
.creator-insights-main .page-hero .btn.btn-ghost {
  background-color: transparent;
  color: #f7f3ef;
  border-color: rgba(245, 234, 225, 0.4);
}

/* ---------- Shared section header ---------- */

.section {
  padding: 3.1rem 0 3.4rem;
}

.section-light {
  background: #faf4ef;
  border-top: 1px solid rgba(15, 23, 42, 0.03);
  border-bottom: 1px solid rgba(15, 23, 42, 0.03);
}

.section-alt {
  background: #ffffff;
}

.section-header {
  max-width: 840px;
  margin: 0 auto 2.2rem;
  padding: 0 1.8rem;
  text-align: center;
}

.section-eyebrow {
  margin-bottom: 0.6rem;
}

.section-title {
  margin: 0 0 0.5rem;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.section-intro {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ---------- Foundation cards ---------- */

.card-grid {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.8rem;
  display: grid;
  gap: 1.6rem;
}

.card-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.insight-card {
  position: relative;
  padding: 1.7rem 1.55rem 1.6rem;
  border-radius: 1.3rem;
  background: linear-gradient(180deg, #ffffff, #faf7f4);
  border: 1px solid rgba(200, 158, 138, 0.22);
  box-shadow: 0 18px 40px rgba(42, 38, 35, 0.08);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.insight-card:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 158, 138, 0.7);
  background: linear-gradient(180deg, #ffffff, #f6eee8);
  box-shadow: 0 26px 60px rgba(42, 38, 35, 0.16);
}

.insight-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.28rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(200, 158, 138, 0.6);
  background: rgba(200, 158, 138, 0.12);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6c5141;
  margin-bottom: 0.95rem;
}

.insight-title {
  margin: 0 0 0.5rem;
  font-size: 1.03rem;
}

.insight-excerpt {
  margin: 0 0 0.8rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.insight-meta {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ---------- Signals from the field ---------- */

.creator-signals {
  padding-top: 3.3rem;
}

.insight-split {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.8rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
}

.insight-split-block {
  position: relative;
  padding: 1.6rem 1.5rem 1.5rem;
  border-radius: 1.2rem;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 16px 38px rgba(23, 15, 10, 0.08);
}

.insight-split-block::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border-left: 3px solid rgba(200, 158, 138, 0.9);
  opacity: 0.8;
  pointer-events: none;
}

.insight-split-title {
  margin: 0 0 0.55rem;
  font-size: 1rem;
}

.insight-split-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-muted);
}

/* ---------- Working notes ---------- */

.section-notes {
  background: #faf8f6;
}

.notes-grid {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.8rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.note-card {
  border-radius: 1.15rem;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 18px 40px rgba(23, 15, 10, 0.08);
  padding: 1.6rem 1.5rem 1.6rem;
}

.note-title {
  margin: 0 0 0.55rem;
  font-size: 0.98rem;
}

.note-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ---------- Newsletter block ---------- */

.section-accent {
  padding: 3.4rem 0 3.8rem;
  background:
    radial-gradient(circle at top left, rgba(200, 158, 138, 0.15) 0%, transparent 55%),
    #f7f2ee;
  border-top: 1px solid rgba(15, 23, 42, 0.05);
}

.newsletter-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.8rem;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 1.9rem;
  align-items: center;
}

.newsletter-copy .section-title {
  font-size: 1.5rem;
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  align-items: flex-start;
}

.newsletter-form .input {
  width: 100%;
  padding: 0.95rem 1.1rem;
  border-radius: 0.8rem;
  border: 2px solid rgba(200, 158, 138, 0.38);
  background: #ffffff;
  font-size: 0.96rem;
  font-family: inherit;
  color: var(--text-main);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.newsletter-form .input::placeholder {
  color: var(--text-muted);
}

.newsletter-form .input:focus {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px rgba(180, 123, 104, 0.15);
  background: #ffffff;
}

.newsletter-form .btn {
  min-width: 12rem;
}

.newsletter-footnote {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ---------- Responsive tweaks ---------- */

@media (max-width: 960px) {
  .card-grid-3,
  .insight-split,
  .notes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-header {
    text-align: left;
  }
}

@media (max-width: 720px) {
  .page-hero {
    padding: 3.2rem 0 2.4rem;
  }

  .page-title {
    font-size: 2.05rem;
    letter-spacing: 0.18em;
  }

  .card-grid-3,
  .insight-split,
  .notes-grid {
    grid-template-columns: 1fr;
  }

  .newsletter-inner {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .newsletter-form {
    width: 100%;
  }

  .newsletter-form .input {
    width: 100%;
  }
}

/* ---------------------------------------------
   Creator Insights – hero email signup
   --------------------------------------------- */

.hero-signup {
  margin-top: 0.4rem;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  color: rgba(235, 226, 219, 0.8);
  font-size: 0.8rem;
}

.hero-signup-row {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
}

.hero-input {
  flex: 1 1 auto;
  padding: 0.9rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(246, 232, 222, 0.55);
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.96rem;
  font-family: inherit;
  color: #f7f3ef;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.hero-input::placeholder {
  color: rgba(239, 226, 217, 0.8);
}

.hero-input:focus {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px rgba(180, 123, 104, 0.45);
  background: rgba(10, 7, 10, 0.96);
}

.hero-signup .btn.btn-primary {
  white-space: nowrap;
  padding-inline: 1.7rem;
}

.hero-signup-note {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(235, 226, 219, 0.8);
}

.hero-text-link {
  font-size: 0.84rem;
  color: #f7e0d0;
  text-decoration: none;
}

.hero-text-link:hover {
  text-decoration: underline;
}

/* Mobile adjustments */

@media (max-width: 640px) {
  .hero-signup-row {
    flex-direction: column;
  }

  .hero-signup .btn.btn-primary {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}





/* =============================================
   LEARN & GROW – Guides
   ============================================= */

.guides-main {
  background: radial-gradient(circle at top left,
    rgba(200, 158, 138, 0.11),
    transparent 55%),
    #0d0b10;
  color: #f8f5f3;
}

/* ---------- Hero ---------- */

.guides-hero {
  padding: 3.6rem 0 3.2rem;
}

.guides-hero-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 1.8rem;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 2.4rem;
  align-items: start;
}

.guides-hero-copy .eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.7rem;
}

.guides-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(2.2rem, 4vw, 2.7rem);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin: 0 0 0.9rem;
}

.guides-subtitle {
  margin: 0 0 1.4rem;
  font-size: 1.02rem;
  max-width: 520px;
  line-height: 1.7;
  color: rgba(248, 245, 243, 0.78);
}

.guides-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.guides-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(246, 232, 222, 0.36);
  background: rgba(7, 6, 8, 0.5);
  font-size: 0.78rem;
  color: rgba(249, 245, 240, 0.9);
}

.guides-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
}

/* Hero aside */

.guides-hero-aside {
  border-radius: 1.5rem;
  padding: 1.8rem 1.7rem 1.7rem;
  background: radial-gradient(circle at top left,
      rgba(255, 255, 255, 0.16),
      transparent 60%),
    rgba(17, 12, 18, 0.96);
  border: 1px solid rgba(246, 232, 222, 0.22);
  box-shadow: 0 26px 60px rgba(3, 2, 4, 0.75);
}

.guides-aside-title {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
}

.guides-aside-text {
  margin: 0 0 1.15rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(248, 245, 243, 0.8);
}

.guides-hero-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.guides-hero-input {
  width: 100%;
  padding: 0.9rem 1.1rem;
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(246, 232, 222, 0.35);
  color: #f8f5f3;
  font-size: 0.94rem;
  font-family: inherit;
  color: #f8f5f3;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  box-sizing: border-box;
}

.guides-hero-input:hover {
  background: rgba(255, 255, 255, 0.09);
}

.guides-hero-input::placeholder {
  color: rgba(240, 228, 220, 0.7);
}

.guides-hero-input:focus {
 background: rgba(0, 0, 0, 0.25);
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px rgba(180, 123, 104, 0.35);
}

.guides-hero-btn {
  width: 100%;
  justify-content: center;
}

.guides-hero-footnote {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(243, 235, 229, 0.75);
}

/* Use existing button styles but adjust for dark background */

.guides-hero .btn.btn-primary {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75);
}

/* ---------- Shared section header on dark/light ---------- */

.guides-section-dark {
  background: radial-gradient(circle at top left,
      rgba(255, 255, 255, 0.03),
      transparent 60%),
    #080608;
  color: #f4f0ec;
  border-top: 1px solid rgba(248, 245, 242, 0.08);
  border-bottom: 1px solid rgba(248, 245, 242, 0.08);
}

.guides-section-light {
  background: #f7f1eb;
  color: var(--text-main);
  border-top: 1px solid rgba(15, 23, 42, 0.05);
}

.guides-section-header {
  max-width: 900px;
  margin: 0 auto 2.1rem;
  padding: 0 1.8rem;
  text-align: left;
}

.guides-section-title {
  margin: 0 0 0.5rem;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.guides-section-intro {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(244, 238, 232, 0.86);
}

/* ---------- Featured playbooks list ---------- */

.guides-list {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 1.8rem 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.guide-card {
  border-radius: 1.4rem;
  padding: 1.65rem 1.7rem 1.5rem;
  background: radial-gradient(circle at top left,
      rgba(249, 245, 240, 0.12),
      transparent 65%),
    rgba(9, 7, 12, 0.98);
  border: 1px solid rgba(244, 234, 224, 0.26);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.7);
}

.guide-card-header {
  margin-bottom: 0.95rem;
}

.guide-label {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(245, 232, 222, 0.6);
  background: rgba(8, 6, 10, 0.7);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(250, 244, 240, 0.9);
  margin-bottom: 0.75rem;
}

.guide-label-green {
  border-color: rgba(177, 220, 187, 0.7);
  color: #d9f4df;
}

.guide-label-blue {
  border-color: rgba(189, 210, 246, 0.8);
  color: #deebff;
}

.guide-title {
  margin: 0 0 0.3rem;
  font-size: 1.1rem;
}

.guide-tagline {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(244, 237, 232, 0.8);
}

.guide-steps {
  margin: 0.9rem 0 1rem 1.2rem;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(244, 237, 231, 0.9);
}

.guide-steps li + li {
  margin-top: 0.25rem;
}

.guide-card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: space-between;
  font-size: 0.82rem;
  color: rgba(241, 233, 226, 0.75);
}

.guide-meta {
  font-weight: 500;
}

/* ---------- Browse by focus ---------- */

.guides-focus-grid {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 1.8rem 0.6rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}

.focus-card {
  border-radius: 1.2rem;
  padding: 1.6rem 1.5rem 1.5rem;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(42, 35, 30, 0.12);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.focus-title {
  margin: 0 0 0.45rem;
  font-size: 1.02rem;
}

.focus-text {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.focus-list {
  margin: 0 0 0.6rem 1rem;
  padding: 0;
  list-style-type: disc;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.focus-list li + li {
  margin-top: 0.2rem;
}

.focus-meta {
  display: inline-block;
  margin-top: 0.1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .guides-hero-inner {
    grid-template-columns: 1fr;
  }

  .guides-hero-aside {
    max-width: 420px;
  }

  .guides-section-header {
    text-align: left;
  }

  .guides-focus-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .guides-main {
    background: #0d0b10;
  }

  .guides-hero {
    padding-top: 3rem;
  }

  .guides-hero-inner {
    gap: 1.8rem;
  }

  .guides-section-header,
  .guides-list,
  .guides-focus-grid {
    padding-inline: 1.4rem;
  }

  .guides-focus-grid {
    grid-template-columns: 1fr;
  }
}




/* =============================================
   LEARN & GROW – Creator stories
   ============================================= */

.stories-main {
  background:
    radial-gradient(circle at top center, #f7eee5 0%, #f3e4d9 35%, #221619 82%, #130c10 100%);
  color: var(--text-main);
}

/* MASSIVE breathing room */
.stories-hero {
  padding: 7rem 0 12rem;
}

/* Premium glass panel */
.stories-hero-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 2.6rem 2.3rem 2.3rem;
  border-radius: 1.6rem;

  background:
    radial-gradient(circle at top left,
      rgba(255, 255, 255, 0.18),
      rgba(0, 0, 0, 0) 55%
    ),
    rgba(14, 9, 14, 0.88);

  border: 1px solid rgba(255, 245, 238, 0.16);
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);

  color: #faf6f2;

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Eyebrow + title + copy */

.stories-hero-inner .eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(248, 242, 236, 0.75);
  margin: 0 0 0.8rem;
}

.stories-title {
  font-family: "Playfair Display", serif;
  letter-spacing: 0.1em;
  font-size: clamp(2rem, 3.1vw, 2.45rem);
  text-transform: uppercase;
  margin: 0 0 1.1rem;
  color: #ffffff;
}

.stories-lead {
  margin: 0 0 1.6rem;
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(250, 245, 240, 0.9);
}

/* Coming soon */

.stories-coming {
  margin: 0 0 1.45rem;
}

.stories-badge {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(246, 232, 222, 0.7);
  background: rgba(246, 232, 222, 0.08);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f6e8de;
  margin-bottom: 0.55rem;
}

.stories-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(248, 242, 236, 0.86);
}

/* Notify form */

.stories-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.35rem;
}

.stories-input {
  flex: 1 1 230px;
  padding: 0.95rem 1.15rem;
  border-radius: 999px;
  border: 1px solid rgba(246, 232, 222, 0.55);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  transition: border-color .18s, box-shadow .18s, background .18s;
}

.stories-input::placeholder {
  color: rgba(240, 228, 220, 0.8);
}

.stories-input:focus {
  border-color: var(--accent-strong);
  background: rgba(10, 7, 10, 0.98);
  box-shadow: 0 0 0 3px rgba(180, 123, 104, 0.45);
}

.stories-btn {
  flex: 0 0 auto;
  padding-inline: 1.9rem;
  border-radius: 999px;
  box-shadow: 0 18px 42px rgba(0,0,0,.7);
}

.stories-note {
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: rgba(240, 230, 224, 0.78);
  flex-basis: 100%;
}

/* Mobile */
@media (max-width: 720px) {
  .stories-hero {
    padding-top: 3rem;   /* less space above */
    padding-bottom: 3.5rem;  /* less space below */
  }

  .stories-hero-inner {
    margin-inline: 1.1rem;           /* pull it in a bit */
    padding: 1.8rem 1.5rem 1.7rem;   /* tighter card padding */
    border-radius: 1.3rem;
  }

  .stories-title {
    font-size: 1.9rem;
    letter-spacing: 0.14em;
    margin-bottom: 0.7rem;
  }

  .stories-lead {
    font-size: 0.96rem;
    margin-bottom: 1.2rem;
  }

  .stories-coming {
    margin-bottom: 1.1rem;
  }

  .stories-form {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .stories-input {
    flex: 0 0 auto;
    width: 100%;
  }

  .stories-btn {
    width: 100%;
  }

  .stories-note {
    font-size: 0.78rem;
  }
}










/* =============================================
   PLATFORM – SPHERES
   ============================================= */

.spheres-main {
  background: radial-gradient(circle at top, #151016 0%, #050307 55%, #050307 100%);
  color: #f7f3ef;
}

/* =============================================
   SPHERES HERO - LIGHT THEME
   ============================================= */

.spheres-hero {
  min-height: auto;
  padding: 3rem 0 2rem;
  display: flex;
  align-items: center;
  background: 
    radial-gradient(ellipse 100% 80% at 70% 50%, rgba(200, 158, 138, 0.15), transparent 50%),
    radial-gradient(ellipse 60% 60% at 10% 90%, rgba(180, 123, 104, 0.1), transparent 50%),
    linear-gradient(170deg, #fdfbf9 0%, #f8f4f0 50%, #f3ede7 100%);
  overflow: hidden;
  position: relative;
}

.spheres-hero__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 3rem;
  align-items: center;
}

/* Content */
.spheres-hero__content {
  position: relative;
  z-index: 10;
}

/* Spheres hero entrance animations */
@keyframes spheresFadeSlideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes spheresFadeSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes spheresSceneReveal {
  from { opacity: 0; transform: translateY(40px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.spheres-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent-strong, #b47b68);
  background: rgba(200, 158, 138, 0.15);
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  margin-bottom: 1.25rem;
  animation: spheresFadeSlideDown 0.8s ease forwards;
  opacity: 0;
}

.spheres-hero__title {
  font-size: clamp(2.8rem, 5.5vw, 4rem);
  font-weight: 800;
  line-height: 1.08;
  color: #1f1b18;
  margin: 0 0 1.25rem;
  letter-spacing: -0.02em;
  animation: spheresFadeSlideUp 0.8s ease 0.1s forwards;
  opacity: 0;
}

.spheres-hero__subtitle {
  font-size: 1rem;
  line-height: 1.7;
  color: #6b6158;
  margin: 0 0 1.5rem;
  max-width: 420px;
  animation: spheresFadeSlideUp 0.8s ease 0.2s forwards;
  opacity: 0;
}

.spheres-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2rem;
  animation: spheresFadeSlideDown 0.8s ease 0.3s forwards;
  opacity: 0;
}

.spheres-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(200, 158, 138, 0.4);
  background: rgba(200, 158, 138, 0.1);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-strong, #b47b68);
}

.spheres-hero__cta .btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 2rem;
  background: linear-gradient(135deg, var(--accent, #c89e8a) 0%, var(--accent-strong, #b47b68) 100%);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0.6rem;
  border: none;
  cursor: pointer;
  box-shadow:
    0 4px 12px rgba(180, 123, 104, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  animation: spheresFadeSlideDown 0.8s ease 0.4s forwards;
  opacity: 0;
}

.spheres-hero__cta .btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 8px 20px rgba(180, 123, 104, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.1);
  filter: brightness(1.05);
}

/* Scene */
.spheres-hero__scene {
  position: relative;
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ambient orbs */
.spheres-ambient {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.spheres-ambient--1 {
  width: 200px;
  height: 200px;
  top: -5%;
  right: -8%;
  background: 
    radial-gradient(circle at 35% 35%, rgba(255,255,255,0.8), transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(200, 158, 138, 0.25), rgba(200, 158, 138, 0.08) 50%, transparent 70%);
  filter: blur(1px);
  animation: spheresAmbient1 25s ease-in-out infinite;
}

.spheres-ambient--2 {
  width: 140px;
  height: 140px;
  bottom: 5%;
  right: 15%;
  background: 
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6), transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(180, 123, 104, 0.2), transparent 60%);
  filter: blur(0.5px);
  animation: spheresAmbient2 20s ease-in-out infinite;
}

.spheres-ambient--3 {
  width: 100px;
  height: 100px;
  top: 35%;
  left: -8%;
  background: 
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.7), transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(200, 158, 138, 0.2), transparent 60%);
  animation: spheresAmbient3 18s ease-in-out infinite;
}

@keyframes spheresAmbient1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-20px, 15px) scale(1.05); }
  66% { transform: translate(10px, -10px) scale(0.98); }
}

@keyframes spheresAmbient2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(15px, -20px); }
}

@keyframes spheresAmbient3 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(12px, 10px); }
}

/* Sphere Swarm */
.spheres-swarm {
  position: relative;
  width: 300px;
  height: 300px;
  z-index: 2;
}

.swarm-orb {
  position: absolute;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

/* Dynamic entrance animations for spheres - each comes from a different direction */
@keyframes orbEnterFromLeft {
  0% { opacity: 0; transform: translateX(-120px) rotate(-180deg) scale(0.3); }
  60% { opacity: 1; transform: translateX(10px) rotate(10deg) scale(1.05); }
  100% { opacity: 1; transform: translateX(0) rotate(0deg) scale(1); }
}

@keyframes orbEnterFromRight {
  0% { opacity: 0; transform: translateX(120px) rotate(180deg) scale(0.3); }
  60% { opacity: 1; transform: translateX(-10px) rotate(-10deg) scale(1.05); }
  100% { opacity: 1; transform: translateX(0) rotate(0deg) scale(1); }
}

@keyframes orbEnterFromTop {
  0% { opacity: 0; transform: translateY(-100px) rotate(-90deg) scale(0.4); }
  60% { opacity: 1; transform: translateY(8px) rotate(5deg) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}

@keyframes orbEnterFromBottom {
  0% { opacity: 0; transform: translateY(100px) rotate(90deg) scale(0.4); }
  60% { opacity: 1; transform: translateY(-8px) rotate(-5deg) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}

@keyframes orbEnterSpin {
  0% { opacity: 0; transform: scale(0) rotate(-360deg); }
  70% { opacity: 1; transform: scale(1.1) rotate(15deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.swarm-orb--primary {
  width: 180px;
  height: 180px;
  left: 10%;
  top: 25%;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.95), transparent 35%),
    radial-gradient(circle at 60% 120%, rgba(0, 0, 0, 0.35), transparent 70%),
    radial-gradient(circle at 32% 18%, #f4d1b7, #c07a59 60%, #4a2520 100%);
  box-shadow:
    0 20px 50px rgba(180, 100, 80, 0.35),
    0 8px 20px rgba(0, 0, 0, 0.15),
    inset 0 -5px 20px rgba(0,0,0,0.1);
  animation: orbEnterFromLeft 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both, swarmFloat1 20s ease-in-out 1.5s infinite both;
}

.swarm-orb--peach {
  width: 130px;
  height: 130px;
  left: 50%;
  top: 5%;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.9), transparent 30%),
    radial-gradient(circle at 60% 120%, rgba(0, 0, 0, 0.3), transparent 70%),
    radial-gradient(circle at 35% 20%, #f7dcc4, #d29469 55%, #5a3025 100%);
  box-shadow:
    0 15px 40px rgba(200, 130, 100, 0.3),
    0 5px 15px rgba(0, 0, 0, 0.1);
  animation: orbEnterFromTop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s both, swarmFloat2 24s ease-in-out 1.6s infinite both;
}

.swarm-orb--lavender {
  width: 110px;
  height: 110px;
  left: 5%;
  top: -5%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.95), transparent 32%),
    radial-gradient(circle at 70% 120%, rgba(0, 0, 0, 0.3), transparent 70%),
    radial-gradient(circle at 32% 18%, #fff5eb, #f0c9a8 55%, #6a4530 100%);
  box-shadow:
    0 15px 40px rgba(200, 158, 138, 0.35),
    0 5px 15px rgba(0, 0, 0, 0.1);
  animation: orbEnterSpin 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both, swarmFloat3 18s ease-in-out 1.7s infinite both;
}

.swarm-orb--small-1 {
  width: 50px;
  height: 50px;
  left: 70%;
  top: 55%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.95), transparent 32%),
    radial-gradient(circle at 60% 130%, rgba(0, 0, 0, 0.3), transparent 70%),
    radial-gradient(circle at 30% 20%, #fff9f1, #f6d5b2 55%, #6a4030 100%);
  box-shadow:
    0 8px 20px rgba(200, 150, 120, 0.3);
  animation: orbEnterFromRight 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s both, swarmFloat4 15s ease-in-out 1.6s infinite both;
}

.swarm-orb--small-2 {
  width: 36px;
  height: 36px;
  left: -5%;
  top: 55%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.9), transparent 30%),
    radial-gradient(circle at 70% 130%, rgba(0, 0, 0, 0.3), transparent 70%),
    radial-gradient(circle at 30% 20%, #fff8f0, #e8c4a8 55%, #5a3a28 100%);
  box-shadow:
    0 6px 15px rgba(200, 158, 138, 0.3);
  animation: orbEnterFromBottom 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s both, swarmFloat5 17s ease-in-out 1.75s infinite both;
}

@keyframes swarmFloat1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(3deg); }
}

@keyframes swarmFloat2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(10px, -12px); }
}

@keyframes swarmFloat3 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-8px, 10px); }
}

@keyframes swarmFloat4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-6px, -8px) scale(1.05); }
}

@keyframes swarmFloat5 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6px, -6px) scale(1.05); }
}

/* Floating badges */
.spheres-badge {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
  box-shadow: 
    0 4px 12px rgba(0,0,0,0.04),
    0 12px 32px rgba(180, 123, 104, 0.12);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease;
  cursor: pointer;
  z-index: 5;
}

.spheres-badge:hover {
  transform: scale(1.15) translateY(-4px) !important;
  box-shadow: 
    0 8px 20px rgba(0,0,0,0.06),
    0 20px 50px rgba(180, 123, 104, 0.18);
}

.spheres-badge__glow {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 158, 138, 0.3), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
}

.spheres-badge:hover .spheres-badge__glow {
  opacity: 1;
}

.spheres-badge__icon {
  width: 24px;
  height: 24px;
  color: var(--accent-strong, #b47b68);
}

/* Members badge */
.spheres-badge--members {
  width: auto;
  height: 52px;
  padding: 0 16px;
  border-radius: 30px;
  gap: 8px;
  top: 8%;
  left: 0%;
  animation: spheresBadgeFloat1 7s ease-in-out infinite;
}

.spheres-badge__avatars {
  display: flex;
}

.spheres-badge__avatars img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -10px;
  object-fit: cover;
}

.spheres-badge__avatars img:first-child {
  margin-left: 0;
}

.spheres-badge__count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-strong, #b47b68);
}

/* Chat badge */
.spheres-badge--chat {
  width: 56px;
  height: 56px;
  bottom: 25%;
  right: 5%;
  animation: spheresBadgeFloat2 6s ease-in-out infinite;
}

.spheres-badge--chat .spheres-badge__icon {
  width: 22px;
  height: 22px;
}

/* Heart badge */
.spheres-badge--heart {
  width: 48px;
  height: 48px;
  bottom: 10%;
  left: 10%;
  background: #ec4899;
  animation: spheresBadgeFloat3 5.5s ease-in-out infinite;
}

.spheres-badge--heart .spheres-badge__icon {
  color: #fff;
  width: 20px;
  height: 20px;
}

.spheres-badge--heart .spheres-badge__glow {
  background: radial-gradient(circle, rgba(236, 72, 153, 0.4), transparent 70%);
}

/* Thumbs up badge */
.spheres-badge--thumbsup {
  width: 52px;
  height: 52px;
  top: 15%;
  right: 10%;
  background: #fff;
  animation: spheresBadgeFloat4 6.5s ease-in-out infinite;
}

.spheres-badge--thumbsup .spheres-badge__icon {
  color: #f59e0b;
  width: 22px;
  height: 22px;
}

.spheres-badge--thumbsup .spheres-badge__glow {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.4), transparent 70%);
}

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

@keyframes spheresBadgeFloat2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(-5deg); }
}

@keyframes spheresBadgeFloat3 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes spheresBadgeFloat4 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-11px) rotate(5deg); }
}

/* Responsive */
@media (max-width: 1024px) {
  .spheres-hero__inner {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 2rem;
  }

  .spheres-hero__content {
    display: contents;
  }

  .spheres-eyebrow {
    order: 1;
  }

  .spheres-hero__scene {
    order: 2;
    height: 400px;
  }

  .spheres-hero__title {
    order: 3;
  }

  .spheres-hero__subtitle {
    order: 4;
    max-width: 100%;
  }

  .spheres-hero__pills {
    order: 5;
    justify-content: center;
  }

  .spheres-hero__cta {
    order: 6;
    display: flex;
    justify-content: center;
  }

  .spheres-swarm {
    width: 260px;
    height: 260px;
  }
}

@media (max-width: 600px) {
  .spheres-hero {
    padding: 2.5rem 0 2rem;
  }
  
  .spheres-hero__scene {
    height: 340px;
  }
  
  .spheres-swarm {
    width: 220px;
    height: 220px;
  }
  
  .swarm-orb--primary {
    width: 140px;
    height: 140px;
  }
  
  .swarm-orb--peach {
    width: 100px;
    height: 100px;
  }
  
  .swarm-orb--lavender {
    width: 85px;
    height: 85px;
  }
  
  .spheres-ambient--1 {
    display: none;
  }
  
  .spheres-badge--members {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .spheres-badge--heart {
    bottom: 8%;
    left: 1rem;
    right: 5%;
  }

   .spheres-badge--chat{
    bottom: 20%;
    left: auto;
    right: 5%;
  }

  .spheres-badge--thumbsup {
    bottom: 5%;
    left: 1rem;
    right: 5%;
  }
}

/* ---------- Hero clip ---------- */

.spheres-hero-video {
  max-width: 960px;
  margin: 2.8rem auto 0;
  padding: 0 1.8rem;
  margin-top: 1rem;
}

.sphere-clip {
  position: relative;
  border-radius: 1.4rem;
  overflow: hidden;
  background: 
    radial-gradient(ellipse 100% 100% at 30% 20%, rgba(200, 158, 138, 0.12), transparent 50%),
    radial-gradient(ellipse 80% 80% at 80% 80%, rgba(176, 173, 255, 0.08), transparent 50%),
    linear-gradient(145deg, #1a1614 0%, #0d0b0a 100%);
  box-shadow: 
    0 40px 80px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.sphere-clip::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9 */
}

/* Decorative elements */
.sphere-clip::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(244, 209, 183, 0.08) 0%, transparent 25%),
    radial-gradient(circle at 75% 60%, rgba(176, 173, 255, 0.06) 0%, transparent 20%),
    radial-gradient(circle at 50% 80%, rgba(200, 158, 138, 0.05) 0%, transparent 30%),
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 40px 40px, 40px 40px;
  pointer-events: none;
}

/* Play button */
.sphere-clip-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2), transparent 60%),
    linear-gradient(135deg, rgba(200, 158, 138, 0.95), rgba(180, 123, 104, 1));
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sphere-clip-play:hover {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 
    0 25px 60px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.sphere-clip-play::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
  margin-left: 4px;
}

/* Label */
.sphere-clip-label {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* Video (hidden until loaded) */
.sphere-clip video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.sphere-clip video.is-loaded {
  opacity: 1;
}

.sphere-clip video.is-loaded ~ .sphere-clip-play,
.sphere-clip video.is-loaded ~ .sphere-clip-label {
  display: none;
}

/* ---------- Shared section styling ---------- */

.spheres-section {
  padding: 3.6rem 0 3.9rem;
}

.spheres-section-header {
  max-width: 820px;
  margin: 0 auto 2.2rem;
  padding: 0 1.8rem;
  text-align: left;
}

.spheres-section-header--center {
  text-align: center;
}

.spheres-section-header--center .section-intro {
  max-width: 640px;
  margin-inline: auto;
}

.spheres-section .section-eyebrow {
  margin-bottom: 0.55rem;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 231, 222, 0.78);
}

.spheres-section .section-title {
  margin: 0 0 0.65rem;
  font-size: 1.6rem;
}

.spheres-section .section-intro {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.7;
  color: rgba(233, 220, 212, 0.9);
}

/* ---------- Post-hero sections ---------- */

.spheres-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.8rem;
}

.spheres-section--light {
  background:
    radial-gradient(circle at top left, #f5e3d7 0%, rgba(12, 5, 9, 0.85) 55%),
    linear-gradient(180deg, #12070c 0%, #080306 100%);
}

.spheres-section--dark {
  background:
    radial-gradient(circle at top, #f1e0d7 0%, rgba(14, 7, 16, 0.9) 52%),
    linear-gradient(180deg, #0c050b 0%, #050307 100%);
}

.spheres-section-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2.4rem;
  align-items: center;
}

.spheres-section-grid--reverse {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2.4rem;
  align-items: center;
}

.spheres-section-grid--reverse .spheres-text-block {
  order: 2;
}

.spheres-text-block {
  max-width: 540px;
}

.spheres-bullet-list {
  margin: 1.25rem 0 0;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: 0.95rem;
  color: rgba(245, 232, 223, 0.92);
}

/* =============================================
   SPHERES – LIGHT SECTION (Configure)
   ============================================= */

.spheres-section--light {
  background: #f6ede5;
  color: #2a2623;
  padding: 4.5rem 0;
}

.spheres-section--light .section-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 0.6rem;
}

.spheres-section--light .section-title {
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.25;
  color: #2a2623;
  margin: 0 0 1rem;
}

.spheres-section--light .section-intro {
  font-size: 1rem;
  line-height: 1.7;
  color: #5a534d;
  margin: 0 0 1.8rem;
}

/* Feature list with icons */
.spheres-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.spheres-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.feature-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: 
    radial-gradient(circle at 30% 30%, #fff 0%, transparent 70%),
    linear-gradient(135deg, #f8ebe0 0%, #e8d4c4 100%);
  border: 1px solid rgba(180, 123, 104, 0.2);
  box-shadow: 
    0 4px 12px rgba(180, 123, 104, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-strong);
}

.feature-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4a4540;
  padding-top: 0.1rem;
}

.feature-text strong {
  color: #2a2623;
  font-weight: 600;
}

/* Section grid */
.spheres-section--light .spheres-section-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

.spheres-section--light .spheres-text-block {
  max-width: 520px;
}

/* Video block */
.spheres-video-block {
  display: flex;
  justify-content: flex-end;
}

.section-video-clip {
  position: relative;
  width: 100%;
  max-width: 480px;
  border-radius: 1.2rem;
  overflow: hidden;
  background: 
    radial-gradient(ellipse 80% 60% at 25% 25%, rgba(255, 255, 255, 0.4), transparent 50%),
    radial-gradient(ellipse 60% 60% at 80% 80%, rgba(200, 158, 138, 0.15), transparent 50%),
    linear-gradient(145deg, #1f1a18 0%, #12100f 100%);
  box-shadow: 
    0 30px 60px rgba(90, 60, 40, 0.25),
    0 0 0 1px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.section-video-clip::before {
  content: "";
  display: block;
  padding-top: 66.67%; /* 3:2 aspect ratio */
}

/* Subtle texture overlay */
.section-video-clip::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(244, 209, 183, 0.08) 0%, transparent 30%),
    radial-gradient(circle at 70% 70%, rgba(176, 173, 255, 0.05) 0%, transparent 25%);
  pointer-events: none;
}

/* Play button */
.section-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.25), transparent 60%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(245, 240, 235, 0.98));
  box-shadow: 
    0 12px 30px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.section-video-play:hover {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 
    0 16px 40px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.section-video-play::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent var(--accent-strong);
  margin-left: 3px;
}

/* Video (hidden until loaded) */
.section-video-clip video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.section-video-clip video.is-loaded {
  opacity: 1;
}

.section-video-clip video.is-loaded ~ .section-video-play {
  display: none;
}

/* Responsive */
@media (max-width: 900px) {
  .spheres-section--light .spheres-section-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .spheres-section--light .spheres-text-block {
    max-width: 100%;
  }

  .spheres-video-block {
    justify-content: center;
  }

  .section-video-clip {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .spheres-section--light {
    padding: 3rem 0;
  }

  .spheres-feature-list li {
    flex-direction: column;
    gap: 0.5rem;
  }

  .feature-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .feature-icon svg {
    width: 16px;
    height: 16px;
  }
}

/* =============================================
   SPHERES – FEATURES WITH SCATTERED VIDEOS
   ============================================= */

.spheres-features {
  background: linear-gradient(180deg, #f8f3ef 0%, #f2ebe4 100%);
  padding: 5rem 0;
  overflow: hidden;
}

.spheres-features__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Header */
.spheres-features__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3.5rem;
}

.features-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin: 0 0 0.6rem;
}

.features-title {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  color: #2a2623;
  margin: 0 0 1rem;
}

.features-intro {
  font-size: 1rem;
  line-height: 1.7;
  color: #5a534d;
  margin: 0;
}

/* Bento-style grid */
.spheres-features__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(160px, auto);
  gap: 1.25rem;
}

/* Feature cards */
.feature-card {
  position: relative;
  background: #ffffff;
  border-radius: 1.1rem;
  padding: 1.4rem 1.25rem;
  border: 1px solid rgba(180, 123, 104, 0.1);
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 8px 24px rgba(140, 100, 80, 0.06);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  border-radius: 1.1rem 1.1rem 0 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.05),
    0 16px 40px rgba(140, 100, 80, 0.12);
  border-color: rgba(180, 123, 104, 0.2);
}

.feature-card:hover::before {
  opacity: 1;
}

/* Icon */
.feature-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: linear-gradient(135deg, #fdf8f5 0%, #f5ebe3 100%);
  border: 1px solid rgba(180, 123, 104, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
  color: var(--accent-strong);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.feature-card:hover .feature-card__icon {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(180, 123, 104, 0.3);
}

.feature-card__icon svg {
  width: 20px;
  height: 20px;
}

/* Title & text */
.feature-card__title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #2a2623;
  margin: 0 0 0.35rem;
  line-height: 1.3;
}

.feature-card__text {
  font-size: 0.82rem;
  line-height: 1.5;
  color: #6a635d;
  margin: 0;
}

/* Video cards */
.feature-video {
  border-radius: 1.1rem;
  overflow: hidden;
  position: relative;
}

/* Wide video spans 2 columns */
.feature-video--wide {
  grid-column: span 2;
}

.feature-video__clip {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 160px;
  background: 
    radial-gradient(ellipse 80% 60% at 30% 30%, rgba(200, 158, 138, 0.15), transparent 50%),
    radial-gradient(ellipse 60% 60% at 80% 70%, rgba(176, 173, 255, 0.1), transparent 50%),
    linear-gradient(145deg, #1f1a18 0%, #12100f 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 1.1rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

.feature-video:hover .feature-video__clip {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  transform: translateY(-3px);
}

/* Subtle grid pattern */
.feature-video__clip::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

/* Play button */
.feature-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2), transparent 60%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(245, 240, 235, 0.98));
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.feature-video:hover .feature-video__play {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 
    0 12px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.feature-video__play::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent var(--accent-strong);
  margin-left: 2px;
}

/* Label */
.feature-video__label {
  position: absolute;
  bottom: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.4);
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  backdrop-filter: blur(8px);
}

/* Video element */
.feature-video__clip video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.feature-video__clip video.is-loaded {
  opacity: 1;
}

.feature-video__clip video.is-loaded ~ .feature-video__play,
.feature-video__clip video.is-loaded ~ .feature-video__label {
  opacity: 0;
  pointer-events: none;
}

/* Responsive */
@media (max-width: 1000px) {
  .spheres-features__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(140px, auto);
  }

  .feature-video--wide {
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  .spheres-features {
    padding: 3.5rem 0;
  }

  .spheres-features__inner {
    padding: 0 1.25rem;
  }

  .spheres-features__header {
    margin-bottom: 2.5rem;
  }

  .spheres-features__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 1rem;
  }

  .feature-video--wide {
    grid-column: span 1;
  }

  .feature-video__clip {
    min-height: 180px;
  }

  .feature-card {
    padding: 1.2rem 1.1rem;
  }
}

/* =============================================
   DECORATIVE ELEMENTS (Optional)
   ============================================= */

/* Add floating orb decorations */
.spheres-features__inner {
  position: relative;
}

.spheres-features__inner::before,
.spheres-features__inner::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.4;
}

.spheres-features__inner::before {
  width: 300px;
  height: 300px;
  top: -100px;
  right: -150px;
  background: radial-gradient(circle, rgba(200, 158, 138, 0.2), transparent 70%);
}

.spheres-features__inner::after {
  width: 200px;
  height: 200px;
  bottom: -50px;
  left: -100px;
  background: radial-gradient(circle, rgba(176, 173, 255, 0.15), transparent 70%);
}


/* =============================================
   SPHERE SLIDER – CLEAN CONSOLIDATED CSS
   ============================================= */

.sphere-slider {
  --slider-bg: linear-gradient(180deg, #f8f3ef 0%, #f2ebe4 100%);
  --card-bg: #ffffff;
  --mock-bg: linear-gradient(160deg, #fdfbf9 0%, #f5f0eb 100%);
  --text-primary: #2a2623;
  --text-secondary: #5a534d;
  --text-muted: #8a847e;
  --border-light: rgba(180, 123, 104, 0.12);
  --border-mock: rgba(180, 123, 104, 0.15);

  background: var(--slider-bg);
  padding: 5rem 0 4rem;
  overflow: hidden;
}

/* Header */
.sphere-slider__header {
  text-align: center;
  margin-bottom: 3rem;
  padding: 0 2rem;
}

.sphere-slider__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin: 0 0 0.5rem;
  margin-top: -2rem;
}

.sphere-slider__title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-primary);
  margin: 0;
  max-width: 700px;
  margin-inline: auto;
}

/* Viewport - NO padding, let JS handle centering */
.sphere-slider__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* Track */
.sphere-slider__track {
  display: flex;
  gap: 5rem;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  cursor: grab;
}

.sphere-slider__track:active {
  cursor: grabbing;
}

/* Individual slide - 1.3x scaled */
.sphere-slide {
  flex: 0 0 min(950px, 64.5%);
  width: auto;
  padding: 0;
  box-sizing: border-box;
}

.sphere-slide__inner {
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: 1.8rem;
  padding: 2.1rem;
  min-height: 350px;
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 12px 40px rgba(140, 100, 80, 0.08);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.sphere-slide__inner:hover {
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.06),
    0 20px 60px rgba(140, 100, 80, 0.12);
}

/* =============================================
   BASE MOCK CONTAINER - 1.3x scaled
   ============================================= */

.sphere-slide__mock {
  background: var(--mock-bg);
  border: 1px solid var(--border-mock);
  border-radius: 1.15rem;
  overflow: hidden;
  height: 100%;
  min-height: 365px;
  max-height: 365px;
  display: flex;
  flex-direction: column;
  box-shadow: 
    0 2px 8px rgba(140, 100, 80, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: box-shadow 0.3s ease;
}

.sphere-slide:hover .sphere-slide__mock {
  box-shadow: 
    0 2px 8px rgba(140, 100, 80, 0.08),
    0 0 30px rgba(200, 158, 138, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.slide-mock__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.15rem;
  border-bottom: 1px solid rgba(180, 123, 104, 0.1);
  background: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

.slide-mock__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent), var(--accent-strong));
  box-shadow: 0 0 8px rgba(200, 158, 138, 0.5);
  animation: headerDotPulse 2s ease-in-out infinite;
}

@keyframes headerDotPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(200, 158, 138, 0.5); }
  50% { box-shadow: 0 0 12px rgba(200, 158, 138, 0.8); }
}

.slide-mock__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.slide-mock__badge {
  margin-left: auto;
  font-size: 0.68rem;
  padding: 0.18rem 0.58rem;
  border-radius: 999px;
  background: rgba(200, 158, 138, 0.15);
  color: var(--accent-strong);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.slide-mock__count {
  margin-left: auto;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* =============================================
   1. CHAT MOCK - 1.3x scaled
   ============================================= */

.slide-mock__chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 0.9rem;
}

.chat-messages-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.chat-msg {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  will-change: transform, opacity;
}

.chat-msg--owner {
  flex-direction: row-reverse;
}

.chat-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5e6dc, #e8d4c4);
  border: 1px solid rgba(180, 123, 104, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #5a4a42;
  flex-shrink: 0;
  overflow: hidden;
}

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

.chat-msg--owner .chat-avatar {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border-color: transparent;
  color: #fff;
}

.chat-bubble {
  background: #ffffff;
  border: 1px solid rgba(180, 123, 104, 0.12);
  border-radius: 0 0.78rem 0.78rem 0.78rem;
  padding: 0.48rem 0.78rem;
  max-width: 250px;
  box-shadow: 0 2px 8px rgba(140, 100, 80, 0.08);
}

.chat-msg--owner .chat-bubble {
  background: linear-gradient(135deg, rgba(200, 158, 138, 0.15), rgba(200, 158, 138, 0.08));
  border: 1px solid rgba(200, 158, 138, 0.25);
  border-radius: 0.78rem 0 0.78rem 0.78rem;
}

.chat-name {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.18rem;
}

.chat-text {
  font-size: 0.82rem;
  line-height: 1.42;
  color: var(--text-primary);
}

/* =============================================
   GALLERY MOCK - SLIDING ROWS
   Replace the existing .slide-mock__gallery styles
   ============================================= */

.slide-mock__gallery-scroll {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.75rem;
  overflow: hidden;
}

.gallery-row {
  overflow: hidden;
  border-radius: 0.6rem;
}

.gallery-row__track {
  display: flex;
  gap: 0.6rem;
  width: max-content;
}

/* Top row: slides right to left */
.gallery-row--top .gallery-row__track {
  animation: slideLeft 35s linear infinite;
}

/* Bottom row: slides left to right */
.gallery-row--bottom .gallery-row__track {
  animation: slideRight 35s linear infinite;
}

/* Pause on hover 
.slide-mock__gallery-scroll:hover .gallery-row__track {
  animation-play-state: paused;
} */

/* Gallery items */
.slide-mock__gallery-scroll .gallery-item {
  flex: 0 0 auto;
  width: 160px;
  height: 130px;
  border-radius: 0.6rem;
  overflow: hidden;
  background: linear-gradient(135deg, #f0e8e2 0%, #e8ddd5 100%);
  border: 1px solid rgba(180, 123, 104, 0.1);
}

.slide-mock__gallery-scroll .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Animations */
@keyframes slideLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

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


/* =============================================
   3. LEADERBOARD MOCK - 1.3x scaled
   ============================================= */

.slide-mock__leaders {
  flex: 1;
  padding: 0.7rem;
  position: relative;
  overflow: hidden;
}

.slide-mock__leaders .leader-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.65rem;
  background: #ffffff;
  border: 1px solid rgba(180, 123, 104, 0.1);
  border-radius: 0.6rem;
  box-shadow: 0 2px 6px rgba(140, 100, 80, 0.05);
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  height: 48px;
  transition: 
    top 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease;
  will-change: top, transform;
}

.slide-mock__leaders .leader-row[data-rank="1"] { 
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.18), #ffffff 70%); 
  border-color: rgba(255, 215, 0, 0.3);
}

.slide-mock__leaders .leader-row[data-rank="2"] { 
  background: linear-gradient(90deg, rgba(192, 192, 192, 0.15), #ffffff 70%); 
  border-color: rgba(192, 192, 192, 0.25);
}

.slide-mock__leaders .leader-row[data-rank="3"] { 
  background: linear-gradient(90deg, rgba(205, 127, 50, 0.12), #ffffff 70%); 
  border-color: rgba(205, 127, 50, 0.2);
}

.slide-mock__leaders .leader-row.is-lifting {
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(140, 100, 80, 0.2);
  z-index: 10;
}

.slide-mock__leaders .leader-avatar {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5e6dc, #e8d4c4);
  border: 1px solid rgba(180, 123, 104, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  color: #5a4a42;
  flex-shrink: 0;
  overflow: hidden;
}

.slide-mock__leaders .leader-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.leader-rank {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: rgba(200, 158, 138, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent-strong);
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.slide-mock__leaders .leader-row[data-rank="1"] .leader-rank { 
  background: linear-gradient(135deg, #ffd700, #ffaa00); 
  color: #5a4a20;
  box-shadow: 0 2px 8px rgba(255, 200, 0, 0.4);
}

.slide-mock__leaders .leader-row[data-rank="2"] .leader-rank { 
  background: linear-gradient(135deg, #e0e0e0, #b0b0b0); 
  color: #4a4a4a; 
}

.slide-mock__leaders .leader-row[data-rank="3"] .leader-rank { 
  background: linear-gradient(135deg, #cd7f32, #a05a20); 
  color: #fff; 
}

.leader-name {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-primary);
}

.leader-streak {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.leader-pts {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-strong);
  min-width: 58px;
  text-align: right;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.leader-pts.is-popping {
  transform: scale(1.3);
}

/* =============================================
   4. PROGRESS MOCK - 1.3x scaled
   ============================================= */

.slide-mock__progress {
  flex: 1;
  padding: 1.35rem 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}

.progress-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1.1rem;
  background: linear-gradient(135deg, rgba(200, 158, 138, 0.15), rgba(200, 158, 138, 0.08));
  border: 1px solid rgba(200, 158, 138, 0.25);
  border-radius: 999px;
  animation: badgeFloat 3s ease-in-out infinite;
}

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

.progress-icon {
  font-size: 1.15rem;
}

.progress-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent-strong);
}

.progress-bar {
  width: 100%;
  max-width: 230px;
  height: 7px;
  background: rgba(180, 123, 104, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-strong), var(--accent));
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: progressShine 2s ease-in-out infinite;
}

@keyframes progressShine {
  0% { left: -100%; }
  100% { left: 200%; }
}

.progress-text {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

.progress-text strong {
  color: var(--text-primary);
}

[data-progress-points] {
  display: inline-block;
  font-weight: 700;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.progress-levels {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: center;
}

.lvl {
  font-size: 0.68rem;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: rgba(180, 123, 104, 0.08);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lvl--done {
  background: rgba(138, 180, 160, 0.18);
  color: #4a7a60;
}

.lvl--current {
  background: linear-gradient(135deg, rgba(200, 158, 138, 0.2), rgba(200, 158, 138, 0.1));
  color: var(--accent-strong);
  border: 1px solid rgba(200, 158, 138, 0.3);
  animation: levelGlow 2s ease-in-out infinite;
}

@keyframes levelGlow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(200, 158, 138, 0.1); }
  50% { box-shadow: 0 0 0 4px rgba(200, 158, 138, 0.2); }
}

/* =============================================
   5. ACCESS CONTROL MOCK - 1.3x scaled
   ============================================= */

.slide-mock__access {
  flex: 1;
  padding: 0.78rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.access-option {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem 0.9rem;
  background: #ffffff;
  border: 1px solid rgba(180, 123, 104, 0.1);
  border-radius: 0.7rem;
  box-shadow: 0 1px 3px rgba(140, 100, 80, 0.04);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.access-option.is-active {
  background: linear-gradient(135deg, rgba(200, 158, 138, 0.15), rgba(200, 158, 138, 0.05));
  border-color: rgba(200, 158, 138, 0.3);
  box-shadow: 0 4px 15px rgba(180, 122, 89, 0.15);
}

.access-icon {
  font-size: 1.25rem;
}

.access-info {
  flex: 1;
}

.access-name {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.access-desc {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.access-toggle {
  width: 42px;
  height: 23px;
  border-radius: 999px;
  background: rgba(180, 123, 104, 0.15);
  position: relative;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.access-toggle::before {
  content: "";
  position: absolute;
  top: 3.5px;
  left: 3.5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.access-toggle--on {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: 0 0 12px rgba(180, 122, 89, 0.4);
}

.access-toggle--on::before {
  transform: translateX(19px);
}

/* =============================================
   6. INVITE MOCK - 1.3x scaled
   ============================================= */

.slide-mock__invite {
  flex: 1;
  padding: 1.3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.3rem;
}

.invite-link-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.9rem;
  background: #ffffff;
  border: 1px solid rgba(180, 123, 104, 0.15);
  border-radius: 0.7rem;
  box-shadow: 0 1px 3px rgba(140, 100, 80, 0.04);
}

.invite-url {
  flex: 1;
  font-size: 0.82rem;
  font-family: ui-monospace, monospace;
  color: var(--text-secondary);
}

.invite-copy {
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.36rem 0.82rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 0.45rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.invite-copy:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(180, 122, 89, 0.3);
}

.invite-stats {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.invite-stat {
  text-align: center;
}

.stat-value {
  display: inline-block;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-primary);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stat-label {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* =============================================
   7. ACTIVITY MOCK - 1.3x scaled
   ============================================= */

.slide-mock__activity {
  flex: 1;
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  overflow: hidden;
}

.activity-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.65rem;
  background: #ffffff;
  border: 1px solid rgba(180, 123, 104, 0.1);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(140, 100, 80, 0.04);
}

.activity-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(180, 123, 104, 0.25);
  flex-shrink: 0;
}

.activity-dot--new {
  background: var(--accent);
  animation: dotPing 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes dotPing {
  0% { box-shadow: 0 0 0 0 rgba(180, 122, 89, 0.7); }
  70% { box-shadow: 0 0 0 6px rgba(180, 122, 89, 0); }
  100% { box-shadow: 0 0 0 0 rgba(180, 122, 89, 0); }
}

.activity-text {
  flex: 1;
  font-size: 0.8rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-text strong {
  color: var(--accent-strong);
}

.activity-time {
  font-size: 0.66rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* =============================================
   8. MEMBERS MOCK - 1.3x scaled
   ============================================= */

.slide-mock__members-scroll {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.slide-mock__members-scroll::before,
.slide-mock__members-scroll::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 30px;
  z-index: 2;
  pointer-events: none;
}

.slide-mock__members-scroll::before {
  top: 0;
  background: linear-gradient(180deg, var(--mock-bg, #f0ebe5) 0%, transparent 100%);
}

.slide-mock__members-scroll::after {
  bottom: 0;
  background: linear-gradient(0deg, var(--mock-bg, #f0ebe5) 0%, transparent 100%);
}

.members-grid-track {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.58rem;
  padding: 0.58rem;
  animation: membersGridScroll 12s linear infinite;
}

@keyframes membersGridScroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-33.33%); }
}

/*
.members-grid-track:hover {
  animation-play-state: paused;
} */

.member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.68rem 0.45rem;
  background: #ffffff;
  border: 1px solid rgba(180, 123, 104, 0.1);
  border-radius: 0.65rem;
  box-shadow: 0 2px 6px rgba(140, 100, 80, 0.05);
  transition: all 0.2s ease;
}

.member-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(140, 100, 80, 0.1);
}

.member-card__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5e6dc, #e8d4c4);
  border: 1px solid rgba(180, 123, 104, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #5a4a42;
  overflow: hidden;
}

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

.member-avatar--legend {
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  border-color: rgba(255, 170, 0, 0.3);
  box-shadow: 0 0 8px rgba(255, 200, 0, 0.3);
}

.member-card__name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
}

.member-card__level {
  font-size: 0.56rem;
  padding: 0.12rem 0.4rem;
  background: rgba(200, 158, 138, 0.12);
  color: var(--accent-strong);
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.member-lvl--legend {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 170, 0, 0.15));
  color: #a67c00;
}

.member-lvl--new {
  background: rgba(138, 180, 160, 0.18);
  color: #4a7a60;
}

/* Disable image interaction */
.chat-avatar img,
.leader-avatar img,
.member-card__avatar img,
.gallery-item img {
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* =============================================
   SLIDE CONTENT - 1.3x scaled
   ============================================= */

.sphere-slide__content {
  padding: 1.35rem 0.6rem 1.35rem 0;
}

.sphere-slide__heading {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.9rem;
  line-height: 1.25;
}

.sphere-slide__text {
  font-size: 1.1rem;
  line-height: 1.72;
  color: var(--text-secondary);
  margin: 0;
}

/* =============================================
   NAVIGATION - 1.3x scaled
   ============================================= */

.sphere-slider__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.4rem;
  margin-top: 2.8rem;
  padding: 0 2rem;
}

.sphere-slider__arrow {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: #ffffff;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(140, 100, 80, 0.08);
}

.sphere-slider__arrow:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(180, 123, 104, 0.25);
}

.sphere-slider__arrow:active {
  transform: scale(0.95);
}

.sphere-slider__dots {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.sphere-slider__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(180, 123, 104, 0.25);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.sphere-slider__dot:hover {
  background: rgba(180, 123, 104, 0.5);
}

.sphere-slider__dot.is-active {
  background: var(--accent-strong);
  width: 32px;
  border-radius: 999px;
}

/* =============================================
   RESPONSIVE - TABLET
   ============================================= */

@media (max-width: 900px) {
  .sphere-slider {
    padding: 4rem 0 3rem;
  }

  .sphere-slider__track {
    gap: 1.5rem;
  }

  .sphere-slide {
    flex: 0 0 min(500px, 85%);
  }

  .sphere-slide__inner {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.25rem;
    min-height: auto;
  }

  .sphere-slide__mock {
    min-height: 340px;
    max-height: 340px;
  }

  .sphere-slide__content {
    padding: 0.5rem 0 0 0;
  }

  .sphere-slide__heading {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }

  .sphere-slide__text {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .sphere-slider__nav {
    margin-top: 2rem;
  }

  .slide-mock__gallery-scroll .gallery-item {
    width: 130px;
    height: 105px;
  }
}

/* =============================================
   RESPONSIVE - MOBILE
   ============================================= */

@media (max-width: 600px) {
  .sphere-slider {
    padding: 3rem 0 2.5rem;
  }

  .sphere-slider__header {
    margin-bottom: 2rem;
  }

  .sphere-slider__track {
    gap: 1rem;
  }

  .sphere-slide {
    flex: 0 0 min(400px, 90%);
  }

  .sphere-slide__inner {
    padding: 1rem;
    gap: 1rem;
  }

  .sphere-slide__mock {
    min-height: 300px;
    max-height: 300px;
  }

  .sphere-slider__eyebrow{
    margin-top: 0.8rem;
  }

  .sphere-slide__heading {
    font-size: 1.15rem;
  }

  .sphere-slide__text {
    font-size: 0.88rem;
  }

  /* Smaller elements inside mocks */
  .slide-mock__header {
    padding: 0.6rem 0.8rem;
  }

  .slide-mock__title {
    font-size: 0.8rem;
  }

  .slide-mock__badge,
  .slide-mock__count {
    font-size: 0.6rem;
  }

  /* Chat */
  .chat-avatar {
    width: 26px;
    height: 26px;
  }

  .chat-bubble {
    padding: 0.35rem 0.5rem;
    max-width: 180px;
  }

  .chat-name {
    font-size: 0.55rem;
  }

  .chat-text {
    font-size: 0.72rem;
  }

  /* Leaderboard */
  .slide-mock__leaders .leader-row {
    height: 40px;
    padding: 0.35rem 0.5rem;
    gap: 0.4rem;
  }

  .slide-mock__leaders .leader-avatar {
    width: 22px;
    height: 22px;
  }

  .leader-rank {
    width: 18px;
    height: 18px;
    font-size: 0.55rem;
  }

  .leader-name {
    font-size: 0.7rem;
  }

  .leader-streak {
    font-size: 0.55rem;
  }

  .leader-pts {
    font-size: 0.65rem;
    min-width: 45px;
  }

  /* Progress */
  .slide-mock__progress {
    padding: 1rem 0.75rem;
    gap: 0.6rem;
  }

  .progress-badge {
    padding: 0.3rem 0.7rem;
  }

  .progress-icon {
    font-size: 0.9rem;
  }

  .progress-label {
    font-size: 0.75rem;
  }

  .progress-bar {
    max-width: 160px;
    height: 5px;
  }

  .progress-text {
    font-size: 0.7rem;
  }

  .lvl {
    font-size: 0.5rem;
    padding: 0.15rem 0.35rem;
  }

  /* Access */
  .slide-mock__access {
    padding: 0.5rem;
    gap: 0.4rem;
  }

  .access-option {
    padding: 0.5rem 0.6rem;
    gap: 0.5rem;
  }

  .access-icon {
    font-size: 1rem;
  }

  .access-name {
    font-size: 0.75rem;
  }

  .access-desc {
    font-size: 0.6rem;
  }

  .access-toggle {
    width: 32px;
    height: 18px;
  }

  .access-toggle::before {
    width: 12px;
    height: 12px;
    top: 3px;
    left: 3px;
  }

  .access-toggle--on::before {
    transform: translateX(14px);
  }

  /* Invite */
  .slide-mock__invite {
    padding: 0.75rem;
    gap: 0.75rem;
  }

  .invite-link-box {
    padding: 0.5rem 0.6rem;
  }

  .invite-url {
    font-size: 0.65rem;
  }

  .invite-copy {
    font-size: 0.6rem;
    padding: 0.25rem 0.5rem;
  }

  .stat-value {
    font-size: 1.1rem;
  }

  .stat-label {
    font-size: 0.55rem;
  }

  /* Activity */
  .slide-mock__activity {
    padding: 0.5rem;
    gap: 0.3rem;
  }

  .activity-row {
    padding: 0.35rem 0.45rem;
    gap: 0.4rem;
  }

  .activity-dot {
    width: 5px;
    height: 5px;
  }

  .activity-text {
    font-size: 0.65rem;
  }

  .activity-time {
    font-size: 0.5rem;
  }

  /* Members */
  .members-grid-track {
    gap: 0.4rem;
    padding: 0.4rem;
  }

  .member-card {
    padding: 0.45rem 0.3rem;
    gap: 0.2rem;
  }

  .member-card__avatar {
    width: 28px;
    height: 28px;
  }

  .member-card__name {
    font-size: 0.6rem;
  }

  .member-card__level {
    font-size: 0.45rem;
    padding: 0.08rem 0.25rem;
  }

  /* Gallery - 2x2 on mobile */
  .slide-mock__gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    padding: 0.5rem;
    gap: 0.4rem;
  }

  .gallery-item:nth-child(n+5) {
    display: none;
  }

 .slide-mock__gallery-scroll {
    gap: 0.4rem;
    padding: 0.5rem;
  }

  .gallery-row__track {
    gap: 0.4rem;
  }

  .slide-mock__gallery-scroll .gallery-item {
    width: 100px;
    height: 80px;
    border-radius: 0.4rem;
  }

  /* Navigation */
  .sphere-slider__nav {
    margin-top: 1.5rem;
    gap: 1rem;
  }

  .sphere-slider__arrow {
    width: 38px;
    height: 38px;
  }

  .sphere-slider__dot {
    width: 7px;
    height: 7px;
  }

  .sphere-slider__dot.is-active {
    width: 22px;
  }
}


/* =============================================
   SPHERES ECOSYSTEM — Hub visualization
   ============================================= */

.spheres-ecosystem {
  background: linear-gradient(180deg, #0c0a09 0%, #151210 50%, #0c0a09 100%);
  padding: 3rem 0;
  overflow: hidden;
}

.ecosystem__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

/* Hub visualization */
.ecosystem__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ecosystem__hub {
  position: relative;
  width: 300px;
  height: 300px;
}

/* Center core */
.hub__core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.15), transparent 60%),
    linear-gradient(135deg, var(--accent), var(--accent-strong));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow: 
    0 0 0 4px rgba(200, 158, 138, 0.2),
    0 0 40px rgba(200, 158, 138, 0.3),
    0 20px 40px rgba(0, 0, 0, 0.4);
  animation: corePulse 4s ease-in-out infinite;
}

@keyframes corePulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(200, 158, 138, 0.2), 0 0 40px rgba(200, 158, 138, 0.3), 0 20px 40px rgba(0, 0, 0, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(200, 158, 138, 0.15), 0 0 60px rgba(200, 158, 138, 0.4), 0 20px 40px rgba(0, 0, 0, 0.4); }
}

.hub__label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Connection lines */
.hub__lines {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.connection-line {
  stroke: rgba(200, 158, 138, 0.3);
  stroke-width: 1;
  stroke-dasharray: 6 4;
  animation: dashFlow 20s linear infinite;
}

@keyframes dashFlow {
  to { stroke-dashoffset: -100; }
}

/* Orbiting nodes */
.hub__orbit {
  position: absolute;
  z-index: 2;
}

.hub__orbit--1 { top: 0; left: 50%; transform: translateX(-50%); }
.hub__orbit--2 { top: 50%; right: 0; transform: translateY(-50%); }
.hub__orbit--3 { bottom: 0; left: 50%; transform: translateX(-50%); }
.hub__orbit--4 { top: 50%; left: 0; transform: translateY(-50%); }

.orbit__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  animation: nodeFloat 6s ease-in-out infinite;
}

.hub__orbit--1 .orbit__node { animation-delay: 0s; }
.hub__orbit--2 .orbit__node { animation-delay: -1.5s; }
.hub__orbit--3 .orbit__node { animation-delay: -3s; }
.hub__orbit--4 .orbit__node { animation-delay: -4.5s; }

@keyframes nodeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.node__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: 
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(247, 243, 239, 0.9);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.orbit__node:hover .node__icon {
  background: rgba(200, 158, 138, 0.2);
  border-color: rgba(200, 158, 138, 0.4);
  box-shadow: 0 0 20px rgba(200, 158, 138, 0.3);
  transform: scale(1.1);
}

.node__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(247, 243, 239, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* top node (Courses) — put the label above the icon */
.orbit__node[data-connection="courses"] {
  flex-direction: column-reverse;
}

/* small spacing tweaks */
.orbit__node[data-connection="courses"] .node__label {
  margin-bottom: 0rem;
  margin-top: 0;
}

/* Content side */
.ecosystem__content {
  max-width: 480px;
}

.ecosystem__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.6rem;
}

.ecosystem__title {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  color: #f7f3ef;
  margin: 0 0 1.2rem;
}

.ecosystem__text {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(247, 243, 239, 0.75);
  margin: 0 0 2rem;
}

.ecosystem__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.ecosystem__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.92rem;
  color: rgba(247, 243, 239, 0.85);
}

.list__marker {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  flex-shrink: 0;
  margin-top: 0.1rem;
  position: relative;
}

.list__marker::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

/* Responsive */
@media (max-width: 900px) {
  .ecosystem__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }

  .ecosystem__visual {
    order: -1;
  }

  .ecosystem__hub {
    width: 260px;
    height: 260px;
  }

  .ecosystem__content {
    max-width: 100%;
  }

  .ecosystem__list {
    align-items: center;
  }

  .ecosystem__list li {
    justify-content: center;
    text-align: left;
  }
}


/* =============================================
   PLATFORM COMPARISON — Gadura vs Others
   ============================================= */

.platform-comparison {
  background:
    radial-gradient(ellipse 70% 50% at 80% 20%, rgba(200, 158, 138, 0.06), transparent 50%),
    linear-gradient(180deg, #f9f5f1 0%, #f2ece6 100%);
  padding: 5.5rem 0;
  overflow: hidden;
}

.platform-comparison__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Header */
.platform-comparison__header {
  text-align: center;
  margin-bottom: 3rem;
}

.platform-comparison__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin: 0 0 0.5rem;
}

.platform-comparison__title {
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  font-weight: 800;
  line-height: 1.15;
  color: #2a2623;
  margin: 0;
}

/* Table container */
.platform-comparison__table {
  background: #ffffff;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 16px 50px rgba(140, 100, 80, 0.1);
  border: 1px solid rgba(180, 123, 104, 0.1);
}

/* Rows */
.platform-comparison__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  border-bottom: 1px solid rgba(180, 123, 104, 0.08);
}

.platform-comparison__row:last-child {
  border-bottom: none;
}

/* Header row */
.platform-comparison__row--header {
  background: linear-gradient(180deg, #faf7f4 0%, #f5f0eb 100%);
  border-bottom: 1px solid rgba(180, 123, 104, 0.12);
}

.platform-comparison__row--header .platform-comparison__cell {
  padding: 1.1rem 1.25rem;
}

/* Cells */
.platform-comparison__cell {
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
}

/* Feature column (left) */
.platform-comparison__cell--feature {
  background: transparent;
}

.platform-comparison__feature-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #2a2623;
}

/* Others column (middle) */
.platform-comparison__cell--others {
  background: rgba(0, 0, 0, 0.015);
  justify-content: center;
  text-align: center;
  border-left: 1px solid rgba(180, 123, 104, 0.06);
  border-right: 1px solid rgba(180, 123, 104, 0.06);
}

.platform-comparison__others-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8a847e;
}

.platform-comparison__others-value {
  font-size: 0.85rem;
  color: #8a847e;
}

/* Gadura column (right) */
.platform-comparison__cell--gadura {
  background:
    linear-gradient(135deg, rgba(200, 158, 138, 0.08), rgba(200, 158, 138, 0.03));
  justify-content: center;
  text-align: center;
  position: relative;
}

/* Stronger header glow */
.platform-comparison__row--header .platform-comparison__cell--gadura {
  background:
    linear-gradient(135deg, rgba(200, 158, 138, 0.15), rgba(200, 158, 138, 0.08));
}

.platform-comparison__cell--gadura::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  opacity: 0.7;
}

/* Gadura badge in header */
.platform-comparison__gadura-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent-strong);
}

.platform-comparison__gadura-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  width: auto;
}

.platform-comparison__gadura-logo svg {
  height: 100%;
  width: auto;
  display: block;
}

.platform-comparison__gadura-brand {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  line-height: 1.1;
}

.platform-comparison__gadura-name {
  font-family: "Playfair Display", serif;
  letter-spacing: 0.2em;
  font-size: 1rem;
  font-weight: 1000;
  color: black;
}

/* Gadura values */
.platform-comparison__gadura-value {
  font-size: 0.88rem;
  font-weight: 600;
  color: #2a2623;
  position: relative;
  padding-left: 1.4rem;
}

.platform-comparison__gadura-value::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: 0 2px 6px rgba(180, 123, 104, 0.3);
}

.platform-comparison__gadura-value::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 4px;
  height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
}

/* Row hover */
.platform-comparison__row:not(.platform-comparison__row--header):hover {
  background: rgba(200, 158, 138, 0.03);
}

.platform-comparison__row:not(.platform-comparison__row--header):hover .platform-comparison__cell--gadura {
  background:
    linear-gradient(135deg, rgba(200, 158, 138, 0.12), rgba(200, 158, 138, 0.06));
}

/* Footnote */
.platform-comparison__footnote {
  text-align: center;
  margin: 2.5rem 0 0;
  font-size: 1rem;
  font-weight: 500;
  color: #5a534d;
  font-style: italic;
}

/* =============================================
   RESPONSIVE - TABLET
   ============================================= */

@media (max-width: 900px) {
  .platform-comparison {
    padding: 4.5rem 0;
  }

  .platform-comparison__inner {
    padding: 0 1.5rem;
  }
}

/* =============================================
   RESPONSIVE - MOBILE
   ============================================= */

@media (max-width: 768px) {
  .platform-comparison {
    padding: 3.5rem 0;
  }

  .platform-comparison__inner {
    padding: 0 1rem;
  }

  .platform-comparison__header {
    margin-bottom: 2rem;
  }

  .platform-comparison__title {
    font-size: 1.5rem;
  }

  /* Keep grid layout, just smaller */
  .platform-comparison__row {
    grid-template-columns: 1.2fr 0.9fr 1fr;
  }

  .platform-comparison__cell {
    padding: 0.6rem 0.5rem;
  }

  .platform-comparison__row--header .platform-comparison__cell {
    padding: 0.8rem 0.5rem;
  }

  .platform-comparison__feature-label {
    font-size: 0.72rem;
  }

  .platform-comparison__others-label {
    font-size: 0.6rem;
  }

  .platform-comparison__others-value {
    font-size: 0.7rem;
  }

  .platform-comparison__gadura-badge {
    font-size: 0.75rem;
    gap: 0.3rem;
  }

  .platform-comparison__gadura-logo {
    height: 16px;
  }

  .platform-comparison__gadura-name {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
  }

  .platform-comparison__gadura-value {
    font-size: 0.7rem;
    padding-left: 1.1rem;
  }

  .platform-comparison__gadura-value::before {
    width: 12px;
    height: 12px;
  }

  .platform-comparison__gadura-value::after {
    left: 4px;
    width: 3px;
    height: 5px;
  }

  .platform-comparison__footnote {
    margin-top: 1.5rem;
    font-size: 0.85rem;
  }
}




/* =============================================
   SPHERES CTA SECTION
   ============================================= */

.spheres-cta {
  background: linear-gradient(135deg, #1a1412 0%, #2a2320 50%, #1a1412 100%);
  padding: 5rem 2rem;
  position: relative;
  overflow: hidden;
}

.spheres-cta__inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 3rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Content */
.spheres-cta__content {
  text-align: left;
}

.spheres-cta__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.75rem;
}

.spheres-cta__title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 1rem;
}

.spheres-cta__text {
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 2rem;
  max-width: 480px;
}

/* Buttons */
.spheres-cta__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.spheres-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.8rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: all 0.25s ease;
}

.spheres-cta__btn--primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(180, 123, 104, 0.4);
}

.spheres-cta__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(180, 123, 104, 0.5);
}

.spheres-cta__btn--secondary {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.spheres-cta__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
}

/* Visual - Floating orbs */
.spheres-cta__visual {
  position: relative;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-orb {
  position: absolute;
  border-radius: 50%;
}

.cta-orb--1 {
  width: 120px;
  height: 120px;
  top: 20%;
  left: 25%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.9) 0%, transparent 28%),
    radial-gradient(circle at 50% 50%, #e4a882 0%, #c67b58 40%, #6b3d2a 100%);
  box-shadow: 0 20px 50px rgba(198, 123, 88, 0.4);
  animation: ctaFloat1 8s ease-in-out infinite;
}

.cta-orb--2 {
  width: 70px;
  height: 70px;
  top: 50%;
  right: 20%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 1) 0%, transparent 25%),
    radial-gradient(circle at 50% 50%, #f5d485 0%, #d4a642 40%, #8b6a20 100%);
  box-shadow: 0 15px 35px rgba(212, 166, 66, 0.35);
  animation: ctaFloat2 10s ease-in-out infinite;
}

.cta-orb--3 {
  width: 45px;
  height: 45px;
  bottom: 25%;
  left: 45%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 1) 0%, transparent 30%),
    radial-gradient(circle at 50% 50%, #fff8f0 0%, #e8d4c0 50%, #a08870 100%);
  box-shadow: 0 10px 25px rgba(160, 136, 112, 0.3);
  animation: ctaFloat3 6s ease-in-out infinite;
}

@keyframes ctaFloat1 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@keyframes ctaFloat2 {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-15px) translateX(-10px); }
}

@keyframes ctaFloat3 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(12px); }
}

/* Background glow */
.spheres-cta::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 10%;
  width: 400px;
  height: 400px;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(200, 158, 138, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 768px) {
  .spheres-cta {
    padding: 4rem 1.5rem;
  }

  .spheres-cta__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .spheres-cta__content {
    text-align: center;
  }

  .spheres-cta__text {
    margin-left: auto;
    margin-right: auto;
  }

  .spheres-cta__actions {
    justify-content: center;
  }

  .spheres-cta__visual {
    height: 180px;
    order: -1;
  }

  .cta-orb--1 {
    width: 90px;
    height: 90px;
    left: 30%;
  }

  .cta-orb--2 {
    width: 55px;
    height: 55px;
  }

  .cta-orb--3 {
    width: 35px;
    height: 35px;
  }
}








/* =============================================
   STUDIOS PAGE STYLES - CLEANED
   ============================================= */

/* =============================================
   STUDIOS HERO - FRESH DESIGN
   ============================================= */

.studios-hero {
  min-height: auto;
  padding: 3rem 0 2rem;
  display: flex;
  align-items: center;
  background: 
    radial-gradient(ellipse 100% 80% at 70% 50%, rgba(200, 158, 138, 0.15), transparent 50%),
    radial-gradient(ellipse 60% 60% at 10% 90%, rgba(180, 123, 104, 0.1), transparent 50%),
    linear-gradient(170deg, #fdfbf9 0%, #f8f4f0 50%, #f3ede7 100%);
  overflow: hidden;
  position: relative;
}

.studios-hero__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 3rem;
  align-items: center;
}

/* Content */
.studios-hero__content {
  position: relative;
  z-index: 10;
}

/* Studios hero entrance animation */
@keyframes studiosFadeSlideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes studiosSceneReveal {
  from { opacity: 0; transform: translateY(40px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.studios-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent-strong);
  background: rgba(200, 158, 138, 0.15);
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  margin-bottom: 1.25rem;
  animation: studiosFadeSlideDown 0.8s ease forwards;
  opacity: 0;
}

.studios-hero__title {
  font-size: clamp(2.8rem, 5.5vw, 4rem);
  font-weight: 800;
  line-height: 1.08;
  color: #1f1b18;
  margin: 0 0 1.25rem;
  letter-spacing: -0.02em;
  animation: studiosFadeSlideDown 0.8s ease 0.1s forwards;
  opacity: 0;
}

.studios-hero__subtitle {
  font-size: 1rem;
  line-height: 1.7;
  color: #6b6158;
  margin: 0 0 2rem;
  max-width: 420px;
  animation: studiosFadeSlideDown 0.8s ease 0.2s forwards;
  opacity: 0;
}

.studios-hero__cta {
  display: flex;
  gap: 1rem;
  animation: studiosFadeSlideDown 0.8s ease 0.3s forwards;
  opacity: 0;
}

.studios-hero__cta .btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 2rem;
  background: linear-gradient(135deg, var(--accent, #c89e8a) 0%, var(--accent-strong, #b47b68) 100%);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0.6rem;
  border: none;
  cursor: pointer;
  box-shadow: 
    0 4px 12px rgba(180, 123, 104, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.studios-hero__cta .btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 8px 20px rgba(180, 123, 104, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.1);
  filter: brightness(1.05);
}

.studios-hero__cta .btn--primary:active {
  transform: translateY(0);
  box-shadow: 
    0 2px 8px rgba(180, 123, 104, 0.3);
}

/* Scene container */
.studios-hero__scene {
  position: relative;
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: studiosSceneReveal 1s ease 0.4s forwards;
  opacity: 0;
}

/* Course Stack */
.course-stack {
  position: relative;
  width: 320px;
  height: 340px;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.course-stack:hover {
  transform: rotateY(-5deg) rotateX(5deg) scale(1.02);
}

.course-stack__card {
  position: absolute;
  width: 100%;
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.course-stack__card--1 {
  height: 100%;
  z-index: 3;
  box-shadow: 
    0 2px 4px rgba(0,0,0,0.02),
    0 8px 16px rgba(0,0,0,0.04),
    0 24px 48px rgba(120, 80, 60, 0.12),
    0 48px 80px rgba(120, 80, 60, 0.08);
}

.course-stack__card--2 {
  height: 94%;
  top: -12px;
  left: 12px;
  z-index: 2;
  background: linear-gradient(135deg, #f8f4f0 0%, #f0ebe5 100%);
  box-shadow: 0 20px 50px rgba(120, 80, 60, 0.1);
}

.course-stack__card--3 {
  height: 88%;
  top: -24px;
  left: 24px;
  z-index: 1;
  background: linear-gradient(135deg, #f3ede7 0%, #ebe4dc 100%);
  box-shadow: 0 16px 40px rgba(120, 80, 60, 0.08);
}

.course-stack:hover .course-stack__card--2 {
  transform: translate(8px, -8px);
}

.course-stack:hover .course-stack__card--3 {
  transform: translate(16px, -16px);
}

.stack-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255,255,255,0.5) 50%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s;
}

.course-stack:hover .stack-shimmer {
  animation: shimmer 1.5s ease-in-out;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); opacity: 1; }
  100% { transform: translateX(100%); opacity: 1; }
}

/* Stack Content */
.stack-content {
  padding: 1.25rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.stack-content__header {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(180, 123, 104, 0.1);
  margin-bottom: 1rem;
}

.stack-avatar {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  flex-shrink: 0;
}

.stack-meta__title {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1f1b18;
  margin-bottom: 0.2rem;
}

.stack-meta__author {
  font-size: 0.8rem;
  color: #9a918a;
}

.stack-modules {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stack-module {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #faf8f6;
  border-radius: 10px;
  font-size: 0.85rem;
  color: #9a918a;
  transition: all 0.25s ease;
}

.stack-module--done {
  color: var(--accent-strong);
}

.stack-module--active {
  background: linear-gradient(135deg, rgba(200, 158, 138, 0.12) 0%, rgba(180, 123, 104, 0.08) 100%);
  color: #1f1b18;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(180, 123, 104, 0.1);
}

.sm-check {
  width: 20px;
  height: 20px;
  background: var(--accent-strong);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
}

.sm-dot {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(180, 123, 104, 0.3);
  border-radius: 50%;
}

.stack-module--active .sm-dot {
  border-color: var(--accent-strong);
  background: rgba(180, 123, 104, 0.2);
  animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(180, 123, 104, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(180, 123, 104, 0); }
}

.stack-progress {
  height: 6px;
  background: rgba(180, 123, 104, 0.12);
  border-radius: 3px;
  margin-top: 1rem;
  overflow: hidden;
}

.stack-progress__fill {
  height: 100%;
  width: 65%;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  border-radius: 3px;
  position: relative;
}

.stack-progress__fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: progressShine 2s ease-in-out infinite;
}

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

/* Floating Badges */
.floating-badge {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
  box-shadow: 
    0 4px 12px rgba(0,0,0,0.04),
    0 12px 32px rgba(120, 80, 60, 0.12);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease;
  cursor: pointer;
  z-index: 5;
}

.floating-badge:hover {
  transform: scale(1.15) translateY(-4px) !important;
  box-shadow: 
    0 8px 20px rgba(0,0,0,0.06),
    0 20px 50px rgba(120, 80, 60, 0.18);
}

.badge-glow {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 158, 138, 0.3), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
}

.floating-badge:hover .badge-glow {
  opacity: 1;
}

.badge-icon {
  width: 24px;
  height: 24px;
  color: var(--accent-strong);
}

/* Badge positions & sizes */
.floating-badge--cert {
  width: 64px;
  height: 64px;
  top: 8%;
  right: 12%;
  animation: floatA 7s ease-in-out infinite;
}

.floating-badge--play {
  width: 56px;
  height: 56px;
  bottom: 25%;
  right: 8%;
  animation: floatB 6s ease-in-out infinite;
}

.floating-badge--play .badge-icon {
  width: 20px;
  height: 20px;
  margin-left: 3px;
}

.floating-badge--check {
  width: 52px;
  height: 52px;
  bottom: 12%;
  left: 15%;
  animation: floatC 5.5s ease-in-out infinite;
  background: #10b981;
}

.floating-badge--check .badge-icon {
  color: #fff;
  width: 22px;
  height: 22px;
}

.floating-badge--check .badge-glow {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.4), transparent 70%);
}

.floating-badge--users {
  width: auto;
  height: 52px;
  padding: 0 16px;
  border-radius: 30px;
  gap: 8px;
  top: 20%;
  left: -2%;
  animation: floatD 8s ease-in-out infinite;
}

.badge-avatars {
  display: flex;
}

.badge-avatars img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -10px;
  object-fit: cover;
}

.badge-avatars img:first-child {
  margin-left: 0;
}

.badge-count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-strong);
}

.floating-badge--ring {
  width: 72px;
  height: 72px;
  top: 55%;
  left: 2%;
  animation: floatE 6.5s ease-in-out infinite;
}

.ring-progress {
  width: 44px;
  height: 44px;
}

.ring-bg {
  fill: none;
  stroke: rgba(180, 123, 104, 0.15);
  stroke-width: 4;
}

.ring-fill {
  fill: none;
  stroke: var(--accent-strong);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 82.5 113;
  stroke-dashoffset: 28;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dasharray 0.5s ease;
}

.floating-badge--ring:hover .ring-fill {
  stroke-dasharray: 95 113;
}

.ring-text {
  position: absolute;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--accent-strong);
}

/* Price tag - shaped like actual tag */
.floating-badge--price {
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  bottom: 5%;
  right: 5%;
  animation: floatF 6s ease-in-out infinite;
}

.floating-badge--price .badge-glow {
  background: radial-gradient(circle, rgba(200, 158, 138, 0.3), transparent 70%);
  inset: -8px;
}

.price-tag-shape {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 16px 10px 24px;
  background: linear-gradient(135deg, var(--accent, #c89e8a) 0%, var(--accent-strong, #b47b68) 100%);
  border-radius: 0 8px 8px 0;
  box-shadow: 
    0 4px 16px rgba(180, 123, 104, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.2);
}

/* Pointed left edge */
.price-tag-shape::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 0;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 12px solid var(--accent, #c89e8a);
}

/* String hole */
.price-tag__hole {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: #faf8f6;
  border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
}

.price-tag__amount {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

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

/* Float animations */
@keyframes floatA {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(5deg); }
}

@keyframes floatB {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(-5deg); }
}

@keyframes floatC {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

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

@keyframes floatE {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-11px); }
}

/* Ambient Orbs */
.ambient-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.ambient-orb--1 {
  width: 200px;
  height: 200px;
  top: -5%;
  right: -8%;
  background: 
    radial-gradient(circle at 35% 35%, rgba(255,255,255,0.8), transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(200, 158, 138, 0.35), rgba(200, 158, 138, 0.1) 50%, transparent 70%);
  filter: blur(1px);
  animation: orbDrift1 25s ease-in-out infinite;
}

.ambient-orb--2 {
  width: 140px;
  height: 140px;
  bottom: 5%;
  right: 15%;
  background: 
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6), transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(180, 123, 104, 0.25), transparent 60%);
  filter: blur(0.5px);
  animation: orbDrift2 20s ease-in-out infinite;
}

.ambient-orb--3 {
  width: 100px;
  height: 100px;
  top: 35%;
  left: -8%;
  background: 
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.7), transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(200, 158, 138, 0.3), transparent 60%);
  animation: orbDrift3 18s ease-in-out infinite;
}

.ambient-orb--4 {
  width: 60px;
  height: 60px;
  top: 10%;
  left: 25%;
  background: 
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(180, 123, 104, 0.2), transparent 60%);
  animation: orbDrift4 15s ease-in-out infinite;
}

@keyframes orbDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-20px, 15px) scale(1.05); }
  66% { transform: translate(10px, -10px) scale(0.98); }
}

@keyframes orbDrift2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(15px, -20px); }
}

@keyframes orbDrift3 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(12px, 10px); }
}

@keyframes orbDrift4 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-8px, 12px); }
}

/* Responsive */
@media (max-width: 1024px) {
  .studios-hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }
  
  .studios-hero__content {
    order: 1;
  }
  
  .studios-hero__scene {
    order: 2;
    height: 400px;
  }
  
  .studios-hero__subtitle {
    max-width: 100%;
  }
  
  .studios-hero__cta {
    justify-content: center;
  }
  
  .course-stack {
    width: 280px;
    height: 300px;
  }
  
  .floating-badge--users {
    left: 5%;
  }
  
  .floating-badge--ring {
    left: 8%;
  }
}

@media (max-width: 600px) {
  .studios-hero {
    min-height: auto;
    padding: 3rem 0 2rem;
  }
  
  .studios-hero__scene {
    height: 340px;
  }
  
  .course-stack {
    width: 260px;
    height: 280px;
  }
  
  .floating-badge--cert,
  .floating-badge--play {
    display: none;
  }
  
  .floating-badge--users {
    top: 5%;
    left: 0;
  }
  
  .floating-badge--ring {
    bottom: 5%;
    left: 0;
    top: auto;
  }

  .ring-text {
    font-size: 0.55rem;
  }
  
  .floating-badge--check {
    bottom: 5%;
    left: auto;
    right: 0;
  }

  .ambient-orb--1 {
    display: none;
  }
}
/* =============================================
   STUDIO SLIDER
   ============================================= */

.studio-slider {
  --slider-bg: linear-gradient(180deg, #f8f3ef 0%, #f2ebe4 100%);
  --card-bg: #ffffff;
  --mock-bg: linear-gradient(160deg, #fdfbf9 0%, #f5f0eb 100%);
  --text-primary: #2a2623;
  --text-secondary: #5a534d;
  --text-muted: #8a847e;
  --border-light: rgba(180, 123, 104, 0.12);
  --border-mock: rgba(180, 123, 104, 0.15);

  background: var(--slider-bg);
  padding: 5rem 0 4rem;
  overflow: hidden;

   user-select: none;
  -webkit-user-select: none;
}

.studio-slider__header {
  text-align: center;
  margin-bottom: 3rem;
  padding: 0 2rem;
}

.studio-slider__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin: 0 0 0.5rem;
  margin-top:-2rem;
}

.studio-slider__title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-primary);
  margin: 0;
  max-width: 900px;
  margin-inline: auto;
}

.studio-slider__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.studio-slider__track {
  display: flex;
  gap: 5rem;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
}

.studio-slider__track:active,
.studio-slider__track.is-dragging {
  cursor: grabbing;
  transition: none;
}

.studio-slide {
  flex: 0 0 min(950px, 64.5%);
  width: auto;
  padding: 0;
  box-sizing: border-box;
}

.studio-slide__inner {
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: 1.8rem;
  padding: 2.1rem;
  min-height: 350px;
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 12px 40px rgba(140, 100, 80, 0.08);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.studio-slide__inner:hover {
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.06),
    0 20px 60px rgba(140, 100, 80, 0.12);
}


/* =============================================
   MOCK CONTAINER
   ============================================= */

.studio-slide__mock {
  background: var(--mock-bg);
  border: 1px solid var(--border-mock);
  border-radius: 1.15rem;
  overflow: hidden;
  height: 100%;
  min-height: 365px;
  max-height: 365px;
  display: flex;
  flex-direction: column;
  box-shadow: 
    0 2px 8px rgba(140, 100, 80, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: box-shadow 0.3s ease;
}

.studio-slide:hover .studio-slide__mock {
  box-shadow: 
    0 2px 8px rgba(140, 100, 80, 0.08),
    0 0 30px rgba(200, 158, 138, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.studio-slide__mock .slide-mock__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.15rem;
  border-bottom: 1px solid rgba(180, 123, 104, 0.1);
  background: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

.studio-slide__mock .slide-mock__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent), var(--accent-strong));
  box-shadow: 0 0 8px rgba(200, 158, 138, 0.5);
  animation: studioHeaderDotPulse 2s ease-in-out infinite;
}

@keyframes studioHeaderDotPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(200, 158, 138, 0.5); }
  50% { box-shadow: 0 0 12px rgba(200, 158, 138, 0.8); }
}

.studio-slide__mock .slide-mock__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.studio-slide__mock .slide-mock__badge {
  margin-left: auto;
  font-size: 0.68rem;
  padding: 0.18rem 0.58rem;
  border-radius: 999px;
  background: rgba(200, 158, 138, 0.15);
  color: var(--accent-strong);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.studio-slide__mock .slide-mock__count {
  margin-left: auto;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.studio-slide__content {
  padding: 0.5rem 0;
}

.studio-slide__heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.75rem;
  line-height: 1.2;
}

.studio-slide__text {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}


/* =============================================
   SLIDER CONTROLS
   ============================================= */

.studio-slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
  padding: 0 2rem;
}

.studio-slider__arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: #fff;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.studio-slider__arrow:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
  box-shadow: 0 4px 16px rgba(180, 123, 104, 0.15);
  transform: scale(1.05);
}

.studio-slider__arrow:active {
  transform: scale(0.98);
}

.studio-slider__dots {
  display: flex;
  gap: 0.5rem;
}

.studio-slider__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(180, 123, 104, 0.25);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.studio-slider__dot:hover {
  background: rgba(180, 123, 104, 0.4);
}

.studio-slider__dot.is-active {
  width: 28px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
}


/* =============================================
   SLIDE 1: COURSE BUILDER
   ============================================= */

.slide-mock__builder {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.builder-tree {
  width: 48%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(180, 123, 104, 0.08);
  overflow: hidden;
  position: relative;
  background: linear-gradient(160deg, #fdfbf9 0%, #f5f0eb 100%);
}

.builder-tree::before,
.builder-tree::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 25px;
  pointer-events: none;
  z-index: 2;
}

.builder-tree::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(253, 251, 249, 1) 0%, rgba(253, 251, 249, 0) 100%);
}

.builder-tree::after {
  bottom: 0;
  height: 55px;
  background: linear-gradient(to top, rgba(253, 251, 249, 1) 60%, rgba(253, 251, 249, 0) 100%);
}

.builder-scroll-wrapper {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.builder-scroll {
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.builder-module {
  flex-shrink: 0;
}

.builder-module__head {
  padding: 0.45rem 0.6rem;
  background: #fff;
  border-radius: 0.4rem;
  margin-bottom: 0.25rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.builder-module__name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
}

.builder-lessons {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-left: 0.4rem;
  border-left: 2px solid rgba(180, 123, 104, 0.15);
  margin-left: 0.4rem;
}

.builder-lesson {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.45rem;
  border-radius: 0.3rem;
}

.builder-lesson__icon {
  color: var(--accent-strong);
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.builder-lesson__name {
  font-size: 0.8rem;
  color: var(--text-primary);
}

.builder-add {
  margin: 0.6rem;
  padding: 0.7rem 1rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border: none;
  border-radius: 0.5rem;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  z-index: 3;
  box-shadow: 0 4px 15px rgba(180, 123, 104, 0.4);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s ease,
              filter 0.2s ease;
}

.builder-editor {
  flex: 1;
  padding: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.builder-editor__panel {
  background: #faf8f6;
  border: 1px dashed rgba(180, 123, 104, 0.25);
  border-radius: 0.55rem;
  padding: 0.75rem 0.9rem;
  text-align: center;
  width: 100%;
}

.builder-editor__heading {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.1rem;
}

.builder-editor__sub {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}

.builder-editor__blocks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.3rem;
  max-width: 150px;
  margin: 0 auto;
}

.builder-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.4rem 0.45rem;
  background: #fff;
  border: 1px solid rgba(180, 123, 104, 0.1);
  border-radius: 0.35rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.builder-block__icon { 
  width: 22px;
  height: 22px;
}

.builder-block__icon--red { color: #e05a4e; }
.builder-block__icon--blue { color: #4a9fd4; }
.builder-block__icon--purple { color: #8b6bbf; }
.builder-block__icon--green { color: #4db076; }

.builder-block__label {
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--text-secondary);
}


/* =============================================
   SLIDE 2: VIDEO PLAYER
   ============================================= */

.slide-mock__player {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0.85rem;
  gap: 0.5rem;
}

.player-screen {
  position: relative;
  background: #1a1412;
  border-radius: 0.5rem;
  overflow: hidden;
  aspect-ratio: 16/9;
  max-height: 175px;
  margin-top: -0.5rem;
}

.player-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player-video__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
}

.player-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 0.4rem;
}

.player-controls__play {
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.5rem;
  padding-left: 2px;
  box-shadow: 0 2px 6px rgba(180, 123, 104, 0.3);
}

.player-controls__progress {
  flex: 1;
  height: 5px;
  background: rgba(180, 123, 104, 0.12);
  border-radius: 3px;
  overflow: hidden;
}

.player-controls__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  border-radius: 3px;
}

.player-controls__time {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  min-width: 72px;
  text-align: right;
}

.player-lessons {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
  overflow: hidden;
}

.player-lesson {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.73rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 0.4rem;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.4s ease,
              color 0.4s ease,
              box-shadow 0.4s ease,
              font-weight 0.4s ease;
}

.player-lesson--active {
  background: #fff;
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.player-lesson--complete {
  background: rgba(180, 123, 104, 0.08);
  color: var(--accent-strong);
}

.player-lesson--exiting {
  opacity: 0;
  transform: translateX(-30px);
}

.player-lesson--entering {
  opacity: 0;
  transform: translateY(20px);
}

.player-lesson__icon {
  color: var(--accent-strong);
  font-weight: 700;
  font-size: 0.75rem;
  width: 14px;
  text-align: center;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.player-lesson__dot {
  width: 7px;
  height: 7px;
  background: currentColor;
  border-radius: 50%;
  opacity: 0.3;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.player-lesson--active .player-lesson__dot {
  background: var(--accent-strong);
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(180, 123, 104, 0.15);
}

.player-lesson__text {
  flex: 1;
}


/* =============================================
   SLIDE 3: PROGRESS TRACKING
   ============================================= */

.slide-mock__progress {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  flex: 1;
  gap: 1rem;
  position: relative;
  overflow: hidden;
  transition: background 0.5s ease;
}

.progress-overview {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.progress-ring {
  position: relative;
  width: 150px;
  height: 150px;
  flex-shrink: 0;
}

.progress-ring svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.progress-ring__bg {
  fill: none;
  stroke: rgba(180, 123, 104, 0.12);
  stroke-width: 8;
}

.progress-ring__fill {
  fill: none;
  stroke: var(--accent-strong);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 264;
  stroke-dashoffset: 264;
  transition: stroke 0.3s ease;
}

.progress-ring__value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  transition: all 0.3s ease;
}

.progress-stats {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.progress-stat__value {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  transition: all 0.3s ease;
}

.progress-stat__label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.progress-modules {
  position: relative;
  height: 132px;
  width: 140px;
  margin: 0 auto;
  overflow: hidden;
  margin-top: 0.85rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: transparent;
}

.progress-modules::before,
.progress-modules::after {
  content: none !important;
}

.progress-modules-highlight {
  display: none;
}

.progress-module-scroller {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 2;
}

.progress-module-item {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  opacity: 0.35;
  transform: scale(0.9);
  transition: all 0.35s ease;
  white-space: nowrap;
}

.progress-module-item--prev,
.progress-module-item--next {
  opacity: 0.6;
  transform: scale(0.96);
}

.progress-module-item--active {
  opacity: 1;
  transform: scale(1.08);
  font-weight: 700;
  color: var(--accent-strong);
  font-size: 0.9rem;
}

.progress-module-item--hidden {
  opacity: 0;
  transform: scale(1.06);
}

.progress-module-item--disabled {
  color: var(--text-muted);
  opacity: 0.35;
  font-weight: 500;
  pointer-events: none;
}

@keyframes confettiFall {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(180px) rotate(1080deg) scale(0.2);
    opacity: 0;
  }
}

.confetti-piece {
  pointer-events: none;
}


/* =============================================
   SLIDE 4: QUIZ
   ============================================= */

.slide-mock__quiz {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem 1.1rem;
  flex: 1;
  gap: 0.5rem;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.studio-quiz-question {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

.studio-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.studio-quiz-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  background: linear-gradient(135deg, #fff 0%, #fdfcfb 100%);
  border: 1.5px solid rgba(180, 123, 104, 0.1);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.studio-quiz-option:hover {
  border-color: rgba(180, 123, 104, 0.25);
}

.studio-quiz-option--selected {
  background: linear-gradient(135deg, rgba(200, 158, 138, 0.12) 0%, rgba(200, 158, 138, 0.18) 100%);
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(180, 123, 104, 0.15);
}

.studio-quiz-option__letter {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #f8f5f3 0%, #f0ebe8 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: all 0.15s ease;
  border: 1px solid rgba(180, 123, 104, 0.08);
}

.studio-quiz-option--selected .studio-quiz-option__letter {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #fff;
  border-color: transparent;
  transform: scale(1.08);
  box-shadow: 0 2px 6px rgba(180, 123, 104, 0.3);
}

.studio-quiz-option__text {
  flex: 1;
  font-size: 0.73rem;
  color: var(--text-primary);
  font-weight: 450;
}

.studio-quiz-option--selected .studio-quiz-option__text {
  font-weight: 550;
}

.studio-quiz-option__check {
  color: var(--accent-strong);
  font-weight: 700;
  font-size: 0.75rem;
  opacity: 0;
  transform: scale(0);
  transition: all 0.2s ease;
}

.studio-quiz-option--selected .studio-quiz-option__check {
  opacity: 1;
  transform: scale(1.1);
}

.studio-quiz-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.studio-quiz-btn {
  padding: 0.5rem 1rem;
  border-radius: 0.45rem;
  font-size: 0.73rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
}

.studio-quiz-btn--secondary {
  background: linear-gradient(135deg, #faf8f6 0%, #f5f0ed 100%);
  border: 1px solid rgba(180, 123, 104, 0.15);
  color: var(--text-secondary);
}

.studio-quiz-btn--primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(180, 123, 104, 0.25);
}

.studio-quiz-btn--primary:hover {
  box-shadow: 0 4px 12px rgba(180, 123, 104, 0.35);
  transform: translateY(-1px);
}


/* =============================================
   SLIDE 5: CERTIFICATE
   ============================================= */

.slide-mock__certificate {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  flex: 1;
}

.certificate {
  background: #fff;
  border: 2px solid rgba(180, 123, 104, 0.2);
  border-radius: 0.85rem;
  padding: 1.5rem 2rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  max-width: 300px;
  width: 100%;
}

.certificate__badge {
  font-size: 2.1rem;
  margin-bottom: 0.35rem;
}

.certificate__title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-strong);
  margin-bottom: 0.5rem;
}

.certificate__course {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.7rem;
  min-height: 1.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.cert-text {
  display: inline;
}

.cert-cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: var(--accent-strong);
  animation: cursorBlink 0.5s step-end infinite;
  margin-left: 3px;
  vertical-align: middle;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.certificate__name {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.certificate__date {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.certificate__signature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.certificate__line {
  width: 100px;
  height: 1px;
  background: rgba(0, 0, 0, 0.2);
}

.certificate__signer {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* =============================================
   SLIDE 6: DRIP SCHEDULE - FIXED
   ============================================= */

.slide-mock__drip {
  padding: 0.75rem;
  padding-left: 1.25rem;
  flex: 1;
  overflow: hidden;
  position: relative;
}

.slide-mock__drip::before,
.slide-mock__drip::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 30px;
  pointer-events: none;
  z-index: 2;
}

.slide-mock__drip::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(253, 251, 249, 1) 0%, rgba(253, 251, 249, 0) 100%);
}

.slide-mock__drip::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(253, 251, 249, 1) 0%, rgba(253, 251, 249, 0) 100%);
}

.drip-timeline {
  position: relative;
  margin-left: 8px;
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
}

.drip-timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(180, 123, 104, 0.2);
}

.drip-item {
  position: relative;
  padding: 0.5rem 0;
  flex-shrink: 0;
}

.drip-item__marker {
  position: absolute;
  left: -1.5rem;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(180, 123, 104, 0.3);
  z-index: 1;
  transform: translate(-50%, -50%);
  margin-left: 1px;
}

.drip-item--released .drip-item__marker {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.drip-item--released .drip-item__marker::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
}

.drip-item--upcoming .drip-item__marker {
  border-color: var(--accent);
  border-width: 3px;
  background: #fff;
  animation: studioDripPulse 2s infinite;
}

@keyframes studioDripPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(180, 123, 104, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(180, 123, 104, 0); }
}

.drip-item--locked {
  opacity: 0.5;
}

.drip-item__content {
  background: #fff;
  padding: 0.6rem 0.9rem;
  border-radius: 0.45rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.drip-item--released .drip-item__content {
  background: rgba(180, 123, 104, 0.06);
}

.drip-item--upcoming .drip-item__content {
  border: 1px solid rgba(180, 123, 104, 0.2);
}

.drip-item__title {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.1rem;
}

.drip-item__status {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.drip-item--released .drip-item__status {
  color: var(--accent-strong);
  font-weight: 500;
}

.drip-item--upcoming .drip-item__status {
  color: var(--accent);
}

/* =============================================
   SLIDE 7: TEMPLATES
   ============================================= */

.slide-mock__templates-v2 {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, #f8f5f2 0%, #f3ede7 100%);
  border-radius: 0 0 12px 12px;
}

.slide-mock__templates-v2::before,
.slide-mock__templates-v2::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 25px;
  z-index: 2;
  pointer-events: none;
}

.slide-mock__templates-v2::before {
  top: 0;
  background: linear-gradient(to bottom, #f8f5f2 0%, transparent 100%);
}

.slide-mock__templates-v2::after {
  bottom: 0;
  background: linear-gradient(to top, #f3ede7 0%, transparent 100%);
}

.templates-v2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px;
}

/* Template card */
.tpl-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 
    0 1px 3px rgba(0,0,0,0.04),
    0 4px 12px rgba(0,0,0,0.06);
}

.tpl-card--selected {
  box-shadow: 
    0 0 0 2px var(--accent-strong, #b47b68),
    0 4px 16px rgba(180, 123, 104, 0.2);
}

/* Image container */
.tpl-card__img {
  position: relative;
  height: 80px;
  overflow: hidden;
  background: linear-gradient(135deg, #e8e0d8 0%, #d8cfc5 100%);
}

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

.tpl-card__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 0.5rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent-strong, #b47b68);
  padding: 3px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Info section */
.tpl-card__info {
  padding: 8px 10px;
}

.tpl-card__name {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: #1a1714;
  margin-bottom: 2px;
  line-height: 1.2;
}

.tpl-card__meta {
  font-size: 0.65rem;
  color: #8a8078;
}

/* =============================================
   SLIDE 8: ASSIGNMENTS
   ============================================= */

.slide-mock__assignment {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.assignment-prompt {
  background: #fff;
  padding: 0.9rem 1rem;
  border-radius: 0.5rem;
  border-left: 3px solid var(--accent-strong);
}

.assignment-prompt__label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-strong);
  margin-bottom: 0.3rem;
}

.assignment-prompt__text {
  font-size: 0.85rem;
  color: var(--text-primary);
  line-height: 1.45;
}

.assignment-options {
  display: flex;
  gap: 0.5rem;
}

.assignment-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  background: #fff;
  border: 1.5px solid rgba(180, 123, 104, 0.12);
  border-radius: 0.45rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.assignment-option svg {
  width: 16px;
  height: 16px;
}

.assignment-option--active {
  background: rgba(200, 158, 138, 0.1);
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}

.assignment-option__label {
  font-weight: 500;
}

.assignment-input {
  flex: 1;
  background: #fff;
  border: 1.5px solid rgba(180, 123, 104, 0.12);
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
  min-height: 90px;
  font-size: 0.85rem;
  color: var(--text-primary);
  line-height: 1.5;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.assignment-input--focused {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(180, 123, 104, 0.1);
}

.assignment-input__text {
  color: var(--text-primary);
}

.assignment-input__cursor {
  color: var(--accent-strong);
  font-weight: 400;
  animation: cursorBlink 0.5s step-end infinite;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.assignment-input__placeholder {
  color: var(--text-muted);
}

.assignment-submit {
  align-self: flex-start;
  padding: 0.65rem 1.25rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border: none;
  border-radius: 0.45rem;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(180, 123, 104, 0.3);
}

.assignment-submit--pressed {
  transform: scale(0.92) translateY(2px);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.2), 0 1px 2px rgba(180, 123, 104, 0.2);
}

.assignment-submit--success {
  background: linear-gradient(135deg, #5a9a50, #4a8a42);
  box-shadow: 0 4px 15px rgba(90, 154, 80, 0.4);
  transform: scale(1.02);
}

/* =============================================
   BRANDING SLIDE V3 - LIGHT THEME
   ============================================= */

.slide-mock__branding-v3 {
  position: relative;
  height: 100%;
  padding: 12px;
  overflow: hidden;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(145deg, #fdfbf9 0%, #f5f0eb 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

/* Color wash background */
.brandv3-wash {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 70%;
  background: radial-gradient(ellipse at center, var(--brandv3-color, #E05A4E), transparent 60%);
  opacity: 0.12;
  transition: all 0.5s ease;
  pointer-events: none;
  filter: blur(30px);
}

/* Course card */
.brandv3-card {
  width: 100%;
  flex: 1;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 
    0 2px 4px rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.08);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

/* Card cover with image and color overlay */
.brandv3-card__cover {
  flex: 1;
  min-height: 80px;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 10px;
  overflow: hidden;
  background: #e8e0d8;
}

.brandv3-card__cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brandv3-card__cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--brandv3-color, #E05A4E) 0%, var(--brandv3-color-dark, #c94a3f) 100%);
  opacity: 0.2;  /*opacity of gradient on module cover*/
  mix-blend-mode: multiply;
  transition: background 0.5s ease;
}

.brandv3-card__cover-shine {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.25) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.2) 0%, transparent 30%);
  pointer-events: none;
}

.brandv3-card__badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--brandv3-color, #E05A4E);
  background: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  position: relative;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: color 0.5s ease;
}

/* Card body */
.brandv3-card__body {
  display: flex;
  gap: 12px;
  padding: 5px;
  align-items: center;
}

.brandv3-card__logo {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--brandv3-color, #E05A4E);
  flex-shrink: 0;
  transition: background 0.5s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.brandv3-card__info {
  flex: 1;
  min-width: 0;
}

.brandv3-card__title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a1714;
  line-height: 1.3;
  margin-bottom: 3px;
}

.brandv3-card__meta {
  font-size: 0.7rem;
  color: #8a8078;
}

/* Card footer */
.brandv3-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 14px;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: #faf8f6;
}

.brandv3-card__price {
  font-size: 1rem;
  font-weight: 800;
  color: #1a1714;
}

.brandv3-card__btn {
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: var(--brandv3-color, #E05A4E);
  padding: 8px 16px;
  border-radius: 6px;
  transition: background 0.5s ease, transform 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Color swatches */
.brandv3-swatches {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.8);
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  position: relative;
  z-index: 1;
  margin-top: 10px;
  flex-shrink: 0;
}

.brandv3-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--swatch-color);
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  position: relative;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.brandv3-swatch:hover {
  transform: scale(1.2);
}

.brandv3-swatch--active {
  transform: scale(1.15);
  box-shadow: 
    0 0 0 3px var(--swatch-color),
    0 4px 12px rgba(0,0,0,0.2);
}

/* Ring pulse on active */
.brandv3-swatch--active::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--swatch-color);
  opacity: 0.4;
  animation: brandv3Pulse 1.5s ease-in-out infinite;
}

@keyframes brandv3Pulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.1); opacity: 0.2; }
}
/* =============================================
   SLIDE 10: REFLECTIONS
   ============================================= */

.slide-mock__reflections {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
}

.reflection-prompt {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(180, 123, 104, 0.12);
}

.reflection-responses {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  overflow: hidden;
}

.reflection-item {
  display: flex;
  gap: 0.65rem;
  padding: 0.7rem 0.85rem;
  background: #fff;
  border-radius: 0.55rem;
  border: 1px solid rgba(180, 123, 104, 0.08);
  max-height: 0;
  opacity: 0;
  transform: scale(0.9);
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  transition: max-height 0.4s ease, opacity 0.4s ease, transform 0.4s ease, padding 0.4s ease, margin 0.4s ease;
}

.reflection-item--visible {
  max-height: 100px;
  opacity: 1;
  transform: scale(1);
  padding: 0.7rem 0.85rem;
  margin-bottom: 0;
}

.reflection-item--exiting {
  max-height: 0;
  opacity: 0;
  transform: scale(0.9);
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: -0.5rem;
}

.reflection-item__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}

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

.reflection-item__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.reflection-item__name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
}

.reflection-item__text {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.reflection-item__time {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

/* =============================================
   RESPONSIVE - TABLET
   ============================================= */

@media (max-width: 1024px) {
  /* Hero */
  .studios-hero__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center;
  }

  .studios-hero__content {
    max-width: 100%;
  }

  .studios-hero__subtitle {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .studios-hero__cta {
    justify-content: center;
  }

  .studios-hero__scene {
    height: 400px;
  }

  .course-stack {
    width: 280px;
    height: 300px;
  }

  .floating-badge--users {
    left: 5%;
  }

  .floating-badge--ring {
    left: 8%;
  }

  .floating-badge--check {
    left: 10%;
  }

  /* Slider */
  .studio-slider {
    padding: 4rem 0 3rem;
  }

  .studio-slider__track {
    gap: 3rem;
  }

  .studio-slide {
    flex: 0 0 min(600px, 75%);
  }

  .studio-slide__inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
    min-height: auto;
  }

  .studio-slide__mock {
  height: 360px;
  min-height: 360px;
  max-height: 360px;
  border-radius: 0.85rem;
}

  /* Progress ring */
  .progress-overview {
    flex-direction: column;
    text-align: center;
  }

  .progress-ring {
    width: 120px;
    height: 120px;
  }

  .progress-stats {
    flex-direction: row;
    gap: 1.5rem;
  }

  /* Features grid */
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature-card--hero {
    grid-column: span 2;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .content-types {
    grid-template-columns: repeat(6, 1fr);
  }

  /* CTA */
  .studios-cta__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 3rem;
  }

  .studios-cta__content {
    max-width: 100%;
  }

  .studios-cta__actions {
    justify-content: center;
  }

  .studios-cta__visual {
    height: 280px;
  }
}


/* =============================================
   RESPONSIVE - MOBILE
   ============================================= */

@media (max-width: 600px) {
  /* Hero */
  .studios-hero {
    padding: 2.5rem 0 2rem;
  }

  .studios-hero__inner {
    padding: 0 1.25rem;
    gap: 2rem;
  }

  .studios-hero__title {
    font-size: 3.2rem;
  }

  .studios-hero__subtitle {
    font-size: 0.9rem;
    margin-top: 0.8rem;
    margin-bottom: 0.8rem;
  }

  .studios-hero__cta {
    margin-bottom: -1rem;
  }

  .studios-hero__scene {
    height: 340px;
  }

  .course-stack {
    width: 240px;
    height: 260px;
  }

  .stack-content {
    padding: 1rem;
  }

  .stack-meta__title {
    font-size: 0.9rem;
  }

  .stack-module {
    padding: 0.6rem 0.8rem;
    font-size: 0.75rem;
  }

  .sm-check, .sm-dot {
    width: 16px;
    height: 16px;
  }

  /* Hide some floating badges on mobile */
  .floating-badge--cert,
  .floating-badge--play {
    display: none;
  } 

  .floating-badge--users {
    top: 5%;
    left: 0;
    padding: 0 12px;
    height: 44px;
  }

  .floating-badge--ring {
    width: 60px;
    height: 60px;
    bottom: 5%;
    left: 0;
    top: auto;
  }

  .floating-badge--check {
    width: 44px;
    height: 44px;
    bottom: 5%;
    left: auto;
    right: 0;
  }

  .floating-badge--price {
    bottom: 2%;
    right: 50%;
    transform: translateX(50%);
  }

  .badge-avatars img {
    width: 24px;
    height: 24px;
  }

  .ring-progress {
    width: 36px;
    height: 36px;
  }

  /* Slider */
  .studio-slider {
    padding: 3rem 0 2.5rem;
  }

  .studio-slider__header {
    margin-bottom: 2rem;
  }

  .studio-slider__eyebrow {
    margin-top: -1rem;
  }

  .studio-slider__title {
    font-size: 1.4rem;
  }

  .studio-slider__track {
    gap: 0.4rem;
  }
  
  .studio-slide {
    flex: 0 0 min(350px, 90%);
  }

  .studio-slide__inner {
    padding: 1.25rem;
    border-radius: 1.25rem;
    gap: 1.25rem;
    min-height: 550px;
    max-height: 550px;
    grid-template-rows: 360px 1fr;
  }

  .studio-slide__mock {
    height: 370px !important;
    min-height: 370px !important;
    max-height: 370px !important;
    border-radius: 0.85rem;
}

  .studio-slide__heading {
    font-size: 1.2rem;
  }

  .studio-slide__text {
    font-size: 0.88rem;
  }

  .studio-slider__controls {
    margin-top: 1.75rem;
    gap: 1rem;
  }

  .studio-slider__arrow {
    width: 42px;
    height: 42px;
  }

  .studio-slider__dot {
    width: 8px;
    height: 8px;
  }

  .studio-slider__dot.is-active {
    width: 22px;
  }

  /* Slide 1: Builder */
.slide-mock__builder {
  flex-direction: column;
}

.builder-tree {
  width: 100%;
  min-height: 160px;
  max-height: 180px;
  border-right: none;
  border-bottom: 1px solid rgba(180, 123, 104, 0.08);
}

.builder-editor {
  padding: 0.4rem;
  flex: 0;
}

.builder-editor__panel {
  padding: 0.5rem 0.6rem;
}

.builder-editor__heading {
  font-size: 0.7rem;
  margin-bottom: 0;
}

.builder-editor__sub {
  font-size: 0.55rem;
  margin-bottom: 0.4rem;
}

.builder-editor__blocks {
  gap: 0.2rem;
  max-width: 120px;
}

.builder-block {
  padding: 0.3rem;
}

.builder-block__icon {
  width: 16px;
  height: 16px;
}

.builder-block__label {
  font-size: 0.5rem;
}

.builder-add {
  margin: 0.4rem;
  padding: 0.4rem 0.7rem;
  font-size: 0.7rem;
}

  /* Slide 2: Player */
  .player-screen {
    max-height: 140px;
  }

  .player-lessons {
    gap: 0.2rem;
  }

  .player-lesson {
    padding: 0.3rem 0.5rem;
    font-size: 0.68rem;
  }

  /* Slide 3: Progress */
.slide-mock__progress {
  padding: 1rem;
  gap: 0.5rem;
}

.progress-overview {
  gap: 1rem;
}

.progress-ring {
  width: 90px;
  height: 90px;
}

.progress-ring__value {
  font-size: 1rem;
}

.progress-stat__value {
  font-size: 1rem;
}

.progress-stat__label {
  font-size: 0.7rem;
}

.progress-modules {
  height: 100px;
  width: 120px;
  margin-top: -0.5rem;
}


  /* Slide 4: Quiz */
  .slide-mock__quiz {
    padding: 0.8rem;
    gap: 0.4rem;
  }

  .studio-quiz-question {
    font-size: 0.75rem;
  }

  .studio-quiz-option {
    padding: 0.4rem 0.6rem;
  }

  .studio-quiz-option__letter {
    width: 20px;
    height: 20px;
    font-size: 0.6rem;
  }

  .studio-quiz-option__text {
    font-size: 0.68rem;
  }

  /* Slide 5: Certificate */
  .certificate {
    padding: 1.25rem 1.5rem;
    max-width: 260px;
  }

  .certificate__badge {
    font-size: 1.8rem;
  }

  .certificate__course {
    font-size: 1rem;
  }

  /* Slide 6: Drip */
  .slide-mock__drip {
    padding: 0.6rem;
    padding-left: 1rem;
  }

  .drip-item__content {
    padding: 0.5rem 0.7rem;
  }

  .drip-item__title {
    font-size: 0.72rem;
  }

  .drip-item__status {
    font-size: 0.62rem;
  }

  /* Slide 7: Templates */
  .templates-v2-grid {
    gap: 6px;
    padding: 6px;
  }

  .tpl-card__img {
    height: 60px;
  }

  .tpl-card__info {
    padding: 6px 8px;
  }

  .tpl-card__name {
    font-size: 0.7rem;
  }

  .tpl-card__meta {
    font-size: 0.58rem;
  }

  /* Slide 8: Assignment */
  .slide-mock__assignment {
    padding: 0.8rem;
    gap: 0.6rem;
  }

  .assignment-prompt {
    padding: 0.7rem 0.8rem;
  }

  .assignment-prompt__text {
    font-size: 0.78rem;
  }

  .assignment-options {
    gap: 0.35rem;
  }

  .assignment-option {
    padding: 0.4rem 0.6rem;
    font-size: 0.7rem;
  }

  .assignment-input {
    min-height: 70px;
    padding: 0.7rem;
    font-size: 0.78rem;
  }

  .assignment-submit {
    padding: 0.55rem 1rem;
    font-size: 0.78rem;
  }

  /* Slide 9: Branding */
  .slide-mock__branding-v3 {
    padding: 8px;
  }

  .brandv3-card__cover {
    min-height: 60px;
  }

  .brandv3-card__body {
    padding: 8px;
    gap: 10px;
  }

  .brandv3-card__logo {
    width: 34px;
    height: 34px;
  }

  .brandv3-card__title {
    font-size: 0.8rem;
  }

  .brandv3-card__footer {
    padding: 6px 10px;
  }

  .brandv3-card__price {
    font-size: 0.88rem;
  }

  .brandv3-card__btn {
    padding: 6px 12px;
    font-size: 0.65rem;
  }

  .brandv3-swatches {
    gap: 6px;
    padding: 8px 12px;
    margin-top: 8px;
  }

  .brandv3-swatch {
    width: 18px;
    height: 18px;
  }

  /* Slide 10: Reflections */
  .slide-mock__reflections {
    padding: 0.8rem;
    gap: 0.6rem;
  }

  .reflection-prompt {
    font-size: 0.8rem;
  }

  .reflection-item__avatar {
    width: 30px;
    height: 30px;
  }

  .reflection-item__name {
    font-size: 0.72rem;
  }

  .reflection-item__text {
    font-size: 0.65rem;
  }

  .reflection-item__time {
    display: none;
  }

  /* Features grid */
  .studios-features {
    padding: 3rem 0;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .feature-card--hero {
    grid-column: span 1;
  }

  .content-types {
    grid-template-columns: repeat(3, 1fr);
  }

  .feature-card {
    padding: 1.25rem;
  }

  .feature-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 1rem;
  }

  /* CTA */
  .studios-cta {
    padding: 3.5rem 0;
  }

  .studios-cta__title {
    font-size: 1.8rem;
  }

  .studios-cta__text {
    font-size: 1rem;
  }

  .studios-cta__visual {
    height: 200px;
  }

  .studios-cta-element--card {
    width: 70px;
    height: 90px;
    left: 5%;
  }

  .studios-cta-element--play {
    width: 56px;
    height: 56px;
  }

  .studios-cta-element--ring {
    width: 54px;
    height: 54px;
    right: 8%;
  }

  .studios-cta-element--cert {
    width: 42px;
    height: 42px;
  }

  .studios-cta-element--check {
    width: 38px;
    height: 38px;
  }

  /* Ensure all slide inner content fills the space */
.slide-mock__builder,
.slide-mock__player,
.slide-mock__progress,
.slide-mock__quiz,
.slide-mock__certificate,
.slide-mock__drip,
.slide-mock__templates-v2,
.slide-mock__assignment,
.slide-mock__branding-v3,
.slide-mock__reflections {
  flex: 1;
  min-height: 0;
}
}





/* =============================================
   STUDIOS FEATURES BENTO - DARK THEME
   ============================================= */

.studios-features {
  padding: 5rem 0;
  background: linear-gradient(180deg, #1a1614 0%, #241f1c 100%);
}

.studios-features__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

.studios-features__header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.studios-features__eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent, #c89e8a);
  margin-bottom: 1rem;
}

.studios-features__title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  margin: 0;
}

/* Grid layout */
.studios-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 1.25rem;
}

/* Base card */
.studios-feature-card {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 1.25rem;
  padding: 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 
    0 2px 8px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.04);
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.35s ease, background 0.35s ease;
}

.studios-feature-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 
    0 8px 24px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Hero card - spans 2 columns */
.studios-feature-card--hero {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 2rem;
  align-items: center;
  padding: 2rem 2.5rem;
}

.studios-feature-card--hero .studios-feature-card__content {
  display: flex;
  flex-direction: column;
}

/* Community card */
.studios-feature-card--community {
  display: flex;
  flex-direction: column;
}

/* Icon styles */
.studios-feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  transition: transform 0.3s ease;
}

.studios-feature-card:hover .studios-feature-icon {
  transform: scale(1.08) rotate(-3deg);
}

.studios-feature-icon--coral {
  background: linear-gradient(135deg, rgba(200, 158, 138, 0.25) 0%, rgba(180, 123, 104, 0.18) 100%);
  color: #d4a394;
}

.studios-feature-icon--purple {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(109, 40, 217, 0.15) 100%);
  color: #a78bfa;
}

.studios-feature-icon--blue {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.2) 0%, rgba(2, 132, 199, 0.15) 100%);
  color: #38bdf8;
}

.studios-feature-icon--pink {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.2) 0%, rgba(219, 39, 119, 0.15) 100%);
  color: #f472b6;
}

.studios-feature-icon--green {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.15) 100%);
  color: #34d399;
}

.studios-feature-icon--amber {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22) 0%, rgba(217, 119, 6, 0.15) 100%);
  color: #fbbf24;
}

.studios-feature-icon--teal {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.2) 0%, rgba(13, 148, 136, 0.15) 100%);
  color: #2dd4bf;
}

/* Card typography */
.studios-feature-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.5rem;
}

.studios-feature-card__text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

/* Content types visual */
.studios-feature-card__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.studios-content-types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.studios-content-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.75rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.25s ease;
  cursor: default;
}

.studios-content-type:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.studios-content-type span {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.studios-content-type--video svg { color: #f87171; }

.studios-content-type--audio svg { color: #a78bfa; }

.studios-content-type--pdf svg { color: #fb923c; }

.studios-content-type--text svg { color: #60a5fa; }

.studios-content-type--download svg { color: #34d399; }

.studios-content-type--embed svg { color: #818cf8; }

/* Community preview */
.studios-community-preview {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1.25rem;
}

.studios-community-avatars {
  display: flex;
}

.studios-community-avatars img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #1a1614;
  margin-left: -10px;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.studios-community-avatars img:first-child {
  margin-left: 0;
}

.studios-feature-card:hover .studios-community-avatars img {
  transform: translateY(-2px);
}

.studios-feature-card:hover .studios-community-avatars img:nth-child(2) {
  transition-delay: 0.05s;
}

.studios-feature-card:hover .studios-community-avatars img:nth-child(3) {
  transition-delay: 0.1s;
}

.studios-feature-card:hover .studios-community-avatars img:nth-child(4) {
  transition-delay: 0.15s;
}

.studios-community-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent, #c89e8a);
}

/* Responsive */
@media (max-width: 900px) {
  .studios-features__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .studios-feature-card--hero {
    grid-column: span 2;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .studios-content-types {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 600px) {
  .studios-features {
    padding: 3.5rem 0;
  }
  
  .studios-features__grid {
    grid-template-columns: 1fr;
  }
  
  .studios-feature-card--hero {
    grid-column: span 1;
  }
  
  .studios-content-types {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .studios-feature-card {
    padding: 1.5rem;
  }
  
  .studios-feature-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 1rem;
  }
}






/* =============================================
   CTA SECTION - STUDIOS THEMED
   ============================================= */

.studios-cta {
  padding: 5rem 0;
  background: linear-gradient(135deg, #1a1614 0%, #2d2420 50%, #1a1614 100%);
  position: relative;
  overflow: hidden;
}

.studios-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(ellipse 60% 50% at 70% 50%, rgba(200, 158, 138, 0.08), transparent 50%),
    radial-gradient(ellipse 40% 40% at 20% 60%, rgba(180, 123, 104, 0.06), transparent 50%);
  pointer-events: none;
}

.studios-cta__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

.studios-cta__content {
  max-width: 480px;
}

.studios-cta__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent, #c89e8a);
  margin: 0 0 1rem;
}

.studios-cta__title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 1.25rem;
}

.studios-cta__text {
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 2rem;
}

.studios-cta__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.studios-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0.6rem;
  transition: all 0.25s ease;
}

.studios-cta__btn--primary {
  background: linear-gradient(135deg, var(--accent, #c89e8a) 0%, var(--accent-strong, #b47b68) 100%);
  color: #fff;
  box-shadow: 0 4px 15px rgba(180, 123, 104, 0.4);
}

.studios-cta__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(180, 123, 104, 0.5);
}

.studios-cta__btn--secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.studios-cta__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

/* Visual elements */
.studios-cta__visual {
  position: relative;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.studios-cta-element {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: transform 0.4s ease;
}

.studios-cta-element:hover {
  transform: scale(1.1) translateY(-4px);
}

.studios-cta-element--play:hover {
  transform: translate(-50%, -50%) scale(1.12);
}

/* Play button - CENTER FOCAL POINT */
.studios-cta-element--play {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--accent, #c89e8a), var(--accent-strong, #b47b68));
  box-shadow: 
    0 8px 30px rgba(180, 123, 104, 0.5),
    0 0 60px rgba(180, 123, 104, 0.2);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  animation: studiosFloatPlay 6s ease-in-out infinite;
}

.studios-cta-element--play svg {
  width: 28px;
  height: 28px;
  color: #fff;
  margin-left: 4px;
}

/* Course card - TOP LEFT */
.studios-cta-element--card {
  width: 90px;
  height: 115px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  top: 8%;
  left: 10%;
  z-index: 2;
  animation: studiosFloatCard 8s ease-in-out infinite;
}

.studios-cta-card {
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.studios-cta-card__progress {
  height: 45px;
  background: linear-gradient(135deg, rgba(200, 158, 138, 0.35), rgba(180, 123, 104, 0.2));
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

.studios-cta-card__progress::after {
  content: '▶';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
}

.studios-cta-card__lines span {
  display: block;
  height: 7px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  margin-bottom: 5px;
}

.studios-cta-card__lines span:last-child {
  width: 65%;
}

/* Progress ring - TOP RIGHT */
.studios-cta-element--ring {
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  top: 5%;
  right: 15%;
  z-index: 2;
  animation: studiosFloatRing 7s ease-in-out infinite;
}

.studios-cta-element--ring svg {
  width: 42px;
  height: 42px;
  color: var(--accent, #c89e8a);
}

/* Certificate - UPPER RIGHT */
.studios-cta-element--cert {
  width: 52px;
  height: 52px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.25);
  top: 35%;
  right: 5%;
  z-index: 2;
  animation: studiosFloatCert 6.5s ease-in-out infinite;
}

.studios-cta-element--cert svg {
  width: 26px;
  height: 26px;
  color: #fbbf24;
}

/* Checkmark - BOTTOM RIGHT */
.studios-cta-element--check {
  width: 48px;
  height: 48px;
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.25);
  bottom: 15%;
  right: 20%;
  z-index: 2;
  animation: studiosFloatCheck 5.5s ease-in-out infinite;
}

.studios-cta-element--check svg {
  width: 22px;
  height: 22px;
  color: #34d399;
}

/* Float animations */
@keyframes studiosFloatCard {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}

@keyframes studiosFloatPlay {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, calc(-50% - 10px)) scale(1.05); }
}

@keyframes studiosFloatCert {
  0%, 100% { transform: translateY(0) rotate(3deg); }
  50% { transform: translateY(-10px) rotate(-3deg); }
}

@keyframes studiosFloatCheck {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes studiosFloatRing {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Responsive */
@media (max-width: 900px) {
  .studios-cta__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 3rem;
  }
  
  .studios-cta__content {
    max-width: 100%;
  }
  
  .studios-cta__actions {
    justify-content: center;
  }
  
  .studios-cta__visual {
    height: 280px;
  }
}

@media (max-width: 600px) {
  .studios-cta {
    padding: 4rem 0;
  }
  
  .studios-cta__visual {
    height: 220px;
  }
  
  .studios-cta-element--card {
    width: 75px;
    height: 95px;
    left: 5%;
  }
  
  .studios-cta-element--play {
    width: 64px;
    height: 64px;
  }
  
  .studios-cta-element--ring {
    width: 56px;
    height: 56px;
    right: 8%;
  }
  
  .studios-cta-element--cert {
    width: 44px;
    height: 44px;
  }
  
  .studios-cta-element--check {
    width: 40px;
    height: 40px;
  }
}







/* =============================================
   COMPARISON TABLE (studios-specific prefix)
   ============================================= */

.studios-comparison {
  padding: 5rem 0;
  background: 
    radial-gradient(ellipse 70% 50% at 80% 20%, rgba(200, 158, 138, 0.06), transparent 50%),
    linear-gradient(180deg, #faf8f6 0%, #f2ece6 100%);
}

.studios-comparison__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2rem;
}

.studios-comparison__header {
  text-align: center;
  margin-bottom: 3rem;
}

.studios-comparison__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin: 0 0 0.5rem;
}

.studios-comparison__title {
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  font-weight: 800;
  color: #2a2623;
  margin: 0;
}

.studios-comparison__table {
  background: #fff;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 16px 50px rgba(140, 100, 80, 0.1);
  border: 1px solid rgba(180, 123, 104, 0.1);
}

.studios-comparison__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  border-bottom: 1px solid rgba(180, 123, 104, 0.08);
}

.studios-comparison__row:last-child {
  border-bottom: none;
}

.studios-comparison__row--header {
  background: linear-gradient(180deg, #faf7f4 0%, #f5f0eb 100%);
}

.studios-comparison__cell {
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
}

.studios-comparison__cell--others {
  background: rgba(0, 0, 0, 0.015);
  justify-content: center;
  border-left: 1px solid rgba(180, 123, 104, 0.06);
  border-right: 1px solid rgba(180, 123, 104, 0.06);
}

.studios-comparison__cell--gadura {
  background: linear-gradient(135deg, rgba(200, 158, 138, 0.08), rgba(200, 158, 138, 0.03));
  justify-content: center;
  position: relative;
}

.studios-comparison__cell--gadura::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
}

.studios-comparison__others-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8a847e;
}

.studios-comparison__gadura-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.studios-comparison__gadura-logo {
  height: 22px;
}

.studios-comparison__gadura-logo svg {
  height: 100%;
  width: auto;
}

.studios-comparison__gadura-name {
  font-family: "Playfair Display", serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #2a2623;
}

.studios-comparison__feature-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #2a2623;
}

.studios-comparison__others-value {
  font-size: 0.85rem;
  color: #8a847e;
}

.studios-comparison__gadura-value {
  font-size: 0.88rem;
  font-weight: 600;
  color: #2a2623;
  padding-left: 1.4rem;
  position: relative;
}

.studios-comparison__gadura-value::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
}

.studios-comparison__gadura-value::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 4px;
  height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
}

.studios-comparison__footnote {
  text-align: center;
  margin-top: 2.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: #5a534d;
  font-style: italic;
}


/* =============================================
   CTA SECTION
   ============================================= */

.studios-cta {
  background: linear-gradient(135deg, #1a1412 0%, #2a2320 50%, #1a1412 100%);
  padding: 5rem 2rem;
  position: relative;
  overflow: hidden;
}

.studios-cta__inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 3rem;
  align-items: center;
}

.studios-cta__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.studios-cta__title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 1rem;
}

.studios-cta__text {
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 2rem;
}

.studios-cta__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.studios-cta__btn {
  padding: 0.9rem 1.8rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: all 0.25s ease;
}

.studios-cta__btn--primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #fff;
  box-shadow: 0 4px 20px rgba(180, 123, 104, 0.4);
}

.studios-cta__btn--primary:hover {
  transform: translateY(-2px);
}

.studios-cta__btn--secondary {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.studios-cta__visual {
  position: relative;
  height: 250px;
}

.studios-cta::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 10%;
  width: 400px;
  height: 400px;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(200, 158, 138, 0.15), transparent 60%);
}


/* =============================================
   RESPONSIVE - TABLET
   ============================================= */

@media (max-width: 900px) {

  .studios-bento {
    grid-template-columns: repeat(2, 1fr);
  }

  .studios-cta__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .studios-cta__actions {
    justify-content: center;
  }

  .studios-cta__visual {
    order: -1;
    height: 180px;
  }
}


/* =============================================
   RESPONSIVE - MOBILE
   ============================================= */

@media (max-width: 600px) {

  .studios-bento {
    grid-template-columns: 1fr;
  }

  .bento-card--large,
  .bento-card--medium {
    grid-column: span 1;
  }

  .studios-comparison__row {
  grid-template-columns: 0.9fr 0.9fr 1.2fr;
}

.studios-comparison__cell {
  padding: 0.7rem 0.5rem;
}

.studios-comparison__feature-label,
.studios-comparison__others-value,
.studios-comparison__gadura-value {
  font-size: 0.72rem;
}

.studios-comparison__gadura-value {
  padding-left: 1rem;
}

.studios-comparison__gadura-value::before {
  width: 12px;
  height: 12px;
}

  .studios-cta {
    padding: 3.5rem 1.5rem;
  }
}

































/* =============================================
   OFFERS PAGE STYLES - V2 WITH DEPTH
   ============================================= */

/* =============================================
   OFFERS HERO - DEEP & LAYERED
   ============================================= */
.offers-hero {
  position: relative;
  padding: 7rem 2rem 4rem;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg) 0%, #fff 100%);
}

.offers-hero__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
  align-items: center;
}

/* Deep ambient orbs */
.offers-hero__ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.offers-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  animation: orb-float 8s ease-in-out infinite;
}

.offers-orb--1 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  top: -10%;
  right: 10%;
  animation-delay: 0s;
}

.offers-orb--2 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, #d4a574 0%, transparent 70%);
  bottom: 10%;
  left: 5%;
  animation-delay: -2s;
}

.offers-orb--3 {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, #e8c4b0 0%, transparent 70%);
  top: 40%;
  right: 25%;
  animation-delay: -4s;
}

.offers-orb--4 {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(200, 158, 138, 0.6) 0%, transparent 70%);
  top: 60%;
  left: 30%;
  animation-delay: -1s;
}

.offers-orb--5 {
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, #f0e6df 0%, transparent 70%);
  bottom: 30%;
  right: 5%;
  animation-delay: -3s;
}

@keyframes orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(20px, -20px) scale(1.05); }
  66% { transform: translate(-10px, 15px) scale(0.95); }
}

/* Hero Content */
.offers-hero__content {
  position: relative;
  z-index: 2;
}

.offers-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-strong);
  margin-bottom: 1rem;
}

.offers-hero__title {
  font-size: clamp(2.5rem, 5vw, 3.8rem);
  line-height: 1.1;
  color: var(--text-main);
  margin: 0 0 1.5rem;
}

@keyframes underline-grow {
  to { transform: scaleX(1); }
}

.offers-hero__subtitle {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 1.5rem;
  max-width: 480px;
}

.offers-hero__pills {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.offers-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background: var(--accent-soft);
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent-strong);
}

.offers-hero__cta .btn--primary {
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 2rem;
  background: var(--accent-strong);
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(180, 123, 104, 0.4);
}

.offers-hero__cta .btn--primary:hover {
  background: var(--text-main);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

/* =============================================
   HERO - FLOATING OFFER CARDS
   ============================================= */
.offers-hero__scene {
  position: relative;
  height: 480px;
}

/* Base offer card */
.offer-card {
  position: absolute;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 
    0 2px 8px rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.06),
    0 16px 48px rgba(0,0,0,0.06);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.offer-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 
    0 4px 12px rgba(0,0,0,0.06),
    0 12px 32px rgba(0,0,0,0.08),
    0 24px 64px rgba(0,0,0,0.08);
}

/* Gradient film overlay */
.offer-card__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.1) 0%,
    transparent 40%,
    transparent 60%,
    rgba(0,0,0,0.03) 100%
  );
  z-index: 3;
  pointer-events: none;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.6);
}

/* Image area */
.offer-card__image {
  width: 100%;
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--accent-soft) 0%, #e8ddd6 50%, var(--accent) 100%);
  background-size: 200% 200%;
  animation: card-gradient-shift 8s ease infinite;
  position: relative;
}

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

@keyframes card-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Content */
.offer-card__content {
  padding: 1rem 1.25rem;
}

.offer-card__tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-strong);
  background: var(--accent-soft);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.offer-card__title {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.35rem;
}

.offer-card__price {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
}

.offer-card__price small {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* ========== SIZE VARIANTS ========== */

/* Large card */
.offer-card--large {
  width: 280px;
  left: 10%;
  top: 15%;
  z-index: 4;
  animation: float-1 6s ease-in-out infinite;
}

.offer-card--large .offer-card__image {
  aspect-ratio: 16/9;
}

.offer-card--large .offer-card__content {
  padding: 1.25rem 1.5rem;
}

.offer-card--large .offer-card__title {
  font-size: 1.15rem;
}

.offer-card--large .offer-card__price {
  font-size: 1.25rem;
}

/* Medium card */
.offer-card--medium {
  width: 220px;
  z-index: 3;
  animation: float-2 7s ease-in-out infinite;
}

.offer-card--medium .offer-card__content {
  padding: 0.9rem 1.1rem;
}

.offer-card--medium .offer-card__title {
  font-size: 0.95rem;
}

.offer-card--medium .offer-card__price {
  font-size: 1rem;
}

/* Small card */
.offer-card--small {
  width: 170px;
  z-index: 2;
  animation: float-3 5s ease-in-out infinite;
}

.offer-card--small .offer-card__image {
  aspect-ratio: 16/11;
}

.offer-card--small .offer-card__content {
  padding: 0.75rem 0.9rem;
}

.offer-card--small .offer-card__tag {
  font-size: 0.55rem;
  padding: 0.2rem 0.4rem;
}

.offer-card--small .offer-card__title {
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

.offer-card--small .offer-card__price {
  font-size: 0.9rem;
}

/* ========== POSITIONS ========== */
.offer-card--pos-1 {
  right: 5%;
  top: 5%;
}

.offer-card--pos-2 {
  left: 0%;
  bottom: 10%;
}

.offer-card--pos-3 {
  right: 15%;
  bottom: 20%;
}

/* ========== FLOAT ANIMATIONS ========== */
@keyframes float-1 {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-15px) rotate(1deg); }
}

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

@keyframes float-3 {
  0%, 100% { transform: translateY(0) rotate(0.5deg); }
  50% { transform: translateY(-10px) rotate(-0.5deg); }
}

/* ========== FLOATING BADGES ========== */
.offers-float-badge {
  position: absolute;
  z-index: 5;
}

/* Positions */
.offers-float-badge--discount {
  right: 44%;
  top: 17%;
  animation: float-badge-1 5s ease-in-out infinite;
}

.offers-float-badge--check {
  left: 0%;
  bottom: 30%;
  animation: float-badge-2 6s ease-in-out infinite 0.5s;
}

.offers-float-badge--popular {
  right: 6%;
  top: 35%;
  animation: float-badge-3 5.5s ease-in-out infinite 1s;
}

.offers-float-badge--new {
  left: 5%;
  top: 5%;
  animation: float-badge-1 4.5s ease-in-out infinite 0.3s;
}

.offers-float-badge--recurring {
  right: 40%;
  bottom: 5%;
  animation: float-badge-2 5s ease-in-out infinite 0.8s;
}

.offers-float-badge--bundle {
  left: 15%;
  top: 55%;
  animation: float-badge-3 6s ease-in-out infinite 0.2s;
}

.offers-float-badge--nofees {
  right: 5%;
  bottom: 15%;
  animation: float-badge-1 5.5s ease-in-out infinite 1.2s;
}

/* Glow colors */
.offers-float-badge__glow {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  opacity: 0.5;
  z-index: -1;
  filter: blur(10px);
}

.offers-float-badge__glow--green {
  background: radial-gradient(circle, rgba(34, 197, 94, 0.5) 0%, transparent 70%);
}

.offers-float-badge__glow--coral {
  background: radial-gradient(circle, rgba(244, 114, 82, 0.5) 0%, transparent 70%);
}

.offers-float-badge__glow--amber {
  background: radial-gradient(circle, rgba(251, 191, 36, 0.5) 0%, transparent 70%);
}

.offers-float-badge__glow--blue {
  background: radial-gradient(circle, rgba(59, 130, 246, 0.5) 0%, transparent 70%);
}

.offers-float-badge__glow--purple {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.5) 0%, transparent 70%);
}

.offers-float-badge__glow--red {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.5) 0%, transparent 70%);
}

/* Inner badge */
.offers-float-badge__inner {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.8rem;
  background: #fff;
  border-radius: 10px;
  box-shadow: 
    0 2px 8px rgba(0,0,0,0.06),
    0 4px 16px rgba(0,0,0,0.06);
}

/* Checkmark circle variants */
.offers-float-badge__inner--check {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  padding: 0;
  justify-content: center;
}

.offers-float-badge__inner--green {
  background: #5a9a6e;
}

.offers-float-badge__inner--check svg {
  width: 16px;
  height: 16px;
  color: #fff;
}

/* Pill variants */
.offers-float-badge__inner--pill {
  padding: 0.4rem 0.7rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.offers-float-badge__inner--amber {
  background: linear-gradient(135deg, #d9a963 0%, #c4944d 100%);
  color: #fff;
}

.offers-float-badge__inner--coral-outline {
  background: #fff;
  border: 1.5px solid var(--accent-strong);
  color: var(--accent-strong);
}

.offers-float-badge__text--red {
  color: #ef4444;
}

.offers-float-badge--popular .offers-float-badge__icon {
  color: #ef4444;
  width: 14px;
  height: 14px;
}

/* Icon */
.offers-float-badge__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.offers-float-badge__icon--spin {
  animation: spin-slow 4s linear infinite;
}

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

/* Text colors */
.offers-float-badge__text {
  font-size: 0.8rem;
  font-weight: 600;
}

.offers-float-badge__text--coral {
  color: var(--accent-strong);
}

.offers-float-badge__text--coral .offers-float-badge__icon {
  color: var(--accent-strong);
}

.offers-float-badge__percent--green {
  color: #22c55e;
}

.offers-float-badge__inner--green {
  background: #22c55e;
}

.offers-float-badge__text--green {
  color: #22c55e;
}

.offers-float-badge__text--amber {
  color: #f59e0b;
}

.offers-float-badge__text--blue {
  color: #3b82f6;
}

.offers-float-badge__text--purple {
  color: #a855f7;
}

.offers-float-badge--recurring .offers-float-badge__icon {
  color: #3b82f6;
}

.offers-float-badge--bundle .offers-float-badge__icon {
  color: #a855f7;
}

.offers-float-badge__inner--amber {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #fff;
}

/* Percent text */
.offers-float-badge__percent {
  font-size: 0.95rem;
  font-weight: 800;
}

.offers-float-badge__percent--green {
  color: #5a9a6e;
}

/* Float animations - varied timing */
@keyframes float-badge-1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(3deg); }
}

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

@keyframes float-badge-3 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}


/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
  .offers-hero__scene {
    height: 400px;
  }
  
  .offer-card--large {
    width: 240px;
    left: 5%;
  }
  
  .offer-card--medium {
    width: 190px;
  }
  
  .offer-card--small {
    width: 150px;
  }

  .offers-float-badge--bundle {
    display: none;
  }
}

@media (max-width: 768px) {
  .offers-hero__scene {
    height: 380px;
    margin-top: 2rem;
  }

  .offers-hero__subtitle{
    font-size: 0.9rem;
  }
  
  /* Show 3 cards, repositioned */
  .offer-card--large {
    width: 170px;
    left: 5%;
    top: 5%;
    transform: none;
  }
  
  .offer-card--medium.offer-card--pos-1 {
    display: block;
    width: 150px;
    right: 5%;
    top: 12%;
  }
  
  .offer-card--small.offer-card--pos-2 {
    display: block;
    width: 130px;
    left: 25%;
    bottom: 5%;
    top: auto;
  }
  
  /* Hide only the 4th card */
  .offer-card--pos-3 {
    display: none;
  }
  
  /* Show 3 badges */
  .offers-float-badge--discount {
    display: block;
    right: 8%;
    top: 0%;
  }
  
  .offers-float-badge--check {
    display: block;
    left: 8%;
    bottom: 28%;
    top: auto;
  }
  
  .offers-float-badge--popular {
    display: block;
    right: 5%;
    bottom: 18%;
    top: auto;
  }
  
  /* Hide less important badges */
  .offers-float-badge--new{
    display: none;
  }
  
  /* Smaller card content */
  .offer-card__content {
    padding: 0.7rem 0.9rem;
  }
  
  .offer-card__tag {
    font-size: 0.55rem;
    padding: 0.2rem 0.4rem;
    margin-bottom: 0.35rem;
  }
  
  .offer-card__title {
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
  }
  
  .offer-card__price {
    font-size: 0.9rem;
  }

  .offers-orb--1 {
    display: none;
  }
}

@media (max-width: 480px) {
  .offers-hero__scene {
    height: 340px;
  }
  
  .offer-card--large {
    width: 145px;
    left: 3%;
    top: 8%;
  }
  
  .offer-card--medium.offer-card--pos-1 {
    width: 130px;
    right: 3%;
    top: 18%;
  }
  
  .offer-card--small.offer-card--pos-2 {
    width: 115px;
    left: 28%;
    bottom: 3%;
  }
  
  /* Keep 2 badges on very small */
  .offers-float-badge--popular {
    right: 3%;
    top: 2%;
  }
  
  .offers-float-badge--discount {
    right: 3%;
    top: 5%;
  }
  
  .offers-float-badge--check {
    left: 5%;
    bottom: 25%;
  }

  .offers-float-badge--recurring {
    right: 20%;
    bottom: 2%;
  }

    .offers-float-badge--nofees{
    right: 40%;
    top: 40%;
    }
}



/* =============================================
   OFFERS SHOWCASE - MOCKUPS GRID
   ============================================= */
.offers-showcase {
  padding: 6rem 2rem;
  background: var(--bg);
}

.offers-showcase__header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 4rem;
}

.offers-showcase__eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-strong);
  margin-bottom: 0.75rem;
  margin-top: -2rem;
}

.offers-showcase__title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  color: var(--text-main);
  margin: 0 0 1rem;
}

.offers-showcase__subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin: 0;
}

.offers-showcase__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

/* Section Headers */
.offers-section-header {
  grid-column: span 2;
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 3rem 0 1.5rem 0;
}

.offers-section-header:first-child {
  margin-top: 0;
}

.offers-section-header__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200, 158, 138, 0.2) 20%,
    rgba(200, 158, 138, 0.2) 80%,
    transparent 100%
  );
}

.offers-section-header__title {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-strong);
  margin: 0;
  white-space: nowrap;
  position: relative;
}

.offers-section-header__title::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-strong), transparent);
  border-radius: 2px;
}

/* Mockup Card */
.offers-mock {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.offers-mock--wide {
  grid-column: span 2;
}

.offers-mock__screen {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(253, 252, 251, 0.95) 100%);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(200, 158, 138, 0.1),
    0 8px 24px rgba(42, 38, 35, 0.06),
    0 20px 48px rgba(42, 38, 35, 0.08),
    0 40px 80px rgba(42, 38, 35, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.offers-mock__screen::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(200, 158, 138, 0.2), transparent 40%, transparent 60%, rgba(200, 158, 138, 0.15));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.offers-mock__screen:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow:
    0 0 0 1px rgba(200, 158, 138, 0.15),
    0 12px 32px rgba(42, 38, 35, 0.08),
    0 28px 64px rgba(42, 38, 35, 0.1),
    0 48px 96px rgba(42, 38, 35, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.offers-mock__screen:hover::before {
  opacity: 1;
}

/* Chrome bar */
.offers-mock__chrome {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.5rem;
  background:
    linear-gradient(180deg, rgba(250, 248, 246, 0.95) 0%, rgba(245, 243, 241, 0.9) 100%);
  border-bottom: 1px solid rgba(200, 158, 138, 0.1);
  position: relative;
}

.offers-mock__chrome::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 158, 138, 0.15), transparent);
}

.chrome-dots {
  display: flex;
  gap: 7px;
}

.chrome-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ddd;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.15),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.5);
  transition: all 0.2s ease;
}

.chrome-dots span:first-child {
  background: linear-gradient(135deg, #ff6b63 0%, #ff5247 100%);
}

.chrome-dots span:nth-child(2) {
  background: linear-gradient(135deg, #ffc438 0%, #ffb814 100%);
}

.chrome-dots span:last-child {
  background: linear-gradient(135deg, #32d74b 0%, #28c840 100%);
}

.chrome-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

.chrome-badge {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.6rem;
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-radius: 6px;
}

.chrome-badge--live {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: #dcfce7;
  color: #16a34a;
}

.chrome-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
  animation: pulse-dot 1.5s ease infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

.chrome-count {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.chrome-step {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.offers-mock__body {
  padding: 2rem;
  height: 420px;
  overflow: hidden;
}

.offers-mock__caption {
  padding: 0 0.5rem;
}

.offers-mock__caption h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.5rem;
}

.offers-mock__caption p {
  font-size: 1rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.6;
}

/* Center caption for wide mockups (like mockup 1) */
.offers-mock--wide .offers-mock__caption {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Add extra spacing below mockup 1 */
.offers-mock--wide {
  margin-bottom: 3rem;
}


/* =============================================
   MOCKUP 1: OFFER BUILDER V2 - Split Layout
   ============================================= */
.offers-mock__body--builder-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  height: 650px;
  padding: 0;
}

/* ========== LEFT PANEL: Form ========== */
.builder-form-panel {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 3rem 3rem 3rem;
  background:
    linear-gradient(135deg, rgba(250, 248, 246, 0.6) 0%, rgba(245, 243, 241, 0.5) 100%);
  border-right: 1px solid rgba(200, 158, 138, 0.12);
  height: 650px;
  position: relative;
}

.builder-form-panel::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(200, 158, 138, 0.15), transparent);
}

.builder-form-panel__inner {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  width: 100%;
  max-width: 300px;
}

.builder-field {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.builder-field__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.builder-field__input {
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
  border: 2px solid rgba(200, 158, 138, 0.15);
  border-radius: 12px;
  min-height: 52px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow:
    0 2px 8px rgba(42, 38, 35, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.builder-field__input--active {
  border-color: var(--accent-strong);
  box-shadow:
    0 0 0 4px rgba(200, 158, 138, 0.1),
    0 4px 12px rgba(42, 38, 35, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  transform: translateY(-1px);
}

.builder-typed {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-main);
}

.builder-cursor {
  width: 2px;
  height: 20px;
  background: var(--accent-strong);
  margin-left: 2px;
  animation: cursor-blink 0.7s step-end infinite;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Radio buttons */
.builder-radios {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.builder-radio {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 1rem;
  background: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.builder-radio:hover {
  border-color: #ccc;
}

.builder-radio--active {
  background: var(--accent-soft);
  border-color: var(--accent-strong);
  color: var(--accent-strong);
  transform: scale(1.02);
  box-shadow: 0 2px 12px rgba(180, 123, 104, 0.2);
}

.builder-radio__dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #ccc;
  position: relative;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.builder-radio--active .builder-radio__dot {
  border-color: var(--accent-strong);
  border-width: 5px;
}

/* Price field */
.builder-field__price {
  display: flex;
  align-items: baseline;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
}

.builder-field__currency {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-right: 0.15rem;
}

.builder-field__amount {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-main);
  transition: transform 0.3s ease, color 0.3s ease;
}

/* ========== RIGHT PANEL: Preview ========== */
.builder-preview-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem 2.5rem 2.5rem 2.5rem;
  background: #fff;
  position: relative;
}

.builder-preview-panel__badge {
  position: absolute;
  top: 0rem;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0.4rem 0.85rem;
  background: #f5f5f5;
  border-radius: 6px;
}

.badge-dot {
  width: 6px;
  height: 6px;
  background: #16a34a;
  border-radius: 50%;
  animation: pulse-dot 1.5s ease infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

/* ========== THE STAR: Pricing Card ========== */
.pricing-card {
  position: relative;
  width: 300px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 20px;
  padding: 2rem 1.75rem;
  text-align: center;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.03),
    0 4px 12px rgba(0,0,0,0.05),
    0 12px 36px rgba(0,0,0,0.08),
    0 24px 60px rgba(0,0,0,0.06);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
  overflow: hidden;
  margin-top: 2.5rem;
}

.pricing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-20deg);
  animation: card-shimmer 4s ease-in-out infinite;
}

@keyframes card-shimmer {
  0% { left: -150%; }
  30%, 100% { left: 150%; }
}

.pricing-card__glow {
  position: absolute;
  inset: -8px;
  background: linear-gradient(135deg, var(--accent-soft), var(--accent), var(--accent-strong));
  border-radius: 28px;
  z-index: -1;
  opacity: 0;
  filter: blur(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transform: scale(0.95);
}

.pricing-card--pulse {
  transform: scale(1.04) translateY(-4px);
  box-shadow: 
    0 0 0 1px rgba(0,0,0,0.03),
    0 8px 24px rgba(180, 123, 104, 0.15),
    0 20px 48px rgba(0,0,0,0.12),
    0 32px 72px rgba(0,0,0,0.08);
}

.pricing-card--pulse .pricing-card__glow {
  opacity: 0.8;
  transform: scale(1);
  animation: glow-breathe 1s ease-in-out infinite alternate;
}

@keyframes glow-breathe {
  0% { opacity: 0.6; filter: blur(18px); }
  100% { opacity: 0.85; filter: blur(24px); }
}

.pricing-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.75rem;
  min-height: 30px;
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.1rem;
  margin-bottom: 0.75rem;
}

.pricing-card__currency {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 0.4rem;
}

.pricing-card__amount {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}

.pricing-card__amount--bump {
  transform: scale(1.15);
  color: var(--accent-strong);
}

.pricing-card__dropdown {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-main);
  margin-bottom: 1.5rem;
}

.pricing-card__dropdown svg {
  color: var(--text-muted);
}

/* Features list */
.pricing-card__features {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
  text-align: left;
  min-height: 140px;
}

.pricing-feature {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.85rem;
  background: #f8f8f8;
  border-radius: 10px;
  border: 2px solid transparent;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pricing-feature--highlight {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: translateX(6px) scale(1.02);
  box-shadow: 0 4px 16px rgba(180, 123, 104, 0.2);
}

.pricing-feature__check {
  width: 18px;
  height: 18px;
  color: #16a34a;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.pricing-feature--highlight .pricing-feature__check {
  transform: scale(1.2);
}

.pricing-feature__text {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-main);
}

.pricing-feature--new {
  opacity: 0;
  transform: translateX(-20px) scale(0.95);
  height: 0;
  padding: 0 0.85rem;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: linear-gradient(135deg, var(--accent-soft), rgba(200, 158, 138, 0.2));
  border: 2px solid var(--accent);
}

.pricing-feature--visible {
  opacity: 1;
  transform: translateX(0) scale(1);
  height: auto;
  padding: 0.65rem 0.85rem;
}

.pricing-feature__text--typing {
  min-width: 100px;
}

.pricing-feature__cursor {
  width: 2px;
  height: 16px;
  background: var(--accent-strong);
  animation: cursor-blink 0.6s step-end infinite;
  margin-left: 2px;
}

/* Add feature button */
.pricing-card__add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: transparent;
  border: 2px dashed #ddd;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin-bottom: 1rem;
}

.pricing-card__add-btn svg {
  transition: transform 0.3s ease;
}

.pricing-card__add-btn:hover {
  background: #f8f8f8;
  border-color: #bbb;
  color: var(--text-main);
}

.pricing-card__add-btn:hover svg {
  transform: rotate(90deg);
}

.pricing-card__add-btn--clicked {
  background: var(--accent-soft);
  border-color: var(--accent-strong);
  border-style: solid;
  color: var(--accent-strong);
  transform: scale(0.95);
}

.pricing-card__add-btn--clicked svg {
  transform: rotate(180deg);
}

/* CTA button */
.pricing-card__cta {
  width: 100%;
  padding: 1rem 1.5rem;
  background: var(--text-main);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  margin-top: auto;
}

.pricing-card__cta:hover {
  background: var(--accent-strong);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(180, 123, 104, 0.35);
}

/* Chrome step badge */
.chrome-step {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ========== Responsive ========== */
@media (max-width: 900px) {
  .offers-mock__body--builder-v2 {
    grid-template-columns: 1fr;
  }
  
  .builder-form-panel {
    border-right: none;
    border-bottom: 1px solid #eee;
    padding: 2rem;
  }
  
  .builder-preview-panel {
    padding: 2rem;
  }
  
  .builder-preview-panel__badge {
    position: static;
    transform: none;
    margin-bottom: 1.25rem;
  }
}


/* =============================================
   SIDE CAPTION VARIANT (3/4 + 1/4)
   ============================================= */
.offers-mock--side-caption {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 2.5rem;
  align-items: center;
}

.offers-mock--side-caption .offers-mock__caption {
  padding: 0;
}

.offers-mock--side-caption .offers-mock__caption h3 {
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
}

.offers-mock--side-caption .offers-mock__caption p {
  font-size: 1rem;
  line-height: 1.65;
}

/* =============================================
   MOCKUP 1.5: PRICING TIERS
   ============================================= */
.offers-mock__body--tiers {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 2rem;
  gap: 1.25rem;
  height: 470px;
}

.tiers-header__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.2rem;
}

.tiers-header__subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

/* Option selector */
.tiers-selector {
  display: flex;
  gap: 0.75rem;
}

.tiers-selector__btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 2px solid #e5e5e5;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tiers-selector__btn:hover {
  border-color: #d0d0d0;
}

.tiers-selector__btn--active {
  background: var(--accent-soft);
  border-color: var(--accent-strong);
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(180, 123, 104, 0.15);
}

.tiers-selector__bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 20px;
}

.tiers-selector__bars span {
  width: 8px;
  height: 16px;
  background: #d5d5d5;
  border-radius: 3px;
  transition: background 0.3s ease;
}

.tiers-selector__btn--active .tiers-selector__bars span {
  background: var(--accent-strong);
}

.tiers-selector__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.3s ease;
}

.tiers-selector__btn--active .tiers-selector__label {
  color: var(--accent-strong);
}

/* Cards container */
.tiers-cards {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: stretch;
  padding: 0.75rem 0;
}

/* Tier card */
.tier-card {
  flex: 0 0 160px;
  position: relative;
  display: none;
  opacity: 0;
  transform: translateY(15px) scale(0.95);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tier-card--visible {
  display: flex;
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Card glow */
.tier-card__glow {
  position: absolute;
  inset: -4px;
  background: linear-gradient(135deg, var(--accent-soft), var(--accent));
  border-radius: 18px;
  opacity: 0;
  z-index: -1;
  filter: blur(12px);
  transition: opacity 0.4s ease;
}

.tier-card__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 2px solid #e8e8e8;
  border-radius: 14px;
  padding: 1.25rem 1rem;
  text-align: center;
  box-shadow: 
    0 2px 8px rgba(0,0,0,0.04),
    0 4px 16px rgba(0,0,0,0.04);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tier-card:hover .tier-card__inner {
  transform: translateY(-4px);
  box-shadow: 
    0 4px 12px rgba(0,0,0,0.06),
    0 8px 24px rgba(0,0,0,0.06);
}

/* Popular badge */
.tier-card__badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  background: linear-gradient(135deg, var(--accent-strong) 0%, #9d6554 100%);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 12px;
  white-space: nowrap;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 10;
  box-shadow: 0 4px 12px rgba(180, 123, 104, 0.4);
}

.tier-card__badge svg {
  width: 10px;
  height: 10px;
}

.tier-card__badge--visible {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* Popular card styling */
.tier-card--popular {
  z-index: 5;
  transform: translateY(0) scale(1.05);
}

.tier-card--popular .tier-card__glow {
  opacity: 0.5;
}

.tier-card--popular .tier-card__inner {
  background: linear-gradient(180deg, #fffbf9 0%, #fff 100%);
  border-color: var(--accent-strong);
  box-shadow: 
    0 0 0 3px var(--accent-soft),
    0 8px 24px rgba(180, 123, 104, 0.18),
    0 16px 48px rgba(180, 123, 104, 0.1);
}

.tier-card--popular .tier-card__name {
  color: var(--accent-strong);
}

.tier-card--popular .tier-card__amount {
  color: var(--accent-strong);
}

.tier-card--popular .tier-card__feature svg {
  color: var(--accent-strong);
}

/* Card content */
.tier-card__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.6rem;
  transition: color 0.3s ease;
}

.tier-card__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 0.4rem;
}

.tier-card__currency {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
}

.tier-card__amount {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1;
  transition: color 0.3s ease;
}

.tier-card__dropdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  background: #f5f5f5;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

/* Features */
.tier-card__features {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1rem;
  flex: 1;
}

.tier-card__feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  background: #f9f9f9;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-main);
  text-align: left;
}

.tier-card__feature svg {
  width: 13px;
  height: 13px;
  color: #22c55e;
  flex-shrink: 0;
  transition: color 0.3s ease;
}

/* Popular checkbox */
.tier-card__popular-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  padding-top: 0.75rem;
  border-top: 1px solid #f0f0f0;
  margin-top: auto;
}

.tier-card__checkbox {
  width: 16px;
  height: 16px;
  border: 2px solid #d0d0d0;
  border-radius: 4px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}

.tier-card__checkbox--checked {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.tier-card__checkbox--checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Responsive */
/* Mockup 1.5 Responsive */
@media (max-width: 900px) {
  .offers-mock--side-caption {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .offers-mock--side-caption .offers-mock__caption h3 {
    font-size: 1.15rem;
  }
  
  .offers-mock--side-caption .offers-mock__caption p {
    font-size: 0.95rem;
  }
}

@media (max-width: 600px) {
  .offers-mock__body--tiers {
    padding: 1.25rem 1rem;
    gap: 1rem;
  }
  
  .tiers-header__title {
    font-size: 1rem;
  }
  
  .tiers-header__subtitle {
    font-size: 0.8rem;
  }
  
  /* Selector buttons */
  .tiers-selector {
    gap: 0.5rem;
  }
  
  .tiers-selector__btn {
    padding: 0.6rem 0.5rem;
    gap: 0.35rem;
  }
  
  .tiers-selector__bars {
    height: 16px;
  }
  
  .tiers-selector__bars span {
    width: 6px;
    height: 12px;
  }
  
  .tiers-selector__label {
    font-size: 0.65rem;
  }
  
  /* Cards */
  .tiers-cards {
    gap: 0.6rem;
    min-height: 220px;
    padding: 0.5rem 0;
  }
  
  .tier-card {
    flex: 0 0 110px;
  }
  
  .tier-card__inner {
    padding: 1rem 0.7rem;
    border-radius: 12px;
  }
  
  .tier-card__badge {
    padding: 0.2rem 0.5rem;
    font-size: 0.5rem;
    top: -8px;
  }
  
  .tier-card__name {
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
  }
  
  .tier-card__currency {
    font-size: 0.85rem;
  }
  
  .tier-card__amount {
    font-size: 1.75rem;
  }
  
  .tier-card__dropdown {
    padding: 0.3rem 0.5rem;
    font-size: 0.6rem;
    margin-bottom: 0.75rem;
  }
  
  .tier-card__features {
    gap: 0.3rem;
    margin-bottom: 0.75rem;
  }
  
  .tier-card__feature {
    padding: 0.35rem 0.45rem;
    gap: 0.35rem;
    font-size: 0.6rem;
  }
  
  .tier-card__feature svg {
    width: 10px;
    height: 10px;
  }
  
  .tier-card__popular-label {
    padding-top: 0.5rem;
    gap: 0.35rem;
    font-size: 0.55rem;
  }
  
  .tier-card__checkbox {
    width: 12px;
    height: 12px;
  }
  
  .tier-card__checkbox--checked::after {
    top: 1px;
    left: 3px;
    width: 3px;
    height: 6px;
  }
  
  /* Popular card scale */
  .tier-card--popular {
    transform: translateY(0) scale(1.03);
  }
}

@media (max-width: 400px) {
  .tier-card {
    flex: 0 0 95px;
  }
  
  .tier-card__amount {
    font-size: 1.5rem;
  }
  
  .tier-card__feature {
    font-size: 0.55rem;
    padding: 0.3rem 0.4rem;
  }
}


/* =============================================
   SIDE CAPTION VARIANT (WIDE ROW)
   ============================================= */
.offers-mock--side-caption {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 2rem;
  align-items: center;
}

.offers-mock--side-caption .offers-mock__caption {
  padding: 0;
}

.offers-mock--side-caption .offers-mock__caption h3 {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.offers-mock--side-caption .offers-mock__caption p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .offers-mock--side-caption {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .offers-mock--side-caption .offers-mock__screen {
    max-width: 420px;
    margin: 0 auto;
  }
  
  .offers-mock--side-caption .offers-mock__caption {
    text-align: center;
  }
  
  .offers-mock--side-caption .offers-mock__caption h3 {
    font-size: 1.15rem;
  }
  
  .offers-mock--side-caption .offers-mock__caption p {
    font-size: 0.95rem;
  }
}

@media (max-width: 600px) {
  .offers-mock--side-caption .offers-mock__screen {
    max-width: 100%;
  }
}


.pricing-feature--new {
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: linear-gradient(135deg, var(--accent-soft), rgba(200, 158, 138, 0.2));
  border: 2px solid var(--accent);
}

.pricing-feature--visible {
  opacity: 1;
  transform: translateX(0);
}

/* =============================================
   MOCKUP 2: BUNDLE BUILDER
   ============================================= */
.offers-mock__body--bundle {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  gap: 0.85rem;
  height: 490px;
}

.bundle-header__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
}

/* Product rows */
.bundle-products {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.bundle-product {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #fff;
  border: 1.5px solid #e8e8e8;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bundle-product__glow {
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--accent-soft), var(--accent));
  border-radius: 14px;
  opacity: 0;
  z-index: -1;
  filter: blur(8px);
  transition: opacity 0.4s ease;
}

.bundle-product--selected {
  border-color: var(--accent);
  background: #fffcfa;
  transform: translateX(4px);
  box-shadow: 0 2px 12px rgba(180, 123, 104, 0.1);
}

.bundle-product--selected .bundle-product__glow {
  opacity: 0.3;
}

/* Checkbox */
.bundle-product__check {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border: 1.5px solid #ddd;
  border-radius: 5px;
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bundle-product__check svg {
  width: 11px;
  height: 11px;
  color: #fff;
  opacity: 0;
  transform: scale(0) rotate(-45deg);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bundle-product--selected .bundle-product__check {
  background: #5a9a6e;
  border-color: #5a9a6e;
}

.bundle-product--selected .bundle-product__check svg {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* Product icon */
.bundle-product__icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f8f8;
  border-radius: 8px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.bundle-product__icon svg {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  transition: color 0.3s ease;
}

.bundle-product--selected .bundle-product__icon {
  background: var(--accent-soft);
}

.bundle-product--selected .bundle-product__icon svg {
  color: var(--accent-strong);
}

/* Product info */
.bundle-product__info {
  flex: 1;
  min-width: 0;
}

.bundle-product__name {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.1rem;
}

.bundle-product__meta {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.bundle-product__price {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  transition: all 0.3s ease;
}

.bundle-product--selected .bundle-product__price {
  color: var(--accent-strong);
}

/* Result bar */
.bundle-result {
  position: relative;
  margin-top: 5rem;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bundle-result--visible {
  opacity: 1;
  transform: translateY(0);
}

.bundle-result__glow {
  position: absolute;
  inset: -6px;
  background: linear-gradient(135deg, rgba(90, 154, 110, 0.2), rgba(90, 154, 110, 0.1));
  border-radius: 20px;
  opacity: 0;
  filter: blur(14px);
  transition: opacity 0.5s ease;
  z-index: -1;
}

.bundle-result--visible .bundle-result__glow {
  opacity: 1;
}

.bundle-result__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, #f9fcfa 0%, #f0f7f2 100%);
  border: 2px solid #c8dccf;
  border-radius: 14px;
}

.bundle-result__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5a9a6e;
  margin-bottom: 0.3rem;
}

.bundle-result__pricing {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
}

.bundle-result__original {
  font-size: 1.1rem;
  color: var(--text-muted);
  text-decoration: line-through;
}

.bundle-result__final {
  font-size: 2rem;
  font-weight: 800;
  color: #4a8a5e;
}

.bundle-result__save {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1rem;
  background: #5a9a6e;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #fff;
  transform: scale(0);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bundle-result__save svg {
  width: 16px;
  height: 16px;
}

.bundle-result__save--visible {
  transform: scale(1);
}

.bundle-result__save strong {
  font-weight: 700;
}

/* =============================================
   MOCKUP 3: PRODUCT LINKING
   ============================================= */
.offers-mock__body--linking {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  gap: 1rem;
  height: 490px;
}

.linking-header {
  margin-bottom: 0.25rem;
}

.linking-header__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.25rem;
}

.linking-header__subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

/* Standalone option */
.linking-option {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: #fafafa;
  border: 2px solid #e5e5e5;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.linking-option--active {
  background: var(--accent-soft);
  border-color: var(--accent-strong);
  box-shadow: 0 4px 16px rgba(180, 123, 104, 0.2);
  transform: scale(1.02);
}

.linking-option__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 10px;
  color: var(--accent-strong);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.linking-option--active .linking-option__icon {
  background: var(--accent-strong);
  color: #fff;
}

.linking-option__content {
  flex: 1;
  min-width: 0;
}

.linking-option__title {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.2rem;
}

.linking-option__desc {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.linking-option__check {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e5e5e5;
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.linking-option__check svg {
  width: 14px;
  height: 14px;
  color: #fff;
}

.linking-option--active .linking-option__check {
  opacity: 1;
  transform: scale(1);
  background: #16a34a;
}

/* Divider */
.linking-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
}

.linking-divider::before,
.linking-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e5e5e5;
}

.linking-divider span {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Studio options */
.linking-studios {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.linking-studio {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 2px solid #e5e5e5;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.linking-studio--active {
  background: var(--accent-soft);
  border-color: var(--accent-strong);
  box-shadow: 0 4px 16px rgba(180, 123, 104, 0.2);
  transform: scale(1.02) translateX(4px);
}

.linking-studio__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 8px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.linking-studio--active .linking-studio__icon {
  background: var(--accent-strong);
  color: #fff;
}

.linking-studio__content {
  flex: 1;
  min-width: 0;
}

.linking-studio__name {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
}

.linking-studio__badge {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.linking-studio__check {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e5e5e5;
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}

.linking-studio__check svg {
  width: 12px;
  height: 12px;
  color: #fff;
}

.linking-studio--active .linking-studio__check {
  opacity: 1;
  transform: scale(1);
  background: #16a34a;
}

/* Footer */
.linking-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

.linking-footer__cancel {
  padding: 0.6rem 1rem;
  background: transparent;
  border: none;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s ease;
}

.linking-footer__cancel:hover {
  color: var(--text-main);
}

.linking-footer__continue {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.25rem;
  background: #f5f5f5;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.2s ease;
}

.linking-footer__continue:hover {
  background: #eee;
}

.linking-footer__continue svg {
  transition: transform 0.2s ease;
}

.linking-footer__continue:hover svg {
  transform: translateX(3px);
}

/* =============================================
   MOCKUP 4: COUPON SYSTEM
   ============================================= */
.offers-mock__body--coupon {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  height: 420px;
}

.coupon-product {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #f8f8f8;
  border-radius: 12px;
}

.coupon-product__image {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--accent-soft), var(--accent));
  border-radius: 10px;
}

.coupon-product__info {
  flex: 1;
}

.coupon-product__name {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.15rem;
}

.coupon-product__original {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.coupon-input-row {
  display: flex;
  gap: 0.5rem;
}

.coupon-input {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0.9rem 1rem;
  background: #f8f8f8;
  border: 2px solid #e5e5e5;
  border-radius: 10px;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
}

.coupon-input__code {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: 0.08em;
}

.coupon-input__cursor {
  width: 2px;
  height: 18px;
  background: var(--accent-strong);
  margin-left: 2px;
  animation: cursor-blink 0.7s step-end infinite;
}

.coupon-apply {
  padding: 0.9rem 1.5rem;
  background: var(--text-main);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.coupon-apply--clicked {
  background: var(--accent-strong);
  transform: scale(0.95);
}

/* Breakdown */
.coupon-breakdown {
  background: #f8f8f8;
  border-radius: 12px;
  padding: 1rem 1.25rem;
}

.coupon-breakdown__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.coupon-breakdown__row--discount {
  color: #16a34a;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.coupon-breakdown__row--active {
  opacity: 1;
}

.coupon-discount-value {
  font-weight: 700;
  transition: transform 0.3s ease;
}

.coupon-discount--show {
  transform: scale(1.2);
  animation: discount-pop 0.4s ease;
}

@keyframes discount-pop {
  0% { transform: scale(0.5); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1.2); }
}

.coupon-breakdown__row--total {
  border-top: 1px solid #e5e5e5;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  font-weight: 600;
  color: var(--text-main);
}

.coupon-total-value {
  font-size: 1.15rem;
  font-weight: 800;
  transition: all 0.3s ease;
}

.coupon-total--highlight {
  color: var(--accent-strong);
  transform: scale(1.1);
}

/* Success message */
.coupon-success {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  background: #dcfce7;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #16a34a;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.coupon-success--show {
  opacity: 1;
  transform: translateY(0);
}

.coupon-success__icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #16a34a;
  border-radius: 50%;
}

.coupon-success__icon svg {
  width: 14px;
  height: 14px;
  color: #fff;
}


/* =============================================
   MOCKUP 5: LAUNCH COUNTDOWN - PREMIUM
   ============================================= */
.offers-mock__body--launch {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.75rem;
  gap: 1.25rem;
  background: linear-gradient(180deg, #fdfcfb 0%, #fff 100%);
  height: 420px;
}

/* Header */
.launch-header {
  text-align: center;
}

.launch-header__label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* Timer */
.launch-timer {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
}

.launch-timer__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.launch-timer__card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  min-width: 52px;
  text-align: center;
  box-shadow: 
    0 1px 2px rgba(0,0,0,0.04),
    0 4px 12px rgba(0,0,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.8);
  position: relative;
  overflow: hidden;
}

/* Subtle shine effect */
.launch-timer__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, transparent 100%);
  border-radius: 10px 10px 0 0;
}

.launch-timer__card--accent {
  background: linear-gradient(135deg, var(--accent-soft) 0%, #fff 100%);
  border-color: var(--accent);
}

.launch-timer__value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1;
}

.launch-timer__card--accent .launch-timer__value {
  color: var(--accent-strong);
}

.launch-timer__label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.launch-timer__sep {
  font-size: 1.25rem;
  font-weight: 700;
  color: #d0d0d0;
  margin-top: 0.6rem;
}

/* Stats */
.launch-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.launch-stat {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.launch-stat__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  flex-shrink: 0;
}

.launch-stat__icon svg {
  width: 18px;
  height: 18px;
}

.launch-stat__icon--sales {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%);
  color: #22c55e;
}

.launch-stat__icon--revenue {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.05) 100%);
  color: #3b82f6;
}

.launch-stat__content {
  flex: 1;
  min-width: 0;
}

.launch-stat__value {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.2;
  transition: all 0.3s ease;
}

.launch-stat__value--bump {
  transform: scale(1.1);
  color: #22c55e;
}

.launch-stat__label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.launch-stat__spark {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.launch-stat__spark svg {
  width: 18px;
  height: 18px;
  color: #22c55e;
}

.launch-stat__spark--visible {
  opacity: 1;
  animation: spark-pop 0.5s ease;
}

@keyframes spark-pop {
  0% { transform: translateY(-50%) scale(0); }
  60% { transform: translateY(-50%) scale(1.3); }
  100% { transform: translateY(-50%) scale(1); }
}

/* Progress */
.launch-progress {
  background: linear-gradient(135deg, #f9f9f9 0%, #fff 100%);
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 1rem 1.25rem;
}

.launch-progress__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.launch-progress__title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-main);
}

.launch-progress__title svg {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

.launch-progress__count {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}

.launch-progress__track {
  height: 10px;
  background: #eee;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.launch-progress__fill {
  height: 100%;
  width: 85%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-strong) 100%);
  border-radius: 10px;
  transition: width 0.6s ease;
  position: relative;
}

.launch-progress__fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 100%);
  border-radius: 10px 10px 0 0;
}

.launch-progress__glow {
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 0;
  width: 85%;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent));
  border-radius: 10px;
  filter: blur(6px);
  opacity: 0.5;
  z-index: -1;
}

.launch-progress__hint {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent-strong);
  text-align: center;
}

/* Live badge animation */
.chrome-badge--live {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #ef4444;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.chrome-badge__dot {
  width: 6px;
  height: 6px;
  background: #ef4444;
  border-radius: 50%;
  animation: live-pulse 1.5s ease infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

/* =============================================
   MOCKUP 6: OFFERS DASHBOARD
   ============================================= */
.offers-mock__body--dashboard {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 420px;
  padding: 2rem 2.5rem;
  overflow: hidden;
}

/* Dashboard Header */
.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.dashboard-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.dashboard-new-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 8px rgba(180, 123, 104, 0.2);
}

.dashboard-new-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(180, 123, 104, 0.3);
}

.dashboard-new-btn svg {
  flex-shrink: 0;
}

/* Stats Row */
.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.dashboard-stat-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(250, 248, 246, 0.8) 100%);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(200, 158, 138, 0.12);
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.5) inset,
    0 4px 12px rgba(42, 38, 35, 0.04),
    0 8px 24px rgba(42, 38, 35, 0.06);
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  animation: stat-card-pop-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.dashboard-stat-card[data-stat-card="1"] {
  animation-delay: 0.1s;
}

.dashboard-stat-card[data-stat-card="2"] {
  animation-delay: 0.3s;
}

.dashboard-stat-card[data-stat-card="3"] {
  animation-delay: 0.5s;
}

@keyframes stat-card-pop-in {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dashboard-stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(200, 158, 138, 0.08), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.dashboard-stat-card:hover::before {
  opacity: 1;
}

.dashboard-stat-card__icon {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent-soft), rgba(200, 158, 138, 0.25));
  border-radius: 12px;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0) rotate(-180deg);
  animation: icon-pop-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.dashboard-stat-card[data-stat-card="1"] .dashboard-stat-card__icon {
  animation-delay: 0.2s;
}

.dashboard-stat-card[data-stat-card="2"] .dashboard-stat-card__icon {
  animation-delay: 0.4s;
}

.dashboard-stat-card[data-stat-card="3"] .dashboard-stat-card__icon {
  animation-delay: 0.6s;
}

@keyframes icon-pop-in {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-180deg);
  }
  70% {
    transform: scale(1.1) rotate(10deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.dashboard-stat-card__icon svg {
  width: 24px;
  height: 24px;
  color: var(--accent-strong);
}

.dashboard-stat-card__content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dashboard-stat-card__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
}

.dashboard-stat-card__value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1;
}

.dashboard-stat-card__meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Offers Section */
.dashboard-offers-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.dashboard-section-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
  margin: 0;
}

.dashboard-offers-list {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.dashboard-offers-scroll {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-right: 0.5rem;
  animation: scroll-offers-seamless 20s linear infinite;
}

@keyframes scroll-offers-seamless {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-33.333%);
  }
}

/* Offer Row */
.dashboard-offer-row {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(248, 248, 248, 0.6);
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid transparent;
}

.dashboard-offer-row:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(200, 158, 138, 0.15);
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(42, 38, 35, 0.04);
}

.dashboard-offer-row--placeholder {
  opacity: 0.4;
}

.dashboard-offer-row__name {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
}

.dashboard-offer-row__dot {
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  border-radius: 50%;
  flex-shrink: 0;
}

.dashboard-offer-row__price {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
  opacity: 0.7;
}

.dashboard-offer-row__stats {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  justify-content: flex-end;
}

.dashboard-offer-stat {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
}

.dashboard-offer-stat svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.dashboard-offer-stat--revenue {
  color: var(--accent-strong);
  font-weight: 700;
}


/* =============================================
   OFFERS FEATURES BENTO GRID
   ============================================= */
.offers-features {
  padding: 6rem 2rem;
  background: #fff;
}

.offers-features__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.offers-features__header {
  text-align: center;
  margin-bottom: 3rem;
}

.offers-features__eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-strong);
  margin-bottom: 0.75rem;
}

.offers-features__title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  color: var(--text-main);
  margin: 0;
}

.offers-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.offers-feature-card {
  background: var(--bg);
  border-radius: 20px;
  padding: 1.75rem;
  border: 1px solid var(--border-subtle);
  transition: all 0.3s ease;
}

.offers-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.1);
}

.offers-feature-card--hero {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.offers-feature-card--fees {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
}

.offers-feature-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  margin-bottom: 1.25rem;
}

.offers-feature-icon--coral {
  background: rgba(200, 158, 138, 0.15);
  color: var(--accent-strong);
}

.offers-feature-icon--green {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.offers-feature-icon--purple {
  background: rgba(139, 92, 246, 0.12);
  color: #7c3aed;
}

.offers-feature-icon--blue {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
}

.offers-feature-icon--amber {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

.offers-feature-icon--teal {
  background: rgba(20, 184, 166, 0.12);
  color: #0d9488;
}

.offers-feature-card__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.5rem;
}

.offers-feature-card__text {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.6;
}

/* Hero card visual */
.offers-pricing-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.offers-pricing-tag {
  padding: 0.6rem 1.1rem;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  animation: float-tag 3s ease infinite;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.offers-pricing-tag--free {
  background: #f3f4f6;
  color: var(--text-muted);
  animation-delay: 0s;
}

.offers-pricing-tag--onetime {
  background: var(--accent-soft);
  color: var(--accent-strong);
  animation-delay: 0.5s;
}

.offers-pricing-tag--sub {
  background: rgba(139, 92, 246, 0.12);
  color: #7c3aed;
  animation-delay: 1s;
}

.offers-pricing-tag--plan {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
  animation-delay: 1.5s;
}

@keyframes float-tag {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Fee comparison */
.offers-fee-comparison {
  margin-top: auto;
  padding-top: 1.5rem;
  display: flex;
  gap: 1rem;
}

.fee-compare-item {
  flex: 1;
  padding: 1.25rem;
  border-radius: 12px;
  text-align: center;
}

.fee-compare-item--others {
  background: #f3f4f6;
}

.fee-compare-item--gadura {
  background: rgba(34, 197, 94, 0.12);
}

.fee-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.fee-value {
  font-size: 1.5rem;
  font-weight: 800;
}

.fee-compare-item--others .fee-value {
  color: var(--text-muted);
  text-decoration: line-through;
}

.fee-compare-item--gadura .fee-value {
  color: #16a34a;
}


/* =============================================
   CTA SECTION - DARK THEME
   ============================================= */
.offers-cta {
  position: relative;
  padding: 6rem 2rem;
  background: #1a1a1a;
  overflow: hidden;
}

/* Ambient glows */
.offers-cta__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}

.offers-cta__glow--1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(180, 123, 104, 0.25) 0%, transparent 70%);
  top: -20%;
  left: -10%;
}

.offers-cta__glow--2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(200, 158, 138, 0.2) 0%, transparent 70%);
  bottom: -30%;
  right: -5%;
}

.offers-cta__inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

/* Content */
.offers-cta__content {
  position: relative;
  z-index: 2;
}

.offers-cta__eyebrow {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 1rem;
}

.offers-cta__title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 1.25rem;
}

.offers-cta__text {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  margin: 0 0 2rem;
  max-width: 440px;
}

.offers-cta__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.offers-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.offers-cta__btn--primary {
  background: var(--accent-strong);
  color: #fff;
  box-shadow: 0 4px 20px rgba(180, 123, 104, 0.4);
}

.offers-cta__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(180, 123, 104, 0.5);
}

.offers-cta__btn--secondary {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
}

.offers-cta__btn--secondary:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
}

/* Visual side */
.offers-cta__visual {
  position: relative;
  height: 320px;
}

/* Floating elements */
.cta-float {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: #fff;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

/* Price card */
.cta-float--price {
  flex-direction: column;
  align-items: flex-start;
  padding: 1.25rem 1.5rem;
  top: 10%;
  left: 10%;
  animation: cta-float-1 6s ease-in-out infinite;
}

.cta-float__tag {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: 0.35rem;
}

.cta-float__amount {
  font-size: 2rem;
  font-weight: 800;
}

/* Discount badge */
.cta-float--discount {
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 800;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  top: 5%;
  right: 20%;
  animation: cta-float-2 5s ease-in-out infinite 0.5s;
}

/* Check badge */
.cta-float--check {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  bottom: 25%;
  left: 25%;
  animation: cta-float-3 5.5s ease-in-out infinite 0.8s;
}

.cta-float--check svg {
  width: 22px;
  height: 22px;
  color: #22c55e;
}

/* Star badge */
.cta-float--star {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  top: 35%;
  right: 5%;
  animation: cta-float-1 6s ease-in-out infinite 1s;
}

.cta-float--star svg {
  width: 20px;
  height: 20px;
  color: #ef4444;
}

/* Recurring badge */
.cta-float--recurring {
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  bottom: 10%;
  right: 15%;
  animation: cta-float-2 5.5s ease-in-out infinite 0.3s;
}

.cta-float--recurring svg {
  width: 18px;
  height: 18px;
  color: #3b82f6;
  animation: spin-slow 4s linear infinite;
}

.cta-float--recurring span {
  font-size: 0.85rem;
  font-weight: 600;
  color: #3b82f6;
}

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

/* Float animations */
@keyframes cta-float-1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(2deg); }
}

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

@keyframes cta-float-3 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(3deg); }
}

/* Responsive */
@media (max-width: 900px) {
  .offers-cta__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 3rem;
  }
  
  .offers-cta__title {
    font-size: 2rem;
  }
  
  .offers-cta__text {
    max-width: none;
  }
  
  .offers-cta__actions {
    justify-content: center;
  }
  
  .offers-cta__visual {
    height: 250px;
  }
}

@media (max-width: 600px) {
  .offers-cta {
    padding: 4rem 1.5rem;
  }
  
  .offers-cta__title {
    font-size: 1.75rem;
  }
  
  .offers-cta__visual {
    display: none;
  }
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  .offers-hero__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .offers-hero__scene {
    height: 420px;
  }

  .offers-showcase__grid {
    grid-template-columns: 1fr;
  }

  .offers-mock--wide {
    grid-column: span 1;
  }

  .offers-mock__body--builder-v2,
  .offers-mock__body--access {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .builder-sidebar {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  .builder-sidebar__section {
    flex: 1;
    min-width: 140px;
  }
  
  .builder-sidebar__radios {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .builder-sidebar__radio {
    flex: 1;
    justify-content: center;
    text-align: center;
  }

  .offers-features__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .offers-feature-card--hero {
    grid-column: span 2;
  }

  .offers-feature-card--fees {
    grid-row: span 1;
  }

  .offers-cta__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .offers-cta__visual {
    display: none;
  }
}

@media (max-width: 768px) {
  .offers-hero {
    padding: 5rem 1.5rem 4rem;
    min-height: auto;
  }

  .offers-hero__scene {
    height: 360px;
  }

  .offers-card-stack {
    width: 200px;
  }

  .offers-stack-card--back,
  .offers-stack-card--mid {
    display: none;
  }

  .offers-float-badge--discount,
  .offers-float-badge--price {
    display: none;
  }

  .offers-showcase {
    padding: 4rem 1.5rem;
  }

  .offers-mock__body {
    padding: 1.25rem;
    min-height: auto;
  }

  .builder-options {
    flex-direction: column;
  }

  .launch-timer__value {
    font-size: 1.5rem;
    padding: 0.4rem 0.6rem;
    min-width: 44px;
  }

  .offers-features__grid {
    grid-template-columns: 1fr;
  }

  .offers-feature-card--hero,
  .offers-feature-card--fees {
    grid-column: span 1;
    grid-row: span 1;
  }

  .offers-feature-card--hero {
    grid-template-columns: 1fr;
  }

  .offers-cta {
    padding: 4rem 1.5rem;
  }
}
























/* =============================================
   CHECKOUT PAGE STYLES
   ============================================= */

/* =============================================
   CHECKOUT HERO - REFINED
   ============================================= */
.checkout-hero {
  position: relative;
  padding: 7rem 2rem 2rem;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg) 0%, #fff 100%);
}

/* Ambient Orbs for 3D Depth */
.checkout-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.checkout-orb--1 {
  width: 180px;
  height: 180px;
  top: 5%;
  right: 8%;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,0.85), transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(200, 158, 138, 0.4), rgba(200, 158, 138, 0.1) 50%, transparent 70%);
  filter: blur(1px);
  animation: checkoutOrbSlideIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both, checkoutOrbDrift1 25s ease-in-out 1.2s infinite both;
}

.checkout-orb--2 {
  width: 140px;
  height: 140px;
  bottom: 10%;
  right: 20%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.7), transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(180, 123, 104, 0.35), transparent 60%);
  filter: blur(0.5px);
  animation: checkoutOrbSwirl 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both, checkoutOrbDrift2 20s ease-in-out 1.35s infinite both;
}

.checkout-orb--3 {
  width: 120px;
  height: 120px;
  top: 35%;
  left: 5%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.75), transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(200, 158, 138, 0.38), transparent 60%);
  animation: checkoutOrbPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both, checkoutOrbDrift3 18s ease-in-out 1.4s infinite both;
}

.checkout-orb--4 {
  width: 90px;
  height: 90px;
  top: 8%;
  left: 25%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(180, 123, 104, 0.3), transparent 60%);
  animation: checkoutOrbSwirl 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both, checkoutOrbDrift4 15s ease-in-out 1.15s infinite both;
}

.checkout-orb--5 {
  width: 100px;
  height: 100px;
  bottom: 25%;
  left: 15%;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,0.8), transparent 38%),
    radial-gradient(circle at 50% 50%, rgba(200, 158, 138, 0.32), transparent 55%);
  animation: checkoutOrbPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s both, checkoutOrbDrift5 22s ease-in-out 1.4s infinite both;
}

@keyframes checkoutOrbDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-25px, 20px) scale(1.08); }
  66% { transform: translate(15px, -15px) scale(0.95); }
}

@keyframes checkoutOrbDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -25px) scale(1.05); }
}

@keyframes checkoutOrbDrift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(18px, 15px) scale(1.03); }
}

@keyframes checkoutOrbDrift4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-12px, 18px) scale(1.1); }
}

@keyframes checkoutOrbDrift5 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40% { transform: translate(10px, -10px) scale(1.06); }
  70% { transform: translate(-8px, 8px) scale(0.98); }
}

.checkout-hero__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

/* Content */
.checkout-hero__content {
  position: relative;
  z-index: 2;
}

/* Checkout hero entrance animations */
@keyframes checkoutFadeSlideUp {
  from { opacity: 0; transform: translateY(25px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes checkoutSceneReveal {
  from { opacity: 0; transform: translateX(50px) scale(0.95); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

/* Dynamic orb entrances */
@keyframes checkoutOrbSwirl {
  0% { opacity: 0; transform: scale(0.3) rotate(-90deg); }
  70% { opacity: 1; transform: scale(1.08) rotate(5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes checkoutOrbSlideIn {
  0% { opacity: 0; transform: translateX(80px) scale(0.5); }
  70% { opacity: 1; transform: translateX(-5px) scale(1.02); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes checkoutOrbPop {
  0% { opacity: 0; transform: scale(0); }
  70% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

.checkout-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-strong);
  margin-bottom: 1.25rem;
  animation: checkoutFadeSlideUp 0.8s ease forwards;
  opacity: 0;
}

.checkout-hero__title {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-main);
  margin: 0 0 1.5rem;
  width: 650px;
  animation: checkoutFadeSlideUp 0.8s ease 0.1s forwards;
  opacity: 0;
}

.checkout-hero__subtitle {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 1.75rem;
  max-width: 440px;
  animation: checkoutFadeSlideUp 0.8s ease 0.2s forwards;
  opacity: 0;
}

.checkout-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2rem;
  animation: checkoutFadeSlideUp 0.8s ease 0.3s forwards;
  opacity: 0;
}

.checkout-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(200, 158, 138, 0.4);
  background: rgba(200, 158, 138, 0.1);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.checkout-hero__cta .btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 2rem;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0.6rem;
  border: none;
  cursor: pointer;
  box-shadow:
    0 4px 12px rgba(180, 123, 104, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: checkoutFadeSlideUp 0.8s ease 0.4s forwards;
  opacity: 0;
}

.checkout-hero__cta .btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 8px 20px rgba(180, 123, 104, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Scene */
.checkout-hero__scene {
  position: relative;
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 3rem;
  animation: checkoutSceneReveal 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
}



/* ========== AMBIENT ORBS ========== */
.checkout-ambient {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

.checkout-ambient--1 {
  width: 320px;
  height: 200px;
  top: 12%;
  right: 5%;
  background:
    linear-gradient(135deg, rgba(200, 158, 138, 0.15), rgba(255, 255, 255, 0.08)),
    linear-gradient(45deg, rgba(200, 158, 138, 0.1), transparent);
  border-radius: 42% 58% 70% 30% / 45% 55% 45% 55%;
  animation: ambientMorph1 16s ease-in-out infinite;
  filter: blur(40px);
}

.checkout-ambient--2 {
  width: 240px;
  height: 240px;
  bottom: 8%;
  left: 8%;
  background:
    linear-gradient(225deg, rgba(34, 197, 94, 0.1), rgba(255, 255, 255, 0.06)),
    linear-gradient(-45deg, rgba(34, 197, 94, 0.08), transparent);
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: ambientMorph2 20s ease-in-out infinite;
  filter: blur(45px);
}

@keyframes ambientMorph1 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    border-radius: 42% 58% 70% 30% / 45% 55% 45% 55%;
  }
  33% {
    transform: translate(-20px, 15px) rotate(5deg);
    border-radius: 58% 42% 45% 55% / 70% 30% 60% 40%;
  }
  66% {
    transform: translate(15px, -10px) rotate(-3deg);
    border-radius: 50% 50% 60% 40% / 55% 45% 50% 50%;
  }
}

@keyframes ambientMorph2 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  33% {
    transform: translate(18px, -12px) rotate(-4deg);
    border-radius: 45% 55% 60% 40% / 50% 50% 45% 55%;
  }
  66% {
    transform: translate(-12px, 18px) rotate(6deg);
    border-radius: 40% 60% 50% 50% / 65% 35% 55% 45%;
  }
}

@keyframes ambientMorph1 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    border-radius: 42% 58% 70% 30% / 45% 55% 45% 55%;
  }
  33% {
    transform: translate(-20px, 15px) rotate(5deg);
    border-radius: 58% 42% 45% 55% / 70% 30% 60% 40%;
  }
  66% {
    transform: translate(15px, -10px) rotate(-3deg);
    border-radius: 50% 50% 60% 40% / 55% 45% 50% 50%;
  }
}

@keyframes ambientMorph2 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  33% {
    transform: translate(18px, -12px) rotate(-4deg);
    border-radius: 45% 55% 60% 40% / 50% 50% 45% 55%;
  }
  66% {
    transform: translate(-12px, 18px) rotate(6deg);
    border-radius: 40% 60% 50% 50% / 65% 35% 55% 45%;
  }
}

/* ========== CARD STACK ========== */
.checkout-stack {
  position: relative;
  width: 260px;
  height: 340px;
  z-index: 1;
  transform-style: preserve-3d;
  animation: stackFloat 7s ease-in-out infinite;
}

@keyframes stackFloat {
  0%, 100% { transform: translateY(0) rotateX(2deg) rotateY(-2deg); }
  50% { transform: translateY(-10px) rotateX(0deg) rotateY(1deg); }
}

.checkout-stack:hover .checkout-stack__card--2 {
  transform: translate(12px, -12px) rotate(5deg);
}

.checkout-stack:hover .checkout-stack__card--3 {
  transform: translate(24px, -24px) rotate(9deg);
}

.checkout-stack__card {
  position: absolute;
  width: 100%;
  border-radius: 20px;
  background: #fff;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.checkout-stack__card--1 {
  height: 100%;
  z-index: 3;
}

.checkout-stack__card--2 {
  height: 94%;
  top: -8px;
  left: 8px;
  z-index: 2;
  background: linear-gradient(145deg, #faf8f6 0%, #f5f0eb 100%);
  box-shadow: 0 10px 30px rgba(120, 80, 60, 0.08);
  transform: translate(8px, -8px) rotate(3deg);
}

.checkout-stack__card--3 {
  height: 88%;
  top: -16px;
  left: 16px;
  z-index: 1;
  background: linear-gradient(145deg, #f5f0eb 0%, #efe8e1 100%);
  box-shadow: 0 8px 25px rgba(120, 80, 60, 0.06);
  transform: translate(16px, -16px) rotate(6deg);
}

/* ========== FRONT CARD ========== */
.checkout-card__glow {
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle at 40% 40%, rgba(200, 158, 138, 0.25) 0%, transparent 60%);
  border-radius: 50%;
  z-index: -1;
  filter: blur(40px);
}

.checkout-card__inner {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 20px;
  padding: 1.4rem;
  position: relative;
  box-shadow:
    0 4px 6px rgba(0,0,0,0.02),
    0 10px 20px rgba(0,0,0,0.04),
    0 20px 40px rgba(120, 80, 60, 0.08),
    0 40px 60px rgba(120, 80, 60, 0.06),
    inset 0 1px 1px rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.8);
}

.checkout-card__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: radial-gradient(circle at 10% 0%, rgba(255,255,255,0.8), transparent 40%);
  pointer-events: none;
}

/* Card content */
.cc-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.cc-product {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: 1;
}

.cc-thumb {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent) 100%);
  border-radius: 10px;
  flex-shrink: 0;
}

.cc-info {
  min-width: 0;
}

.cc-name {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.1rem;
}

.cc-creator {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.cc-price {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
}

.cc-divider {
  height: 1px;
  background: #f0f0f0;
  margin-bottom: 1rem;
}

.cc-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.cc-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cc-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
}

.cc-input {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.8rem;
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  font-size: 0.8rem;
  color: var(--text-main);
}

.cc-input svg {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

.cc-btn {
  width: 100%;
  padding: 0.75rem;
  background: var(--text-main);
  border: none;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
}

.cc-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-muted);
}

.cc-trust svg {
  width: 12px;
  height: 12px;
}

/* ========== FLOATING BADGES ========== */
.checkout-badge {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  cursor: pointer;
  z-index: 5;
}

.checkout-badge:hover {
  transform: scale(1.12) !important;
}

.checkout-badge svg {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
}

/* Check - Scattered placement */
.checkout-badge--check {
  width: 44px;
  height: 44px;
  top: 10%;
  left: 5%;
  background: linear-gradient(145deg, #22c55e 0%, #16a34a 100%);
  border-radius: 38% 62% 55% 45% / 48% 58% 42% 52%;
  box-shadow:
    0 8px 24px rgba(22, 163, 74, 0.4),
    inset 0 1px 2px rgba(255,255,255,0.4);
  animation: badgeOrbit1 25s linear infinite, badgeAbstract1 9s ease-in-out infinite;
}

.checkout-badge--check svg {
  width: 18px;
  height: 18px;
  color: #fff;
  stroke-width: 3;
}

/* Star - Scattered placement */
.checkout-badge--star {
  width: 38px;
  height: 38px;
  bottom: 6%;
  left: 12%;
  background: linear-gradient(145deg, #f59e0b 0%, #d97706 100%);
  border-radius: 45% 55% 60% 40% / 55% 45% 55% 45%;
  box-shadow:
    0 6px 20px rgba(217, 119, 6, 0.4),
    inset 0 1px 2px rgba(255,255,255,0.4);
  animation: badgeOrbit2 25s linear infinite, badgeAbstract2 7s ease-in-out infinite;
}

.checkout-badge--star svg {
  width: 16px;
  height: 16px;
  color: #fff;
}

/* Bolt - Scattered placement */
.checkout-badge--bolt {
  width: 40px;
  height: 40px;
  top: 90%;
  right: 60%;
  background: linear-gradient(145deg, #3b82f6 0%, #2563eb 100%);
  border-radius: 52% 48% 45% 55% / 60% 40% 50% 50%;
  box-shadow:
    0 7px 22px rgba(37, 99, 235, 0.4),
    inset 0 1px 2px rgba(255,255,255,0.4);
  animation: badgeOrbit3 25s linear infinite, badgeAbstract3 8s ease-in-out infinite;
}

.checkout-badge--bolt svg {
  width: 16px;
  height: 16px;
  color: #fff;
}

/* Shield - Scattered placement */
.checkout-badge--shield {
  width: 42px;
  height: 42px;
  bottom: 32%;
  right: 20%;
  background: linear-gradient(145deg, var(--accent) 0%, var(--accent-strong) 100%);
  border-radius: 48% 52% 58% 42% / 52% 48% 55% 45%;
  box-shadow:
    0 7px 20px rgba(180, 123, 104, 0.35),
    inset 0 1px 2px rgba(255,255,255,0.4);
  animation: badgeOrbit4 25s linear infinite, badgeAbstract4 10s ease-in-out infinite;
}

.checkout-badge--shield svg {
  width: 18px;
  height: 18px;
  color: #fff;
}

/* 0% Tag - Scattered placement */
.checkout-badge--tag {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  top: 20%;
  right: 20%;
  background: #fff;
  box-shadow: 0 5px 18px rgba(120, 80, 60, 0.15);
  animation: badgeOrbit5 25s linear infinite, badgeAbstract5 7.5s ease-in-out infinite;
}

.checkout-badge--tag span {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--accent-strong);
}

/* Refresh - Scattered placement */
.checkout-badge--refresh {
  width: 38px;
  height: 38px;
  bottom: 6%;
  right: 35%;
  background: #fff;
  border-radius: 55% 45% 48% 52% / 50% 50% 48% 52%;
  box-shadow:
    0 5px 18px rgba(120, 80, 60, 0.12),
    0 10px 28px rgba(120, 80, 60, 0.08),
    inset 0 1px 2px rgba(255,255,255,0.9);
  animation: badgeOrbit6 25s linear infinite, badgeAbstract6 9.5s ease-in-out infinite;
}

.checkout-badge--refresh svg {
  width: 16px;
  height: 16px;
  color: var(--accent-strong);
}

/* Globe - Scattered placement */
.checkout-badge--globe {
  width: 36px;
  height: 36px;
  bottom: 32%;
  right: 28%;
  background: #fff;
  border-radius: 50% 50% 55% 45% / 48% 52% 50% 50%;
  box-shadow:
    0 5px 18px rgba(120, 80, 60, 0.12),
    0 10px 28px rgba(120, 80, 60, 0.08),
    inset 0 1px 2px rgba(255,255,255,0.9);
  animation: badgeOrbit7 25s linear infinite, badgeAbstract7 8.5s ease-in-out infinite;
}

.checkout-badge--globe svg {
  width: 15px;
  height: 15px;
  color: var(--accent-strong);
}

/* ========== ANIMATIONS ========== */
@keyframes badgeAbstract1 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    border-radius: 38% 62% 55% 45% / 48% 58% 42% 52%;
  }
  33% {
    transform: translate(-8px, 12px) rotate(8deg);
    border-radius: 55% 45% 60% 40% / 50% 50% 48% 52%;
  }
  66% {
    transform: translate(10px, -6px) rotate(-5deg);
    border-radius: 48% 52% 45% 55% / 58% 42% 55% 45%;
  }
}

@keyframes badgeAbstract2 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    border-radius: 45% 55% 60% 40% / 55% 45% 55% 45%;
  }
  33% {
    transform: translate(12px, -10px) rotate(-7deg);
    border-radius: 60% 40% 50% 50% / 48% 52% 50% 50%;
  }
  66% {
    transform: translate(-6px, 8px) rotate(6deg);
    border-radius: 52% 48% 55% 45% / 60% 40% 52% 48%;
  }
}

@keyframes badgeAbstract3 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    border-radius: 52% 48% 45% 55% / 60% 40% 50% 50%;
  }
  33% {
    transform: translate(-10px, -8px) rotate(9deg);
    border-radius: 45% 55% 58% 42% / 52% 48% 55% 45%;
  }
  66% {
    transform: translate(8px, 12px) rotate(-4deg);
    border-radius: 50% 50% 48% 52% / 55% 45% 50% 50%;
  }
}

@keyframes badgeAbstract4 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    border-radius: 48% 52% 58% 42% / 52% 48% 55% 45%;
  }
  33% {
    transform: translate(14px, 10px) rotate(-6deg);
    border-radius: 58% 42% 45% 55% / 50% 50% 48% 52%;
  }
  66% {
    transform: translate(-8px, -12px) rotate(7deg);
    border-radius: 50% 50% 52% 48% / 58% 42% 50% 50%;
  }
}

@keyframes badgeAbstract5 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    border-radius: 45% 55% 50% 50% / 52% 48% 55% 45%;
  }
  33% {
    transform: translate(-12px, 8px) rotate(5deg);
    border-radius: 55% 45% 58% 42% / 48% 52% 50% 50%;
  }
  66% {
    transform: translate(10px, -10px) rotate(-8deg);
    border-radius: 48% 52% 50% 50% / 55% 45% 52% 48%;
  }
}

@keyframes badgeAbstract6 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    border-radius: 55% 45% 48% 52% / 50% 50% 48% 52%;
  }
  33% {
    transform: translate(10px, 12px) rotate(-9deg);
    border-radius: 48% 52% 55% 45% / 58% 42% 50% 50%;
  }
  66% {
    transform: translate(-14px, -6px) rotate(6deg);
    border-radius: 50% 50% 45% 55% / 52% 48% 55% 45%;
  }
}

@keyframes badgeAbstract7 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    border-radius: 50% 50% 55% 45% / 48% 52% 50% 50%;
  }
  33% {
    transform: translate(-10px, -12px) rotate(7deg);
    border-radius: 58% 42% 48% 52% / 55% 45% 52% 48%;
  }
  66% {
    transform: translate(12px, 8px) rotate(-5deg);
    border-radius: 45% 55% 50% 50% / 50% 50% 48% 52%;
  }
}

/* Orbital rotation animations */
@keyframes badgeOrbit1 {
  0% { transform: rotate(0deg) translateX(180px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(180px) rotate(-360deg); }
}

@keyframes badgeOrbit2 {
  0% { transform: rotate(51deg) translateX(180px) rotate(-51deg); }
  100% { transform: rotate(411deg) translateX(180px) rotate(-411deg); }
}

@keyframes badgeOrbit3 {
  0% { transform: rotate(103deg) translateX(180px) rotate(-103deg); }
  100% { transform: rotate(463deg) translateX(180px) rotate(-463deg); }
}

@keyframes badgeOrbit4 {
  0% { transform: rotate(154deg) translateX(180px) rotate(-154deg); }
  100% { transform: rotate(514deg) translateX(180px) rotate(-514deg); }
}

@keyframes badgeOrbit5 {
  0% { transform: rotate(206deg) translateX(180px) rotate(-206deg); }
  100% { transform: rotate(566deg) translateX(180px) rotate(-566deg); }
}

@keyframes badgeOrbit6 {
  0% { transform: rotate(257deg) translateX(180px) rotate(-257deg); }
  100% { transform: rotate(617deg) translateX(180px) rotate(-617deg); }
}

@keyframes badgeOrbit7 {
  0% { transform: rotate(309deg) translateX(180px) rotate(-309deg); }
  100% { transform: rotate(669deg) translateX(180px) rotate(-669deg); }
}


/* =============================================
   CHECKOUT MOCKUPS SECTION
   ============================================= */
.checkout-mockups {
  padding: 2rem 2rem 5rem;
  background: #fff;
}

.checkout-mockups__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6rem;
}

/* Mock row layout */
.checkout-mock {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 4rem;
  align-items: center;
}

.checkout-mock--left .checkout-mock__visual {
  order: 1;
}

.checkout-mock--left .checkout-mock__content {
  order: 2;
}

.checkout-mock--right {
  grid-template-columns: 1fr 1.5fr;
}

.checkout-mock--right .checkout-mock__visual {
  order: 2;
}

.checkout-mock--right .checkout-mock__content {
  order: 1;
}

/* Content side */
.checkout-mock__title {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 1rem;
  line-height: 1.2;
}

.checkout-mock__text {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0 0 1.5rem;
}

.checkout-mock__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.checkout-mock__list li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-main);
}

.checkout-mock__list svg {
  width: 18px;
  height: 18px;
  color: #22c55e;
  flex-shrink: 0;
}

/* Visual / Screen */
.checkout-mock__visual {
  position: relative;
}

.checkout-mock__screen {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1.25rem;
  padding: 1.5rem;
  background: var(--bg);
  border-radius: 20px;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.06),
    0 24px 48px rgba(0,0,0,0.06);
}

/* =============================================
   BRAND MOCK - SETTINGS PANEL
   ============================================= */
.brand-mock__panel {
  background: #fff;
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.brand-mock__tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.brand-mock__tab {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.brand-mock__tab svg {
  width: 14px;
  height: 14px;
}

.brand-mock__tab--active {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.brand-mock__field {
  margin-bottom: 1.25rem;
}

.brand-mock__field:last-child {
  margin-bottom: 0;
}

.brand-mock__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-strong);
  margin-bottom: 0.6rem;
}

/* Upload area */
.brand-mock__upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem;
  border: 2px dashed #ddd;
  border-radius: 12px;
  background: #fafafa;
  transition: all 0.3s ease;
}

.brand-mock__upload svg {
  width: 24px;
  height: 24px;
  color: #bbb;
}

.brand-mock__upload span {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Color picker row */
.brand-mock__color-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem;
  background: #fafafa;
  border-radius: 12px;
  border: 1px solid #eee;
}

.brand-mock__color-swatch {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #C89E8A;
  box-shadow: 
    0 4px 12px rgba(200, 158, 138, 0.4),
    inset 0 2px 4px rgba(255,255,255,0.3);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: swatch-pulse 1.2s ease-in-out infinite;
}

@keyframes swatch-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.brand-mock__color-info {
  flex: 1;
}

.brand-mock__color-title {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.15rem;
}

.brand-mock__color-desc {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.brand-mock__color-hex {
  padding: 0.4rem 0.65rem;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: monospace;
  color: var(--text-main);
  transition: all 0.3s ease;
}

/* Brand name input */
.brand-mock__input-wrap {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  background: #fff;
  border: 2px solid #e5e5e5;
  border-radius: 10px;
  margin-bottom: 0.85rem;
  transition: border-color 0.3s ease;
}

.brand-mock__input-wrap:focus-within {
  border-color: var(--accent);
}

.brand-mock__input {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-main);
  white-space: nowrap;
}

.brand-mock__cursor {
  width: 2px;
  height: 18px;
  background: var(--accent-strong);
  margin-left: 1px;
  flex-shrink: 0;
  animation: cursor-blink 0.5s step-end infinite;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Toggle */
.brand-mock__toggle-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.brand-mock__toggle {
  cursor: pointer;
}

.brand-mock__toggle-track {
  display: flex;
  align-items: center;
  width: 40px;
  height: 22px;
  padding: 2px;
  background: #ddd;
  border-radius: 20px;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.brand-mock__toggle--active .brand-mock__toggle-track {
  background: #22c55e;
}

.brand-mock__toggle-thumb {
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.brand-mock__toggle--active .brand-mock__toggle-thumb {
  transform: translateX(18px);
}

.brand-mock__toggle-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* =============================================
   BRAND MOCK - LIVE PREVIEW
   ============================================= */
.brand-mock__preview {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand-mock__preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  background: #f5f5f5;
  border-radius: 12px 12px 0 0;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.brand-mock__preview-header svg {
  width: 16px;
  height: 16px;
  color: #bbb;
}

.brand-mock__preview-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1.25rem;
  background: #fff;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  text-align: center;
  min-height: 420px;
}

.brand-mock__preview-brand {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.75rem;
  min-height: 1.2em;
  transition: opacity 0.3s ease;
}

.brand-mock__preview-brand--hidden {
  opacity: 0;
}

.brand-mock__preview-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 0.35rem;
}

.brand-mock__preview-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0 0 1rem;
}

.brand-mock__preview-price {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.brand-mock__preview-amount {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-main);
}

.brand-mock__preview-period {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.brand-mock__preview-btn {
  width: 100%;
  padding: 0.85rem 1.25rem;
  background: #C89E8A;
  border: none;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  margin-bottom: 0.85rem;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 16px rgba(200, 158, 138, 0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-mock__preview-btn:hover {
  transform: translateY(-2px) scale(1.02);
}

/* Button color change animation */
.brand-mock__preview-btn--pop {
  animation: btn-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes btn-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Trust mockup button override - blue */
[data-trust-preview] .brand-mock__preview-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
}

.brand-mock__preview-trust {
  display: flex;
  gap: 0.85rem;
  margin-bottom: 0.75rem;
}

.brand-mock__preview-trust span {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  color: var(--text-muted);
}

.brand-mock__preview-trust svg {
  width: 12px;
  height: 12px;
}

.brand-mock__preview-guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.6rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #16a34a;
  margin-bottom: 0.85rem;
  transition: all 0.3s ease;
}

.brand-mock__preview-guarantee svg {
  width: 14px;
  height: 14px;
}

/* Guarantee border matches accent */
.brand-mock__preview-guarantee--accent {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.brand-mock__preview-powered {
  font-size: 0.65rem;
  color: #bbb;
}

.brand-mock__preview-powered strong {
  color: var(--text-muted);
}

/* Responsive */
@media (max-width: 900px) {
  .checkout-mock {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  
  .checkout-mock--left .checkout-mock__content,
  .checkout-mock--right .checkout-mock__content {
    order: -1;
  }

  .checkout-mock--left .checkout-mock__visual,
  .checkout-mock--right .checkout-mock__visual {
    order: 1;
  }
  
  .checkout-mock__title {
    font-size: 1.85rem;
  }
  
  .checkout-mock__screen {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }
}



/* Better shadows on main screen */
.checkout-mock__screen {
  background: linear-gradient(145deg, #fafafa 0%, #fff 100%);
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 
    0 0 0 1px rgba(0,0,0,0.02),
    0 4px 12px rgba(0,0,0,0.04),
    0 20px 40px rgba(0,0,0,0.06);
}

/* Tabs - cleaner pill style */
.brand-mock__tabs {
  padding: 0.3rem;
  background: #f3f3f3;
  border-radius: 10px;
  border-bottom: none;
}

.brand-mock__tab {
  border-radius: 7px;
  transition: all 0.25s ease;
}

.brand-mock__tab--active {
  background: #fff;
  color: var(--accent-strong);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* Color swatch - add shine */
.brand-mock__color-swatch {
  position: relative;
  overflow: hidden;
}

.brand-mock__color-swatch::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: swatch-shine 2.5s ease-in-out infinite;
}

@keyframes swatch-shine {
  0%, 100% { left: -100%; }
  50% { left: 150%; }
}

/* Hex display - monospace */
.brand-mock__color-hex {
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Input wrap - focus glow */
.brand-mock__input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Toggle track - gradient when active */
.brand-mock__toggle--active .brand-mock__toggle-track {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.25);
}

/* Preview header - live dot pulses */
.brand-mock__preview-header svg {
  color: #22c55e;
  animation: live-pulse 2s ease infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.9); }
}

/* Preview brand - pill style */
.brand-mock__preview-brand {
  padding: 0.3rem 0.7rem;
  background: #f5f5f5;
  border-radius: 5px;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Button - shine on color change */
.brand-mock__preview-btn {
  position: relative;
  overflow: hidden;
}

.brand-mock__preview-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
}

.brand-mock__preview-btn--pop::after {
  animation: btn-shine 0.6s ease;
}

@keyframes btn-shine {
  0% { left: -100%; }
  100% { left: 150%; }
}

/* Guarantee - slightly richer */
.brand-mock__preview-guarantee {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-color: #86efac;
}

/* =============================================
   CONTENT MOCK - SETTINGS PANEL
   ============================================= */
.content-mock__panel {
  background: #fff;
  border-radius: 16px;
  padding: 0.65rem 0.85rem;
  padding-bottom: -0.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.content-mock__notice {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
  border: 1px solid #fde047;
  border-radius: 10px;
  margin-bottom: 3rem;
}

.content-mock__notice svg {
  width: 14px;
  height: 14px;
  color: #ca8a04;
  flex-shrink: 0;
  margin-top: 1px;
}

.content-mock__notice span {
  font-size: 0.65rem;
  font-weight: 500;
  color: #854d0e;
  line-height: 1.3;
}

.content-mock__field {
  margin-bottom: 1.5rem;
}

.content-mock__field:first-child {
  margin-top: 3rem;
}

.content-mock__field:last-child {
  margin-bottom: 0;
}

.content-mock__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-strong);
  margin-bottom: 0.3rem;
}

.content-mock__tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 3rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
   padding: 0.3rem;
  background: #f3f3f3;
  border-radius: 10px;
  border-bottom: none;
}


.content-mock__tab {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.content-mock__tab svg {
  width: 14px;
  height: 14px;
}

.content-mock__tab--active {
  background: #fff;
  color: var(--accent-strong);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.content-mock__input {
  padding: 0.55rem 0.75rem;
  background: #fff;
  border: 1.5px solid #e5e5e5;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-main);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  min-height: 20px;
  line-height: 1.3;
}

/* Maintain height when empty */
.content-mock__input:empty::before {
  content: '\200b';
  display: inline-block;
}

.content-mock__input--active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Highlight flash when content changes */
.content-mock__input--flash {
  animation: input-flash 0.5s ease;
}

@keyframes input-flash {
  0% { background: #fff; }
  30% { background: var(--accent-soft); }
  100% { background: #fff; }
}

.content-mock__textarea {
  padding: 0.55rem 0.75rem;
  background: #fff;
  border: 1.5px solid #e5e5e5;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-main);
  line-height: 1.3;
  min-height: 40px;
  transition: all 0.3s ease;
}

/* Maintain height when empty */
.content-mock__textarea:empty::before {
  content: '\200b';
  display: inline-block;
}

.content-mock__textarea--active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.content-mock__textarea--flash {
  animation: input-flash 0.5s ease;
}

/* Toggle in label */
.content-mock__toggle {
  cursor: pointer;
}

.content-mock__toggle-track {
  display: flex;
  align-items: center;
  width: 36px;
  height: 20px;
  padding: 2px;
  background: #ddd;
  border-radius: 20px;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.content-mock__toggle--active .content-mock__toggle-track {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.25);
}

.content-mock__toggle-thumb {
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.content-mock__toggle--active .content-mock__toggle-thumb {
  transform: translateX(16px);
}

/* Preview text highlight animation */
.preview-text--changing {
  animation: text-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes text-pop {
  0% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}




/* =============================================
   TRUST MOCK - SETTINGS PANEL
   ============================================= */
.trust-mock__panel {
  background: #fff;
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* Tip Banner */
.trust-mock__tip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: #fafafa;
  border-radius: 8px;
  margin-bottom: 1.25rem;
}

.trust-mock__tip svg {
  width: 14px;
  height: 14px;
  color: #C89E8A;
  flex-shrink: 0;
}

.trust-mock__tip span {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Section */
.trust-mock__section {
  margin-bottom: 0;
}

.trust-mock__section-header {
  margin-bottom: 1rem;
}

.trust-mock__section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.25rem;
}

.trust-mock__section-desc {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin: 0;
}

/* Row Items */
.trust-mock__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.trust-mock__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.trust-mock__row--disabled {
  opacity: 0.5;
}

.trust-mock__row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #f5f5f5;
  border-radius: 8px;
  flex-shrink: 0;
}

.trust-mock__row-icon svg {
  width: 16px;
  height: 16px;
  color: #666;
}

.trust-mock__row-icon--accent {
  background: linear-gradient(135deg, #fef3ee 0%, #fde8dc 100%);
}

.trust-mock__row-icon--accent svg {
  color: #C89E8A;
}

.trust-mock__row-content {
  flex: 1;
  min-width: 0;
}

.trust-mock__row-title {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.15rem;
}

.trust-mock__row-desc {
  display: block;
  font-size: 0.65rem;
  color: var(--text-muted);
}

/* Toggle */
.trust-mock__toggle {
  cursor: pointer;
  flex-shrink: 0;
}

.trust-mock__toggle-track {
  display: flex;
  align-items: center;
  width: 40px;
  height: 22px;
  padding: 2px;
  background: #e0e0e0;
  border-radius: 22px;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.trust-mock__toggle--active .trust-mock__toggle-track {
  background: linear-gradient(135deg, #C89E8A 0%, #b8876f 100%);
  box-shadow: 0 2px 8px rgba(200, 158, 138, 0.4);
}

.trust-mock__toggle-thumb {
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.trust-mock__toggle--active .trust-mock__toggle-thumb {
  transform: translateX(18px);
}

/* Real-time indicator */
.trust-mock__realtime {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.65rem;
  font-weight: 500;
  color: #22c55e;
}

.trust-mock__realtime-dot {
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

/* =============================================
   TRUST PREVIEW ELEMENTS
   ============================================= */
.trust-preview__badges {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.trust-preview__badges span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.65rem;
  color: var(--text-muted);
  transition: all 0.4s ease;
}

.trust-preview__badges span.trust-badge--hidden {
  opacity: 0;
  transform: scale(0.8);
}

.trust-preview__badges svg {
  width: 12px;
  height: 12px;
}

.trust-preview__powered {
  text-align: center;
  font-size: 0.65rem;
  color: #bbb;
  padding-top: 0.75rem;
  margin-top: 0.5rem;
  border-top: 1px solid #f0f0f0;
  transition: all 0.4s ease;
}

.trust-preview__powered strong {
  color: #C89E8A;
  font-weight: 600;
}

.trust-preview__powered.trust-powered--hidden {
  opacity: 0;
  transform: translateY(5px);
}

/* Badge/element hide animation */
.trust-element--hiding {
  animation: element-hide 0.4s ease forwards;
}

.trust-element--showing {
  animation: element-show 0.4s ease forwards;
}

@keyframes element-hide {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.8); }
}

@keyframes element-show {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

/* Row highlight when toggling */
.trust-mock__row--flash {
  background: rgba(200, 158, 138, 0.1);
}


/* =============================================
   CHECKOUT FLOW / SHOWCASE
   ============================================= */
.checkout-showcase {
  padding: 5rem 2rem;
  background: var(--bg);
}

.checkout-showcase__header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 4rem;
}

.checkout-showcase__title {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 1rem;
}

.checkout-showcase__subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.6;
}

.checkout-showcase__flow {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.checkout-step {
  flex: 1;
  max-width: 340px;
  text-align: center;
}

.checkout-step__number {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-strong);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 50%;
  margin: 0 auto 1.25rem;
}

.checkout-step__mock {
  margin-bottom: 1.5rem;
}

.checkout-step__screen {
  background: #fff;
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 
    0 1px 3px rgba(0,0,0,0.04),
    0 4px 12px rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.04);
  border: 1px solid #eee;
}

.checkout-step__content h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.5rem;
}

.checkout-step__content p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Connector arrow */
.checkout-step__connector {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 140px;
}

.checkout-step__connector svg {
  width: 24px;
  height: 24px;
  color: #d0d0d0;
}

/* Step 1: Product Mock */
.step-mock__product {
  display: flex;
  gap: 1rem;
}

.step-mock__image {
  width: 100px;
  height: 75px;
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent) 100%);
  border-radius: 10px;
  flex-shrink: 0;
}

.step-mock__details {
  flex: 1;
  text-align: left;
}

.step-mock__tag {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-strong);
  background: var(--accent-soft);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  margin-bottom: 0.35rem;
}

.step-mock__title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.25rem;
}

.step-mock__desc {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
  line-height: 1.4;
}

.step-mock__meta {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.step-mock__meta span {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  color: var(--text-muted);
}

.step-mock__meta svg {
  width: 12px;
  height: 12px;
}

.step-mock__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.step-mock__price {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
}

.step-mock__btn {
  padding: 0.6rem 1rem;
  background: var(--accent-strong);
  border: none;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(200, 158, 138, 0.35);
}

/* Shake attention */
.step-mock__btn.btn--shake {
  animation: btn-shake 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes btn-shake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-6px) rotate(-3deg); }
  20% { transform: translateX(6px) rotate(3deg); }
  30% { transform: translateX(-5px) rotate(-2deg); }
  40% { transform: translateX(5px) rotate(2deg); }
  50% { transform: translateX(-3px); }
  60% { transform: translateX(3px); }
}

/* Heartbeat */
.step-mock__btn.btn--heartbeat {
  animation: btn-heartbeat 0.8s ease-in-out;
}

@keyframes btn-heartbeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.2); }
  30% { transform: scale(1); }
  45% { transform: scale(1.15); }
  60% { transform: scale(1); }
}

/* Step 2: Payment Mock */
.step-mock__payment {
  text-align: left;
}

.step-mock__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #eee;
  margin-bottom: 1rem;
}

.step-mock__summary-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
}

.step-mock__summary-price {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
}

.step-mock__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.step-mock__field label {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.step-mock__input {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.75rem;
  background: #f8f8f8;
  border: 1px solid #eee;
  border-radius: 8px;
  font-size: 0.8rem;
  color: var(--text-main);
}

.step-mock__input--card svg {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

.step-mock__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.step-mock__input--small {
  padding: 0.6rem 0.75rem;
}

.step-mock__pay-btn {
  width: 100%;
  padding: 0.7rem;
  background: var(--text-main);
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.step-mock__secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
  font-size: 0.65rem;
  color: var(--text-muted);
}

.step-mock__secure svg {
  width: 12px;
  height: 12px;
}

/* Typing animation */
.typing-cursor {
  width: 2px;
  height: 14px;
  background: var(--accent-strong);
  animation: cursor-blink 0.6s step-end infinite;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Step 3: Success Mock */
.checkout-step__screen--success {
  background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%);
  border-color: #bbf7d0;
}

.step-mock__success {
  text-align: center;
  padding: 1rem 0;
}

.success-check {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #22c55e;
  border-radius: 50%;
  margin: 0 auto 1rem;
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.success--animate .success-check {
  transform: scale(1);
}

.success-check svg {
  width: 28px;
  height: 28px;
  color: #fff;
}

.success-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.35rem;
  position: relative;
  display: inline-block;
}

.success-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0 0 1.25rem;
}

.success-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  text-align: left;
}

.success-card__thumb {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent) 100%);
  border-radius: 8px;
  flex-shrink: 0;
}

.success-card__info {
  flex: 1;
}

.success-card__name {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.15rem;
}

.success-card__action {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-strong);
}

/* =============================================
   CHECKOUT FLOW BUTTON ANIMATIONS
   ============================================= */

/* Pulse animation */
.step-mock__btn.btn--pulse,
.step-mock__pay-btn.btn--pulse {
  animation: btn-pulse 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes btn-pulse {
  0% { transform: scale(1); box-shadow: 0 4px 12px rgba(200, 158, 138, 0.3); }
  50% { transform: scale(1.1); box-shadow: 0 8px 24px rgba(200, 158, 138, 0.5); }
  100% { transform: scale(1); box-shadow: 0 4px 12px rgba(200, 158, 138, 0.3); }
}

/* Wiggle animation */
.step-mock__btn.btn--wiggle,
.step-mock__pay-btn.btn--wiggle {
  animation: btn-wiggle 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes btn-wiggle {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-4deg); }
  40% { transform: rotate(4deg); }
  60% { transform: rotate(-3deg); }
  80% { transform: rotate(3deg); }
}

/* Bounce animation */
.step-mock__btn.btn--bounce,
.step-mock__pay-btn.btn--bounce {
  animation: btn-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes btn-bounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-10px); }
  50% { transform: translateY(-5px); }
  70% { transform: translateY(-8px); }
}

/* =============================================
   SUCCESS CHECKMARK ANIMATIONS
   ============================================= */

/* Check bounce */
.success-check.check--bounce {
  animation: check-bounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes check-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  25% { transform: translateY(-14px) scale(1.15); }
  50% { transform: translateY(-6px) scale(1.05); }
  75% { transform: translateY(-10px) scale(1.1); }
}

/* Check wiggle */
.success-check.check--wiggle {
  animation: check-wiggle 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes check-wiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  20% { transform: rotate(-18deg) scale(1.15); }
  40% { transform: rotate(18deg) scale(1.08); }
  60% { transform: rotate(-12deg) scale(1.1); }
  80% { transform: rotate(12deg) scale(1.05); }
}

/* Check pop */
.success-check.check--pop {
  animation: check-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes check-pop {
  0% { transform: scale(1); }
  30% { transform: scale(1.35); }
  50% { transform: scale(0.85); }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* =============================================
   SUCCESS TITLE ANIMATIONS
   ============================================= */

.success-title.title--celebrate {
  animation: title-celebrate 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes title-celebrate {
  0%, 100% { 
    transform: scale(1) translateY(0); 
  }
  25% { 
    transform: scale(1.12) translateY(-5px); 
  }
  50% { 
    transform: scale(1.08) translateY(-3px);
  }
  75% { 
    transform: scale(1.1) translateY(-4px); 
  }
}

/* =============================================
   FEATURES GRID
   ============================================= */
.checkout-features {
  padding: 5rem 2rem;
  background: #fff;
}

.checkout-features__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.checkout-features__header {
  text-align: center;
  margin-bottom: 3rem;
}

.checkout-features__title {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.checkout-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.checkout-feature {
  text-align: center;
  padding: 1.5rem;
}

.checkout-feature__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  border-radius: 16px;
  margin: 0 auto 1.25rem;
}

.checkout-feature__icon svg {
  width: 26px;
  height: 26px;
  color: var(--accent-strong);
}

.checkout-feature__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.5rem;
}

.checkout-feature__text {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}


/* =============================================
   CUSTOMIZATION SECTION
   ============================================= */
.checkout-customize {
  padding: 5rem 2rem;
  background: var(--bg);
}

.checkout-customize__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.checkout-customize__title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 1rem;
}

.checkout-customize__text {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0 0 1.5rem;
}

.checkout-customize__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.checkout-customize__list li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.95rem;
  color: var(--text-main);
}

.checkout-customize__list svg {
  width: 18px;
  height: 18px;
  color: #22c55e;
  flex-shrink: 0;
}

/* Visual - Stacked checkout cards */
.checkout-customize__visual {
  position: relative;
  height: 360px;
}

.customize-preview {
  position: relative;
  width: 100%;
  height: 100%;
}

.customize-preview__card {
  position: absolute;
  width: 200px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 
    0 2px 8px rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.06);
  transition: transform 0.4s ease;
}

.customize-preview__card--1 {
  top: 20%;
  left: 10%;
  transform: rotate(-4deg);
  animation: card-float-1 6s ease-in-out infinite;
}

.customize-preview__card--2 {
  top: 15%;
  left: 35%;
  transform: rotate(2deg);
  z-index: 2;
  animation: card-float-2 5s ease-in-out infinite 0.5s;
}

.customize-preview__card--3 {
  top: 30%;
  right: 10%;
  transform: rotate(5deg);
  animation: card-float-3 5.5s ease-in-out infinite 1s;
}

@keyframes card-float-1 {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50% { transform: rotate(-4deg) translateY(-8px); }
}

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

@keyframes card-float-3 {
  0%, 100% { transform: rotate(5deg) translateY(0); }
  50% { transform: rotate(5deg) translateY(-6px); }
}

.customize-preview__header {
  height: 40px;
}

.customize-preview__header--coral {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
}

.customize-preview__header--blue {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
}

.customize-preview__header--green {
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
}

.customize-preview__body {
  padding: 1rem;
}

.customize-preview__logo {
  width: 32px;
  height: 32px;
  background: #eee;
  border-radius: 8px;
  margin-bottom: 0.75rem;
}

.customize-preview__lines {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.customize-preview__lines span {
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
}

.customize-preview__lines span:first-child {
  width: 100%;
}

.customize-preview__lines span:last-child {
  width: 65%;
}

.customize-preview__btn {
  width: 100%;
  height: 32px;
  border-radius: 8px;
}

.customize-preview__btn--coral {
  background: var(--accent-strong);
}

.customize-preview__btn--blue {
  background: #3b82f6;
}

.customize-preview__btn--green {
  background: #22c55e;
}


/* =============================================
   CTA SECTION - DARK
   ============================================= */
.checkout-cta {
  position: relative;
  padding: 5rem 2rem;
  background: #1a1a1a;
  overflow: hidden;
  text-align: center;
}

.checkout-cta__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}

.checkout-cta__glow--1 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(180, 123, 104, 0.2) 0%, transparent 70%);
  top: -20%;
  left: 20%;
}

.checkout-cta__glow--2 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(200, 158, 138, 0.15) 0%, transparent 70%);
  bottom: -20%;
  right: 20%;
}

.checkout-cta__inner {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
}

.checkout-cta__eyebrow {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 1rem;
}

.checkout-cta__title {
  font-size: 2.25rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 1rem;
}

.checkout-cta__text {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.6);
  margin: 0 0 2rem;
}

.checkout-cta__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.checkout-cta__btn {
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.checkout-cta__btn--primary {
  background: var(--accent-strong);
  color: #fff;
  box-shadow: 0 4px 20px rgba(180, 123, 104, 0.4);
}

.checkout-cta__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(180, 123, 104, 0.5);
}

.checkout-cta__btn--secondary {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
}

.checkout-cta__btn--secondary:hover {
  background: rgba(255,255,255,0.12);
}

.checkout-philosophy .fade-in,
.checkout-showcase .fade-in,
.checkout-features .fade-in,
.checkout-customize .fade-in {
  opacity: 1;
  transform: none;
}


/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  .checkout-hero__inner {
    gap: 3rem;
  }
  
  .checkout-hero__title {
    font-size: 2.75rem;
  }
  
  .checkout-hero__scene {
    height: 420px;
  }
  
  .checkout-preview__card {
    width: 280px;
  }
  
  .checkout-showcase__flow {
    gap: 0.5rem;
  }
  
  .checkout-step {
    max-width: 280px;
  }
}

@media (max-width: 900px) {
  .checkout-hero__inner {
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  .checkout-hero__content {
    display: contents;
  }

  .checkout-eyebrow {
    order: 1;
  }

  .checkout-hero__title {
    order: 2;
  }

  .checkout-hero__scene {
    order: 3;
    margin-left: 0;
    margin-top: 1rem;
  }

  .checkout-hero__subtitle {
    order: 4;
  }

  .checkout-hero__pills {
    order: 5;
  }

  .checkout-hero__cta {
    order: 6;
  }
  
  .checkout-hero__subtitle {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .checkout-hero__pills {
    justify-content: center;
  }
  
  .checkout-philosophy__grid {
    grid-template-columns: 1fr;
  }
  
  .checkout-showcase__flow {
    flex-direction: column;
    align-items: center;
  }
  
  .checkout-step {
    max-width: 360px;
  }
  
  .checkout-step__connector {
    padding: 1.5rem 0;
    transform: rotate(90deg);
  }
  
  .checkout-features__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .checkout-customize__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .checkout-customize__visual {
    height: 280px;
    margin-top: 2rem;
  }
}

@media (max-width: 600px) {
  .checkout-hero {
    padding: 3rem 1.25rem 2rem;
  }

  .checkout-hero__inner {
    gap: 1.5rem;
  }

  .checkout-hero__title {
    font-size: 2.5rem;
    line-height: 1.15;
    margin-bottom: 0;
  }

  .checkout-hero__subtitle {
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
  }

  .checkout-hero__pills {
    margin-bottom: 0.75rem;
  }

  .checkout-hero__scene {
    height: 360px;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    margin-left: -30px;
    position: relative;
  }

  /* Subtle stack depth with all 3 cards */
  .checkout-stack {
    width: 280px;
    height: 360px;
    z-index: 1;
    margin: 0 auto;
  }

  .checkout-stack__card--3 {
    height: 92%;
    top: -6px;
    left: 6px;
    opacity: 0.3;
    transform: translate(6px, -6px) rotate(2deg);
    box-shadow: 0 4px 16px rgba(120, 80, 60, 0.04);
  }

  .checkout-stack__card--2 {
    height: 96%;
    top: -3px;
    left: 3px;
    opacity: 0.5;
    transform: translate(3px, -3px) rotate(1.5deg);
    box-shadow: 0 5px 18px rgba(120, 80, 60, 0.05);
  }

  .checkout-stack:hover .checkout-stack__card--2 {
    transform: translate(4px, -4px) rotate(2deg);
  }

  .checkout-stack:hover .checkout-stack__card--3 {
    transform: translate(8px, -8px) rotate(3deg);
  }

  /* Reduce glow and shadow intensity */
  .checkout-card__glow {
    inset: -20px;
    background: radial-gradient(circle at 40% 40%, rgba(200, 158, 138, 0.15) 0%, transparent 50%);
  }

  .checkout-stack__card--1 {
    box-shadow: 0 8px 24px rgba(120, 80, 60, 0.12);
  }

  /* Hide some badges, keep check, shield, and 0% tag */
  .checkout-badge--star,
  .checkout-badge--refresh,
  .checkout-badge--bolt,
  .checkout-badge--globe {
    display: none;
  }

  /* Z-index hierarchy */
  .checkout-badge {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    z-index: 10;
  }

  .checkout-stack {
    z-index: 1;
  }

  /* Position badges - check on left, shield and 0% tag on right */
  .checkout-badge--check {
    top: 35%;
    left: 5%;
    z-index: 10;
  }

  .checkout-badge--shield {
    bottom: 5%;
    right: -5%;
    z-index: 10;
  }

  .checkout-badge--tag {
    display: flex;
    top: -5%;
    left: auto;
    right: 5%;
    z-index: 10;
    width: 38px;
    height: 38px;
    padding: 0;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 5px 18px rgba(120, 80, 60, 0.15);
  }

  .checkout-badge--tag span {
    color: var(--accent-strong);
  }

  .checkout-preview__card {
    width: 260px;
    padding: 1.25rem;
  }

  .checkout-float--card,
  .checkout-float--instant {
    display: none;
  }
  
  .checkout-philosophy__title {
    font-size: 1.75rem;
  }
  
  .philosophy-card {
    padding: 1.5rem;
  }
  
  .checkout-showcase__title {
    font-size: 1.75rem;
  }
  
  .checkout-features__grid {
    grid-template-columns: 1fr;
  }
  
  .checkout-features__title {
    font-size: 1.75rem;
  }
  
  .checkout-customize__title {
    font-size: 1.75rem;
  }
  
  .customize-preview__card {
    width: 140px;
  }
  
  .checkout-cta__title {
    font-size: 1.75rem;
  }
}











/* =============================================
   BLOG & PODCAST PAGE STYLES
   All classes prefixed with bp-
   ============================================= */

/* =============================================
   HERO SECTION
   ============================================= */

.bp-hero {
  position: relative;
  padding: 5rem 0 3rem;
  overflow: hidden;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -5rem;
  margin-bottom: 0;
}

.bp-hero-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 2;
}

.bp-hero-content {
  max-width: 520px;
}

.bp-hero-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent-strong);
  background: var(--accent-soft);
  padding: 0.5rem 1rem;
  border-radius: 100px;
  margin-bottom: 1.5rem;
}

.bp-hero-heading {
  font-size: clamp(2.5rem, 5vw, 3.8rem);
  line-height: 1.1;
  margin: 0 0 1.5rem;
  color: var(--text-main);
}

.bp-hero-heading-accent {
  background: linear-gradient(135deg, var(--accent-strong) 0%, #d4a574 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bp-hero-body {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 2rem;
}

.bp-hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Buttons */
.bp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.8rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
  cursor: pointer;
  border: none;
}

.bp-btn--primary {
  background: linear-gradient(135deg, var(--accent-strong) 0%, var(--accent) 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(180, 123, 104, 0.35);
}

.bp-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(180, 123, 104, 0.45);
}

.bp-btn--ghost {
  background: transparent;
  color: var(--text-main);
  border: 1.5px solid var(--border-subtle);
}

.bp-btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.bp-btn--outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.3);
}

.bp-btn--outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.5);
}

.bp-btn--large {
  padding: 1.1rem 2.2rem;
  font-size: 1.05rem;
}

/* Hero Visual / Mockup */
.bp-hero-visual {
  position: relative;
  perspective: 1200px;

}

.bp-hero-mockup {
  position: relative;
  width: 100%;
  padding-top: 20px;
}

/* Floating stats */
.bp-float-stat {
  position: absolute;
  background: #fff;
  border-radius: 16px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 
    0 20px 50px rgba(42, 38, 35, 0.12),
    0 8px 20px rgba(42, 38, 35, 0.08);
  z-index: 10;
  animation: bp-float-in 0.8s ease both;
}

.bp-float-stat--views {
  top: -40px;
  left: -30px;
  animation-delay: 0.3s;
}

.bp-float-stat--listens {
  top: 40%;
  right: -20px;
  animation-delay: 0.5s;
}

.bp-float-stat--subs {
  bottom: 15%;
  left: 0;
  animation-delay: 0.7s;
}

@keyframes bp-float-in {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.bp-float-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.bp-float-stat-icon i {
  width: 20px;
  height: 20px;
}

.bp-float-stat-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-main);
  font-family: 'Outfit', sans-serif;
}

.bp-float-stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}

/* Mockup Frame */
.bp-mockup-frame {
  background: #fff;
  border-radius: 24px;
  box-shadow: 
    0 60px 120px rgba(42, 38, 35, 0.15),
    0 20px 40px rgba(42, 38, 35, 0.1);
  overflow: hidden;
  position: relative;
}

/* Blog Preview */
.bp-blog-preview {
  padding: 0;
}

.bp-blog-preview-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: #f8f6f4;
  border-bottom: 1px solid var(--border-subtle);
}

.bp-window-dots {
  display: flex;
  gap: 6px;
}

.bp-window-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e5ddd7;
}

/* macOS-style window dots */
.bp-dot-red {
  background: #FF5F56 !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

.bp-dot-yellow {
  background: #FFBD2E !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

.bp-dot-green {
  background: #27C93F !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

/* Legacy support for old dot styling */
.bp-window-dots span:first-child:not([class*="bp-dot"]) { background: #ff6b6b; }
.bp-window-dots span:nth-child(2):not([class*="bp-dot"]) { background: #feca57; }
.bp-window-dots span:last-child:not([class*="bp-dot"]) { background: #48dbfb; }

.bp-preview-badge {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-left: auto;
}

.bp-blog-preview-content {
  padding: 2rem;
}

/* Typing animation */
.bp-typing-container {
  min-height: 2.4em;
  display: flex;
  align-items: flex-start;
}

.bp-typing-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-main);
  font-family: 'Outfit', sans-serif;
  line-height: 1.3;
}

.bp-typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1.4em;
  background: var(--accent-strong);
  margin-left: 2px;
  animation: bp-blink 0.8s infinite;
  vertical-align: text-bottom;
}

@keyframes bp-blink {
  0%, 45% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.bp-blog-preview-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
}

.bp-meta-tag {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-radius: 6px;
}

.bp-meta-reading {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-left: auto;
}

.bp-blog-preview-lines {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.bp-preview-line {
  height: 10px;
  background: linear-gradient(90deg, #f0ebe7 0%, #e8e2dc 50%, #f0ebe7 100%);
  background-size: 200% 100%;
  border-radius: 5px;
  animation: bp-shimmer 2s infinite;
}

.bp-preview-line--full { width: 100%; }
.bp-preview-line--mid { width: 75%; }
.bp-preview-line--short { width: 45%; }

@keyframes bp-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Podcast Wave Container */
.bp-podcast-wave-container {
  background: linear-gradient(135deg, #1a1a1f 0%, #2d2d35 100%);
  padding: 1.5rem;
  border-radius: 0 0 24px 24px;
}

.bp-podcast-player {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bp-player-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.bp-player-art {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.bp-player-art i {
  width: 24px;
  height: 24px;
  color: #fff;
  position: relative;
  z-index: 2;
}

.bp-player-art-pulse {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  animation: bp-pulse-ring 2s infinite;
}

@keyframes bp-pulse-ring {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

.bp-player-meta {
  display: flex;
  flex-direction: column;
}

.bp-player-show {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
}

.bp-player-episode {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
}

/* Waveform */
.bp-waveform {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 40px;
  padding: 0 0.5rem;
}

.bp-wave-bar {
  flex: 1;
  background: linear-gradient(to top, var(--accent-strong), var(--accent));
  border-radius: 2px;
  height: var(--height, 50%);
  animation: bp-wave-dance 1.2s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes bp-wave-dance {
  0%, 100% { transform: scaleY(0.4); opacity: 0.5; }
  50% { transform: scaleY(1); opacity: 1; }
}

.bp-player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.bp-player-time {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  font-variant-numeric: tabular-nums;
}

.bp-play-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-strong);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #fff;
}

.bp-play-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 20px rgba(180, 123, 104, 0.5);
}

.bp-play-btn i {
  width: 18px;
  height: 18px;
}

.bp-play-btn .bp-icon-pause { display: none; }
.bp-play-btn.is-playing .bp-icon-play { display: none; }
.bp-play-btn.is-playing .bp-icon-pause { display: block; }

/* Distribution Badge */
.bp-distribution-badge {
  position: absolute;
  bottom: 20%;
  right: -40px;
  background: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 12px;
  box-shadow: 0 15px 40px rgba(42, 38, 35, 0.12);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 10;
}

.bp-dist-icons {
  display: flex;
  gap: 0.4rem;
}

.bp-dist-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: transform 0.2s ease;
}

.bp-dist-icon:hover {
  transform: scale(1.15);
}

.bp-dist-icon svg, .bp-dist-icon i {
  width: 24px;
  height: 24px;
}

.bp-dist-icon--spotify { color: #1DB954; }
.bp-dist-icon--apple { color: #8e44ad; }
.bp-dist-icon--rss { color: #f39c12; }

.bp-dist-text {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Hero Background */
.bp-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.bp-hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
}

.bp-hero-blob--1 {
  width: 600px;
  height: 600px;
  background: var(--accent-soft);
  top: -200px;
  right: -100px;
  animation: bp-blob-float 20s ease-in-out infinite;
}

.bp-hero-blob--2 {
  width: 400px;
  height: 400px;
  background: rgba(200, 158, 138, 0.15);
  bottom: -100px;
  left: -100px;
  animation: bp-blob-float 15s ease-in-out infinite reverse;
}

@keyframes bp-blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -30px) scale(1.05); }
  66% { transform: translate(-20px, 20px) scale(0.95); }
}

.bp-hero-grain {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}




/* =============================================
   SECTIONS BASE
   ============================================= */

.bp-section {
  padding: 4rem 0;
}

/* Animation enhancement - only animate if JS adds the class */
.bp-section.bp-animate {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.bp-section.bp-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.bp-section-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.bp-section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 4rem;
}

.bp-section-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent-strong);
  margin-bottom: 1rem;
}

.bp-section-heading {
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.15;
  margin: 0 0 1.25rem;
  color: var(--text-main);
}

.bp-section-body {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
}


/* =============================================
   BLOG SECTION
   ============================================= */

.bp-section--blog {
  background: var(--bg);
}

.bp-blog-showcase {
  position: relative;
  margin-bottom: 4rem;
}

.bp-blog-demo {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

.bp-blog-demo-window {
  background: #fff;
  border-radius: 20px;
  box-shadow: 
    0 50px 100px rgba(42, 38, 35, 0.12),
    0 20px 40px rgba(42, 38, 35, 0.08);
  overflow: hidden;
}

.bp-window-chrome {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: #faf8f6;
  border-bottom: 1px solid var(--border-subtle);
}

.bp-window-url {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.bp-lock-icon {
  width: 12px;
  height: 12px;
  color: #48dbfb;
}

.bp-blog-demo-content {
  padding: 2rem;
}

/* Featured post */
.bp-demo-featured {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-subtle);
}

.bp-demo-featured-img {
  aspect-ratio: 16/10;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.bp-demo-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bp-img-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #e8ddd4 0%, #d4c4b8 50%, #e8ddd4 100%);
  background-size: 200% 200%;
  animation: bp-img-shimmer 3s ease-in-out infinite;
}

.bp-img-shimmer--alt {
  background: linear-gradient(135deg, #d4e8dd 0%, #b8d4c4 50%, #d4e8dd 100%);
}

.bp-img-shimmer--warm {
  background: linear-gradient(135deg, #e8d4d4 0%, #d4b8b8 50%, #e8d4d4 100%);
}

.bp-img-shimmer--cool {
  background: linear-gradient(135deg, #d4d4e8 0%, #b8b8d4 50%, #d4d4e8 100%);
}

@keyframes bp-img-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.bp-featured-overlay {
  position: absolute;
  top: 1rem;
  left: 1rem;
}

.bp-featured-cat {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.4rem 0.8rem;
  background: var(--accent-strong);
  color: #fff;
  border-radius: 6px;
}

.bp-demo-featured-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bp-demo-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 0.75rem;
  line-height: 1.3;
  transition: opacity 0.3s ease;
  font-family: 'Outfit', sans-serif;
}

.bp-demo-excerpt {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 1rem;
}

.bp-demo-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.bp-demo-author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bp-author-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
}

/* Post grid */
.bp-demo-grid {
  overflow: hidden;
  position: relative;
}

.bp-demo-grid__track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: bpSlideLeft 45s linear infinite;
}

.bp-demo-card {
  background: #faf8f6;
  border-radius: 12px;
  overflow: hidden;
  flex: 0 0 auto;
  width: calc((100vw - 8rem) / 3.5);
  max-width: 320px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bp-demo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(42, 38, 35, 0.1);
}

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

.bp-demo-card-img {
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
}

.bp-demo-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bp-demo-card-body {
  padding: 1rem;
}

.bp-demo-card-cat {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-strong);
}

.bp-demo-card-body h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0.4rem 0;
  line-height: 1.3;
}

.bp-demo-card-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* SEO Indicator */
.bp-seo-indicator {
  position: absolute;
  top: 20px;
  right: -80px;
  background: #fff;
  padding: 1.25rem;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(42, 38, 35, 0.12);
  text-align: center;
}

.bp-seo-ring {
  position: relative;
  width: 70px;
  height: 70px;
  margin: 0 auto 0.5rem;
}

.bp-seo-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.bp-seo-ring-bg {
  fill: none;
  stroke: #f0ebe7;
  stroke-width: 6;
}

.bp-seo-ring-progress {
  fill: none;
  stroke: url(#bp-seo-gradient);
  stroke: #48dbfb;
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease;
}

.bp-seo-score {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: baseline;
  gap: 0.1rem;
  font-family: 'Outfit', sans-serif;
}

.bp-score-number {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-main);
}

.bp-score-unit {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
}

.bp-seo-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Traffic Graph */
.bp-traffic-graph {
  position: absolute;
  bottom: 30px;
  left: -60px;
  background: #fff;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  box-shadow: 0 15px 40px rgba(42, 38, 35, 0.12);
  width: 180px;
}

.bp-traffic-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.bp-traffic-title {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
}

.bp-traffic-trend {
  font-size: 0.75rem;
  font-weight: 700;
  color: #27ae60;
}

.bp-traffic-chart {
  height: 50px;
}

.bp-traffic-chart svg {
  width: 100%;
  height: 100%;
}

.bp-chart-fill {
  fill: rgba(72, 219, 251, 0.15);
  transition: d 0.3s ease;
}

.bp-chart-line {
  fill: none;
  stroke: #48dbfb;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: d 0.3s ease;
}


/* =============================================
   FEATURE LIST
   ============================================= */

.bp-feature-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.bp-feature-item {
  text-align: center;
  padding: 1.5rem;
}

/* Animation enhancement */
.bp-feature-item.bp-animate {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}

.bp-feature-item.bp-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.bp-feature-item.bp-animate:nth-child(1) { transition-delay: 0.1s; }
.bp-feature-item.bp-animate:nth-child(2) { transition-delay: 0.2s; }
.bp-feature-item.bp-animate:nth-child(3) { transition-delay: 0.3s; }
.bp-feature-item.bp-animate:nth-child(4) { transition-delay: 0.4s; }

.bp-feature-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  border-radius: 16px;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-strong);
  transition: all 0.3s ease;
}

.bp-feature-item:hover .bp-feature-icon {
  transform: scale(1.1) rotate(-5deg);
  background: var(--accent-strong);
  color: #fff;
}

.bp-feature-icon i {
  width: 24px;
  height: 24px;
}

.bp-feature-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.5rem;
}

.bp-feature-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}


/* =============================================
   PODCAST SECTION
   ============================================= */

.bp-section--podcast {
  background: linear-gradient(180deg, #faf8f6 0%, #f5f0ec 100%);
}

.bp-podcast-showcase {
  position: relative;
  margin-bottom: 4rem;
}

.bp-podcast-studio {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
  background: #1a1a1f;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 
    0 60px 120px rgba(26, 26, 31, 0.25),
    0 20px 40px rgba(26, 26, 31, 0.15);
}

/* Studio Main */
.bp-studio-main {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.bp-studio-art {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.bp-studio-art-img {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--accent-strong) 0%, var(--accent) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
}

.bp-art-pulse {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: bp-art-pulse 3s ease-out infinite;
}

.bp-art-pulse--1 { animation-delay: 0s; }
.bp-art-pulse--2 { animation-delay: 1s; }
.bp-art-pulse--3 { animation-delay: 2s; }

@keyframes bp-art-pulse {
  0% { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}

.bp-studio-art-icon {
  position: relative;
  z-index: 2;
  color: #fff;
}

.bp-studio-art-icon i {
  width: 36px;
  height: 36px;
}

.bp-studio-meta {
  display: flex;
  flex-direction: column;
}

.bp-studio-show {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  font-family: 'Outfit', sans-serif;
}

.bp-studio-host {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
}

/* Episode info */
.bp-studio-episode {
  margin-bottom: 1rem;
}

.bp-ep-number {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  background: rgba(200, 158, 138, 0.15);
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  margin-bottom: 0.75rem;
}

.bp-ep-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.5rem;
  line-height: 1.3;
  font-family: 'Outfit', sans-serif;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.bp-ep-desc {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
  margin: 0;
}

/* Studio Waveform */
.bp-studio-waveform {
  position: relative;
  height: 80px;
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}

.bp-waveform-progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 35%;
  background: linear-gradient(90deg, rgba(200, 158, 138, 0.2) 0%, rgba(200, 158, 138, 0.05) 100%);
  animation: bp-progress-crawl 30s linear infinite;
}

@keyframes bp-progress-crawl {
  0% { width: 0%; }
  100% { width: 100%; }
}

.bp-waveform-bars {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 2px;
  padding: 0 1rem;
}

.bp-studio-bar {
  width: 3px;
  background: linear-gradient(to top, var(--accent-strong), var(--accent));
  border-radius: 2px;
  height: var(--h, 50%);
  animation: bp-studio-wave 1.5s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0.6;
}

@keyframes bp-studio-wave {
  0%, 100% { transform: scaleY(0.3); opacity: 0.4; }
  50% { transform: scaleY(1); opacity: 0.9; }
}

.bp-waveform-playhead {
  position: absolute;
  left: 35%;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: bp-playhead-move 30s linear infinite;
}

@keyframes bp-playhead-move {
  0% { left: 0%; }
  100% { left: 100%; }
}

/* Studio Controls */
.bp-studio-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.bp-ctrl-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bp-ctrl-btn:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

.bp-ctrl-btn i {
  width: 18px;
  height: 18px;
}

.bp-ctrl-btn--play {
  width: 60px;
  height: 60px;
  background: var(--accent-strong);
  color: #fff;
}

.bp-ctrl-btn--play:hover {
  background: var(--accent);
  transform: scale(1.08);
  box-shadow: 0 8px 30px rgba(180, 123, 104, 0.4);
}

.bp-ctrl-btn--play .bp-ctrl-pause { display: none; }
.bp-ctrl-btn--play.is-playing .bp-ctrl-play { display: none; }
.bp-ctrl-btn--play.is-playing .bp-ctrl-pause { display: block; }

.bp-ctrl-btn--speed {
  width: auto;
  padding: 0 1rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.bp-ctrl-time {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  font-variant-numeric: tabular-nums;
}

.bp-ctrl-time-sep {
  margin: 0 0.25rem;
  opacity: 0.5;
}

/* Episodes sidebar */
.bp-studio-episodes {
  background: rgba(255,255,255,0.02);
  border-left: 1px solid rgba(255,255,255,0.06);
  padding: 1.5rem;
}

.bp-episodes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
}

.bp-ep-count {
  font-weight: 400;
  color: rgba(255,255,255,0.4);
}

.bp-episodes-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bp-episode-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bp-episode-row:hover {
  background: rgba(255,255,255,0.05);
}

.bp-episode-row--active {
  background: rgba(200, 158, 138, 0.15);
}

.bp-ep-row-num {
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  width: 24px;
}

.bp-episode-row--active .bp-ep-row-num {
  color: var(--accent);
}

.bp-ep-row-info {
  flex: 1;
  min-width: 0;
}

.bp-ep-row-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.bp-ep-row-dur {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
}

.bp-ep-row-wave,
.bp-ep-row-eq {
  width: 30px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.bp-ep-row-wave::before,
.bp-ep-row-wave::after,
.bp-ep-row-eq::before,
.bp-ep-row-eq::after {
  content: '';
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
  animation: bp-mini-eq 0.8s ease-in-out infinite;
}

.bp-ep-row-wave::before { height: 60%; animation-delay: 0s; }
.bp-ep-row-wave::after { height: 100%; animation-delay: 0.2s; }
.bp-ep-row-eq::before { height: 40%; animation-delay: 0.1s; }
.bp-ep-row-eq::after { height: 70%; animation-delay: 0.3s; }

@keyframes bp-mini-eq {
  0%, 100% { transform: scaleY(0.5); }
  50% { transform: scaleY(1); }
}

/* Platforms float */
.bp-platforms-float {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 100px;
  box-shadow: 0 15px 40px rgba(42, 38, 35, 0.15);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.bp-platforms-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bp-platforms-logos {
  display: flex;
  gap: 0.5rem;
}

.bp-platform-logo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.bp-platform-logo:hover {
  transform: scale(1.15);
}

.bp-platform-logo svg {
  width: 18px;
  height: 18px;
}

.bp-platform-logo--spotify { color: #1DB954; }
.bp-platform-logo--apple { color: #8e44ad; }
.bp-platform-logo--google { color: #4285f4; }
.bp-platform-logo--overcast { color: #fc7e0f; }

/* Analytics popup */
.bp-analytics-popup {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #fff;
  padding: 1.25rem;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(42, 38, 35, 0.15);
  min-width: 200px;
}

.bp-analytics-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.bp-analytics-header i {
  width: 14px;
  height: 14px;
  color: var(--accent-strong);
}

.bp-analytics-stats {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bp-analytics-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bp-analytics-value {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
  font-family: 'Outfit', sans-serif;
}

.bp-analytics-label {
  font-size: 0.7rem;
  color: var(--text-muted);
}


/* =============================================
   UNIFIED SECTION
   ============================================= */

.bp-section--unified {
  background: var(--bg);
  padding: 7rem 0;
}

.bp-unified-layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 4rem;
  align-items: center;
}

.bp-unified-text {
  max-width: 440px;
  margin-left: 3rem;
}

.bp-unified-checklist {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bp-unified-checklist li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--text-main);
}

.bp-unified-checklist i {
  width: 20px;
  height: 20px;
  color: #27ae60;
  flex-shrink: 0;
}

/* Dashboard mockup */
.bp-dashboard-mock {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(253, 252, 251, 0.9) 100%),
    radial-gradient(ellipse at top right, rgba(200, 158, 138, 0.08), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(200, 158, 138, 0.06), transparent 60%);
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(200, 158, 138, 0.12),
    0 80px 160px rgba(42, 38, 35, 0.12),
    0 40px 80px rgba(42, 38, 35, 0.08),
    0 20px 40px rgba(42, 38, 35, 0.06),
    inset 0 2px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(200, 158, 138, 0.1);
  padding: 2.5rem 3rem;
  min-height: 380px;
  max-width: 920px;
  margin: 0 auto;
  position: relative;
  backdrop-filter: blur(20px);
}

.bp-dashboard-mock::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 28px;
  padding: 2px;
  background: linear-gradient(135deg, rgba(200, 158, 138, 0.3), transparent 30%, transparent 70%, rgba(200, 158, 138, 0.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Dashboard Top Header */
.bp-dash-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(200, 158, 138, 0.12);
  position: relative;
}

.bp-dash-top::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 158, 138, 0.2), transparent);
}

.bp-dash-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
  background: linear-gradient(135deg, var(--text-main) 0%, var(--accent-strong) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
  filter: drop-shadow(0 2px 4px rgba(200, 158, 138, 0.1));
}

.bp-dash-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0.25rem 0 0 0;
  font-weight: 500;
}

.bp-dash-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.bp-dash-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-muted);
}

.bp-dash-icon-btn:hover {
  background: #f5f3f1;
  border-color: var(--border-main);
}

.bp-dash-icon-btn i {
  width: 18px;
  height: 18px;
}

.bp-dash-new-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  background: linear-gradient(135deg, var(--accent-strong) 0%, var(--accent) 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow:
    0 0 20px rgba(200, 158, 138, 0.2),
    0 6px 16px rgba(200, 158, 138, 0.3),
    0 3px 6px rgba(200, 158, 138, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.bp-dash-new-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bp-dash-new-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 0 30px rgba(200, 158, 138, 0.3),
    0 8px 24px rgba(200, 158, 138, 0.4),
    0 4px 8px rgba(200, 158, 138, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.bp-dash-new-btn:hover::before {
  opacity: 1;
}

.bp-dash-new-btn i {
  width: 16px;
  height: 16px;
  position: relative;
  z-index: 1;
}

.bp-dash-new-btn span {
  position: relative;
  z-index: 1;
}

/* Stats Badges Row */
.bp-dash-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.bp-dash-badge {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(200, 158, 138, 0.15);
  border-radius: 16px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 12px rgba(42, 38, 35, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.bp-dash-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bp-dash-badge::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: radial-gradient(circle at top left, currentColor, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bp-dash-badge:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 12px 28px rgba(42, 38, 35, 0.1),
    0 6px 12px rgba(42, 38, 35, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border-color: rgba(200, 158, 138, 0.25);
}

.bp-dash-badge:hover::before {
  opacity: 0.5;
}

.bp-dash-badge:hover::after {
  opacity: 0.03;
}

.bp-dash-badge i {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.bp-badge--posts {
  color: var(--accent-strong);
}

.bp-badge--posts i {
  color: var(--accent-strong);
}

.bp-badge--views {
  color: #48dbfb;
}

.bp-badge--views i {
  color: #48dbfb;
}

.bp-badge--episodes {
  color: #8e44ad;
}

.bp-badge--episodes i {
  color: #8e44ad;
}

.bp-badge--plays {
  color: #ff6b6b;
}

.bp-badge--plays i {
  color: #ff6b6b;
}

.bp-badge-content {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.bp-badge-value {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-main);
  font-family: 'Outfit', sans-serif;
  line-height: 1;
}

.bp-badge-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Journal URL Section */
.bp-dash-url-section {
  margin-bottom: 1.25rem;
}

.bp-dash-url-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.bp-dash-url-box {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(200, 158, 138, 0.15);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: all 0.3s ease;
}

.bp-dash-url-box:hover {
  border-color: rgba(200, 158, 138, 0.25);
  box-shadow: 0 4px 12px rgba(42, 38, 35, 0.06);
}

.bp-dash-url-text {
  flex: 1;
  font-size: 0.8rem;
  color: var(--text-main);
  font-family: 'Courier New', monospace;
  font-weight: 500;
}

.bp-dash-url-copy,
.bp-dash-url-link {
  width: 30px;
  height: 30px;
  border: none;
  background: rgba(200, 158, 138, 0.08);
  color: var(--accent-strong);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bp-dash-url-copy:hover,
.bp-dash-url-link:hover {
  background: rgba(200, 158, 138, 0.15);
  transform: scale(1.05);
}

.bp-dash-url-copy i,
.bp-dash-url-link i {
  width: 15px;
  height: 15px;
}

/* Content Tabs */
.bp-dash-content-section {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(200, 158, 138, 0.12);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(42, 38, 35, 0.04);
}

.bp-dash-tabs {
  display: flex;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(200, 158, 138, 0.1);
  align-items: center;
  background: rgba(255, 255, 255, 0.3);
}

.bp-dash-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  background: transparent;
  border: none;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.bp-dash-tab::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.bp-dash-tab:hover {
  color: var(--text-main);
}

.bp-dash-tab--active {
  color: white;
}

.bp-dash-tab--active::after {
  opacity: 1;
}

.bp-dash-tab i {
  width: 15px;
  height: 15px;
}

/* Tab Content */
.bp-dash-tab-content {
  display: none;
  padding: 1.25rem;
}

.bp-dash-tab-content--active {
  display: block;
  animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Content List */
.bp-dash-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.bp-dash-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 100%);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(200, 158, 138, 0.12);
  border-radius: 14px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 2px 8px rgba(42, 38, 35, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.bp-dash-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(200, 158, 138, 0.05), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bp-dash-item:hover {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
  border-color: rgba(200, 158, 138, 0.2);
  transform: translateX(8px) translateY(-2px);
  box-shadow:
    0 8px 24px rgba(42, 38, 35, 0.08),
    0 4px 12px rgba(42, 38, 35, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.bp-dash-item:hover::before {
  opacity: 1;
}

.bp-item-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  position: relative;
}

.bp-dash-item:hover .bp-item-icon {
  transform: scale(1.15) rotate(5deg);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.bp-item-icon--post {
  background: linear-gradient(135deg, rgba(200, 158, 138, 0.2), rgba(200, 158, 138, 0.12));
  color: var(--accent-strong);
}

.bp-item-icon--episode {
  background: linear-gradient(135deg, rgba(142, 68, 173, 0.2), rgba(142, 68, 173, 0.12));
  color: #8e44ad;
}

.bp-item-icon i {
  width: 17px;
  height: 17px;
}

.bp-item-content {
  flex: 1;
  min-width: 0;
}

.bp-item-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  margin: 0 0 0.2rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bp-item-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin: 0;
}

.bp-item-stats {
  flex-shrink: 0;
}

.bp-item-views {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-strong);
  background: rgba(200, 158, 138, 0.08);
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
}


/* =============================================
   CTA SECTION
   ============================================= */

.bp-cta {
  background:
    radial-gradient(ellipse 100% 80% at 50% 0%, rgba(200, 158, 138, 0.08), transparent 70%),
    radial-gradient(ellipse 120% 100% at 30% 100%, rgba(200, 158, 138, 0.06), transparent),
    radial-gradient(ellipse 120% 100% at 70% 100%, rgba(42, 38, 35, 0.04), transparent),
    linear-gradient(180deg, #1a1816 0%, #0f0e0d 100%);
  padding: 8rem 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(200, 158, 138, 0.15);
}

.bp-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1400px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(200, 158, 138, 0.6), transparent);
  box-shadow: 0 0 20px rgba(200, 158, 138, 0.4);
}

.bp-cta::after {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 150%;
  background: radial-gradient(ellipse at center, rgba(200, 158, 138, 0.05), transparent 70%);
  pointer-events: none;
  animation: bp-cta-pulse 8s ease-in-out infinite;
}

@keyframes bp-cta-pulse {
  0%, 100% { opacity: 0.3; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.6; transform: translateX(-50%) scale(1.1); }
}

.bp-cta-shell {
  max-width: 850px;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
  position: relative;
  z-index: 2;
}

.bp-cta-heading {
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  font-weight: 900;
  background: linear-gradient(135deg, #ffffff 0%, rgba(200, 158, 138, 0.95) 50%, var(--accent-strong) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 1.5rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-shadow: 0 0 80px rgba(200, 158, 138, 0.3);
  filter: drop-shadow(0 4px 20px rgba(200, 158, 138, 0.2));
}

.bp-cta-body {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 3rem;
  font-weight: 500;
  line-height: 1.6;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.bp-cta-actions {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
}

.bp-cta-actions .bp-btn--primary {
  background:
    linear-gradient(135deg, var(--accent-strong) 0%, var(--accent) 100%);
  box-shadow:
    0 0 60px rgba(200, 158, 138, 0.4),
    0 12px 40px rgba(200, 158, 138, 0.3),
    0 6px 16px rgba(200, 158, 138, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.15rem 3rem;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.bp-cta-actions .bp-btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.bp-cta-actions .bp-btn--primary:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 0 80px rgba(200, 158, 138, 0.6),
    0 16px 48px rgba(200, 158, 138, 0.4),
    0 8px 20px rgba(200, 158, 138, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.bp-cta-actions .bp-btn--primary:hover::before {
  opacity: 1;
}

.bp-cta-actions .bp-btn--outline {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(200, 158, 138, 0.3);
  color: #ffffff;
  padding: 1.15rem 3rem;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.bp-cta-actions .bp-btn--outline::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  opacity: 0;
  transition: opacity 0.4s ease;
}

.bp-cta-actions .bp-btn--outline::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  z-index: 1;
}

.bp-cta-actions .bp-btn--outline span {
  position: relative;
  z-index: 2;
}

.bp-cta-actions .bp-btn--outline:hover {
  border-color: var(--accent-strong);
  color: #ffffff;
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 0 40px rgba(200, 158, 138, 0.4),
    0 12px 40px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.bp-cta-actions .bp-btn--outline:hover::before {
  opacity: 0.15;
}

.bp-cta-decoration {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.bp-cta-wave {
  position: absolute;
  bottom: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 180%;
  height: 80%;
  background: radial-gradient(ellipse at center, rgba(200, 158, 138, 0.15) 0%, transparent 60%);
  animation: bp-cta-wave 15s ease-in-out infinite;
  filter: blur(60px);
}

@keyframes bp-cta-wave {
  0%, 100% {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translateX(-50%) translateY(-50px) scale(1.15);
    opacity: 0.8;
  }
}


/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 1100px) {
  .bp-seo-indicator,
  .bp-traffic-graph,
  .bp-analytics-popup {
    display: none;
  }
  
  .bp-distribution-badge {
    right: 20px;
  }
}

@media (max-width: 960px) {
  .bp-hero-shell {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  
  .bp-hero-content {
    text-align: center;
    max-width: 100%;
    margin: 0 auto;
  }
  
  .bp-hero-actions {
    justify-content: center;
  }
  
  .bp-podcast-studio {
    grid-template-columns: 1fr;
  }
  
  .bp-studio-episodes {
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  
  .bp-unified-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  
  .bp-unified-text {
    text-align: center;
    max-width: 100%;
    margin: 0 auto;
  }
  
  .bp-unified-checklist {
    align-items: center;
  }
  
  .bp-demo-featured {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .bp-feature-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .bp-hero {
    padding: 3rem 0 4rem;
    min-height: auto;
  }

  .bp-section {
    padding: 4rem 0;
  }
  
  .bp-float-stat--views { left: 10px; }
  .bp-float-stat--listens { right: 10px; }
  .bp-float-stat--subs { left: 10px; }
  
  .bp-distribution-badge {
    position: relative;
    right: auto;
    bottom: auto;
    margin: 1.5rem 0 0 auto;
    width: fit-content;
  }
  
  .bp-demo-grid {
    grid-template-columns: 1fr;
  }
  
  .bp-feature-list {
    grid-template-columns: 1fr;
  }
  
  .bp-platforms-float {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    margin: 2rem auto 0;
    width: fit-content;
  }
  
  .bp-dash-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .bp-float-stat {
    padding: 0.75rem 1rem;
  }
  
  .bp-float-stat-value {
    font-size: 1.1rem;
  }
  
  .bp-blog-preview-content {
    padding: 1.25rem;
  }
  
  .bp-typing-title {
    font-size: 1.2rem;
  }
  
  .bp-studio-main {
    padding: 1.5rem;
  }
  
  .bp-ep-title {
    font-size: 1.2rem;
  }
  
  .bp-waveform-bars {
    gap: 1px;
  }
  
  .bp-studio-bar {
    width: 2px;
  }
}












































/* =============================================
   PLATFORM FAQ SECTION
   ============================================= */

.platform-faq {
  background: #f8f3ef;
  padding: 4.5rem 0 5rem;
}

.platform-faq-shell {
  max-width: 900px;
  margin: 0 auto;
}

.platform-faq-title {
  text-align: center;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 900;
  margin-bottom: 2.5rem;
  color: var(--text-main);
}

.platform-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.platform-faq-item {
  border-bottom: 1px solid rgba(0,0,0,.1);
  padding: 1.25rem 0;
}

.platform-faq-item:first-child {
  border-top: 1px solid rgba(0,0,0,.1);
}

.platform-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-main);
}

.platform-faq-question:hover {
  color: var(--accent-strong);
}

/* plus / minus toggle */
.platform-faq-chevron {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text-muted);
}

.platform-faq-chevron::before {
  content: '+';
  font-size: 1.3rem;
}

.platform-faq-item.open .platform-faq-chevron::before {
  content: '−';
}

.platform-faq-item.open .platform-faq-chevron {
  color: var(--accent-strong);
}

.platform-faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .3s ease, opacity .25s ease;
}

.platform-faq-answer p {
  margin: 1rem 0 .5rem;
  color: var(--text-muted);
  font-size: .95rem;
  line-height: 1.7;
}

.platform-faq-item.open .platform-faq-answer {
  max-height: 400px;
  opacity: 1;
}

/* =============================================
   PLATFORM FAQ — MOBILE RESPONSIVE
   ============================================= */

@media (max-width: 820px) {
  .platform-faq {
    padding: 3.5rem 0 4rem;
  }

  .platform-faq-shell {
    padding: 0 1.5rem;
  }

  .platform-faq-title {
    margin-bottom: 2rem;
    font-size: clamp(1.4rem, 4vw, 2rem);
  }

  .platform-faq-question {
    font-size: 0.95rem;
    gap: 0.75rem;
  }

  .platform-faq-chevron {
    width: 24px;
    height: 24px;
  }

  .platform-faq-answer p {
    font-size: 0.9rem;
    line-height: 1.6;
  }
}

@media (max-width: 520px) {
  .platform-faq {
    padding: 3rem 0 3.4rem;
  }

  .platform-faq-shell {
    padding: 0 1.1rem;
  }

  .platform-faq-item {
    padding: 1rem 0;
  }

  .platform-faq-question {
    font-size: 0.92rem;
  }

  .platform-faq-answer p {
    font-size: 0.88rem;
  }
}















/* =============================================
   PLATFORM NAV – SHARED ACROSS PLATFORM PAGES
   ============================================= */

.platform-nav {
  background:
    radial-gradient(circle at top, rgba(244, 209, 183, 0.08), transparent 55%),
    #080506;
  color: #f7f3ef;
  padding: 3.5rem 0 3.8rem;
}

.platform-nav-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.8rem;
}

/* Header */

.platform-nav .section-eyebrow {
  color: rgba(245, 231, 222, 0.78);
  text-align: center;
}

.platform-nav-title {
  margin: 0 0 0.7rem;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 800;
  text-align: center;
}

.platform-nav-intro {
  max-width: 640px;
  margin: 0 auto 2.3rem;
  font-size: 0.95rem;
  line-height: 1.7;
  text-align: center;
  color: rgba(235, 223, 215, 0.86);
}

/* Grid */

.platform-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.9rem;
}

/* Item */

.platform-nav-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;

  /* rectangle instead of pill */
  padding: 0.9rem 1.05rem;
  border-radius: 14px;

  text-decoration: none;

  background: linear-gradient(135deg,
              rgba(255, 255, 255, 0.04),
              rgba(0, 0, 0, 0.32));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);

  color: inherit;
  transition:
    transform 0.16s ease-out,
    box-shadow 0.16s ease-out,
    border-color 0.16s ease-out,
    background 0.16s ease-out;
}

.platform-nav-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 42px rgba(0, 0, 0, 0.65);
  border-color: rgba(200, 158, 138, 0.9);
  background: linear-gradient(135deg,
              rgba(200, 158, 138, 0.14),
              rgba(0, 0, 0, 0.55));
}


/* Current page highlight */

.platform-nav-item--current {
  border-color: rgba(200, 158, 138, 0.95);
  background: linear-gradient(135deg,
              rgba(200, 158, 138, 0.28),
              rgba(200, 158, 138, 0.06));
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}


/* Icon + text */

.platform-nav-item:hover .platform-nav-icon {
  color: #ffe7d4;
}

.platform-nav-copy {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.platform-nav-label {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.platform-nav-meta {
  font-size: 0.8rem;
  color: rgba(236, 225, 218, 0.75);
}

/* Responsive tweaks */

@media (max-width: 720px) {
  .platform-nav {
    padding: 3rem 0 3.2rem;
  }

  .platform-nav-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .spheres-hero {
    padding: 3rem 0 2.4rem;
  }

  .spheres-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2rem;
  }

  .spheres-hero-visual {
    justify-content: center;
  }

  .spheres-hero-copy {
    margin-left: 0;
    max-width: 100%;
  }

  .spheres-section-grid,
  .spheres-section-grid--reverse {
    grid-template-columns: minmax(0, 1fr);
  }

  .spheres-section-grid--reverse .spheres-text-block {
    order: 0;
  }
}

@media (max-width: 960px) {
  .platform-links-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .spheres-shell {
    padding-inline: 1.4rem;
  }

  .platform-links-shell {
    padding-inline: 1.4rem;
  }

  .platform-links-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

















/* =============================================
   SCROLL FADE-IN ANIMATION
   ============================================= */

/* Base state - hidden */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Revealed state */
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children - for grids/lists */
.fade-in-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fade-in-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.fade-in-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.fade-in-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.fade-in-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.fade-in-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.fade-in-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }
.fade-in-stagger.is-visible > *:nth-child(7) { transition-delay: 480ms; }
.fade-in-stagger.is-visible > *:nth-child(8) { transition-delay: 560ms; }
.fade-in-stagger.is-visible > *:nth-child(9) { transition-delay: 640ms; }
.fade-in-stagger.is-visible > *:nth-child(10) { transition-delay: 720ms; }
.fade-in-stagger.is-visible > *:nth-child(11) { transition-delay: 800ms; }
.fade-in-stagger.is-visible > *:nth-child(12) { transition-delay: 880ms; }

.fade-in-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Variants */
.fade-in--slow {
  transition-duration: 0.9s;
}

.fade-in--up {
  transform: translateY(40px);
}

.fade-in--scale {
  transform: translateY(20px) scale(0.95);
}

.fade-in--scale.is-visible {
  transform: translateY(0) scale(1);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .fade-in-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}






















/* =============================================
   NOTE PAGE — A Letter from Gadura's Creator
   An immersive, emotionally resonant experience
   ============================================= */

/* =============================================
   CSS VARIABLES & BASE
   ============================================= */

.note-page {
  --note-bg: #fdfbf9;
  --note-bg-warm: #f8f3ee;
  --note-text: #2a2420;
  --note-text-soft: #5a524b;
  --note-text-muted: #8a827a;
  --note-accent: #b47b68;
  --note-accent-soft: rgba(180, 123, 104, 0.12);
  --note-accent-glow: rgba(200, 158, 138, 0.25);
  --note-gold: #c9a86c;
  --note-cream: #f5efe8;
  
  background: var(--note-bg);
  min-height: 100vh;
  overflow-x: hidden;
}

/* =============================================
   ATMOSPHERIC BACKGROUND
   ============================================= */

.note-atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.note-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0;
  animation: glowFadeIn 3s ease forwards;
}

.note-glow--1 {
  width: 600px;
  height: 600px;
  top: -200px;
  right: -150px;
  background: radial-gradient(circle, rgba(200, 158, 138, 0.35) 0%, transparent 70%);
  animation-delay: 0.5s;
}

.note-glow--2 {
  width: 500px;
  height: 500px;
  bottom: 20%;
  left: -200px;
  background: radial-gradient(circle, rgba(201, 168, 108, 0.2) 0%, transparent 70%);
  animation-delay: 1s;
}

.note-glow--3 {
  width: 400px;
  height: 400px;
  bottom: -100px;
  right: 20%;
  background: radial-gradient(circle, rgba(180, 123, 104, 0.2) 0%, transparent 70%);
  animation-delay: 1.5s;
}

@keyframes glowFadeIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* Floating Particles */
.note-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.note-particle {
  position: absolute;
  bottom: -20px;
  background: linear-gradient(135deg, var(--note-accent), var(--note-gold));
  border-radius: 50%;
  animation: floatUp linear infinite;
}

@keyframes floatUp {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: var(--particle-opacity, 0.3);
  }
  90% {
    opacity: var(--particle-opacity, 0.3);
  }
  100% {
    transform: translateY(-100vh) translateX(30px) scale(0.5);
    opacity: 0;
  }
}

/* =============================================
   HEADER
   ============================================= */

.note-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2.5rem;
  transition: all 0.4s ease;
}

.note-header.is-scrolled {
  background: rgba(253, 251, 249, 0.85);
  backdrop-filter: blur(20px);
  padding: 1rem 2.5rem;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.note-header__back {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--note-text-soft);
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0;
  transform: translateX(-10px);
  animation: fadeSlideIn 0.8s ease 0.3s forwards;
  transition: color 0.2s ease;
}

.note-header__back:hover {
  color: var(--note-accent);
}

.note-header__back svg {
  transition: transform 0.2s ease;
}

.note-header__back:hover svg {
  transform: translateX(-3px);
}

.note-header__brand {
  opacity: 0;
  animation: fadeIn 1s ease 0.5s forwards;
}

.note-logo {
  width: 42px;
  height: 42px;
}

.note-logo svg {
  width: 100%;
  height: 100%;
}

/* =============================================
   OPENING SECTION
   ============================================= */

.note-opening {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 2rem 4rem;
}

.note-opening__inner {
  text-align: center;
  max-width: 800px;
}

.note-kicker {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--note-accent);
  margin: 0 0 2rem;
  opacity: 0;
  animation: fadeSlideUp 1s ease 0.3s forwards;
}

.note-title {
  margin: 0 0 4rem;
  line-height: 1.15;
}

.note-title__line {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  color: var(--note-text);
  opacity: 0;
}

.note-title__line--1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  animation: fadeSlideUp 1s ease 0.5s forwards;
}

.note-title__line--2 {
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-style: italic;
  color: var(--note-accent);
  animation: fadeSlideUp 1s ease 0.7s forwards;
}

.note-scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  color: var(--note-text-muted);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  animation: fadeIn 1s ease 1.2s forwards;
  cursor: pointer;
  transition: color 0.3s ease;
}

.note-scroll-hint:hover {
  color: var(--note-accent);
}

.note-scroll-arrow {
  animation: bounce 2s ease infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* =============================================
   THE LETTER SECTION
   ============================================= */

.note-letter-section {
  position: relative;
  z-index: 10;
  padding: 6rem 2rem 8rem;
  background: linear-gradient(180deg, 
    transparent 0%, 
    rgba(248, 243, 238, 0.5) 10%,
    rgba(248, 243, 238, 0.8) 50%,
    rgba(245, 239, 232, 1) 100%
  );
}

.note-letter-container {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
}

/* Decorative Eagle */
.note-eagle {
  position: absolute;
  top: -60px;
  right: -120px;
  width: 300px;
  height: 300px;
  color: var(--note-accent);
  opacity: 0;
  animation: fadeIn 2s ease 0.5s forwards;
  pointer-events: none;
}

@media (max-width: 900px) {
  .note-eagle {
    display: none;
  }
}

/* =============================================
   LETTER CONTENT
   ============================================= */

.note-letter {
  position: relative;
}

.note-paragraph {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.note-paragraph.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.note-paragraph p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  line-height: 1.9;
  color: var(--note-text);
  margin: 0 0 1.8rem;
}

.note-paragraph em {
  font-style: italic;
  color: var(--note-accent);
}

/* Drop Cap */
.note-paragraph--first {
  margin-bottom: 2.5rem;
}

.note-dropcap {
  float: left;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 5rem;
  line-height: 0.8;
  font-weight: 600;
  color: var(--note-accent);
  margin-right: 0.15em;
  margin-top: 0.1em;
}

/* Dividers */
.note-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 2.5rem 0;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.note-divider.is-visible {
  opacity: 1;
  transform: scale(1);
}

.note-divider__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--note-accent), var(--note-gold));
}

.note-divider__line {
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--note-accent), transparent);
}

.note-divider--final {
  padding: 3rem 0;
}

/* Highlight Box */
.note-highlight {
  position: relative;
  margin: 3rem 0;
  padding: 2rem 2.5rem;
  background: linear-gradient(135deg, 
    rgba(180, 123, 104, 0.08) 0%, 
    rgba(201, 168, 108, 0.06) 100%
  );
  border-left: 3px solid var(--note-accent);
  border-radius: 0 1rem 1rem 0;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.note-highlight.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.note-highlight p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.3rem, 2.8vw, 1.6rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.8;
  color: var(--note-text);
  margin: 0;
}

/* Mission Block */
.note-mission {
  text-align: center;
  margin: 3.5rem 0;
  padding: 2.5rem 2rem;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.note-mission.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.note-mission__label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--note-accent);
  margin: 0 0 1rem;
}

.note-mission__text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 500;
  line-height: 1.7;
  color: var(--note-text);
  margin: 0;
}

/* Closing Statement */
.note-closing {
  text-align: center;
  margin: 3rem 0;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}

.note-closing.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.note-closing__statement {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  line-height: 1.6;
  color: var(--note-text);
  margin: 0 0 1rem;
}

.note-closing__statement strong {
  display: block;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 600;
  font-style: italic;
  color: var(--note-accent);
  margin-top: 0.3em;
}

.note-closing__vision {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  line-height: 1.8;
  color: var(--note-text-soft);
  margin: 1.5rem 0 0;
}

/* Passion Note */
.note-passion {
  text-align: center;
  margin: 3rem 0 2rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.note-passion.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.note-passion p {
  display: inline-block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-style: italic;
  color: var(--note-text-muted);
  margin: 0;
  padding: 0.8rem 2rem;
  border: 1px solid rgba(180, 123, 104, 0.25);
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.6);
}

/* =============================================
   SIGNATURE
   ============================================= */

.note-signature {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 4rem;
  padding-top: 2rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

.note-signature.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.note-signature__line {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--note-accent));
  margin-bottom: 1.2rem;
}

.note-signature__name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.8rem;
  font-style: italic;
  font-weight: 500;
  color: var(--note-text);
  margin: 0;
}

.note-signature__title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--note-text-muted);
  margin: 0.5rem 0 0;
}

/* =============================================
   TAGLINE SECTION
   ============================================= */

.note-tagline-section {
  position: relative;
  z-index: 10;
  padding: 6rem 2rem 8rem;
  background: linear-gradient(180deg, 
    var(--note-cream) 0%, 
    #f0e8df 100%
  );
}

.note-tagline-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.note-tagline-eagle {
  width: 60px;
  height: 60px;
  color: var(--note-accent);
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeIn 1s ease 0.3s forwards, gentlePulse 4s ease infinite 1.3s;
}

@keyframes gentlePulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
}

.note-tagline {
  margin: 0 0 3rem;
}

.note-tagline__brand {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--note-text);
  margin-bottom: 0.5rem;
}

.note-tagline__words {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-style: italic;
  font-weight: 500;
  color: var(--note-accent);
}

.note-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 2.2rem;
  background: linear-gradient(135deg, var(--note-accent), #9f6b5a);
  color: white;
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  border-radius: 50px;
  box-shadow: 
    0 4px 15px rgba(180, 123, 104, 0.35),
    0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.note-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 8px 25px rgba(180, 123, 104, 0.45),
    0 2px 5px rgba(0, 0, 0, 0.1);
}

.note-cta-btn svg {
  transition: transform 0.3s ease;
}

.note-cta-btn:hover svg {
  transform: translateX(3px);
}

/* =============================================
   ANIMATIONS
   ============================================= */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeSlideIn {
  from { 
    opacity: 0; 
    transform: translateX(-10px); 
  }
  to { 
    opacity: 1; 
    transform: translateX(0); 
  }
}

@keyframes fadeSlideUp {
  from { 
    opacity: 0; 
    transform: translateY(20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 768px) {
  .note-header {
    padding: 1.2rem 1.5rem;
  }
  
  .note-header.is-scrolled {
    padding: 0.8rem 1.5rem;
  }
  
  .note-opening {
    padding: 5rem 1.5rem 3rem;
  }
  
  .note-letter-section {
    padding: 4rem 1.5rem 5rem;
  }
  
  .note-highlight {
    padding: 1.5rem 1.8rem;
    margin: 2rem -0.5rem;
  }
  
  .note-dropcap {
    font-size: 4rem;
  }
  
  .note-signature {
    align-items: center;
  }
  
  .note-signature__line {
    background: linear-gradient(90deg, transparent, var(--note-accent), transparent);
  }
  
  .note-tagline-section {
    padding: 4rem 1.5rem 6rem;
  }
}

@media (max-width: 480px) {
  .note-header__back span {
    display: none;
  }
  
  .note-paragraph p {
    font-size: 1.15rem;
  }
  
  .note-dropcap {
    font-size: 3.5rem;
  }
  
  .note-mission {
    padding: 2rem 1rem;
  }
  
  .note-cta-btn {
    width: 100%;
    justify-content: center;
  }
}

/* =============================================
   REDUCED MOTION
   ============================================= */

@media (prefers-reduced-motion: reduce) {
  .note-particle,
  .note-glow,
  .note-scroll-arrow,
  .note-tagline-eagle {
    animation: none;
  }
  
  .note-paragraph,
  .note-highlight,
  .note-mission,
  .note-closing,
  .note-passion,
  .note-signature,
  .note-divider {
    opacity: 1;
    transform: none;
    transition: none;
  }
  
  .note-kicker,
  .note-title__line,
  .note-scroll-hint,
  .note-header__back,
  .note-header__brand {
    opacity: 1;
    transform: none;
    animation: none;
  }
}













/* =============================================
   FOOTER
   ============================================= */

/* Footer – dark, premium strip */
.site-footer {
  background: #0b0b0e;
  border-top: 1px solid #26262b;
  padding: 3rem 1.5rem 3rem;
  color: rgba(245, 245, 247, 0.82);
}

.footer-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.footer-company-name {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffffff;
}

.footer-company p {
  margin: 0;
  line-height: 1.5;
}

/* All footer links share the same base style */
.site-footer a {
  color: #f8f2ec;
  text-decoration: none;
}

.site-footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Legal links row */
.footer-links {
  margin-top: 0.9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
}

.footer-divider {
  opacity: 0.5;
}

.footer-copy {
  margin-top: 0.6rem;
  opacity: 0.7;
}












/* =============================================
  KEEP AT BOTTOM 
  DESKTOP FEATURES LAYOUT RESET
  Ensures features section displays correctly on desktop after changes to mobile
   ============================================= */

   .hamburger {
  display: none;
  }

  .mobile-br {
  display: none;
}

.desktop-br {
  display: block;
}


/*no one can save or open in new tab any image or video*/
img, video {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}


   /* Features Desktop Reset */
@media (min-width: 769px) {
  .features-layout {
    display: grid;
    grid-template-columns: minmax(210px, 240px) minmax(0, 1fr);
    gap: 2.75rem;
    align-items: stretch;
  }

  .features-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    justify-content: space-between;
    overflow-x: visible;
    padding: 0;
    order: unset;
  }

  .features-list::after {
    display: none;
    content: none;
  }

  .feature-tab {
    width: 100%;
    min-width: unset;
    max-width: unset;
    min-height: unset;
    height: auto;
    aspect-ratio: unset;
    scroll-snap-align: unset;
    flex: unset;
    padding: 0.9rem 1.1rem;
    border-radius: 1.1rem;
  }

  .feature-display {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    justify-content: space-between;
    order: unset;
  }

  .screen-frame {
    width: 100%;
    max-width: none;
    aspect-ratio: 16 / 10;
    min-height: 460px;
    margin: 0;
  }

  .feature-copy {
    display: block;
  }

  .features-scroll-dots {
    display: none !important;
  }


/*chekout*/
/* Desktop default: hide mobile-only “Every plan includes” block */
.all-plans-include-mobile {
  display: none;
}


}
/* =============================================
   BLOG HERO - ENHANCED STYLES
   ============================================= */

/* Reveal animation base */
.bp-reveal {
  opacity: 0;
  transform: translateY(30px);
  animation: bp-reveal-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes bp-reveal-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enhanced Hero Base */
.bp-hero--enhanced {
  background: linear-gradient(180deg, 
    #faf8f6 0%, 
    #f5f0eb 50%,
    #faf8f6 100%
  );
}

/* Eyebrow with icon */
.bp-hero--enhanced .bp-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(135deg, rgba(180, 123, 104, 0.15), rgba(200, 158, 138, 0.1));
  border: 1px solid rgba(180, 123, 104, 0.2);
  backdrop-filter: blur(10px);
}

.bp-eyebrow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bp-eyebrow-icon i {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}

/* Enhanced heading with line-by-line reveal */
.bp-hero--enhanced .bp-hero-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bp-heading-line {
  display: block;
}

.bp-heading-line--accent {
  position: relative;
  display: inline-block;
}

/* Glow effect behind accent text */
.bp-heading-glow {
  position: absolute;
  inset: -20px -40px;
  background: radial-gradient(ellipse at center, 
    rgba(200, 158, 138, 0.4) 0%,
    rgba(200, 158, 138, 0) 70%
  );
  filter: blur(25px);
  z-index: -1;
  animation: bp-glow-pulse 3s ease-in-out infinite;
}

@keyframes bp-glow-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* Primary button with shine effect */
.bp-btn--glow {
  position: relative;
  overflow: hidden;
}

.bp-btn-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: bp-btn-shine 3s ease-in-out infinite;
}

@keyframes bp-btn-shine {
  0% { left: -100%; }
  50%, 100% { left: 100%; }
}

.bp-btn--ghost i {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

/* Trust indicators */
.bp-hero-trust {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(42, 38, 35, 0.08);
}

.bp-trust-avatars {
  display: flex;
  align-items: center;
}

.bp-trust-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, 
    hsl(var(--hue, 20), 60%, 70%),
    hsl(var(--hue, 20), 50%, 55%)
  );
  border: 2px solid #faf8f6;
  margin-left: -10px;
  position: relative;
}

.bp-trust-avatar:first-child {
  margin-left: 0;
}

.bp-trust-avatar--count {
  background: var(--accent-strong);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 0 8px;
  border-radius: 20px;
}

.bp-trust-text {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Mockup glow */
.bp-mockup-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: radial-gradient(ellipse at center,
    rgba(200, 158, 138, 0.2) 0%,
    rgba(200, 158, 138, 0.05) 40%,
    transparent 70%
  );
  filter: blur(40px);
  z-index: -1;
  animation: bp-mockup-glow-float 6s ease-in-out infinite;
}

@keyframes bp-mockup-glow-float {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
  50% { transform: translate(-50%, -48%) scale(1.05); opacity: 1; }
}

/* 3D Mockup frame */
.bp-mockup-frame--3d {
  transform: perspective(1200px) rotateY(-2deg) rotateX(2deg);
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.bp-mockup-frame--3d:hover {
  transform: perspective(1200px) rotateY(0deg) rotateX(0deg);
}

/* Reflection effect */
.bp-mockup-reflection {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 10;
  border-radius: 24px 24px 0 0;
}

/* Enhanced preview URL bar */
.bp-preview-url {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.6);
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  flex: 1;
  max-width: 200px;
}

.bp-preview-url .bp-lock-icon {
  width: 12px;
  height: 12px;
  color: #22c55e;
}

/* Live badge */
.bp-preview-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #22c55e;
  margin-left: auto;
}

.bp-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  animation: bp-badge-pulse 2s ease-in-out infinite;
}

@keyframes bp-badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

/* Enhanced reading time */
.bp-meta-reading {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.bp-meta-reading i {
  width: 12px;
  height: 12px;
}

/* Enhanced floating stats */
.bp-float-stat--enhanced {
  flex-direction: row;
  padding: 1rem 1.5rem;
  gap: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  transition: all 0.3s ease;
}

.bp-float-stat--enhanced:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 
    0 25px 60px rgba(42, 38, 35, 0.15),
    0 12px 25px rgba(42, 38, 35, 0.1);
}

.bp-float-stat-content {
  display: flex;
  flex-direction: column;
}

.bp-float-stat-trend {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  margin-left: auto;
}

.bp-float-stat-trend--up {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
}

.bp-float-stat-trend i {
  width: 12px;
  height: 12px;
}

/* Animated ring on listens stat */
.bp-float-stat-ring {
  position: absolute;
  inset: -4px;
  border-radius: 20px;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: bp-stat-ring 3s ease-in-out infinite;
}

@keyframes bp-stat-ring {
  0%, 100% { opacity: 0; transform: scale(0.95); }
  50% { opacity: 0.5; transform: scale(1.02); }
}

/* Enhanced play button */
.bp-play-btn--enhanced {
  position: relative;
}

.bp-play-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: bp-play-ring-pulse 2s ease-in-out infinite;
}

@keyframes bp-play-ring-pulse {
  0%, 100% { opacity: 0; transform: scale(0.9); }
  50% { opacity: 0.6; transform: scale(1.1); }
}

/* Enhanced distribution badge */
.bp-distribution-badge--enhanced {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.25rem;
  background: linear-gradient(135deg, #fff 0%, #faf8f6 100%);
  border: 1px solid rgba(42, 38, 35, 0.06);
}

.bp-dist-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bp-dist-check {
  display: flex;
  color: #22c55e;
}

.bp-dist-check i {
  width: 16px;
  height: 16px;
}

.bp-distribution-badge--enhanced .bp-dist-text {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

.bp-distribution-badge--enhanced .bp-dist-icons {
  display: flex;
  gap: 0.5rem;
}

.bp-distribution-badge--enhanced .bp-dist-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.bp-distribution-badge--enhanced .bp-dist-icon:hover {
  transform: scale(1.15);
}

.bp-dist-icon--google {
  color: #ea4335;
}

/* Enhanced background */
.bp-hero-bg--enhanced {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.bp-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
}

.bp-hero-orb--1 {
  width: 600px;
  height: 600px;
  top: -200px;
  right: -100px;
  background: radial-gradient(circle,
    rgba(200, 158, 138, 0.4) 0%,
    rgba(200, 158, 138, 0.1) 50%,
    transparent 70%
  );
  animation: bp-orb-float-1 20s ease-in-out infinite;
}

.bp-hero-orb--2 {
  width: 400px;
  height: 400px;
  bottom: 0;
  left: -100px;
  background: radial-gradient(circle,
    rgba(180, 123, 104, 0.3) 0%,
    rgba(180, 123, 104, 0.05) 50%,
    transparent 70%
  );
  animation: bp-orb-float-2 15s ease-in-out infinite;
}

.bp-hero-orb--3 {
  width: 300px;
  height: 300px;
  top: 40%;
  left: 30%;
  background: radial-gradient(circle,
    rgba(212, 165, 116, 0.25) 0%,
    transparent 60%
  );
  animation: bp-orb-float-3 18s ease-in-out infinite;
}

@keyframes bp-orb-float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-30px, 20px) scale(1.05); }
  66% { transform: translate(20px, -10px) scale(0.95); }
}

@keyframes bp-orb-float-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.1); }
}

@keyframes bp-orb-float-3 {
  0%, 100% { transform: translate(0, 0); opacity: 0.5; }
  50% { transform: translate(-20px, 20px); opacity: 0.7; }
}

/* Subtle grid pattern */
.bp-hero-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(42, 38, 35, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42, 38, 35, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}

/* Podcast wave container enhancement */
.bp-podcast-wave--enhanced {
  background: linear-gradient(135deg, #1a1a1f 0%, #252529 100%);
  position: relative;
  overflow: hidden;
}

.bp-podcast-wave--enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(200, 158, 138, 0.3),
    transparent
  );
}

/* Responsive adjustments for enhanced hero */
@media (max-width: 1024px) {
  .bp-hero-trust {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  .bp-mockup-frame--3d {
    transform: none;
  }
  
  .bp-mockup-frame--3d:hover {
    transform: none;
  }
}

@media (max-width: 768px) {
  .bp-float-stat--enhanced {
    padding: 0.75rem 1rem;
  }
  
  .bp-float-stat-trend {
    display: none;
  }
  
  .bp-distribution-badge--enhanced {
    padding: 1rem;
  }
  
  .bp-hero-orb--1 {
    width: 400px;
    height: 400px;
    right: -150px;
  }
  
  .bp-hero-orb--2 {
    width: 300px;
    height: 300px;
  }
  
  .bp-hero-orb--3 {
    display: none;
  }
}

/* =============================================
   BLOG & PODCAST - MOBILE RESPONSIVE
   ============================================= */

/* Tablet and below */
@media (max-width: 1024px) {
  .bp-hero-shell {
    grid-template-columns: 1fr;
    gap: 4rem;
    text-align: center;
  }

  .bp-hero-content {
    max-width: 100%;
    margin: 0 auto;
  }

  .bp-hero-actions {
    justify-content: center;
  }

  .bp-hero-visual {
    max-width: 500px;
    margin: 0 auto;
  }

  .bp-hero {
    min-height: auto;
    padding: 4rem 0 3rem;
  }

   .bp-hero-mockup {
    min-width: 600px;
    margin-top: 1.2rem;
  }

  .bp-dashboard-mock {
    padding: 2rem 2.5rem;
    min-height: 320px;
  }

  .bp-dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .bp-dashboard-stats {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .bp-cta-heading {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .bp-hero {
    padding: 3rem 0 2rem;
    margin-top: 0;
  }

  .bp-hero-shell {
    padding: 0 1.5rem;
    gap: 2rem;
  }

  .bp-hero-content {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .bp-hero-heading {
    font-size: 4rem;
  }

  .bp-hero-body {
    font-size: 0.95rem;
  }

  .bp-hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .bp-btn {
    width: 100%;
    padding: 0.7rem 1.2rem;
    font-size: 0.85rem;
  }

  .bp-hero-eyebrow {
    font-size: 0.7rem;
    padding: 0.45rem 0.9rem;
  }

  .bp-eyebrow-icon i {
    width: 11px;
    height: 11px;
  }

  .bp-hero-visual {
    max-width: 100%;
    transform: scale(0.5);
    transform-origin: center top;
  }

  .bp-hero-mockup {
    padding-top: 0;
    min-width: 380px;
    margin-top: 1.2rem;
  }

  .bp-typing-title {
    margin-top: 1rem;
    font-size: 1.5rem;
  }

  .bp-typing-cursor {
     margin-top: 1rem;
  }

  /* Section Typography */
  .bp-section-heading {
    font-size: 1.75rem;
  }

  .bp-section-body {
    font-size: 1.05rem;
  }

  /* Blog Gallery */
  .bp-demo-card {
    width: 280px;
    max-width: 280px;
  }

  /* Unified Dashboard Section */
  .bp-section--unified {
    overflow: hidden;
  }

  .bp-section--unified .bp-section-shell {
    padding: 0 1.5rem;
    max-width: 100%;
  }

  .bp-unified-layout {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
  }

  .bp-unified-text {
    width: 100%;
    max-width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .bp-unified-text .bp-section-eyebrow {
    text-align: center;
    width: 100%;
  }

  .bp-unified-text .bp-section-heading {
    text-align: center;
    width: 100%;
    word-wrap: break-word;
  }

  .bp-unified-text .bp-section-body {
    text-align: center;
    width: 100%;
    max-width: 90%;
  }

  .bp-unified-checklist {
    text-align: left;
    width: 100%;
    max-width: 100%;
    padding: 0;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .bp-unified-checklist li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: auto;
  }

  .bp-unified-text .bp-btn {
    align-self: center;
    width: auto;
    min-width: 200px;
  }

  .bp-unified-visual {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    overflow: visible;
  }

  .bp-dash-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
  }

  .bp-dash-title-group {
    text-align: center;
  }

  .bp-dash-title {
    font-size: 1.75rem;
  }

  .bp-dash-subtitle {
    font-size: 0.9rem;
  }

  /* URL Bar - Fix icon sizing */
  .bp-dash-url-box {
    padding: 0.65rem 0.85rem;
  }

  .bp-dash-url-text {
    font-size: 0.7rem;
  }

  .bp-dash-url-copy,
  .bp-dash-url-link {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bp-dash-url-copy i,
  .bp-dash-url-link i {
    width: 13px;
    height: 13px;
  }

  /* Dashboard Badges - Center content */
  .bp-dash-badge {
    padding: 0.85rem 1rem;
    gap: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bp-dash-badge i {
    width: 16px;
    height: 16px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bp-badge-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .bp-badge-value {
    font-size: 1.2rem;
  }

  .bp-badge-label {
    font-size: 0.6rem;
  }

  /* Features Grid */
  .bp-features-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Dashboard Mockup - Mobile-first redesign */
  .bp-dashboard-mock {
    padding: 1.25rem 1.5rem;
    min-height: auto;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    transform: scale(1.25);
    transform-origin: center center;
  }

  /* Reduce vertical spacing throughout */
  .bp-dash-top {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
  }

  /* Make New Episode button more prominent */
  .bp-dash-new-btn {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
  }

  /* Compress URL section - make it utility-like */
  .bp-dash-url-section {
    margin-bottom: 0.85rem;
  }

  .bp-dash-url-label {
    font-size: 0.55rem;
    margin-bottom: 0.3rem;
    opacity: 0.7;
  }

  .bp-dash-url-box {
    padding: 0.55rem 0.75rem;
    background: rgba(255, 255, 255, 0.5);
  }

  /* Stats grid - 2x2 layout with reduced visual weight */
  .bp-dash-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
  }

  .bp-dash-badge {
    padding: 0.65rem 0.75rem;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(200, 158, 138, 0.1);
  }

  .bp-badge-value {
    font-size: 1.1rem;
  }

  .bp-badge-label {
    font-size: 0.55rem;
  }

  /* Tabs - clearer active state and larger tap targets */
  .bp-dashboard-tabs {
    margin-bottom: 0.85rem;
  }

  .bp-dashboard-tab {
    padding: 0.65rem 1rem;
    font-size: 0.8rem;
  }

  .bp-dashboard-tab.active {
    font-weight: 700;
    background: rgba(200, 158, 138, 0.15);
  }

  /* Episode list - better hierarchy */
  .bp-dashboard-header {
    margin-bottom: 0.85rem;
    gap: 0.6rem;
  }

  .bp-dashboard-title {
    font-size: 0.85rem;
    font-weight: 700;
  }

  .bp-dashboard-meta {
    font-size: 0.65rem;
    opacity: 0.6;
  }

  .bp-dashboard-stats {
    margin-bottom: 0.6rem;
    gap: 0.6rem;
  }

  .bp-dashboard-stat {
    padding: 0.85rem 1rem;
  }

  .bp-dashboard-stat-label {
    font-size: 0.65rem;
  }

  .bp-dashboard-stat-value {
    font-size: 1.5rem;
  }

  .bp-dashboard-chart {
    height: 130px;
    padding: 0 0.5rem;
  }

  .bp-chart-bar {
    width: 18px;
  }

  .bp-dashboard-insights {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .bp-insight {
    padding: 0.85rem 1rem;
  }

  .bp-insight-label {
    font-size: 0.65rem;
  }

  .bp-insight-value {
    font-size: 1rem;
  }

  /* CTA Section */
  .bp-cta {
    padding: 5rem 0;
  }

  .bp-cta-shell {
    padding: 0 1.5rem;
  }

  .bp-cta-heading {
    font-size: clamp(2rem, 7vw, 3rem);
    margin-bottom: 1rem;
  }

  .bp-cta-body {
    font-size: 1.05rem;
    margin-bottom: 2rem;
  }

  .bp-cta-actions {
    flex-direction: column;
    width: 100%;
  }

  .bp-cta .bp-btn {
    width: 100%;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .bp-hero-shell {
    padding: 0 1rem;
  }

  .bp-hero-content {
    max-width: 100%;
    padding: 0 0.5rem;
  }

  .bp-hero-eyebrow {
    font-size: 0.65rem;
    padding: 0.4rem 0.8rem;
  }

  .bp-hero-heading {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }

  .bp-hero-body {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    padding: 0 0.25rem;
  }

  .bp-btn {
    padding: 0.65rem 1.1rem;
    font-size: 0.8rem;
  }

  .bp-eyebrow-icon i {
    width: 10px;
    height: 10px;
  }

  .bp-hero-visual {
    max-width: 100%;
    transform: scale(0.45);
    transform-origin: center top;
  }

  .bp-typing-title {
    font-size: 0.9rem;
  }

  /* Section Typography */
  .bp-section-heading {
    font-size: 1.5rem;
  }

  .bp-section-body {
    font-size: 1rem;
  }

  /* Blog Gallery */
  .bp-demo-card {
    width: 240px;
    max-width: 240px;
  }

  /* Unified Dashboard Section */
  .bp-section--unified .bp-section-shell {
    padding: 0 0.75rem;
  }

  .bp-unified-layout {
    gap: 2rem;
  }

  .bp-unified-checklist {
    max-width: 100%;
    font-size: 0.95rem;
  }

  .bp-unified-visual {
    transform: scale(0.75);
  }

  .bp-dash-title {
    font-size: 2.25rem;
  }

  .bp-dash-subtitle {
    font-size: 0.7rem;
  }

  .bp-dashboard-mock {
    padding: 1rem 1.25rem;
    border-radius: 20px;
  }

  .bp-dashboard-header {
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .bp-dashboard-title {
    font-size: 0.85rem;
  }

  .bp-dashboard-meta {
    font-size: 0.7rem;
  }

  .bp-dashboard-stats {
    gap: 0.65rem;
    margin-bottom: 1rem;
  }

  .bp-dashboard-stat {
    padding: 0.75rem 0.85rem;
  }

  .bp-dashboard-stat-label {
    font-size: 0.6rem;
  }

  .bp-dashboard-stat-value {
    font-size: 1.35rem;
  }

  .bp-dashboard-chart {
    height: 110px;
    padding: 0 0.25rem;
  }

  .bp-chart-bar {
    width: 14px;
  }

  .bp-insight {
    padding: 0.75rem 0.85rem;
  }

  .bp-insight-label {
    font-size: 0.6rem;
  }

  .bp-insight-value {
    font-size: 0.95rem;
  }

  .bp-cta {
    padding: 4rem 0;
  }

  .bp-cta-heading {
    font-size: 1.75rem;
  }

  .bp-cta-body {
    font-size: 1rem;
  }

  .bp-btn {
    padding: 0.9rem 1.25rem;
    font-size: 0.9rem;
  }
}

/* iPhone 12 and smaller */
@media (max-width: 400px) {
  .bp-hero {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .bp-hero-shell {
    padding: 0 1rem;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .bp-hero-content {
    max-width: 320px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .bp-hero-heading {
    font-size: 2.2rem;
    text-align: center;
    width: 100%;
  }

  .bp-hero-body {
    font-size: 0.85rem;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .bp-hero-actions {
    justify-content: center;
    width: 100%;
    margin-bottom: 2rem;
  }

  .bp-hero-eyebrow {
    margin-left: auto;
    margin-right: auto;
  }

  .bp-hero-visual {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .bp-hero-mockup {
    margin: 0 auto;
  }

  .bp-float-stat--subs {
    margin-top: -2rem;
  }

  .bp-distribution-badge {
    margin-top: -1rem;
  }

  .bp-cta-actions .bp-btn--large {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
  }

  .bp-cta-actions {
    flex-direction: column;
    gap: 0.75rem;
  }

  .bp-podcast-studio {
    max-width: 110%;
    width: 110%;
    margin-left: -5%;
  }
}









































/* =============================================
   PLATFORM FAQ SECTION
   ============================================= */

.platform-faq {
  background: #f8f3ef;
  padding: 4.5rem 0 5rem;
}

.platform-faq-shell {
  max-width: 900px;
  margin: 0 auto;
}

.platform-faq-title {
  text-align: center;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 900;
  margin-bottom: 2.5rem;
  color: var(--text-main);
}

.platform-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.platform-faq-item {
  border-bottom: 1px solid rgba(0,0,0,.1);
  padding: 1.25rem 0;
}

.platform-faq-item:first-child {
  border-top: 1px solid rgba(0,0,0,.1);
}

.platform-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-main);
}

.platform-faq-question:hover {
  color: var(--accent-strong);
}

/* plus / minus toggle */
.platform-faq-chevron {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text-muted);
}

.platform-faq-chevron::before {
  content: '+';
  font-size: 1.3rem;
}

.platform-faq-item.open .platform-faq-chevron::before {
  content: '−';
}

.platform-faq-item.open .platform-faq-chevron {
  color: var(--accent-strong);
}

.platform-faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .3s ease, opacity .25s ease;
}

.platform-faq-answer p {
  margin: 1rem 0 .5rem;
  color: var(--text-muted);
  font-size: .95rem;
  line-height: 1.7;
}

.platform-faq-item.open .platform-faq-answer {
  max-height: 400px;
  opacity: 1;
}

/* =============================================
   PLATFORM FAQ — MOBILE RESPONSIVE
   ============================================= */

@media (max-width: 820px) {
  .platform-faq {
    padding: 3.5rem 0 4rem;
  }

  .platform-faq-shell {
    padding: 0 1.5rem;
  }

  .platform-faq-title {
    margin-bottom: 2rem;
    font-size: clamp(1.4rem, 4vw, 2rem);
  }

  .platform-faq-question {
    font-size: 0.95rem;
    gap: 0.75rem;
  }

  .platform-faq-chevron {
    width: 24px;
    height: 24px;
  }

  .platform-faq-answer p {
    font-size: 0.9rem;
    line-height: 1.6;
  }
}

@media (max-width: 520px) {
  .platform-faq {
    padding: 3rem 0 3.4rem;
  }

  .platform-faq-shell {
    padding: 0 1.1rem;
  }

  .platform-faq-item {
    padding: 1rem 0;
  }

  .platform-faq-question {
    font-size: 0.92rem;
  }

  .platform-faq-answer p {
    font-size: 0.88rem;
  }
}















/* =============================================
   PLATFORM NAV – SHARED ACROSS PLATFORM PAGES
   ============================================= */

.platform-nav {
  background:
    radial-gradient(circle at top, rgba(244, 209, 183, 0.08), transparent 55%),
    #080506;
  color: #f7f3ef;
  padding: 3.5rem 0 3.8rem;
}

.platform-nav-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.8rem;
}

/* Header */

.platform-nav .section-eyebrow {
  color: rgba(245, 231, 222, 0.78);
  text-align: center;
}

.platform-nav-title {
  margin: 0 0 0.7rem;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 800;
  text-align: center;
}

.platform-nav-intro {
  max-width: 640px;
  margin: 0 auto 2.3rem;
  font-size: 0.95rem;
  line-height: 1.7;
  text-align: center;
  color: rgba(235, 223, 215, 0.86);
}

/* Grid */

.platform-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.9rem;
}

/* Item */

.platform-nav-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;

  /* rectangle instead of pill */
  padding: 0.9rem 1.05rem;
  border-radius: 14px;

  text-decoration: none;

  background: linear-gradient(135deg,
              rgba(255, 255, 255, 0.04),
              rgba(0, 0, 0, 0.32));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);

  color: inherit;
  transition:
    transform 0.16s ease-out,
    box-shadow 0.16s ease-out,
    border-color 0.16s ease-out,
    background 0.16s ease-out;
}

.platform-nav-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 42px rgba(0, 0, 0, 0.65);
  border-color: rgba(200, 158, 138, 0.9);
  background: linear-gradient(135deg,
              rgba(200, 158, 138, 0.14),
              rgba(0, 0, 0, 0.55));
}


/* Current page highlight */

.platform-nav-item--current {
  border-color: rgba(200, 158, 138, 0.95);
  background: linear-gradient(135deg,
              rgba(200, 158, 138, 0.28),
              rgba(200, 158, 138, 0.06));
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}


/* Icon + text */

.platform-nav-item:hover .platform-nav-icon {
  color: #ffe7d4;
}

.platform-nav-copy {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.platform-nav-label {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.platform-nav-meta {
  font-size: 0.8rem;
  color: rgba(236, 225, 218, 0.75);
}

/* Responsive tweaks */

@media (max-width: 720px) {
  .platform-nav {
    padding: 3rem 0 3.2rem;
  }

  .platform-nav-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .spheres-hero {
    padding: 3rem 0 2.4rem;
  }

  .spheres-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2rem;
  }

  .spheres-hero-visual {
    justify-content: center;
  }

  .spheres-hero-copy {
    margin-left: 0;
    max-width: 100%;
  }

  .spheres-section-grid,
  .spheres-section-grid--reverse {
    grid-template-columns: minmax(0, 1fr);
  }

  .spheres-section-grid--reverse .spheres-text-block {
    order: 0;
  }
}

@media (max-width: 960px) {
  .platform-links-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .spheres-shell {
    padding-inline: 1.4rem;
  }

  .platform-links-shell {
    padding-inline: 1.4rem;
  }

  .platform-links-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

















/* =============================================
   SCROLL FADE-IN ANIMATIONS
   ============================================= */

/* Base state - hidden */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Revealed state */
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children - for grids/lists */
.fade-in-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fade-in-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.fade-in-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.fade-in-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.fade-in-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.fade-in-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.fade-in-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }
.fade-in-stagger.is-visible > *:nth-child(7) { transition-delay: 480ms; }
.fade-in-stagger.is-visible > *:nth-child(8) { transition-delay: 560ms; }
.fade-in-stagger.is-visible > *:nth-child(9) { transition-delay: 640ms; }
.fade-in-stagger.is-visible > *:nth-child(10) { transition-delay: 720ms; }
.fade-in-stagger.is-visible > *:nth-child(11) { transition-delay: 800ms; }
.fade-in-stagger.is-visible > *:nth-child(12) { transition-delay: 880ms; }

.fade-in-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Variants */
.fade-in--slow {
  transition-duration: 0.9s;
}

.fade-in--up {
  transform: translateY(40px);
}

.fade-in--scale {
  transform: translateY(20px) scale(0.95);
}

.fade-in--scale.is-visible {
  transform: translateY(0) scale(1);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .fade-in-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}















/* GADURA COOKIE CONSENT STYLES */
/* Screen reader only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== COOKIE BANNER ===== */

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--card-bg, #ffffff);
  border-top: 1px solid var(--border-subtle, #e5ddd7);
  box-shadow: 0 -8px 40px rgba(42, 38, 35, 0.12);
  padding: 1.5rem 1.5rem;
  
  /* Hidden by default */
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: 
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease,
    visibility 0.4s ease;
}

.cookie-banner.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.cookie-content {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.cookie-text {
  flex: 1;
}

.cookie-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main, #2a2623);
  margin: 0 0 0.4rem;
}

.cookie-desc {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-muted, #7a746f);
  margin: 0;
}

.cookie-link {
  color: var(--accent-strong, #b47b68);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

.cookie-link:hover {
  color: var(--text-main, #2a2623);
}

.cookie-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* ===== COOKIE BUTTONS ===== */

.cookie-btn {
  font-family: 'Outfit', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.75rem 1.4rem;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: 
    background 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
  white-space: nowrap;
}

.cookie-btn:hover {
  transform: translateY(-1px);
}

.cookie-btn:active {
  transform: translateY(0);
}

.cookie-btn-primary {
  background: linear-gradient(135deg, var(--accent, #c89e8a), var(--accent-strong, #b47b68));
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(200, 158, 138, 0.3);
}

.cookie-btn-primary:hover {
  box-shadow: 0 6px 20px rgba(200, 158, 138, 0.4);
}

.cookie-btn-secondary {
  background: transparent;
  color: var(--text-main, #2a2623);
  border: 1.5px solid var(--border-subtle, #e5ddd7);
}

.cookie-btn-secondary:hover {
  background: var(--accent-soft, rgba(200, 158, 138, 0.1));
  border-color: var(--accent, #c89e8a);
}

/* ===== COOKIE MODAL ===== */

.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  
  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  transition: 
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.cookie-modal.is-visible {
  opacity: 1;
  visibility: visible;
}

.cookie-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(42, 38, 35, 0.5);
  backdrop-filter: blur(4px);
}

.cookie-modal-content {
  position: relative;
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  background: var(--card-bg, #ffffff);
  border-radius: 1.25rem;
  box-shadow: 
    0 25px 80px rgba(42, 38, 35, 0.25),
    0 0 0 1px rgba(42, 38, 35, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  
  /* Animation */
  transform: translateY(20px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.cookie-modal.is-visible .cookie-modal-content {
  transform: translateY(0) scale(1);
}

.cookie-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.75rem 1rem;
  border-bottom: 1px solid var(--border-subtle, #e5ddd7);
}

.cookie-modal-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-main, #2a2623);
  margin: 0;
}

.cookie-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--text-muted, #7a746f);
  cursor: pointer;
  transition: 
    background 0.15s ease,
    color 0.15s ease;
}

.cookie-modal-close:hover {
  background: var(--accent-soft, rgba(200, 158, 138, 0.14));
  color: var(--text-main, #2a2623);
}

.cookie-modal-body {
  padding: 1.25rem 1.75rem;
  overflow-y: auto;
  flex: 1;
}

.cookie-modal-intro {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-muted, #7a746f);
  margin: 0 0 1.5rem;
}

/* ===== COOKIE CATEGORIES ===== */

.cookie-category {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-subtle, #e5ddd7);
}

.cookie-category:last-child {
  border-bottom: none;
}

.cookie-category-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.cookie-category-info {
  flex: 1;
}

.cookie-category-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main, #2a2623);
  margin: 0 0 0.3rem;
}

.cookie-category-desc {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-muted, #7a746f);
  margin: 0;
}

/* ===== TOGGLE SWITCH ===== */

.cookie-toggle {
  flex-shrink: 0;
}

.cookie-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cookie-toggle-label {
  display: block;
  width: 48px;
  height: 28px;
  background: #d8d3ce;
  border-radius: 50px;
  cursor: pointer;
  transition: background 0.25s ease;
  position: relative;
}

.cookie-toggle-switch {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cookie-toggle input:checked + .cookie-toggle-label {
  background: var(--accent-strong, #b47b68);
}

.cookie-toggle input:checked + .cookie-toggle-label .cookie-toggle-switch {
  transform: translateX(20px);
}

.cookie-toggle input:focus-visible + .cookie-toggle-label {
  outline: 2px solid var(--accent, #c89e8a);
  outline-offset: 2px;
}

/* Disabled state */
.cookie-toggle-disabled .cookie-toggle-label {
  cursor: not-allowed;
  opacity: 0.7;
}

.cookie-toggle-disabled input:checked + .cookie-toggle-label {
  background: #a8a29e;
}

/* ===== MODAL FOOTER ===== */

.cookie-modal-footer {
  padding: 1rem 1.75rem 1.5rem;
  border-top: 1px solid var(--border-subtle, #e5ddd7);
  display: flex;
  justify-content: flex-end;
}

.cookie-modal-footer .cookie-btn {
  min-width: 160px;
}

/* ===== RESPONSIVE - TABLET & MOBILE ===== */

@media (max-width: 768px) {
  .cookie-banner {
    padding: 1.25rem 1rem;
  }
  
  .cookie-content {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
  }
  
  .cookie-actions {
    flex-direction: column;
    width: 100%;
  }
  
  .cookie-btn {
    width: 100%;
    justify-content: center;
    padding: 0.9rem 1.5rem;
  }
  
  /* Reorder buttons on mobile: Accept first, then Reject, then Settings */
  .cookie-actions {
    display: flex;
    flex-direction: column;
  }
  
  #cookie-accept {
    order: 1;
  }
  
  #cookie-reject {
    order: 2;
  }
  
  #cookie-settings-btn {
    order: 3;
  }
  
  .cookie-modal-content {
    max-height: 85vh;
    border-radius: 1rem;
  }
  
  .cookie-modal-header,
  .cookie-modal-body,
  .cookie-modal-footer {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  
  .cookie-modal-footer .cookie-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .cookie-title {
    font-size: 1rem;
  }
  
  .cookie-desc {
    font-size: 0.85rem;
  }
  
  .cookie-modal-title {
    font-size: 1.15rem;
  }
  
  .cookie-category-header {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  
  .cookie-toggle {
    width: 100%;
    display: flex;
    justify-content: flex-start;
  }
}

/* ===== REDUCED MOTION ===== */

@media (prefers-reduced-motion: reduce) {
  .cookie-banner,
  .cookie-modal,
  .cookie-modal-content,
  .cookie-toggle-label,
  .cookie-toggle-switch,
  .cookie-btn {
    transition-duration: 0.01ms !important;
  }
}

/* ===== DARK MODE SUPPORT (Optional) ===== */
/* Uncomment if you add dark mode to Gadura

@media (prefers-color-scheme: dark) {
  .cookie-banner {
    background: #1a1918;
    border-color: #3a3635;
  }
  
  .cookie-modal-content {
    background: #1a1918;
  }
  
  .cookie-modal-header,
  .cookie-category,
  .cookie-modal-footer {
    border-color: #3a3635;
  }
  
  .cookie-title,
  .cookie-modal-title,
  .cookie-category-title {
    color: #f5f5f5;
  }
  
  .cookie-desc,
  .cookie-modal-intro,
  .cookie-category-desc {
    color: #a8a29e;
  }
  
  .cookie-btn-secondary {
    color: #f5f5f5;
    border-color: #4a4645;
  }
  
  .cookie-btn-secondary:hover {
    background: rgba(200, 158, 138, 0.15);
  }
  
  .cookie-toggle-label {
    background: #4a4645;
  }
}

*/








/* =============================================
   NOTE PAGE — A Letter from Gadura's Creator
   With obvious, delightful floating elements
   ============================================= */

/* =============================================
   CSS VARIABLES & BASE
   ============================================= */

.note-page {
  --note-bg: #fdfbf9;
  --note-bg-warm: #f8f3ee;
  --note-text: #2a2420;
  --note-text-soft: #5a524b;
  --note-text-muted: #8a827a;
  --note-accent: #b47b68;
  --note-accent-soft: rgba(180, 123, 104, 0.12);
  --note-accent-glow: rgba(200, 158, 138, 0.25);
  --note-gold: #c9a86c;
  --note-cream: #f5efe8;
  
  background: var(--note-bg);
  min-height: 100vh;
  overflow-x: hidden;
}

/* =============================================
   ATMOSPHERIC BACKGROUND
   ============================================= */

.note-atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.note-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0;
  animation: glowFadeIn 3s ease forwards;
}

.note-glow--1 {
  width: 600px;
  height: 600px;
  top: -200px;
  right: -150px;
  background: radial-gradient(circle, rgba(200, 158, 138, 0.4) 0%, transparent 70%);
  animation-delay: 0.5s;
}

.note-glow--2 {
  width: 500px;
  height: 500px;
  bottom: 20%;
  left: -200px;
  background: radial-gradient(circle, rgba(201, 168, 108, 0.25) 0%, transparent 70%);
  animation-delay: 1s;
}

.note-glow--3 {
  width: 400px;
  height: 400px;
  bottom: -100px;
  right: 20%;
  background: radial-gradient(circle, rgba(180, 123, 104, 0.25) 0%, transparent 70%);
  animation-delay: 1.5s;
}

@keyframes glowFadeIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* =============================================
   FLOATING ELEMENTS - THE MAGIC! ✨
   ============================================= */

.floaties {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.5s ease;
}

.floaty {
  position: absolute;
  font-weight: 400;
  opacity: 0;
  animation: floatyAppear 1s ease forwards;
}

/* Different appearance delays for staggered entry */
.floaty--1 { animation-delay: 0.2s; }
.floaty--2 { animation-delay: 0.4s; }
.floaty--3 { animation-delay: 0.6s; }
.floaty--4 { animation-delay: 0.8s; }
.floaty--5 { animation-delay: 1.0s; }
.floaty--6 { animation-delay: 1.2s; }
.floaty--7 { animation-delay: 0.3s; }
.floaty--8 { animation-delay: 0.5s; }
.floaty--9 { animation-delay: 0.7s; }
.floaty--10 { animation-delay: 0.9s; }
.floaty--11 { animation-delay: 0.15s; }
.floaty--12 { animation-delay: 0.35s; }
.floaty--13 { animation-delay: 0.55s; }
.floaty--14 { animation-delay: 0.75s; }
.floaty--15 { animation-delay: 0.95s; }
.floaty--16 { animation-delay: 0.25s; }
.floaty--17 { animation-delay: 0.65s; }
.floaty--18 { animation-delay: 1.05s; }
.floaty--19 { animation-delay: 0.45s; }
.floaty--20 { animation-delay: 0.85s; }
.floaty--21 { animation-delay: 1.15s; }
.floaty--22 { animation-delay: 0.5s; }
.floaty--23 { animation-delay: 1.1s; }
.floaty--24 { animation-delay: 0.3s; }
.floaty--25 { animation-delay: 0.7s; }
.floaty--26 { animation-delay: 1.0s; }

@keyframes floatyAppear {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

/* ===== STARS ===== */
.floaty--star {
  color: var(--note-gold);
  font-size: 28px;
  text-shadow: 0 0 20px rgba(201, 168, 108, 0.6);
}

.floaty--1 {
  top: 12%;
  left: 8%;
  animation: floatyAppear 1s ease forwards, starFloat1 6s ease-in-out infinite 1.2s;
}

.floaty--2 {
  top: 18%;
  right: 12%;
  font-size: 22px;
  animation: floatyAppear 1s ease forwards, starFloat2 7s ease-in-out infinite 1.4s;
}

.floaty--3 {
  top: 45%;
  left: 5%;
  font-size: 18px;
  animation: floatyAppear 1s ease forwards, starFloat3 5s ease-in-out infinite 1.6s;
}

.floaty--4 {
  top: 55%;
  right: 8%;
  font-size: 24px;
  animation: floatyAppear 1s ease forwards, starFloat1 8s ease-in-out infinite 1.8s;
}

.floaty--5 {
  top: 75%;
  left: 12%;
  font-size: 20px;
  animation: floatyAppear 1s ease forwards, starFloat2 6s ease-in-out infinite 2s;
}

.floaty--6 {
  top: 35%;
  right: 18%;
  font-size: 16px;
  animation: floatyAppear 1s ease forwards, starFloat3 7s ease-in-out infinite 1.2s;
}

@keyframes starFloat1 {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  25% { transform: translateY(-20px) rotate(15deg) scale(1.1); }
  50% { transform: translateY(-10px) rotate(-10deg) scale(1); }
  75% { transform: translateY(-25px) rotate(5deg) scale(1.15); }
}

@keyframes starFloat2 {
  0%, 100% { transform: translateY(0) translateX(0) scale(1); }
  33% { transform: translateY(-15px) translateX(10px) scale(1.2); }
  66% { transform: translateY(-25px) translateX(-5px) scale(0.9); }
}

@keyframes starFloat3 {
  0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.8; }
  50% { transform: rotate(180deg) scale(1.3); opacity: 1; }
}

/* ===== SPARKLES ===== */
.floaty--sparkle {
  color: var(--note-accent);
  font-size: 32px;
  text-shadow: 0 0 15px rgba(180, 123, 104, 0.5);
}

.floaty--7 {
  top: 25%;
  left: 15%;
  animation: floatyAppear 1s ease forwards, sparkleFloat 4s ease-in-out infinite 1.3s;
}

.floaty--8 {
  top: 40%;
  right: 10%;
  font-size: 26px;
  animation: floatyAppear 1s ease forwards, sparkleFloat 5s ease-in-out infinite 1.5s;
}

.floaty--9 {
  top: 65%;
  left: 18%;
  font-size: 22px;
  animation: floatyAppear 1s ease forwards, sparkleFloat 4.5s ease-in-out infinite 1.7s;
}

.floaty--10 {
  top: 80%;
  right: 15%;
  font-size: 28px;
  animation: floatyAppear 1s ease forwards, sparkleFloat 5.5s ease-in-out infinite 1.9s;
}

@keyframes sparkleFloat {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.7; }
  25% { transform: scale(1.4) rotate(45deg); opacity: 1; }
  50% { transform: scale(0.8) rotate(90deg); opacity: 0.6; }
  75% { transform: scale(1.2) rotate(135deg); opacity: 0.9; }
}

/* ===== DOTS ===== */
.floaty--dot {
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, var(--note-accent), var(--note-gold));
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(180, 123, 104, 0.5);
}

.floaty--11 {
  top: 15%;
  left: 25%;
  width: 10px;
  height: 10px;
  animation: floatyAppear 1s ease forwards, dotFloat1 5s ease-in-out infinite 1.15s;
}

.floaty--12 {
  top: 30%;
  right: 25%;
  width: 14px;
  height: 14px;
  animation: floatyAppear 1s ease forwards, dotFloat2 6s ease-in-out infinite 1.35s;
}

.floaty--13 {
  top: 50%;
  left: 3%;
  width: 8px;
  height: 8px;
  animation: floatyAppear 1s ease forwards, dotFloat1 4s ease-in-out infinite 1.55s;
}

.floaty--14 {
  top: 70%;
  right: 5%;
  width: 16px;
  height: 16px;
  animation: floatyAppear 1s ease forwards, dotFloat2 7s ease-in-out infinite 1.75s;
}

.floaty--15 {
  top: 85%;
  left: 30%;
  width: 10px;
  height: 10px;
  animation: floatyAppear 1s ease forwards, dotFloat1 5.5s ease-in-out infinite 1.95s;
}

@keyframes dotFloat1 {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-30px) scale(1.3); }
}

@keyframes dotFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(15px, -20px) scale(1.2); }
  50% { transform: translate(-10px, -35px) scale(0.9); }
  75% { transform: translate(10px, -15px) scale(1.1); }
}

/* ===== CIRCLES (rings) ===== */
.floaty--circle {
  width: 40px;
  height: 40px;
  border: 2px solid var(--note-accent);
  border-radius: 50%;
  opacity: 0.5;
}

.floaty--16 {
  top: 20%;
  right: 22%;
  width: 50px;
  height: 50px;
  animation: floatyAppear 1s ease forwards, circleFloat 8s ease-in-out infinite 1.25s;
}

.floaty--17 {
  top: 60%;
  left: 10%;
  width: 35px;
  height: 35px;
  animation: floatyAppear 1s ease forwards, circleFloat 7s ease-in-out infinite 1.65s;
}

.floaty--18 {
  top: 42%;
  right: 5%;
  width: 28px;
  height: 28px;
  animation: floatyAppear 1s ease forwards, circleFloat 6s ease-in-out infinite 2.05s;
}

@keyframes circleFloat {
  0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.4; }
  25% { transform: rotate(90deg) scale(1.1); opacity: 0.6; }
  50% { transform: rotate(180deg) scale(0.9); opacity: 0.5; }
  75% { transform: rotate(270deg) scale(1.15); opacity: 0.7; }
}

/* ===== DIAMONDS ===== */
.floaty--diamond {
  color: var(--note-gold);
  font-size: 24px;
  text-shadow: 0 0 15px rgba(201, 168, 108, 0.5);
}

.floaty--19 {
  top: 28%;
  left: 6%;
  font-size: 28px;
  animation: floatyAppear 1s ease forwards, diamondFloat 6s ease-in-out infinite 1.45s;
}

.floaty--20 {
  top: 72%;
  right: 20%;
  font-size: 20px;
  animation: floatyAppear 1s ease forwards, diamondFloat 7s ease-in-out infinite 1.85s;
}

.floaty--21 {
  top: 48%;
  left: 22%;
  font-size: 18px;
  color: var(--note-accent);
  animation: floatyAppear 1s ease forwards, diamondFloat 5s ease-in-out infinite 2.15s;
}

@keyframes diamondFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-15px) rotate(45deg); }
  50% { transform: translateY(-25px) rotate(0deg); }
  75% { transform: translateY(-10px) rotate(-45deg); }
}

/* ===== HEARTS ===== */
.floaty--heart {
  color: #e8a598;
  font-size: 22px;
  text-shadow: 0 0 15px rgba(232, 165, 152, 0.6);
}

.floaty--22 {
  top: 22%;
  right: 6%;
  font-size: 26px;
  animation: floatyAppear 1s ease forwards, heartFloat 5s ease-in-out infinite 1.5s;
}

.floaty--23 {
  top: 78%;
  left: 8%;
  font-size: 20px;
  animation: floatyAppear 1s ease forwards, heartFloat 6s ease-in-out infinite 2.1s;
}

@keyframes heartFloat {
  0%, 100% { transform: scale(1) translateY(0); }
  25% { transform: scale(1.2) translateY(-10px); }
  50% { transform: scale(1) translateY(-20px); }
  75% { transform: scale(1.15) translateY(-8px); }
}

/* ===== PLUS SIGNS ===== */
.floaty--plus {
  color: var(--note-accent);
  font-size: 30px;
  font-weight: 300;
  opacity: 0.6;
}

.floaty--24 {
  top: 38%;
  left: 28%;
  font-size: 36px;
  animation: floatyAppear 1s ease forwards, plusFloat 7s ease-in-out infinite 1.3s;
}

.floaty--25 {
  top: 58%;
  right: 28%;
  font-size: 28px;
  animation: floatyAppear 1s ease forwards, plusFloat 6s ease-in-out infinite 1.7s;
}

.floaty--26 {
  top: 82%;
  right: 35%;
  font-size: 24px;
  animation: floatyAppear 1s ease forwards, plusFloat 5s ease-in-out infinite 2s;
}

@keyframes plusFloat {
  0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.5; }
  25% { transform: rotate(90deg) scale(1.1); opacity: 0.7; }
  50% { transform: rotate(180deg) scale(0.9); opacity: 0.6; }
  75% { transform: rotate(270deg) scale(1.05); opacity: 0.8; }
}

/* =============================================
   HEADER
   ============================================= */

.note-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2.5rem;
  transition: all 0.4s ease;
}

.note-header.is-scrolled {
  background: rgba(253, 251, 249, 0.85);
  backdrop-filter: blur(20px);
  padding: 1rem 2.5rem;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.note-header__back {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--note-text-soft);
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0;
  transform: translateX(-10px);
  animation: fadeSlideIn 0.8s ease 0.3s forwards;
  transition: color 0.2s ease;
}

.note-header__back:hover {
  color: var(--note-accent);
}

.note-header__back svg {
  transition: transform 0.2s ease;
}

.note-header__back:hover svg {
  transform: translateX(-3px);
}

.note-header__brand {
  opacity: 0;
  animation: fadeIn 1s ease 0.5s forwards;
}

.note-logo {
  width: 42px;
  height: 42px;
}

.note-logo svg {
  width: 100%;
  height: 100%;
}

/* =============================================
   OPENING SECTION
   ============================================= */

.note-opening {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 2rem 4rem;
}

.note-opening__inner {
  text-align: center;
  max-width: 800px;
}

.note-kicker {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--note-accent);
  margin: 0 0 2rem;
  opacity: 0;
  animation: fadeSlideUp 1s ease 0.3s forwards;
}

.note-title {
  margin: 0 0 4rem;
  line-height: 1.15;
}

.note-title__line {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  color: var(--note-text);
  opacity: 0;
}

.note-title__line--1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  animation: fadeSlideUp 1s ease 0.5s forwards;
}

.note-title__line--2 {
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-style: italic;
  color: var(--note-accent);
  animation: fadeSlideUp 1s ease 0.7s forwards;
}

.note-scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  color: var(--note-text-muted);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  animation: fadeIn 1s ease 1.2s forwards;
  cursor: pointer;
  transition: color 0.3s ease;
}

.note-scroll-hint:hover {
  color: var(--note-accent);
}

.note-scroll-arrow {
  animation: bounce 2s ease infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* =============================================
   THE LETTER SECTION
   ============================================= */

.note-letter-section {
  position: relative;
  z-index: 10;
  padding: 6rem 2rem 8rem;
  background: linear-gradient(180deg, 
    transparent 0%, 
    rgba(248, 243, 238, 0.5) 10%,
    rgba(248, 243, 238, 0.8) 50%,
    rgba(245, 239, 232, 1) 100%
  );
}

.note-letter-container {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
}

/* Decorative Eagle */
.note-eagle {
  position: absolute;
  top: -60px;
  right: -120px;
  width: 300px;
  height: 300px;
  color: var(--note-accent);
  opacity: 0;
  animation: fadeIn 2s ease 0.5s forwards;
  pointer-events: none;
}

@media (max-width: 900px) {
  .note-eagle {
    display: none;
  }
}

/* =============================================
   LETTER CONTENT
   ============================================= */

.note-letter {
  position: relative;
}

.note-paragraph {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.note-paragraph.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.note-paragraph p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  line-height: 1.9;
  color: var(--note-text);
  margin: 0 0 1.8rem;
}

.note-paragraph em {
  font-style: italic;
  color: var(--note-accent);
}

/* Drop Cap */
.note-paragraph--first {
  margin-bottom: 2.5rem;
}

.note-dropcap {
  float: left;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 5rem;
  line-height: 0.8;
  font-weight: 600;
  color: var(--note-accent);
  margin-right: 0.15em;
  margin-top: 0.1em;
}

/* Dividers */
.note-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 2.5rem 0;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.note-divider.is-visible {
  opacity: 1;
  transform: scale(1);
}

.note-divider__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--note-accent), var(--note-gold));
}

.note-divider__line {
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--note-accent), transparent);
}

.note-divider--final {
  padding: 3rem 0;
}

/* Highlight Box */
.note-highlight {
  position: relative;
  margin: 3rem 0;
  padding: 2rem 2.5rem;
  background: linear-gradient(135deg, 
    rgba(180, 123, 104, 0.08) 0%, 
    rgba(201, 168, 108, 0.06) 100%
  );
  border-left: 3px solid var(--note-accent);
  border-radius: 0 1rem 1rem 0;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.note-highlight.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.note-highlight p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.3rem, 2.8vw, 1.6rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.8;
  color: var(--note-text);
  margin: 0;
}

/* Mission Block */
.note-mission {
  text-align: center;
  margin: 3.5rem 0;
  padding: 2.5rem 2rem;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.note-mission.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.note-mission__label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--note-accent);
  margin: 0 0 1rem;
}

.note-mission__text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 500;
  line-height: 1.7;
  color: var(--note-text);
  margin: 0;
}

/* Closing Statement */
.note-closing {
  text-align: center;
  margin: 3rem 0;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}

.note-closing.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.note-closing__statement {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  line-height: 1.6;
  color: var(--note-text);
  margin: 0 0 1rem;
}

.note-closing__statement strong {
  display: block;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 600;
  font-style: italic;
  color: var(--note-accent);
  margin-top: 0.3em;
}

.note-closing__vision {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  line-height: 1.8;
  color: var(--note-text-soft);
  margin: 1.5rem 0 0;
}

/* Passion Note */
.note-passion {
  text-align: center;
  margin: 3rem 0 2rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.note-passion.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.note-passion p {
  display: inline-block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-style: italic;
  color: var(--note-text-muted);
  margin: 0;
  padding: 0.8rem 2rem;
  border: 1px solid rgba(180, 123, 104, 0.25);
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.6);
}

/* =============================================
   SIGNATURE
   ============================================= */

.note-signature {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 4rem;
  padding-top: 2rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

.note-signature.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.note-signature__line {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--note-accent));
  margin-bottom: 1.2rem;
}

.note-signature__name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.8rem;
  font-style: italic;
  font-weight: 500;
  color: var(--note-text);
  margin: 0;
}

.note-signature__title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--note-text-muted);
  margin: 0.5rem 0 0;
}

/* =============================================
   TAGLINE SECTION
   ============================================= */

.note-tagline-section {
  position: relative;
  z-index: 10;
  padding: 6rem 2rem 8rem;
  background: linear-gradient(180deg, 
    var(--note-cream) 0%, 
    #f0e8df 100%
  );
}

.note-tagline-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.note-tagline-eagle {
  width: 60px;
  height: 60px;
  color: var(--note-accent);
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeIn 1s ease 0.3s forwards, gentlePulse 4s ease infinite 1.3s;
}

@keyframes gentlePulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
}

.note-tagline {
  margin: 0 0 3rem;
}

.note-tagline__brand {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--note-text);
  margin-bottom: 0.5rem;
}

.note-tagline__words {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-style: italic;
  font-weight: 500;
  color: var(--note-accent);
}

.note-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 2.2rem;
  background: linear-gradient(135deg, var(--note-accent), #9f6b5a);
  color: white;
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  border-radius: 50px;
  box-shadow: 
    0 4px 15px rgba(180, 123, 104, 0.35),
    0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.note-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 8px 25px rgba(180, 123, 104, 0.45),
    0 2px 5px rgba(0, 0, 0, 0.1);
}

.note-cta-btn svg {
  transition: transform 0.3s ease;
}

.note-cta-btn:hover svg {
  transform: translateX(3px);
}

/* =============================================
   ANIMATIONS
   ============================================= */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeSlideIn {
  from { 
    opacity: 0; 
    transform: translateX(-10px); 
  }
  to { 
    opacity: 1; 
    transform: translateX(0); 
  }
}

@keyframes fadeSlideUp {
  from { 
    opacity: 0; 
    transform: translateY(20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 768px) {
  .note-header {
    padding: 1.2rem 1.5rem;
  }
  
  .note-header.is-scrolled {
    padding: 0.8rem 1.5rem;
  }
  
  .note-opening {
    padding: 5rem 1.5rem 3rem;
  }
  
  .note-letter-section {
    padding: 4rem 1.5rem 5rem;
  }
  
  .note-highlight {
    padding: 1.5rem 1.8rem;
    margin: 2rem -0.5rem;
  }
  
  .note-dropcap {
    font-size: 4rem;
  }
  
  .note-signature {
    align-items: center;
  }
  
  .note-signature__line {
    background: linear-gradient(90deg, transparent, var(--note-accent), transparent);
  }
  
  .note-tagline-section {
    padding: 4rem 1.5rem 6rem;
  }
  
  /* Adjust floaties for mobile */
  .floaty {
    font-size: 80% !important;
  }
  
  .floaty--dot {
    transform: scale(0.8);
  }
  
  .floaty--circle {
    transform: scale(0.7);
  }
}

@media (max-width: 480px) {
  .note-header__back span {
    display: none;
  }
  
  .note-paragraph p {
    font-size: 1.15rem;
  }
  
  .note-dropcap {
    font-size: 3.5rem;
  }
  
  .note-mission {
    padding: 2rem 1rem;
  }
  
  .note-cta-btn {
    width: 100%;
    justify-content: center;
  }
  
  /* Hide some floaties on very small screens */
  .floaty--6,
  .floaty--10,
  .floaty--15,
  .floaty--18,
  .floaty--21,
  .floaty--26 {
    display: none;
  }
}

/* =============================================
   REDUCED MOTION
   ============================================= */

@media (prefers-reduced-motion: reduce) {
  .floaty,
  .note-glow,
  .note-scroll-arrow,
  .note-tagline-eagle {
    animation: none !important;
    opacity: 0.7;
  }
  
  .note-paragraph,
  .note-highlight,
  .note-mission,
  .note-closing,
  .note-passion,
  .note-signature,
  .note-divider {
    opacity: 1;
    transform: none;
    transition: none;
  }
  
  .note-kicker,
  .note-title__line,
  .note-scroll-hint,
  .note-header__back,
  .note-header__brand {
    opacity: 1;
    transform: none;
    animation: none;
  }
}


/* =============================================
   DARK THEME SECTION - Premium & Classy
   ============================================= */

.note-dark {
  background: linear-gradient(180deg, 
    #0d0b0a 0%,
    #141210 20%,
    #1a1715 50%,
    #141210 80%,
    #0d0b0a 100%
  );
  position: relative;
  overflow: hidden;
}

/* Subtle gradient overlays for depth */
.note-dark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(180deg, 
    rgba(180, 123, 104, 0.08) 0%, 
    transparent 100%
  );
  pointer-events: none;
}

.note-dark::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(0deg, 
    rgba(180, 123, 104, 0.05) 0%, 
    transparent 100%
  );
  pointer-events: none;
}

/* Dark section floaties */
.dark-floaties {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.dark-floaty {
  position: absolute;
  color: var(--note-gold);
  opacity: 0.4;
  font-size: 20px;
  text-shadow: 0 0 30px rgba(201, 168, 108, 0.5);
}

.dark-floaty--1 {
  top: 10%;
  left: 8%;
  animation: darkFloat1 8s ease-in-out infinite;
}

.dark-floaty--2 {
  top: 60%;
  right: 10%;
  font-size: 16px;
  animation: darkFloat2 10s ease-in-out infinite 1s;
}

.dark-floaty--3 {
  top: 30%;
  right: 15%;
  font-size: 24px;
  color: var(--note-accent);
  text-shadow: 0 0 30px rgba(180, 123, 104, 0.4);
  animation: darkFloat1 9s ease-in-out infinite 2s;
}

.dark-floaty--4 {
  top: 80%;
  left: 12%;
  font-size: 18px;
  animation: darkFloat2 7s ease-in-out infinite 0.5s;
}

.dark-floaty--5 {
  top: 45%;
  left: 5%;
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, var(--note-accent), var(--note-gold));
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(180, 123, 104, 0.5);
  animation: darkFloat1 6s ease-in-out infinite 1.5s;
}

.dark-floaty--6 {
  top: 70%;
  right: 8%;
  width: 6px;
  height: 6px;
  background: var(--note-gold);
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(201, 168, 108, 0.6);
  animation: darkFloat2 8s ease-in-out infinite 2.5s;
}

@keyframes darkFloat1 {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
  50% { transform: translateY(-20px) scale(1.1); opacity: 0.6; }
}

@keyframes darkFloat2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.25; }
  33% { transform: translate(10px, -15px) rotate(120deg); opacity: 0.5; }
  66% { transform: translate(-5px, -25px) rotate(240deg); opacity: 0.35; }
}

/* ===== DARK THEME TEXT COLORS ===== */

.note-dark .note-letter-container {
  position: relative;
  z-index: 2;
}

.note-dark .note-paragraph p {
  color: rgba(250, 248, 246, 0.9);
}

.note-dark .note-paragraph em {
  color: #d4a574;
}

.note-dark .note-dropcap {
  color: var(--note-accent);
  text-shadow: 0 0 40px rgba(180, 123, 104, 0.3);
}

.note-dark .note-divider__dot {
  background: linear-gradient(135deg, var(--note-accent), var(--note-gold));
  box-shadow: 0 0 10px rgba(180, 123, 104, 0.4);
}

.note-dark .note-divider__line {
  background: linear-gradient(90deg, transparent, var(--note-accent), transparent);
}

/* Dark highlight box */
.note-dark .note-highlight {
  background: linear-gradient(135deg, 
    rgba(180, 123, 104, 0.12) 0%, 
    rgba(201, 168, 108, 0.08) 100%
  );
  border-left-color: var(--note-accent);
  border-radius: 0 1rem 1rem 0;
  backdrop-filter: blur(10px);
}

.note-dark .note-highlight p {
  color: rgba(250, 248, 246, 0.95);
}

/* Dark mission block */
.note-dark .note-mission {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 1.5rem;
  border: 1px solid rgba(180, 123, 104, 0.15);
}

.note-dark .note-mission__label {
  color: var(--note-gold);
}

.note-dark .note-mission__text {
  color: rgba(250, 248, 246, 0.9);
}

/* Dark closing */
.note-dark .note-closing__statement {
  color: rgba(250, 248, 246, 0.95);
}

.note-dark .note-closing__statement strong {
  color: var(--note-accent);
  text-shadow: 0 0 30px rgba(180, 123, 104, 0.3);
}

.note-dark .note-closing__vision {
  color: rgba(250, 248, 246, 0.7);
}

/* Dark passion badge */
.note-dark .note-passion p {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(180, 123, 104, 0.3);
  color: rgba(250, 248, 246, 0.8);
  backdrop-filter: blur(10px);
}

/* Dark signature */
.note-dark .note-signature__line {
  background: linear-gradient(90deg, transparent, var(--note-gold));
}

.note-dark .note-signature__name {
  color: rgba(250, 248, 246, 0.95);
}

.note-dark .note-signature__title {
  color: rgba(250, 248, 246, 0.5);
}

/* Dark eagle decoration */
.note-dark .note-eagle {
  color: var(--note-gold);
  opacity: 0.15;
}

/* ===== DARK TAGLINE SECTION ===== */

.note-tagline-section {
  background: linear-gradient(180deg, 
    #0d0b0a 0%,
    #1a1715 50%,
    #0d0b0a 100%
  );
}

.note-tagline-eagle {
  color: var(--note-gold);
  filter: drop-shadow(0 0 20px rgba(201, 168, 108, 0.3));
}

.note-tagline__brand {
  color: rgba(250, 248, 246, 0.95);
}

.note-tagline__words {
  color: var(--note-accent);
  text-shadow: 0 0 40px rgba(180, 123, 104, 0.2);
}

.note-cta-btn {
  box-shadow: 
    0 4px 20px rgba(180, 123, 104, 0.4),
    0 0 40px rgba(180, 123, 104, 0.15);
}

.note-cta-btn:hover {
  box-shadow: 
    0 8px 30px rgba(180, 123, 104, 0.5),
    0 0 60px rgba(180, 123, 104, 0.2);
}


/* =============================================
   DARK SECTION - ENHANCED ANIMATIONS & DEPTH
   ============================================= */

/* Mouse-following glow effect */
.note-dark {
  --mouse-x: 50%;
  --mouse-y: 50%;
}

.note-dark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    800px circle at var(--mouse-x) var(--mouse-y),
    rgba(180, 123, 104, 0.06) 0%,
    transparent 50%
  );
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.3s ease;
}

/* ===== ENHANCED REVEAL ANIMATIONS ===== */

.note-dark .note-paragraph {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  filter: blur(4px);
  transition: 
    opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1) var(--reveal-delay, 0s),
    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) var(--reveal-delay, 0s),
    filter 0.8s cubic-bezier(0.4, 0, 0.2, 1) var(--reveal-delay, 0s);
}

.note-dark .note-paragraph.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.note-dark .note-paragraph p {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.note-dark .note-paragraph.is-visible p {
  opacity: 1;
  transform: translateY(0);
}

/* ===== GLOWING DROPCAP ===== */

.note-dark .note-dropcap {
  position: relative;
  color: var(--note-accent);
  text-shadow: 
    0 0 20px rgba(180, 123, 104, 0.5),
    0 0 40px rgba(180, 123, 104, 0.3),
    0 0 60px rgba(180, 123, 104, 0.2);
  animation: dropcapGlow 3s ease-in-out infinite;
}

@keyframes dropcapGlow {
  0%, 100% { 
    text-shadow: 
      0 0 20px rgba(180, 123, 104, 0.5),
      0 0 40px rgba(180, 123, 104, 0.3),
      0 0 60px rgba(180, 123, 104, 0.2);
  }
  50% { 
    text-shadow: 
      0 0 30px rgba(180, 123, 104, 0.7),
      0 0 60px rgba(180, 123, 104, 0.5),
      0 0 90px rgba(180, 123, 104, 0.3);
  }
}

/* ===== DIVIDER ENHANCEMENTS ===== */

.note-dark .note-divider {
  opacity: 0;
  transform: scaleX(0.5);
  transition: 
    opacity 0.6s ease var(--reveal-delay, 0s),
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) var(--reveal-delay, 0s);
}

.note-dark .note-divider.is-visible {
  opacity: 1;
  transform: scaleX(1);
}

.note-dark .note-divider__dot {
  animation: dotPulse 2s ease-in-out infinite;
  box-shadow: 0 0 15px rgba(180, 123, 104, 0.5);
}

.note-dark .note-divider__dot:nth-child(2) {
  animation-delay: 0.3s;
}

.note-dark .note-divider__dot:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes dotPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.4); opacity: 1; }
}

/* ===== HIGHLIGHT BOX - PREMIUM CARD ===== */

.note-dark .note-highlight {
  opacity: 0;
  transform: translateX(-30px) scale(0.95);
  filter: blur(4px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) var(--reveal-delay, 0s);
  
  background: linear-gradient(135deg, 
    rgba(180, 123, 104, 0.1) 0%, 
    rgba(201, 168, 108, 0.05) 100%
  );
  border: 1px solid rgba(180, 123, 104, 0.2);
  border-left: 3px solid var(--note-accent);
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.3),
    0 0 60px rgba(180, 123, 104, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
}

.note-dark .note-highlight.is-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: blur(0);
}

.note-dark .note-highlight::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 20px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 6rem;
  color: var(--note-accent);
  opacity: 0.15;
  line-height: 1;
}

/* ===== MISSION BLOCK - GLASSY CARDS ===== */

.note-dark .note-mission {
  opacity: 0;
  transform: translateY(50px) scale(0.95);
  filter: blur(4px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) var(--reveal-delay, 0s);
  
  background: linear-gradient(145deg, 
    rgba(255, 255, 255, 0.04) 0%, 
    rgba(255, 255, 255, 0.01) 100%
  );
  border: 1px solid rgba(180, 123, 104, 0.15);
  border-radius: 1.5rem;
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.4),
    0 0 80px rgba(180, 123, 104, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
}

.note-dark .note-mission.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Animated border glow */
.note-dark .note-mission::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(180, 123, 104, 0.3) 50%,
    transparent 70%
  );
  border-radius: 1.6rem;
  z-index: -1;
  animation: borderGlow 4s linear infinite;
  background-size: 200% 200%;
}

@keyframes borderGlow {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 200%; }
}

.note-dark .note-mission__label {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
}

.note-dark .note-mission.is-visible .note-mission__label {
  opacity: 1;
  transform: translateY(0);
}

.note-dark .note-mission__text {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.5s ease 0.4s, transform 0.5s ease 0.4s;
}

.note-dark .note-mission.is-visible .note-mission__text {
  opacity: 1;
  transform: translateY(0);
}

/* ===== CLOSING - DRAMATIC REVEAL ===== */

.note-dark .note-closing {
  opacity: 0;
  transform: translateY(60px) scale(0.9);
  filter: blur(6px);
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1) var(--reveal-delay, 0s);
}

.note-dark .note-closing.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.note-dark .note-closing__statement strong {
  display: inline-block;
  background: linear-gradient(135deg, var(--note-accent), var(--note-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  animation: movementGlow 3s ease-in-out infinite;
}

@keyframes movementGlow {
  0%, 100% { 
    filter: drop-shadow(0 0 20px rgba(180, 123, 104, 0.4));
  }
  50% { 
    filter: drop-shadow(0 0 40px rgba(180, 123, 104, 0.7));
  }
}

/* Sparkle decoration around "It's a movement" */
.note-dark .note-closing__statement {
  position: relative;
}

.note-dark .note-closing__statement::before,
.note-dark .note-closing__statement::after {
  content: '✦';
  position: absolute;
  color: var(--note-gold);
  font-size: 1rem;
  opacity: 0;
  transition: opacity 0.5s ease 0.8s, transform 0.5s ease 0.8s;
}

.note-dark .note-closing__statement::before {
  top: 50%;
  left: -30px;
  transform: translateY(-50%) scale(0.5);
}

.note-dark .note-closing__statement::after {
  top: 50%;
  right: -30px;
  transform: translateY(-50%) scale(0.5);
}

.note-dark .note-closing.is-visible .note-closing__statement::before,
.note-dark .note-closing.is-visible .note-closing__statement::after {
  opacity: 0.6;
  transform: translateY(-50%) scale(1);
  animation: sideSparkle 2s ease-in-out infinite;
}

.note-dark .note-closing.is-visible .note-closing__statement::after {
  animation-delay: 1s;
}

@keyframes sideSparkle {
  0%, 100% { opacity: 0.4; transform: translateY(-50%) scale(1) rotate(0deg); }
  50% { opacity: 0.8; transform: translateY(-50%) scale(1.2) rotate(180deg); }
}

/* ===== PASSION BADGE - FLOATING GLOW ===== */

.note-dark .note-passion {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease var(--reveal-delay, 0s);
}

.note-dark .note-passion.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.note-dark .note-passion p {
  position: relative;
  background: linear-gradient(135deg, 
    rgba(180, 123, 104, 0.1) 0%, 
    rgba(201, 168, 108, 0.05) 100%
  );
  border: 1px solid rgba(180, 123, 104, 0.25);
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(180, 123, 104, 0.1);
  animation: passionFloat 4s ease-in-out infinite;
}

@keyframes passionFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.note-dark .note-passion p::before {
  content: '♥';
  margin-right: 0.5rem;
  color: #e8a598;
  animation: heartBeat 1.5s ease-in-out infinite;
}

@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.2); }
  50% { transform: scale(1); }
  75% { transform: scale(1.1); }
}

/* ===== SIGNATURE - ELEGANT FADE ===== */

.note-dark .note-signature {
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s ease var(--reveal-delay, 0s);
}

.note-dark .note-signature.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.note-dark .note-signature__line {
  width: 0;
  transition: width 0.8s ease 0.3s;
  background: linear-gradient(90deg, transparent, var(--note-gold), var(--note-accent));
  height: 2px;
  box-shadow: 0 0 10px rgba(201, 168, 108, 0.5);
}

.note-dark .note-signature.is-visible .note-signature__line {
  width: 80px;
}

.note-dark .note-signature__name {
  opacity: 0;
  transform: translateX(20px);
  transition: all 0.6s ease 0.5s;
}

.note-dark .note-signature.is-visible .note-signature__name {
  opacity: 1;
  transform: translateX(0);
}

.note-dark .note-signature__title {
  opacity: 0;
  transition: opacity 0.6s ease 0.7s;
}

.note-dark .note-signature.is-visible .note-signature__title {
  opacity: 1;
}

/* ===== EMPHASIZED TEXT STYLING ===== */

.note-dark .note-paragraph p strong {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}

.note-dark .note-paragraph p em {
  color: var(--note-gold);
  font-style: italic;
  text-shadow: 0 0 20px rgba(201, 168, 108, 0.3);
}

/* ===== SUBTLE LINE DECORATIONS ===== */

.note-dark .note-paragraph--first::after {
  content: '';
  display: block;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, var(--note-accent), transparent);
  margin-top: 2rem;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: all 0.6s ease 0.5s;
}

.note-dark .note-paragraph--first.is-visible::after {
  opacity: 0.5;
  transform: scaleX(1);
}

/* =============================================
   THE VISION CARD - Dramatic & Premium
   ============================================= */

.note-vision-card {
  position: relative;
  margin: 5rem 0;
  padding: 3.5rem 3rem;
  border-radius: 1.5rem;
  
  /* Glass effect */
  background: linear-gradient(145deg, 
    rgba(255, 255, 255, 0.06) 0%, 
    rgba(255, 255, 255, 0.02) 50%,
    rgba(180, 123, 104, 0.05) 100%
  );
  backdrop-filter: blur(30px);
  
  /* Initial state for animation */
  opacity: 0;
  transform: translateY(80px) scale(0.9) rotateX(10deg);
  filter: blur(10px);
  transition: 
    opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 1s ease;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.note-vision-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1) rotateX(0deg);
  filter: blur(0);
}

/* Animated glow behind card */
.vision-glow {
  position: absolute;
  inset: -20px;
  border-radius: 2rem;
  background: radial-gradient(
    ellipse at center,
    rgba(180, 123, 104, 0.3) 0%,
    rgba(201, 168, 108, 0.15) 40%,
    transparent 70%
  );
  opacity: 0;
  filter: blur(40px);
  z-index: -2;
  transition: opacity 1s ease 0.5s;
  animation: visionGlowPulse 4s ease-in-out infinite;
}

.note-vision-card.is-visible .vision-glow {
  opacity: 1;
}

@keyframes visionGlowPulse {
  0%, 100% { 
    transform: scale(1);
    opacity: 0.6;
  }
  50% { 
    transform: scale(1.1);
    opacity: 1;
  }
}

/* Animated border */
.vision-border {
  position: absolute;
  inset: 0;
  border-radius: 1.5rem;
  padding: 2px;
  background: linear-gradient(
    135deg,
    rgba(180, 123, 104, 0.5) 0%,
    rgba(201, 168, 108, 0.3) 25%,
    rgba(180, 123, 104, 0.1) 50%,
    rgba(201, 168, 108, 0.3) 75%,
    rgba(180, 123, 104, 0.5) 100%
  );
  background-size: 400% 400%;
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: borderRotate 6s linear infinite;
  opacity: 0;
  transition: opacity 0.8s ease 0.3s;
}

.note-vision-card.is-visible .vision-border {
  opacity: 1;
}

@keyframes borderRotate {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Corner accents */
.vision-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.vision-corner::before,
.vision-corner::after {
  content: '';
  position: absolute;
  background: linear-gradient(135deg, var(--note-accent), var(--note-gold));
  border-radius: 2px;
}

.vision-corner::before {
  width: 100%;
  height: 2px;
}

.vision-corner::after {
  width: 2px;
  height: 100%;
}

.vision-corner--tl { top: -1px; left: -1px; }
.vision-corner--tl::before { top: 0; left: 0; }
.vision-corner--tl::after { top: 0; left: 0; }

.vision-corner--tr { top: -1px; right: -1px; }
.vision-corner--tr::before { top: 0; right: 0; }
.vision-corner--tr::after { top: 0; right: 0; }

.vision-corner--bl { bottom: -1px; left: -1px; }
.vision-corner--bl::before { bottom: 0; left: 0; }
.vision-corner--bl::after { bottom: 0; left: 0; }

.vision-corner--br { bottom: -1px; right: -1px; }
.vision-corner--br::before { bottom: 0; right: 0; }
.vision-corner--br::after { bottom: 0; right: 0; }

.note-vision-card.is-visible .vision-corner--tl {
  opacity: 1;
  transform: translate(0, 0);
  transition-delay: 0.8s;
}

.note-vision-card.is-visible .vision-corner--tr {
  opacity: 1;
  transform: translate(0, 0);
  transition-delay: 0.9s;
}

.note-vision-card.is-visible .vision-corner--bl {
  opacity: 1;
  transform: translate(0, 0);
  transition-delay: 1s;
}

.note-vision-card.is-visible .vision-corner--br {
  opacity: 1;
  transform: translate(0, 0);
  transition-delay: 1.1s;
}

/* Floating particles */
.vision-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 1.5rem;
}

.vision-particle {
  position: absolute;
  color: var(--note-gold);
  font-size: 14px;
  opacity: 0;
  text-shadow: 0 0 20px rgba(201, 168, 108, 0.8);
}

.note-vision-card.is-visible .vision-particle {
  animation: particleFloat 3s ease-in-out infinite;
}

.vision-particle:nth-child(1) {
  top: 10%;
  left: 5%;
  animation-delay: 1.2s;
}

.vision-particle:nth-child(2) {
  top: 20%;
  right: 8%;
  font-size: 12px;
  animation-delay: 1.5s;
}

.vision-particle:nth-child(3) {
  bottom: 25%;
  left: 10%;
  font-size: 10px;
  color: var(--note-accent);
  animation-delay: 1.8s;
}

.vision-particle:nth-child(4) {
  bottom: 15%;
  right: 12%;
  font-size: 16px;
  animation-delay: 2s;
}

.vision-particle:nth-child(5) {
  top: 50%;
  left: 3%;
  font-size: 8px;
  animation-delay: 2.2s;
}

.vision-particle:nth-child(6) {
  top: 40%;
  right: 5%;
  font-size: 10px;
  animation-delay: 2.4s;
}

@keyframes particleFloat {
  0%, 100% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }
  20% {
    opacity: 0.8;
    transform: translateY(-10px) scale(1);
  }
  80% {
    opacity: 0.6;
    transform: translateY(-25px) scale(0.8);
  }
}

/* Content container */
.vision-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

/* Large quote mark */
.vision-quote-mark {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 8rem;
  line-height: 0.5;
  color: var(--note-accent);
  opacity: 0;
  transform: translateY(30px) scale(0.5);
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s;
  margin-bottom: 1rem;
  text-shadow: 
    0 0 30px rgba(180, 123, 104, 0.4),
    0 0 60px rgba(180, 123, 104, 0.2);
}

.note-vision-card.is-visible .vision-quote-mark {
  opacity: 0.3;
  transform: translateY(0) scale(1);
}

/* Main text */
.vision-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.8;
  color: rgba(250, 248, 246, 0.95);
  margin: 0;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease 0.6s;
}

.note-vision-card.is-visible .vision-text {
  opacity: 1;
  transform: translateY(0);
}

/* Highlighted phrase */
.vision-highlight {
  position: relative;
  display: inline-block;
  color: #fff;
  font-weight: 600;
  padding: 0.1em 0.4em;
  margin: 0 0.1em;
  
  background: linear-gradient(135deg, 
    rgba(180, 123, 104, 0.4) 0%, 
    rgba(201, 168, 108, 0.3) 100%
  );
  border-radius: 0.3em;
  
  animation: highlightPulse 2s ease-in-out infinite;
  animation-play-state: paused;
}

.note-vision-card.is-visible .vision-highlight {
  animation-play-state: running;
}

@keyframes highlightPulse {
  0%, 100% {
    box-shadow: 
      0 0 20px rgba(180, 123, 104, 0.3),
      inset 0 0 20px rgba(180, 123, 104, 0.1);
  }
  50% {
    box-shadow: 
      0 0 40px rgba(180, 123, 104, 0.5),
      inset 0 0 30px rgba(180, 123, 104, 0.2);
  }
}

/* Decorative line */
.vision-line {
  width: 0;
  height: 2px;
  margin: 2rem auto 1.5rem;
  background: linear-gradient(90deg, 
    transparent, 
    var(--note-accent), 
    var(--note-gold), 
    var(--note-accent), 
    transparent
  );
  border-radius: 2px;
  box-shadow: 0 0 20px rgba(180, 123, 104, 0.5);
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1) 0.8s;
}

.note-vision-card.is-visible .vision-line {
  width: 120px;
}

/* Tag label */
.vision-tag {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--note-gold);
  padding: 0.5rem 1.2rem;
  border: 1px solid rgba(201, 168, 108, 0.3);
  border-radius: 50px;
  background: rgba(201, 168, 108, 0.1);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease 1.2s;
}

.note-vision-card.is-visible .vision-tag {
  opacity: 1;
  transform: translateY(0);
}

/* Hover state - extra magic */
.note-vision-card:hover .vision-glow {
  transform: scale(1.15);
  opacity: 1;
}

.note-vision-card:hover .vision-border {
  animation-duration: 3s;
}

.note-vision-card:hover .vision-highlight {
  animation-duration: 1s;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
  .note-vision-card {
    margin: 3rem -0.5rem;
    padding: 2.5rem 1.8rem;
  }
  
  .vision-quote-mark {
    font-size: 5rem;
  }
  
  .vision-particle:nth-child(5),
  .vision-particle:nth-child(6) {
    display: none;
  }
}

@media (max-width: 480px) {
  .note-vision-card {
    padding: 2rem 1.5rem;
  }
  
  .vision-quote-mark {
    font-size: 4rem;
  }
  
  .vision-corner {
    width: 15px;
    height: 15px;
  }
}

/* ===== REDUCED MOTION ===== */

@media (prefers-reduced-motion: reduce) {
  .note-vision-card,
  .vision-glow,
  .vision-border,
  .vision-quote-mark,
  .vision-text,
  .vision-line,
  .vision-tag,
  .vision-corner,
  .vision-particle,
  .vision-highlight {
    animation: none !important;
    transition: opacity 0.3s ease !important;
    transform: none !important;
    filter: none !important;
  }
  
  .note-vision-card.is-visible,
  .note-vision-card.is-visible .vision-glow,
  .note-vision-card.is-visible .vision-border,
  .note-vision-card.is-visible .vision-quote-mark,
  .note-vision-card.is-visible .vision-text,
  .note-vision-card.is-visible .vision-tag,
  .note-vision-card.is-visible .vision-corner {
    opacity: 1;
  }
  
  .note-vision-card.is-visible .vision-line {
    width: 120px;
  }
}





/* =============================================
   SIGNATURE - Humble & Elegant
   ============================================= */

.note-dark .note-signature {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  margin-top: 4rem;
  padding: 3rem 0;
  
  /* Initial state */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}

.note-dark .note-signature.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Soft background glow */
.signature-glow {
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  width: 200px;
  height: 150px;
  background: radial-gradient(
    ellipse at center,
    rgba(180, 123, 104, 0.08) 0%,
    transparent 70%
  );
  border-radius: 50%;
  filter: blur(30px);
  opacity: 0;
  transition: opacity 1.5s ease 0.8s;
  pointer-events: none;
  z-index: 0;
}

.note-dark .note-signature.is-visible .signature-glow {
  opacity: 1;
}

/* Top line */
.signature-line-top {
  width: 0;
  height: 1px;
  margin-bottom: 1.5rem;
  background: linear-gradient(90deg, transparent, rgba(180, 123, 104, 0.4));
  transition: width 0.8s ease;
}

.note-dark .note-signature.is-visible .signature-line-top {
  width: 60px;
  transition-delay: 0.3s;
}

/* "With gratitude" */
.signature-closing {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  color: rgba(250, 248, 246, 0.5);
  margin: 0 0 0.8rem;
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.7s ease;
}

.note-dark .note-signature.is-visible .signature-closing {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

/* Name */
.signature-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 500;
  font-style: italic;
  color: rgba(250, 248, 246, 0.95);
  margin: 0;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 1;
  
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.8s ease;
}

.note-dark .note-signature.is-visible .signature-name {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s;
}

/* Title */
.signature-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(250, 248, 246, 0.4);
  margin: 0.6rem 0 0;
  
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.7s ease;
}

.note-dark .note-signature.is-visible .signature-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.9s;
}

/* Small accent star */
.signature-accent {
  position: absolute;
  bottom: 2.5rem;
  right: -30px;
  color: var(--note-gold);
  font-size: 0.7rem;
  opacity: 0;
  transition: opacity 1s ease 1.2s;
}

.note-dark .note-signature.is-visible .signature-accent {
  opacity: 0.4;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
  .note-dark .note-signature {
    align-items: center;
    text-align: center;
    padding: 2.5rem 0;
  }
  
  .signature-glow {
    right: 50%;
    transform: translate(50%, -50%);
  }
  
  .signature-line-top {
    background: linear-gradient(90deg, transparent, rgba(180, 123, 104, 0.4), transparent);
  }
  
  .signature-accent {
    display: none;
  }
}

/* ===== REDUCED MOTION ===== */

@media (prefers-reduced-motion: reduce) {
  .note-dark .note-signature,
  .signature-glow,
  .signature-closing,
  .signature-name,
  .signature-title,
  .signature-accent {
    transition: opacity 0.3s ease !important;
    transform: none !important;
  }
  
  .note-dark .note-signature.is-visible,
  .note-dark .note-signature.is-visible .signature-glow,
  .note-dark .note-signature.is-visible .signature-closing,
  .note-dark .note-signature.is-visible .signature-name,
  .note-dark .note-signature.is-visible .signature-title {
    opacity: 1;
  }
  
  .note-dark .note-signature.is-visible .signature-line-top {
    width: 60px;
  }
  
  .note-dark .note-signature.is-visible .signature-accent {
    opacity: 0.4;
  }
}

/* =============================================
   SIGNATURE - Humble & Elegant
   ============================================= */

.note-dark .note-signature {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  margin-top: 4rem;
  padding: 3rem 0;
  
  /* Initial state */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}

.note-dark .note-signature.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Soft background glow */
.signature-glow {
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  width: 200px;
  height: 150px;
  background: radial-gradient(
    ellipse at center,
    rgba(180, 123, 104, 0.08) 0%,
    transparent 70%
  );
  border-radius: 50%;
  filter: blur(30px);
  opacity: 0;
  transition: opacity 1.5s ease 0.8s;
  pointer-events: none;
  z-index: 0;
}

.note-dark .note-signature.is-visible .signature-glow {
  opacity: 1;
}

/* Top line */
.signature-line-top {
  width: 0;
  height: 1px;
  margin-bottom: 1.5rem;
  background: linear-gradient(90deg, transparent, rgba(180, 123, 104, 0.4));
  transition: width 0.8s ease;
}

.note-dark .note-signature.is-visible .signature-line-top {
  width: 60px;
  transition-delay: 0.3s;
}

/* "With gratitude" */
.signature-closing {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  color: rgba(250, 248, 246, 0.5);
  margin: 0 0 0.8rem;
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.7s ease;
}

.note-dark .note-signature.is-visible .signature-closing {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

/* Name */
.signature-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 500;
  font-style: italic;
  color: rgba(250, 248, 246, 0.95);
  margin: 0;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 1;
  
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.8s ease;
}

.note-dark .note-signature.is-visible .signature-name {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s;
}

/* Title */
.signature-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(250, 248, 246, 0.4);
  margin: 0.6rem 0 0;
  
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.7s ease;
}

.note-dark .note-signature.is-visible .signature-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.9s;
}

/* Small accent star */
.signature-accent {
  position: absolute;
  bottom: 2.5rem;
  right: -30px;
  color: var(--note-gold);
  font-size: 0.7rem;
  opacity: 0;
  transition: opacity 1s ease 1.2s;
}

.note-dark .note-signature.is-visible .signature-accent {
  opacity: 0.4;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
  .note-dark .note-signature {
    align-items: center;
    text-align: center;
    padding: 2.5rem 0;
  }
  
  .signature-glow {
    right: 50%;
    transform: translate(50%, -50%);
  }
  
  .signature-line-top {
    background: linear-gradient(90deg, transparent, rgba(180, 123, 104, 0.4), transparent);
  }
  
  .signature-accent {
    display: none;
  }
}

/* ===== REDUCED MOTION ===== */

@media (prefers-reduced-motion: reduce) {
  .note-dark .note-signature,
  .signature-glow,
  .signature-closing,
  .signature-name,
  .signature-title,
  .signature-accent {
    transition: opacity 0.3s ease !important;
    transform: none !important;
  }
  
  .note-dark .note-signature.is-visible,
  .note-dark .note-signature.is-visible .signature-glow,
  .note-dark .note-signature.is-visible .signature-closing,
  .note-dark .note-signature.is-visible .signature-name,
  .note-dark .note-signature.is-visible .signature-title {
    opacity: 1;
  }
  
  .note-dark .note-signature.is-visible .signature-line-top {
    width: 60px;
  }
  
  .note-dark .note-signature.is-visible .signature-accent {
    opacity: 0.4;
  }
}


/* =============================================
   CTA SECTION - Elegant with Presence
   ============================================= */

.note-cta-section {
  position: relative;
  z-index: 10;
  padding: 6rem 2rem 8rem;
  background: linear-gradient(180deg, 
    #0d0b0a 0%,
    #111010 50%,
    #0a0908 100%
  );
  overflow: hidden;
}

/* Soft ambient glow */
.note-cta-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 300px;
  background: radial-gradient(
    ellipse at center,
    rgba(180, 123, 104, 0.08) 0%,
    rgba(201, 168, 108, 0.04) 40%,
    transparent 70%
  );
  filter: blur(60px);
  pointer-events: none;
}

.note-cta-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
}

/* Ornament */
.cta-ornament {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.cta-line {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 108, 0.3));
}

.cta-line:last-child {
  background: linear-gradient(90deg, rgba(201, 168, 108, 0.3), transparent);
}

.cta-star {
  color: var(--note-gold);
  font-size: 0.6rem;
  opacity: 0.5;
}

/* Heading */
.cta-heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 500;
  font-style: italic;
  color: rgba(250, 248, 246, 0.9);
  margin: 0 0 0.8rem;
  letter-spacing: 0.01em;
}

/* Subtext */
.cta-subtext {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  color: rgba(250, 248, 246, 0.45);
  margin: 0 0 2.5rem;
  line-height: 1.6;
}

/* Button */
.note-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.15rem 2.2rem;
  
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  text-decoration: none;
  
  background: linear-gradient(135deg, var(--note-accent), #9a6355);
  border-radius: 60px;
  
  box-shadow: 
    0 4px 25px rgba(180, 123, 104, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  
  transition: all 0.3s ease;
}

.note-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 8px 35px rgba(180, 123, 104, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.note-cta-btn svg {
  transition: transform 0.3s ease;
}

.note-cta-btn:hover svg {
  transform: translateX(4px);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
  .note-cta-section {
    padding: 5rem 1.5rem 6rem;
  }
  
  .note-cta-glow {
    width: 300px;
    height: 200px;
  }
}

@media (max-width: 480px) {
  .note-cta-btn {
    width: 100%;
    padding: 1.1rem 2rem;
  }
  
  .cta-line {
    width: 30px;
  }
}




















/* =============================================
   FOOTER
   ============================================= */

/* Footer – dark, premium strip */
.site-footer {
  background: #0b0b0e;
  border-top: 1px solid #26262b;
  padding: 3rem 1.5rem 3rem;
  color: rgba(245, 245, 247, 0.82);
}

.footer-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.footer-company-name {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffffff;
}

.footer-company p {
  margin: 0;
  line-height: 1.5;
}

/* All footer links share the same base style */
.site-footer a {
  color: #f8f2ec;
  text-decoration: none;
}

.site-footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Legal links row */
.footer-links {
  margin-top: 0.9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
}

.footer-divider {
  opacity: 0.5;
}

.footer-copy {
  margin-top: 0.6rem;
  opacity: 0.7;
}












/* =============================================
  KEEP AT BOTTOM 
  DESKTOP FEATURES LAYOUT RESET
  Ensures features section displays correctly on desktop after changes to mobile
   ============================================= */

   .hamburger {
  display: none;
  }

  .mobile-br {
  display: none;
}

.desktop-br {
  display: block;
}


/*no one can save or open in new tab any image or video*/
img, video {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}


   /* Features Desktop Reset */
@media (min-width: 769px) {
  .features-layout {
    display: grid;
    grid-template-columns: minmax(210px, 240px) minmax(0, 1fr);
    gap: 2.75rem;
    align-items: stretch;
  }

  .features-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    justify-content: space-between;
    overflow-x: visible;
    padding: 0;
    order: unset;
  }

  .features-list::after {
    display: none;
    content: none;
  }

  .feature-tab {
    width: 100%;
    min-width: unset;
    max-width: unset;
    min-height: unset;
    height: auto;
    aspect-ratio: unset;
    scroll-snap-align: unset;
    flex: unset;
    padding: 0.9rem 1.1rem;
    border-radius: 1.1rem;
  }

  .feature-display {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    justify-content: space-between;
    order: unset;
  }

  .screen-frame {
    width: 100%;
    max-width: none;
    aspect-ratio: 16 / 10;
    min-height: 460px;
    margin: 0;
  }

  .feature-copy {
    display: block;
  }

  .features-scroll-dots {
    display: none !important;
  }


/*chekout*/
/* Desktop default: hide mobile-only “Every plan includes” block */
.all-plans-include-mobile {
  display: none;
}


}