/* ============================================
   BENTO MULTI-SLIDER GRID SYSTEM (LAYOUT ONLY)
   Fixed desktop design — chhoti screens par isko
   poora ka poora transform:scale() se shrink kiya
   jaata hai (JS scaleHeroGrid() dwara), taaki
   layout hamesha desktop jaisa hi dikhe.
   ============================================ */

/* Wrapper jo scaled grid ki actual visual height
   ko document flow me reserve karta hai */
.hero-bento-grid-wrapper {
  width: 100%;
  overflow: hidden;
  margin: 20px auto;
}

.hero-bento-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
  width: 1240px;
  max-width: 1240px;
  margin: 0;
  padding: 0 24px;
  transform-origin: top left;
  transform: translateX(var(--grid-offset, 0px)) scale(var(--grid-scale, 1));
}

/* Common Slider Base Wrapper */
.bento-slider {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #070710;
  width: 100%;
  padding: 1.5px;
  z-index: 1;
  --accent: #a855f7;
}

.bento-slider::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  background: color-mix(in srgb, var(--accent) 7%, #0c0c16);
  border-radius: 15px;
  z-index: -1;
}

.bento-slider.main-panel { height: 440px; }
.bento-slider.sub-panel { height: 210px; }

/* ===== MINIMAL ACCENT STRIP (top edge) ===== */
.accent-strip {
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  z-index: 5;
  box-shadow: 0 0 12px var(--accent);
  pointer-events: none;
}

.bento-right-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

.product-slide-container {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
}

/* ===== SLIDE ITEM BASE ===== */
.product-slide-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.product-slide-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: transparent;
}

.product-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3, 3, 7, 0.55) 0%, rgba(3, 3, 7, 0.15) 55%, transparent 100%);
  z-index: 1;
}

/* ===== DYNAMIC ORBS BASE ===== */
.product-orbs-container {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.35;
}

.matrix-orb {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
}

.matrix-orb.orb-1 { width: 140px; height: 140px; background: rgba(168, 85, 247, 0.2); top: -10%; right: 10%; }
.matrix-orb.orb-2 { width: 160px; height: 160px; background: rgba(37, 99, 235, 0.18); bottom: -10%; left: 20%; }

/* ===== CONTENT FORMATTING ===== */
.product-slide-content {
  position: relative;
  z-index: 3;
  color: #fff;
}

.main-panel .product-slide-item { padding: 30px 50px; }
.main-panel .product-slide-content { max-width: 65%; }
.main-panel .product-slide-content h2 {
  font-size: 34px;
  font-weight: 800;
  font-family: "Poppins", sans-serif;
  margin-bottom: 8px;
  background: linear-gradient(90deg, #fff, #cbd5e1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sub-panel .product-slide-item { padding: 20px 35px; }
.sub-panel .product-slide-content { max-width: 70%; }
.sub-panel .product-slide-content h2 {
  font-size: 20px;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  margin-bottom: 6px;
  color: #fff;
}
.sub-panel .product-slide-offer { display: none; }

.product-slide-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  white-space: nowrap;
}

.product-slide-pricing {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.slide-price { font-size: 22px; font-weight: 800; color: #10b981; white-space: nowrap; }
.sub-panel .slide-price { font-size: 18px; }
.slide-old-price { font-size: 14px; color: rgba(255, 255, 255, 0.4); text-decoration: line-through; white-space: nowrap; }
.slide-discount { font-size: 11px; font-weight: 700; color: #10b981; background: rgba(16, 185, 129, 0.15); padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.product-slide-offer { font-size: 13px; color: rgba(255, 255, 255, 0.5); margin-bottom: 14px; }
.slide-btn { padding: 10px 26px; font-size: 13px; font-weight: 700; white-space: nowrap; }

/* ===== ICONS BASE ===== */
.product-slide-icon {
  position: relative;
  z-index: 3;
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.sub-panel .product-slide-icon { width: 90px; height: 90px; border-radius: 16px; }
.product-slide-icon img { width: 70px; height: 70px; object-fit: contain; }
.sub-panel .product-slide-icon img { width: 50px; height: 50px; }
.product-slide-icon span { font-size: 50px; }
.sub-panel .product-slide-icon span { font-size: 36px; }

/* ===== DOTS BASE ===== */
.product-slider-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 8px;
}

.product-slider-dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
}

/* ===== CATEGORY PILLS ===== */
.category-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 20px;
}

.pill {
  padding: 10px 24px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  font-family: inherit;
}

.pill:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.pill.active {
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 25px rgba(168, 85, 247, 0.4);
}

/* ===== SECTION HEADER ===== */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 30px 0 20px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 32px;
}

.section-header h2 {
  font-size: 26px;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
}

/* ===== PRODUCT GRID ===== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 30px;
  padding-bottom: 80px;
}

/* ============================================
   SEARCH RESULTS PAGE - Sirf Results Fix
   (Search bar ko bilkul affect nahi karega)
   ============================================ */
/* ============================================
   GLOBAL SEARCH BAR STYLES
   ============================================ */
.search-wrapper {
    margin-bottom: 24px;
    width: 100%;
    display: flex;             /* Container ko flex banayega */
    justify-content: center;   /* Search bar ko horizontally center karega */
}

.search-container {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 480px;          /* Maximum width set hai */
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 6px 6px 6px 20px;
    transition: all 0.3s ease;
}

.search-container:focus-within {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.15);
}

.search-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-size: 15px;
    font-weight: 400;
}

.search-input::placeholder {
    color: #64748b;
}

.search-btn {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    color: #ffffff;
    border: none;
    outline: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.search-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
}

.search-btn i {
    font-size: 14px;
}
/* ============================================
   SEARCH RESULTS PAGE - Complete Responsive Fix
   (Laptop + Mobile dono pe sahi)
   ============================================ */

/* ----- Search Header ----- */
.search-results-page .search-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.search-results-page .search-header .left-section {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.search-results-page .search-header h2 {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.search-results-page .search-header h2 .search-term {
    color: #a855f7;
    font-weight: 700;
}

/* "result found" - Stylish Badge */
.search-results-page .result-count {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 16px;
    border-radius: 30px;
    display: inline-block;
    border: 1px solid rgba(168, 85, 247, 0.1);
    white-space: nowrap;
}

/* Clear Search Button */
.search-results-page .clear-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 18px;
    border-radius: 30px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.search-results-page .clear-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(168, 85, 247, 0.3);
    color: #a855f7;
}

/* ----- Result Card ----- */
.search-results-page .result-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    gap: 16px;
    transition: all 0.3s ease;
}

.search-results-page .result-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(168, 85, 247, 0.2);
}

/* Product Info - Left */
.search-results-page .product-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 200px;
    min-width: 0;
}

.search-results-page .product-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* WhatsApp Badge */
.search-results-page .whatsapp-badge {
    background: #25d366;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 14px 4px 12px;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.search-results-page .whatsapp-badge i {
    font-size: 14px;
}

/* Product Tag */
.search-results-page .product-tag {
    background: rgba(168, 85, 247, 0.12);
    color: #a855f7;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 14px;
    border-radius: 30px;
    white-space: nowrap;
}

/* Product Name */
.search-results-page .product-name {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.3px;
    word-break: break-word;
}

/* Product Description */
.search-results-page .product-desc {
    font-size: 14px;
    color: #94a3b8;
    line-height: 1.5;
    word-break: break-word;
}

.search-results-page .product-desc i {
    color: #a855f7;
    margin-right: 6px;
}

/* ----- Product Actions - Right ----- */
.search-results-page .product-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Pricing */
.search-results-page .pricing {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.search-results-page .price-current {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
}

.search-results-page .price-old {
    font-size: 16px;
    color: #64748b;
    text-decoration: line-through;
    white-space: nowrap;
}

.search-results-page .discount {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    font-size: 13px;
    font-weight: 600;
    padding: 2px 12px;
    border-radius: 30px;
    border: 1px solid rgba(34, 197, 94, 0.1);
    white-space: nowrap;
}

/* Buy Button */
.search-results-page .buy-btn {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    background-size: 200% auto;
    color: #fff;
    border: none;
    padding: 10px 28px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.search-results-page .buy-btn:hover {
    transform: scale(1.04);
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.3);
}

.search-results-page .buy-btn i {
    margin-right: 6px;
}

/* ============================================
   🚀 MOBILE RESPONSIVE - Choti Screen Fix
   ============================================ */

/* ----- Tablet (768px se neeche) ----- */
@media (max-width: 768px) {
    /* Header - stack vertically */
    .search-results-page .search-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px 0 16px;
    }

    .search-results-page .search-header .left-section {
        flex-wrap: wrap;
        gap: 8px;
    }

    .search-results-page .search-header h2 {
        font-size: 17px;
        gap: 6px;
    }

    .search-results-page .result-count {
        font-size: 12px;
        padding: 3px 14px;
    }

    .search-results-page .clear-btn {
        align-self: flex-start;
        font-size: 13px;
        padding: 5px 14px;
    }

    /* Result Card - stack vertically */
    .search-results-page .result-card {
        flex-direction: column;
        align-items: stretch;
        padding: 16px 18px;
        gap: 14px;
    }

    .search-results-page .product-info {
        flex: none;
        width: 100%;
    }

    .search-results-page .product-name {
        font-size: 19px;
    }

    .search-results-page .product-actions {
        justify-content: space-between;
        width: 100%;
        gap: 12px;
    }

    .search-results-page .price-current {
        font-size: 21px;
    }
}

/* ----- Mobile (480px se neeche) ----- */
@media (max-width: 480px) {
    .search-results-page .search-header {
        padding: 10px 0 14px;
        gap: 10px;
    }

    .search-results-page .search-header .left-section {
        gap: 6px;
    }

    .search-results-page .search-header h2 {
        font-size: 15px;
        gap: 4px;
        flex-wrap: wrap;
    }

    .search-results-page .search-header h2 .search-term {
        display: inline;
        word-break: break-word;
    }

    .search-results-page .result-count {
        font-size: 11px;
        padding: 2px 12px;
    }

    .search-results-page .clear-btn {
        font-size: 12px;
        padding: 4px 12px;
        align-self: flex-start;
    }

    .search-results-page .result-card {
        padding: 14px;
        gap: 12px;
        border-radius: 12px;
    }

    .search-results-page .product-badge {
        gap: 6px;
    }

    .search-results-page .whatsapp-badge {
        font-size: 10px;
        padding: 3px 10px 3px 8px;
    }

    .search-results-page .whatsapp-badge i {
        font-size: 12px;
    }

    .search-results-page .product-tag {
        font-size: 10px;
        padding: 2px 10px;
    }

    .search-results-page .product-name {
        font-size: 17px;
    }

    .search-results-page .product-desc {
        font-size: 13px;
    }

    .search-results-page .product-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        width: 100%;
    }

    .search-results-page .pricing {
        justify-content: center;
        gap: 8px;
    }

    .search-results-page .price-current {
        font-size: 19px;
    }

    .search-results-page .price-old {
        font-size: 14px;
    }

    .search-results-page .discount {
        font-size: 11px;
        padding: 2px 10px;
    }

    .search-results-page .buy-btn {
        width: 100%;
        justify-content: center;
        padding: 10px 20px;
        font-size: 13px;
        border-radius: 40px;
    }

    .search-results-page .buy-btn i {
        margin-right: 4px;
    }
}

/* ----- Extra Small (380px se neeche) ----- */
@media (max-width: 380px) {
    .search-results-page .search-header h2 {
        font-size: 13px;
    }

    .search-results-page .result-count {
        font-size: 10px;
        padding: 2px 10px;
    }

    .search-results-page .clear-btn {
        font-size: 11px;
        padding: 3px 10px;
    }

    .search-results-page .product-name {
        font-size: 15px;
    }

    .search-results-page .price-current {
        font-size: 17px;
    }

    .search-results-page .price-old {
        font-size: 12px;
    }

    .search-results-page .buy-btn {
        font-size: 12px;
        padding: 8px 16px;
    }
}
/* ===== PRODUCT CARD ===== */
.product-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 30px;
  border: 1px solid var(--border-color);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.product-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--radius);
  padding: 1.5px;
  background: var(--card-gradient);
  opacity: 0;
  transition: opacity 0.5s ease;
  -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;
}

.product-card:hover::before {
  opacity: 1;
}
.product-card:hover {
  transform: translateY(-8px);
  background: var(--bg-card-hover);
  box-shadow: var(--card-glow);
}

.product-card > * {
  position: relative;
  z-index: 1;
}

.product-card .icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 18px;
  background: var(--card-gradient);
  box-shadow: var(--card-glow);
  transition: transform 0.3s;
}

.product-card:hover .icon {
  transform: scale(1.08) rotate(-4deg);
}

.product-card .category {
  font-size: 11px;
  color: var(--card-color);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.product-card .name {
  font-size: 20px;
  font-weight: 700;
  margin: 8px 0 6px;
  font-family: "Poppins", sans-serif;
}

.product-card .tagline {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
  min-height: 44px;
}

.product-card .price-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.product-card .price {
  font-size: 24px;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
}

.product-card .price-old {
  color: var(--text-muted);
  text-decoration: line-through;
  font-size: 15px;
}

.product-card .discount {
  font-size: 11px;
  font-weight: 700;
  color: var(--card-color);
  background: rgba(255, 255, 255, 0.04);
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.product-card .badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  z-index: 2;
}

.badge-new {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.2);
}
.badge-hot {
  background: rgba(217, 70, 239, 0.15);
  color: #d946ef;
  border: 1px solid rgba(217, 70, 239, 0.2);
}
.badge-sale {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.product-card .actions {
  display: flex;
  gap: 10px;
}

.product-card .actions .btn-buy {
  flex: 1;
  padding: 12px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border: none;
  color: #fff;
  background: var(--card-gradient);
  transition: all 0.3s;
  font-family: inherit;
  box-shadow: var(--card-glow);
}

.product-card .actions .btn-buy:hover {
  transform: scale(1.04);
}

/* ===== DETAIL PAGE ===== */
.detail-page {
  padding: 60px 0 100px;
}

.detail-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 60px;
}

.detail-image {
  aspect-ratio: 1;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 96px;
  animation: float 4s ease-in-out infinite;
}

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

.detail-info h1 {
  font-size: 38px;
  font-weight: 800;
  font-family: "Poppins", sans-serif;
  margin-bottom: 12px;
}

.detail-price {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
}

.detail-price .price {
  font-size: 32px;
  font-weight: 700;
  color: #10b981;
}

.detail-price .price-old {
  color: var(--text-muted);
  text-decoration: line-through;
  margin-left: 12px;
  font-size: 18px;
}

.detail-price .discount-badge {
  color: #10b981;
  margin-left: 10px;
  font-weight: 600;
}

/* ===== COUPON INPUT ===== */
.coupon-container {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.coupon-input {
  flex: 1;
  padding: 10px 14px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  outline: none;
  font-family: inherit;
}

.coupon-input:focus {
  border-color: #a855f7;
}

.coupon-message {
  margin-top: 8px;
  font-size: 13px;
}
.coupon-message.success {
  color: #10b981;
}
.coupon-message.error {
  color: #ef4444;
}
.coupon-message.info {
  color: #f59e0b;
}

/* ===== FEATURES LIST ===== */
.features-list {
  list-style: none;
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
  color: var(--text-secondary);
}

.features-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ============================================
   DETAIL PAGE BUTTONS - FIXED
   ============================================ */

/* ===== Detail Actions Container ===== */
.detail-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.detail-actions .btn,
.detail-actions .btn-glow,
.detail-actions .btn-glow-video,
.detail-actions .btn-glow-trial {
  flex: 1;
  min-width: 140px;
  justify-content: center;
  text-align: center;
  padding: 14px 20px;
  font-size: 14px;
  white-space: nowrap;
}

/* ===== Buy Now Button (Detail Page) ===== */
.detail-actions .btn-glow {
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 700;
  min-width: 160px;
}

/* ===== Watch Tutorial Button ===== */
.detail-actions .btn-glow-video {
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 700;
  min-width: 150px;
}

/* ===== Request Trial Button ===== */
.detail-actions .btn-glow-trial {
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 700;
  min-width: 150px;
}

/* ===== Continue Shopping Button ===== */
.btn-glow-continue {
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 700;
  width: 100%;
  justify-content: center;
}

/* ===== RESPONSIVE: Mobile ===== */
@media (max-width: 768px) {
  /* Detail page grid pehle fixed 360px + 1fr tha jo chote screen par
     right column ko viewport se bahar push kar deta tha. Ab mobile par
     ek column me stack hoga. */
  .detail-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Grid items default to min-width:auto — kisi bhi andar ke element
     (coupon row, screenshots grid, video iframe wrapper) ki intrinsic
     width poore GRID COLUMN (aur isliye pure page) ko viewport se bahar
     stretch kar rahi thi. min-width:0 se column properly shrink karta
     hai aur horizontal scroll khatam ho jaata hai. */
  .detail-grid > * {
    min-width: 0;
  }
  .detail-page,
  .detail-page.container {
    overflow-x: hidden;
  }
  .coupon-container {
    flex-wrap: wrap;
  }
  .detail-image {
    width: 220px;
    max-width: 60vw;
    margin: 0 auto;
    font-size: 60px;
  }
  .detail-info h1 {
    font-size: 26px;
  }
  .detail-actions {
    flex-direction: column;
  }

  .detail-actions .btn,
  .detail-actions .btn-glow,
  .detail-actions .btn-glow-video,
  .detail-actions .btn-glow-trial {
    flex: none;
    width: 100%;
    min-width: unset;
    padding: 12px 20px;
    font-size: 14px;
    white-space: normal;
  }

  .btn-glow-continue {
    padding: 12px 20px;
    font-size: 14px;
  }
}

/* ===== Tablet View ===== */
@media (max-width: 1024px) and (min-width: 769px) {
  .detail-actions .btn,
  .detail-actions .btn-glow,
  .detail-actions .btn-glow-video,
  .detail-actions .btn-glow-trial {
    min-width: 120px;
    padding: 12px 16px;
    font-size: 13px;
  }
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ============================================
   PREMIUM GLOWING BUTTONS WITH GRADIENT BACKGROUND
   ============================================ */

/* ===== Buy Now Button (Main) ===== */
.btn-glow {
  position: relative;
  padding: 16px 36px;
  border-radius: 50px;
  font-weight: 800;
  font-size: 16px;
  color: #ffffff;
  cursor: pointer;
  border: none;
  background: linear-gradient(135deg, #7c3aed, #2563eb, #7c3aed);
  background-size: 300% 300%;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: inherit;
  text-decoration: none;
  box-shadow:
    0 0 20px rgba(124, 58, 237, 0.4),
    0 0 40px rgba(124, 58, 237, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  animation:
    gradientMove 3s ease infinite,
    pulseGlowBlue 2s ease-in-out infinite;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.btn-glow::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, #7c3aed, #2563eb, #d946ef, #7c3aed);
  background-size: 300% 300%;
  border-radius: 52px;
  z-index: -1;
  animation: gradientMove 4s ease infinite;
  filter: blur(8px);
  opacity: 0.6;
}

.btn-glow::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transform: skewX(-25deg);
  animation: shineSweep 4s infinite;
}

.btn-glow:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow:
    0 0 30px rgba(124, 58, 237, 0.6),
    0 0 60px rgba(124, 58, 237, 0.3),
    0 0 80px rgba(124, 58, 237, 0.15);
}

.btn-glow:hover::before {
  opacity: 1;
  filter: blur(12px);
}

.btn-glow:active {
  transform: scale(0.97);
}

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

@keyframes pulseGlowBlue {
  0%,
  100% {
    box-shadow:
      0 0 20px rgba(124, 58, 237, 0.4),
      0 0 40px rgba(124, 58, 237, 0.2);
  }
  50% {
    box-shadow:
      0 0 30px rgba(124, 58, 237, 0.7),
      0 0 60px rgba(124, 58, 237, 0.3),
      0 0 80px rgba(124, 58, 237, 0.1);
  }
}

/* ===== Watch Tutorial Button (Purple/Pink Gradient) ===== */
.btn-glow-video {
  position: relative;
  padding: 16px 28px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 15px;
  color: #ffffff;
  cursor: pointer;
  border: none;
  background: linear-gradient(135deg, #7c3aed, #d946ef, #7c3aed);
  background-size: 300% 300%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  box-shadow:
    0 0 20px rgba(124, 58, 237, 0.3),
    0 0 40px rgba(217, 70, 239, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  animation:
    gradientMove 4s ease infinite,
    pulseGlowPurple 2.5s ease-in-out infinite;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.btn-glow-video::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, #7c3aed, #d946ef, #ec4899, #7c3aed);
  background-size: 300% 300%;
  border-radius: 52px;
  z-index: -1;
  animation: gradientMove 5s ease infinite;
  filter: blur(10px);
  opacity: 0.5;
}

.btn-glow-video::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );
  transform: skewX(-25deg);
  animation: shineSweep 4.5s infinite;
}

.btn-glow-video:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow:
    0 0 30px rgba(124, 58, 237, 0.5),
    0 0 60px rgba(217, 70, 239, 0.25);
}

.btn-glow-video:hover::before {
  opacity: 0.8;
  filter: blur(15px);
}

.btn-glow-video:active {
  transform: scale(0.97);
}

@keyframes pulseGlowPurple {
  0%,
  100% {
    box-shadow:
      0 0 20px rgba(124, 58, 237, 0.3),
      0 0 40px rgba(217, 70, 239, 0.15);
  }
  50% {
    box-shadow:
      0 0 35px rgba(124, 58, 237, 0.6),
      0 0 60px rgba(217, 70, 239, 0.3),
      0 0 80px rgba(217, 70, 239, 0.1);
  }
}

/* ===== Request Trial Button (Green Gradient) ===== */
.btn-glow-trial {
  position: relative;
  padding: 16px 28px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 15px;
  color: #ffffff;
  cursor: pointer;
  border: none;
  background: linear-gradient(135deg, #059669, #10b981, #34d399, #059669);
  background-size: 300% 300%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  box-shadow:
    0 0 20px rgba(16, 185, 129, 0.3),
    0 0 40px rgba(16, 185, 129, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  animation:
    gradientMove 4s ease infinite,
    pulseGlowGreen 2.5s ease-in-out infinite;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.btn-glow-trial::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, #059669, #10b981, #34d399, #059669);
  background-size: 300% 300%;
  border-radius: 52px;
  z-index: -1;
  animation: gradientMove 5s ease infinite;
  filter: blur(10px);
  opacity: 0.5;
}

.btn-glow-trial::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );
  transform: skewX(-25deg);
  animation: shineSweep 4.5s infinite;
}

.btn-glow-trial:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow:
    0 0 30px rgba(16, 185, 129, 0.5),
    0 0 60px rgba(16, 185, 129, 0.25);
}

.btn-glow-trial:hover::before {
  opacity: 0.8;
  filter: blur(15px);
}

.btn-glow-trial:active {
  transform: scale(0.97);
}

@keyframes pulseGlowGreen {
  0%,
  100% {
    box-shadow:
      0 0 20px rgba(16, 185, 129, 0.3),
      0 0 40px rgba(16, 185, 129, 0.15);
  }
  50% {
    box-shadow:
      0 0 35px rgba(16, 185, 129, 0.6),
      0 0 60px rgba(16, 185, 129, 0.3),
      0 0 80px rgba(16, 185, 129, 0.1);
  }
}

/* ===== Continue Shopping Button (Gold/Orange Gradient) ===== */
.btn-glow-continue {
  position: relative;
  padding: 16px 28px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 15px;
  color: #ffffff;
  cursor: pointer;
  border: none;
  background: linear-gradient(135deg, #b45309, #f59e0b, #fbbf24, #b45309);
  background-size: 300% 300%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  box-shadow:
    0 0 20px rgba(245, 158, 11, 0.3),
    0 0 40px rgba(245, 158, 11, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  animation:
    gradientMove 4s ease infinite,
    pulseGlowGold 2.5s ease-in-out infinite;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  justify-content: center;
}

.btn-glow-continue::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, #b45309, #f59e0b, #fbbf24, #b45309);
  background-size: 300% 300%;
  border-radius: 52px;
  z-index: -1;
  animation: gradientMove 5s ease infinite;
  filter: blur(10px);
  opacity: 0.5;
}

.btn-glow-continue::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );
  transform: skewX(-25deg);
  animation: shineSweep 4.5s infinite;
}

.btn-glow-continue:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 0 30px rgba(245, 158, 11, 0.5),
    0 0 60px rgba(245, 158, 11, 0.25);
}

.btn-glow-continue:hover::before {
  opacity: 0.8;
  filter: blur(15px);
}

.btn-glow-continue:active {
  transform: scale(0.97);
}

@keyframes pulseGlowGold {
  0%,
  100% {
    box-shadow:
      0 0 20px rgba(245, 158, 11, 0.3),
      0 0 40px rgba(245, 158, 11, 0.15);
  }
  50% {
    box-shadow:
      0 0 35px rgba(245, 158, 11, 0.6),
      0 0 60px rgba(245, 158, 11, 0.3),
      0 0 80px rgba(245, 158, 11, 0.1);
  }
}

/* ===== Apply Coupon Button (Small) ===== */
.btn-glow-small {
  position: relative;
  padding: 10px 24px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 13px;
  color: #ffffff;
  cursor: pointer;
  border: none;
  background: linear-gradient(135deg, #7c3aed, #2563eb, #7c3aed);
  background-size: 300% 300%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  box-shadow:
    0 0 20px rgba(124, 58, 237, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  animation: gradientMove 3s ease infinite;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  white-space: nowrap;
}

.btn-glow-small::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );
  transform: skewX(-25deg);
  animation: shineSweep 3.5s infinite;
}

.btn-glow-small:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 0 30px rgba(124, 58, 237, 0.5);
}

.btn-glow-small:active {
  transform: scale(0.95);
}

/* ===== Shine Animation ===== */
@keyframes shineSweep {
  0% {
    left: -100%;
  }
  25% {
    left: 120%;
  }
  100% {
    left: 120%;
  }
}

/* ===== Card Buy Button (Product Card) ===== */
.btn-buy {
  flex: 1;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border: none;
  color: #fff;
  background: var(--card-gradient);
  background-size: 300% 300%;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  font-family: inherit;
  box-shadow:
    var(--card-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
  animation: gradientMove 3s ease infinite;
}

.btn-buy::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.15) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.4s;
  transform: scale(0.5);
}

.btn-buy::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transform: skewX(-25deg);
  animation: shineSweep 4s infinite;
}

.btn-buy:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    var(--card-glow),
    0 0 40px var(--card-color-alpha);
}

.btn-buy:hover::before {
  opacity: 1;
  transform: scale(1);
}

.btn-buy:active {
  transform: scale(0.97);
}

/* ===== DETAIL PAGE PREMIUM BACKGROUND ===== */
.detail-page {
  position: relative;
}

.detail-grid {
  position: relative;
  z-index: 1;
}

.detail-grid::before {
  content: "";
  position: absolute;
  top: -100px;
  left: -100px;
  width: 300px;
  height: 300px;
  background: radial-gradient(
    circle,
    rgba(124, 58, 237, 0.08) 0%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

.detail-grid::after {
  content: "";
  position: absolute;
  bottom: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  background: radial-gradient(
    circle,
    rgba(16, 185, 129, 0.06) 0%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

/* ============================================
   RESELLER SECTIONS - COMPLETE FIXED
   ============================================ */

.reseller-section,
.sourcecode-section {
  padding: 60px 0 40px;
  margin-top: 30px;
  border-top: 1px solid var(--border-color);
}

/* ===== Container ke andar content center ===== */
.reseller-section .container,
.sourcecode-section .container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-title {
  font-size: 32px;
  font-weight: 800;
  font-family: "Poppins", sans-serif;
  text-align: center;
  background: var(--gradient-master);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shiftGradient 4s linear infinite;
  margin-bottom: 12px;
}

/* ===== FORMATTED CONTENT - COMPLETE FIX ===== */
.formatted-content {
  max-width: 100%; /* pehle 800px tha, isi wajah se margin bada tha */
  margin: 0 auto 30px;
  padding: 0 16px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.8;
  text-align: left;
}

/* ===== HEADINGS ===== */
.formatted-content h3 {
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  margin: 24px 0 12px;
  text-align: left;
}

.formatted-content h4 {
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  margin: 20px 0 10px;
  text-align: left;
}

/* ===== PARAGRAPHS ===== */
.formatted-content p {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.8;
  margin: 8px 0;
  text-align: left;
}

.formatted-content p strong {
  color: #ffffff;
  font-weight: 700;
}

/* ===== UNORDERED LISTS ===== */
.formatted-content ul {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  text-align: left;
}

.formatted-content ul li {
  position: relative;
  padding: 6px 0 6px 28px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
}

.formatted-content ul li::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: 6px;
  color: #a855f7;
  font-size: 18px;
}

.formatted-content ul li strong {
  color: #ffffff;
  font-weight: 600;
}

/* ===== ORDERED LISTS ===== */
.formatted-content ol {
  padding-left: 24px;
  margin: 12px 0;
  text-align: left;
}

.formatted-content ol li {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
  margin: 4px 0;
  padding-left: 4px;
  text-align: left;
}

.formatted-content ol li strong {
  color: #ffffff;
  font-weight: 600;
}

/* ===== BLOCKQUOTE ===== */
.formatted-content blockquote {
  border-left: 4px solid #a855f7;
  padding: 12px 20px;
  margin: 16px 0;
  background: rgba(168, 85, 247, 0.06);
  border-radius: 0 10px 10px 0;
  color: var(--text-secondary);
  font-style: italic;
  font-size: 15px;
  line-height: 1.7;
  text-align: left;
}

.formatted-content blockquote::before {
  content: '"';
  color: #a855f7;
  font-size: 24px;
  font-weight: 700;
  margin-right: 4px;
}

.formatted-content blockquote::after {
  content: '"';
  color: #a855f7;
  font-size: 24px;
  font-weight: 700;
  margin-left: 4px;
}

/* ===== LINKS ===== */
.formatted-content a {
  color: #a855f7;
  text-decoration: none;
  border-bottom: 1px dashed rgba(168, 85, 247, 0.3);
  transition: all 0.3s;
  font-weight: 500;
}

.formatted-content a:hover {
  color: #d946ef;
  border-bottom-color: #d946ef;
}

/* ===== HR LINE ===== */
.formatted-content hr {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 20px 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .formatted-content {
    padding: 0 12px;
  }

  .formatted-content h3 {
    font-size: 19px;
  }

  .formatted-content h4 {
    font-size: 16px;
  }

  .formatted-content ul li {
    padding: 5px 0 5px 24px;
    font-size: 14px;
  }

  .formatted-content ul li::before {
    font-size: 16px;
    top: 5px;
  }

  .formatted-content ol li {
    font-size: 14px;
  }

  .formatted-content blockquote {
    padding: 10px 16px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .formatted-content {
    padding: 0 8px;
  }

  .formatted-content h3 {
    font-size: 17px;
  }

  .formatted-content h4 {
    font-size: 15px;
  }
}

/* ===== FEATURE GRID ===== */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
  margin: 20px 0 30px;
  padding: 0 10px;
}

.feature-card {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--border-color);
  text-align: center;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1.5px;
  background: var(--gradient-master);
  opacity: 0;
  transition: opacity 0.4s;
  -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;
}

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

.feature-card:hover {
  transform: translateY(-6px);
  background: var(--bg-card-hover);
  box-shadow: 0 12px 40px rgba(168, 85, 247, 0.15);
}

.feature-card .feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 24px;
  background: var(--gradient-master);
  background-size: 200% auto;
  animation: shiftGradient 4s linear infinite;
  box-shadow: 0 4px 20px rgba(168, 85, 247, 0.3);
  color: #fff;
}

.feature-card h4 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
  font-family: "Poppins", sans-serif;
}

.feature-card p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

/* ===== CTA BUTTONS ===== */
.reseller-cta,
.sourcecode-cta {
  text-align: center;
  margin-top: 30px;
  padding: 0 10px;
}

.reseller-cta .btn-glow,
.sourcecode-cta .btn-glow {
  padding: 16px 40px;
  font-size: 16px;
}

/* ===== VIDEO GRID ===== */
.reseller-videos-grid,
.sourcecode-videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin: 20px 0 30px;
  padding: 0 10px;
}

/* ===== VIDEO CARD ===== */
.video-card {
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.video-card:hover {
  transform: translateY(-6px);
  border-color: #a855f7;
  box-shadow: 0 12px 40px rgba(168, 85, 247, 0.15);
}

.video-card .video-thumbnail-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  background: #0a0a0f;
  overflow: hidden;
}

.video-card .video-thumbnail-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.video-card:hover .video-thumbnail-wrapper img {
  transform: scale(1.05);
}

.video-card .video-thumbnail-wrapper .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 56px;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
  transition: all 0.3s;
  pointer-events: none;
}

.video-card:hover .video-thumbnail-wrapper .play-button {
  color: #a855f7;
  transform: translate(-50%, -50%) scale(1.1);
}

.video-card .video-info {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.video-card .video-info .video-title {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
}

.video-card .video-info .video-duration {
  color: var(--text-muted);
  font-size: 12px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .section-title {
    font-size: 24px;
  }

  .feature-grid {
    grid-template-columns: 1fr 1fr;
    padding: 0 5px;
  }

  .reseller-videos-grid,
  .sourcecode-videos-grid {
    grid-template-columns: 1fr 1fr;
    padding: 0 5px;
  }

  .section-subtitle.formatted-content {
    padding: 0 5px;
  }

  .formatted-content {
    padding: 0 5px;
  }
}

@media (max-width: 480px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }

  .reseller-videos-grid,
  .sourcecode-videos-grid {
    grid-template-columns: 1fr;
  }

  .reseller-cta .btn-glow,
  .sourcecode-cta .btn-glow {
    padding: 12px 24px;
    font-size: 14px;
    width: 100%;
    justify-content: center;
  }
}