/* ==============================
   MOBILE LOCK – SALONFIX (MASTER FINAL FIXED)
   ============================== */
@media (max-width: 768px) {

  /* ✅ Global Reset */
  html, body {
    font-size: 15px !important;
    line-height: 1.5 !important;
    overflow-x: hidden !important;
  }

  /* ✅ Navbar */
  nav.sf-navbar {
    padding: 12px 18px !important;
  }
  nav.sf-navbar ul {
    flex-direction: column !important;
    gap: 14px !important;
    position: absolute;
    top: 60px;
    right: 20px;
    background: var(--sf-purple-dark);
    border-radius: 18px;
    padding: 18px;
    width: 70%;
    max-width: 300px;
    display: none;
    z-index: 1000;
  }
  nav.sf-navbar ul.open { display: flex !important; }
  nav.sf-navbar ul li a {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #fff !important;
  }
  .burger { display: flex !important; }

  /* ✅ Buttons (all CTAs) */
  .btn-gold {
    font-size: 1rem !important;
    padding: 12px 20px !important;
    border-radius: 30px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    background: linear-gradient(45deg, #D4AF37, #FFD700, #D4AF37);
    background-size: 300% 300%;
    color: #000 !important;
    animation: shimmer 3s infinite linear, pulseBtn 2s infinite;
    display: inline-block;
    box-shadow: 0 0 15px rgba(212,175,55,0.7);
  }
  @keyframes shimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  @keyframes pulseBtn {
    0%, 100% { transform: scale(1); box-shadow: 0 0 15px rgba(212,175,55,0.6); }
    50% { transform: scale(1.05); box-shadow: 0 0 25px rgba(212,175,55,0.9); }
  }

  /* ✅ WhatsApp Float */
  .whatsapp-float {
    position: fixed;
    bottom: 16px !important;
    right: 16px !important;
    font-size: 28px !important;
    padding: 14px !important;
    border-radius: 50%;
    background: linear-gradient(45deg, #D4AF37, #FFD700, #D4AF37);
    background-size: 300% 300%;
    animation: shimmer 3s infinite linear, pulseBtn 2s infinite;
    color: #000 !important;
    z-index: 1100;
  }
}

/* ==============================
   INDEX PAGE – MOBILE
   ============================== */
@media (max-width: 768px) {

  /* Hero */
  .hero { padding: 80px 20px !important; }
  .hero h1 { font-size: 1.8rem !important; line-height: 1.3 !important; }
  .hero p { font-size: 1rem !important; margin-bottom: 18px !important; }

  /* Metrics (Correction 1) */
  .metrics h2 { color: var(--sf-purple); font-size: 1.3rem !important; margin-bottom: 16px; }
  .metric-cards { display: flex; flex-direction: column; gap: 14px; }
  .metric-card {
    text-align: center;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    font-size: 1rem;
    font-weight: 700;
  }

  /* Why Salons Lose Profit (Correction 2) */
  .problems h2 { color: var(--sf-purple); font-size: 1.2rem !important; margin-bottom: 20px; }
  .profit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .problem-card {
    padding: 18px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    font-size: 0.95rem;
  }

  /* Chaos to Control (Correction 3) */
  .chaos h2 { color: var(--sf-purple); font-size: 1.2rem !important; margin-bottom: 20px; }
  .chaos-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
  .chaos-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    padding: 18px;
    font-size: 0.9rem;
    text-align: center;
  }

  /* Takeover (Correction 4) */
  .takeover h2 { color: var(--sf-purple); margin-bottom: 14px; }
  .takeover .solution-image img { border-radius: 16px; max-width: 90%; margin: 0 auto; display: block; }

  /* Founder (Correction 5) */
  .founder { background: var(--sf-purple); color: #fff; padding: 50px 20px; text-align: center; }
  .founder h2, .founder p, .founder-list li { color: #fff !important; }
  .founder img { border-radius: 18px; max-width: 260px; margin: 0 auto 20px; }
  .founder .btn-gold { margin-top: 18px; }

  /* Reels – Horizontal Swipe */
  .reel-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 0 12px 20px;
  }
  .reel-grid blockquote {
    flex: 0 0 90% !important;
    max-width: 90% !important;
    border-radius: 14px !important;
    scroll-snap-align: center;
  }
}

/* ==============================
   ABOUT PAGE – MOBILE
   ============================== */
@media (max-width: 768px) {

  /* Founder Section */
  .founder-section { background: var(--sf-purple); color: #fff; text-align: center; padding: 50px 20px; }
  .founder-section img { max-width: 320px; border-radius: 18px; margin: 0 auto 20px; display: block; }
  .founder-section ul { list-style: none; padding: 0; margin: 20px 0; }
  .founder-section ul li::before { display: none; }

  /* Real Results */
  .results-section h2 { color: var(--sf-purple); }
  .result-card { background: #fff; border-radius: 16px; padding: 18px; box-shadow: 0 6px 16px rgba(0,0,0,0.08); margin-bottom: 14px; }

  /* Why SALONFIX Exists */
  .why-section { background: var(--sf-purple); color: #fff; padding: 40px 20px; }
  .why-section img { border-radius: 16px; margin: 20px 0; }

  /* 5 Step Profit Fix */
  .profit-fix .sf-box { background: var(--sf-purple); color: #fff; border-radius: 12px; padding: 18px; margin-bottom: 14px; }

  /* Promise */
  .promise-section img { border-radius: 16px; margin-bottom: 18px; }
}

/* ==============================
   SERVICES PAGE – MOBILE
   ============================== */
@media (max-width: 768px) {

  /* Step Cards (locked premium gradient) */
  .steps-grid { display: flex; flex-direction: column; gap: 20px; }
  .step-card {
    background: linear-gradient(160deg, var(--sf-purple), var(--sf-purple-dark));
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    color: #fff;
    position: relative;
    text-align: left;
  }
  .step-card h3 { color: var(--sf-gold); font-size: 1.2rem; margin-bottom: 10px; }
  .step-card p { font-size: 0.95rem; line-height: 1.6; }

  /* Step Number + Icon Box */
  .step-number-box {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: linear-gradient(45deg, #D4AF37, #FFD700, #D4AF37);
    animation: shimmer 3s infinite linear, pulseBtn 2s infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.2rem;
    color: #000;
    margin-bottom: 12px;
  }
  .step-icon {
    font-size: 1.5rem;
    color: var(--sf-gold);
    margin-left: 8px;
  }

  /* FAQ Accordion */
  .faq-grid { display: flex; flex-direction: column; gap: 14px; }
  .faq-item { background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 6px 16px rgba(0,0,0,0.06); }
  .faq-question { font-weight: 700; color: var(--sf-purple); background: none; border: none; width: 100%; text-align: left; }
  .faq-answer { display: none; margin-top: 10px; }
  .faq-item.active .faq-answer { display: block; }
}
/* ==============================
   FAQ – Enhanced Interactions
   ============================== */
@media (max-width: 768px) {
  .faq-item {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    overflow: hidden;
  }
  .faq-item.active {
    box-shadow: 0 8px 20px rgba(75, 0, 130, 0.15);
    transform: translateY(-2px);
  }

  .faq-question {
    font-weight: 700;
    color: var(--sf-purple);
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }
  .faq-question::after {
    content: "\f078"; /* FontAwesome chevron-down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: 10px;
    transition: transform 0.3s ease;
  }
  .faq-item.active .faq-question::after {
    transform: rotate(180deg);
  }

  .faq-answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: scaleY(0.95);
    transition: all 0.35s ease;
  }
  .faq-item.active .faq-answer {
    max-height: 500px;
    opacity: 1;
    transform: scaleY(1);
    margin-top: 12px;
  }
}
/* ==============================
   CORRECTION 7 – SERVICES STEP CARDS
   ============================== */
@media (max-width: 768px) {
  .steps-grid {
    gap: 24px !important; /* more breathing space */
  }
  .step-card {
    width: 92% !important;  /* narrower width */
    margin: 0 auto;         /* centered */
    display: flex;
    flex-direction: column;
    padding: 24px !important;
    border-radius: 18px;
  }
  .step-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* number left, icon right */
    margin-bottom: 14px;
  }
  .step-number-box {
    flex: 0 0 48px;
    height: 48px;
    border-radius: 8px;
    background: linear-gradient(45deg, #D4AF37, #FFD700, #D4AF37);
    animation: shimmer 3s infinite linear, pulseBtn 2s infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.2rem;
    color: #000;
  }
  .step-icon {
    font-size: 1.6rem !important;
    color: var(--sf-gold) !important;
    margin-left: 12px;
  }
}
/* ==============================
   MOBILE LOCK – CORRECTIONS 1–6
   ============================== */
@media (max-width: 768px) {

  /* ✅ Correction 1: Why Salons Lose Profit */
  .problems {
    background: var(--sf-purple);
    padding: 50px 20px;
  }
  .problems h2 {
    color: #fff !important;
    text-align: center;
    margin-bottom: 20px;
  }
  .profit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .problem-card {
    background: linear-gradient(145deg, #fff, #f9f9f9);
    color: var(--sf-purple);
    font-weight: 600;
    text-align: center;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  }

  /* ✅ Correction 2: Real Results – add spacing + left/right animation */
  .results-section {
    padding: 50px 20px;
  }
  .result-card {
    margin-bottom: 20px !important;
    animation: fadeInLeft 0.8s ease both;
  }
  .result-card:nth-child(even) {
    animation: fadeInRight 0.8s ease both;
  }
  @keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes fadeInRight {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
  }

  /* ✅ Correction 3: More spacing between sections */
  section {
    margin-bottom: 40px !important;
  }

  /* ✅ Correction 4: Why SALONFIX Exists – clean purple section */
  .why-section {
    background: var(--sf-purple);
    color: #fff;
    padding: 50px 20px;
  }
  .why-section img {
    border-radius: 14px;
    margin: 20px 0;
  }

  /* ✅ Correction 5: 5-Step Profit Fix (reduced width + spacing) */
  .profit-fix {
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .profit-fix .sf-box {
    background: var(--sf-purple);
    color: #fff;
    border-radius: 14px;
    padding: 20px;
    width: 90%;           /* reduce width so it doesn’t stretch full */
    max-width: 320px;     /* cap width for premium look */
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    text-align: center;
  }

  /* ✅ Correction 6: Promise Section – reduce width & keep clean */
  .promise-section {
    background: #fff;
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .promise-section img {
    border-radius: 14px;
    max-width: 90%;
    margin-bottom: 18px;
  }
  .promise-section p {
    max-width: 90%;
    text-align: center;
  }
}
/* ==============================
   CONTACT PAGE – MOBILE OVERRIDES
   ============================== */
@media (max-width: 768px) {
  body.contact-page {
    overflow-x: hidden;
  }

  /* ✅ Hero */
  body.contact-page .hero {
    padding: 60px 18px !important;
    text-align: center;
  }
  body.contact-page .hero h1 {
    font-size: 1.8rem !important;
    color: #fff;
  }
  body.contact-page .hero-sub {
    font-size: 1rem;
    line-height: 1.5;
    margin-top: 10px;
    color: #eee;
  }

  /* ✅ Section spacing */
  body.contact-page section.section {
    padding: 40px 16px !important;
  }

  /* ✅ Grid tweaks */
  body.contact-page .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  body.contact-page .icon-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  body.contact-page .icon-row {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  }
  body.contact-page .icon-row i {
    background: linear-gradient(45deg, #D4AF37, #FFD700);
    padding: 10px;
    border-radius: 50%;
    color: #000;
    font-size: 1.2rem;
    flex-shrink: 0;
  }

  /* ✅ Connect Card */
  body.contact-page .connect-card {
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
    background: #fff;
  }
  body.contact-page .connect-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  body.contact-page .connect-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #f9f9f9;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    text-decoration: none;
    color: var(--sf-purple);
    font-weight: 600;
  }
  body.contact-page .connect-item .ci-icon {
    font-size: 1.2rem;
    color: var(--sf-gold);
  }

  /* ✅ Form Frame */
  body.contact-page .form-frame {
    border-radius: 16px;
    max-width: 95% !important;
    margin: 0 auto;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  }

  /* ✅ Footer CTA fix */
  body.contact-page .footer-cta a {
    position: relative;
    z-index: 10;
  }
}
/* ==============================
   FINAL POLISH – STEP CARDS + FAQ
   ============================== */
@media (max-width: 768px) {

  /* ✅ Section Headlines */
  .case h2,
  .faq h2 {
    text-align: center !important;
    font-weight: 800 !important;
    margin-top: 20px !important;
    margin-bottom: 15px !important;
    font-size: 1.4rem !important;
    position: relative;
  }
  .case h2::after,
  .faq h2::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background: var(--sf-gold);
    margin: 8px auto 0;
    border-radius: 2px;
  }

  /* ✅ Step Cards – Premium Layout */
  .steps-grid {
    display: flex;
    flex-direction: column;
    gap: 20px !important;
    padding: 0 5% !important; /* reduce width, framed look */
  }
  .step-card {
    background: linear-gradient(160deg, var(--sf-purple), var(--sf-purple-dark));
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    color: #fff;
    text-align: left;
    margin-bottom: 20px !important;
  }
  .step-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }
  .step-number-box {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: linear-gradient(45deg, #D4AF37, #FFD700, #D4AF37);
    animation: shimmer 3s infinite linear, pulseBtn 2s infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.1rem;
    color: #000;
  }
  .step-icon {
    font-size: 1.6rem;
    color: var(--sf-gold);
    margin-left: 12px;
  }
  .step-card h3 {
    color: var(--sf-gold);
    margin: 8px 0;
    font-size: 1.2rem;
  }

  /* ✅ FAQ Section – Animated & Premium */
  .faq-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 5%; /* framed look */
  }
  .faq-item {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    padding: 14px;
    overflow: hidden;
    transition: all 0.3s ease;
  }
  .faq-question {
    font-weight: 700;
    color: var(--sf-purple);
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-size: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
  }
  .faq-question::after {
    content: "▼";
    font-size: 0.9rem;
    margin-left: 8px;
    transition: transform 0.3s ease;
  }
  .faq-item.active .faq-question::after {
    transform: rotate(180deg);
  }
  .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.35s ease;
    opacity: 0;
  }
  .faq-item.active .faq-answer {
    max-height: 500px; /* plenty for content */
    opacity: 1;
    margin-top: 10px;
  }
}
/* ==============================
   TESTIMONIALS PAGE – MOBILE LOCK
   ============================== */
@media (max-width: 768px) {

  /* ✅ Hero */
  body.testimonials-page .hero h1 {
    font-size: 1.8rem !important;
    margin-bottom: 14px !important;
  }
  body.testimonials-page .hero p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    padding: 0 10px;
  }

  /* ✅ Testimonials Grid */
  body.testimonials-page .testimonials {
    padding: 50px 12px !important;
  }
  body.testimonials-page .testimonials .grid {
    gap: 18px !important;
  }
  body.testimonials-page .testimonials .card {
    padding: 32px 20px !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
    margin: 0 auto;
    max-width: 92%; /* reduce edge-to-edge stretch */
  }
  body.testimonials-page .testimonials .card p {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }
  body.testimonials-page .testimonials .author {
    margin-top: 12px !important;
    font-size: 0.9rem !important;
    color: var(--sf-purple);
    opacity: 0.9;
  }

  /* ✅ Sample Report */
  body.testimonials-page .sample-report {
    padding: 50px 12px !important;
  }
  body.testimonials-page .sample-report h2 {
    font-size: 1.4rem !important;
    margin: 20px 0 12px !important;
    text-align: center;
  }
  body.testimonials-page .sample-report p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }
  body.testimonials-page .sample-report .report-card {
    max-width: 90% !important;
    margin: 0 auto 24px auto !important;
    padding: 20px !important;
    border-radius: 14px !important;
    font-size: 0.9rem !important;
  }

  /* ✅ Footer CTA */
  body.testimonials-page .footer-premium {
    padding: 40px 16px !important;
    text-align: center;
  }
  body.testimonials-page .footer-premium h2 {
    font-size: 1.2rem !important;
    margin-bottom: 12px !important;
  }
  body.testimonials-page .footer-cta {
    flex-direction: column !important;
    gap: 12px !important;
  }
}
/* ✅ Correction 3: Balanced spacing between sections (Index + About) */
@media (max-width: 768px) {
  body.home-page section,
  body.about-page section {
    margin-bottom: 28px !important; /* reduced from 40px */
  }
}
/* ==============================
   PARTNERSHIP PLANS – MOBILE FIX
   ============================== */
@media (max-width: 768px) {
  body.pricing-page .plan-grid {
    display: flex;
    flex-direction: column;
    gap: 22px !important; /* more space between boxes */
    padding: 0 5%;        /* framed look */
  }
  body.pricing-page .plan-card {
    width: 90% !important;   /* reduced width */
    margin: 0 auto !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    padding: 24px !important;
  }
  body.pricing-page .plan-card h3 {
    font-size: 1.2rem !important;
    margin-bottom: 10px;
    color: var(--sf-gold);
  }
}
/* ==============================
   CTA Buttons – Mobile Tap Fix
   ============================== */
@media (max-width: 768px) {
  .btn-gold,
  .btn-outline,
  .cta-btn,
  .whatsapp-float {
    -webkit-tap-highlight-color: transparent; /* remove grey overlay */
    outline: none !important;
  }

  /* On focus */
  .btn-gold:focus,
  .btn-outline:focus,
  .cta-btn:focus,
  .whatsapp-float:focus {
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.8) !important; /* gold glow */
  }

  /* On click/tap */
  .btn-gold:active,
  .btn-outline:active,
  .cta-btn:active,
  .whatsapp-float:active {
    transform: scale(0.97); /* subtle press effect */
    box-shadow: 0 0 18px rgba(212, 175, 55, 1) !important; /* strong glow */
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
}
/* ==============================
   GLOBAL CLICK/TAP POLISH
   ============================== */
@media (max-width: 768px) {

  /* Remove ugly tap highlight on ALL links & buttons */
  a, button {
    -webkit-tap-highlight-color: transparent;
    outline: none !important;
  }

  /* Premium press effect for CTAs + WhatsApp */
  .btn-gold,
  .btn-outline,
  .cta-btn,
  .whatsapp-float {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .btn-gold:focus,
  .btn-outline:focus,
  .cta-btn:focus,
  .whatsapp-float:focus {
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.8) !important;
  }
  .btn-gold:active,
  .btn-outline:active,
  .cta-btn:active,
  .whatsapp-float:active {
    transform: scale(0.97);
    box-shadow: 0 0 18px rgba(212, 175, 55, 1) !important;
  }

  /* Subtle feedback for ALL other links (navbar, footer) */
  nav.sf-navbar a:active,
  footer a:active {
    opacity: 0.7;
    transform: scale(0.98);
    transition: all 0.15s ease;
  }
}
/* ==============================
   GLOBAL SECTION SPACING FIX
   ============================== */
@media (max-width: 768px) {
  section {
    margin-bottom: 28px !important;  /* was ~40–50px */
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  /* Reduce extra spacing on hero & footer (they had oversized padding) */
  .hero {
    padding-top: 60px !important;
    padding-bottom: 40px !important;
  }
  .footer-premium {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  /* Special cases: headings inside sections */
  section h2 {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
  }
}
/* ==============================
   SERVICES PAGE – REMOVE DEFAULT BULLETS
   ============================== */
@media (max-width: 768px) {
  .services-page .step-card ul {
    list-style: none !important;   /* remove bullets */
    padding-left: 0 !important;    /* remove left indentation */
    margin-top: 8px !important;
  }

  .services-page .step-card ul li {
    margin-bottom: 6px;
    padding-left: 18px;
    position: relative;
    color: #fff;                   /* match step card text */
    font-size: 0.95rem;
    line-height: 1.5;
  }

  /* Optional: subtle gold checkmark instead of bullets */
  .services-page .step-card ul li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: var(--sf-gold);
    font-size: 0.85rem;
  }
}
/* ==============================
   PRICING PAGE – MOBILE BOXES
   ============================== */
@media (max-width: 768px) {
  .pricing-page .plan-card {
    width: 88% !important;       /* narrower width */
    max-width: 340px;            /* cap for premium look */
    margin: 0 auto 24px auto;    /* center + spacing between cards */
    border-radius: 20px !important;
    padding: 22px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  }

  /* CTA button inside each card */
  .pricing-page .plan-card .btn-gold {
    width: 100% !important;
    text-align: center;
    margin-top: 14px;
  }
}
/* ==============================
   NAVBAR – STATIC (Default Flow)
   ============================== */
.sf-navbar {
  position: relative; /* no fixed */
  top: auto;
  left: auto;
  width: 100%;
  z-index: 1000;
  background: var(--sf-purple); /* keep solid background */
  box-shadow: none; /* optional, remove shadow */
}

/* Remove body push down */
body {
  padding-top: 0 !important;
  margin: 0;
}
/* ==============================
   NAVBAR – STATIC (No White Gap)
   ============================== */
.sf-navbar {
  position: relative !important; /* stays in normal flow */
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  z-index: 1000 !important;
  background: var(--sf-purple) !important;
  box-shadow: none !important;
}

body {
  padding-top: 0 !important; /* prevent white gap */
  margin: 0 !important;
}

/* ==============================
   PRICING PAGE – PREMIUM MOBILE BOXES
   ============================== */
@media (max-width: 768px) {
  .pricing-page .plan-grid {
    display: flex;
    flex-direction: column;
    gap: 26px !important;   /* extra space between */
    padding: 0 5%;          /* framed look */
  }

  .pricing-page .plan-card {
    width: 88% !important;        /* narrower */
    max-width: 340px !important;  /* rounded square look */
    margin: 0 auto !important;    /* center */
    border-radius: 20px !important;
    padding: 24px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
  }

  .pricing-page .plan-card h3 {
    font-size: 1.2rem !important;
    margin-bottom: 10px !important;
    color: var(--sf-gold) !important;
  }

  .pricing-page .plan-card .btn-gold {
    width: 100% !important;
    margin-top: 14px !important;
  }
}

/* ==============================
   SERVICES PAGE – REMOVE BULLETS
   ============================== */
@media (max-width: 768px) {
  .services-page .step-card ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 10px 0 0 0 !important;
  }

  .services-page .step-card ul li {
    margin-bottom: 6px;
    padding-left: 20px;
    position: relative;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #fff !important;
  }

  .services-page .step-card ul li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: var(--sf-gold);
    font-size: 0.85rem;
  }
}
/* ==============================
   GLOBAL LIST STYLE FIX – GOLD CHECKMARKS
   ============================== */
@media (max-width: 768px) {
  /* All unordered lists inside main sections */
  section ul {
    list-style: none !important;   /* remove default bullets */
    padding-left: 0 !important;
    margin: 12px 0 !important;
  }

  section ul li {
    margin-bottom: 8px;
    padding-left: 22px;
    position: relative;
    font-size: 0.95rem;
    line-height: 1.5;
  }

  /* Gold checkmark */
  section ul li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--sf-gold);
    font-weight: bold;
    font-size: 0.9rem;
  }
}
/* ==============================
   PARTNERSHIP PLANS – MOBILE CARDS FIX
   ============================== */
@media (max-width: 768px) {
  body.pricing-page .plans-grid {
    display: flex;
    flex-direction: column;
    gap: 26px !important;     /* more space between boxes */
    align-items: center;      /* center all cards */
    padding: 0 5% !important; /* framed look */
  }

  body.pricing-page .card-purple {
    width: 88% !important;    /* narrower width */
    max-width: 340px !important;  /* cap for premium look */
    border-radius: 20px !important;
    margin: 0 auto !important;
    padding: 22px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  }

  body.pricing-page .card-purple .plan-title {
    color: var(--sf-gold) !important;
    font-size: 1.2rem !important;
    margin-bottom: 10px !important;
  }

  body.pricing-page .card-purple .btn-gold {
    width: 100% !important;
    margin-top: 14px;
    text-align: center;
  }
}
/* ==============================
   CONNECT SECTION – PREMIUM LOCK
   ============================== */
@media (max-width: 768px) {
  body.contact-page .connect-card {
    background: linear-gradient(160deg, var(--sf-purple), var(--sf-purple-dark));
    border-radius: 18px;
    padding: 28px 20px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    text-align: center;
  }

  /* ✅ Heading */
  body.contact-page .connect-card .headline {
    font-size: 1.7rem !important;
    font-weight: 900 !important;
    background: linear-gradient(45deg, #D4AF37, #FFD700, #D4AF37);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 12px;
    position: relative;
  }

  /* ✅ Thin gold line below heading */
  body.contact-page .connect-card .headline::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    margin: 8px auto 0;
    border-radius: 2px;
    background: linear-gradient(45deg, #D4AF37, #FFD700, #D4AF37);
  }

  /* ✅ Sub text */
  body.contact-page .connect-card .sub {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.9);
    margin-bottom: 20px;
  }
  body.contact-page .connect-card .sub span {
    color: #FFD700;
    font-weight: 800;
  }

  /* ✅ Connect items */
  body.contact-page .connect-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 12px;
    background: rgba(255,255,255,0.1);
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    transition: all 0.3s ease;
  }
  body.contact-page .connect-item:hover {
    background: rgba(255,255,255,0.15);
    transform: translateY(-2px);
  }

  /* ✅ Icon inside items */
  body.contact-page .connect-item .ci-icon i {
    font-size: 1.2rem;
    background: linear-gradient(45deg, #D4AF37, #FFD700, #D4AF37);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
/* ==============================
   FREE TRIAL SECTION – PREMIUM LOCK
   ============================== */
@media (max-width: 768px) {
  .trial-section {
    padding: 40px 16px !important;  /* reduce overall padding */
    text-align: center;
  }

  .trial-section h2 {
    color: var(--sf-purple) !important; /* premium purple */
    font-size: 1.4rem !important;
    font-weight: 900 !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
  }

  .trial-section h3 {
    color: var(--sf-dark);
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 8px;
    border-bottom: 2px solid var(--sf-gold);
    display: inline-block;
    padding-bottom: 4px;
  }

  .trial-section p {
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 90%;
    margin: 0 auto 20px auto;
    color: var(--sf-dark);
  }

  /* Info Cards */
  .trial-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 10px;
  }
  .trial-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }
  .trial-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(45deg, #D4AF37, #FFD700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #000;
    flex-shrink: 0;
  }
  .trial-card h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--sf-purple);
  }
  .trial-card p {
    margin: 2px 0 0;
    font-size: 0.9rem;
    color: var(--sf-dark);
    opacity: 0.85;
    line-height: 1.4;
  }
}
@media (max-width: 768px) {
  section { padding: 40px 16px !important; margin-bottom: 28px !important; }
  .hero { padding: 80px 20px !important; }
  .metric-card { min-width: auto !important; padding: 18px !important; }
  .profit-grid, .chaos-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .takeover, .founder, .why-salonfix, .our-promise { padding: 50px 20px !important; }
  .step-card, .plan-card, .trial-card { width: 100% !important; max-width: 320px !important; padding: 20px !important; }
  .reel-grid blockquote { flex: 0 0 90% !important; max-width: 90% !important; }
  .footer-premium { padding: 36px 16px !important; }
}