/* ========== HERO SECTION ========== */
.hero {
    background: linear-gradient(135deg, var(--navy) 0%, #1a1050 40%, var(--navy-light) 100%);
    overflow: hidden;
    position: relative;
    margin-top: calc(-1 * var(--header-height, 76px)); /* M5: Use CSS variable for header height */
}
.hero-row {
    display: flex;
    min-height: 100vh;
}
.hero-col-text {
    width: 60%;
    padding: 120px 40px 60px 80px; /* Top padding accounts for header height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.hero-col-video {
    width: 40%;
    position: relative;
    margin-top: 0;   /* No top gap — video touches header */
    margin-bottom: 0;
    margin-right: 0;  /* No right gap — video touches edge */
    margin-left: 0;
    border-radius: 0;
    overflow: hidden;
}
.hero-col-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hero-col-video video::-webkit-media-controls { display: none !important; }
.hero-col-video video::-webkit-media-controls-enclosure { display: none !important; }
.hero-col-video video::-webkit-media-controls-panel { display: none !important; }
@media (max-width: 1024px) {
    .hero-col-text { width: 55%; padding: 110px 30px 50px 40px; }
    .hero-col-video { width: 45%; }
}
@media (max-width: 768px) {
    .hero { margin-top: calc(-1 * var(--header-height, 76px)); }
    .hero-row { flex-direction: column; min-height: auto; }
    .hero-col-text { width: 100%; padding: 150px 20px 30px; }
    .hero-col-video { width: 100%; height: 300px; position: relative; }
    .hero-badge { font-size: 0.7rem !important; padding: 5px 12px !important; margin-bottom: 10px !important; }
    .hero-shapes { display: none; }
    .hero::before, .hero::after { display: none; }
}
@media (max-width: 480px) {
    .hero-col-text { padding: 140px 16px 24px; }
    .hero-col-video { height: 220px; }
    .hero h1 { font-size: 1.3rem !important; line-height: 1.3 !important; }
    .hero-col-text p { font-size: 0.82rem !important; line-height: 1.5 !important; }
    .hero-search { margin-top: 16px !important; max-width: 340px; }
    .hero-search input { padding: 14px 50px 14px 18px !important; font-size: 0.82rem !important; }
    .hero-search button { width: 38px !important; height: 38px !important; }
    .hero-btns { gap: 10px !important; flex-direction: row !important; flex-wrap: wrap !important; }
    .hero-btns .btn { padding: 10px 22px !important; font-size: 0.82rem !important; width: auto !important; flex: none !important; }
}
.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(226,16,88,0.15) 0%, transparent 70%);
    animation: pulse 8s ease-in-out infinite;
}
.hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(189,10,72,0.1) 0%, transparent 70%);
    animation: pulse 6s ease-in-out infinite reverse;
}
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}
/* Floating geometric shapes */
.hero-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.06;
    animation: float 20s ease-in-out infinite;
}
.shape-1 { width: 300px; height: 300px; background: var(--purple); top: 10%; right: 15%; animation-delay: 0s; }
.shape-2 { width: 200px; height: 200px; background: var(--coral); bottom: 20%; left: 10%; animation-delay: -5s; }
.shape-3 { width: 150px; height: 150px; background: var(--gold); top: 60%; right: 30%; animation-delay: -10s; border-radius: 30%; }
.shape-4 { width: 100px; height: 100px; background: var(--purple); top: 30%; left: 20%; animation-delay: -15s; }
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-30px) rotate(5deg); }
    50% { transform: translateY(-15px) rotate(-3deg); }
    75% { transform: translateY(-40px) rotate(3deg); }
}
.hero-content {
    position: relative;
    z-index: 2;
    text-align: left;
    max-width: 100%;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(226,16,88,0.2);
    border: 1px solid rgba(226,16,88,0.3);
    color: var(--gold);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 24px;
    animation: fadeInDown 0.8s ease;
    align-self: center;
}
.hero h1 {
    font-size: clamp(2.2rem, 5.5vw, 3.8rem);
    color: var(--white);
    margin-bottom: 20px;
    animation: fadeInUp 0.8s ease 0.2s both;
}
.hero h1 .highlight {
    background: linear-gradient(135deg, var(--gold), #ffaa00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero p {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.7);
    max-width: 650px;
    margin: 0 0 36px;
    animation: fadeInUp 0.8s ease 0.4s both;
}
.hero-btns {
    display: flex;
    gap: 16px;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 36px;
    animation: fadeInUp 0.8s ease 0.5s both;
}
/* Search Bar */
.hero-search {
    max-width: 100%;
    margin: 0 0 40px;
    position: relative;
    animation: fadeInUp 0.8s ease 0.6s both;
}
.hero-search input {
    width: 100%;
    padding: 18px 60px 18px 24px;
    border-radius: 60px;
    border: 2px solid rgba(226,16,88,0.3);
    background: rgba(255,255,255,0.08);
    color: var(--white);
    font-size: 1rem;
    font-family: var(--font-body);
    backdrop-filter: blur(10px);
    transition: var(--transition);
}
.hero-search input::placeholder { color: rgba(255,255,255,0.4); }
.hero-search input:focus { outline: none; border-color: var(--purple); background: rgba(255,255,255,0.12); }
.hero-search button {
    position: absolute;
    right: 6px;
    top: 6px;
    bottom: 6px;
    width: 48px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--purple), var(--coral));
    color: var(--white);
    font-size: 1.1rem;
    cursor: pointer;
    transition: var(--transition);
}
.hero-search button:hover { transform: scale(1.05); }

/* Trust Badges — Hero Section (no boxes, plain logos) */
.hero-trust {
    animation: fadeInUp 0.8s ease 0.7s both;
}
.hero-trust p {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.35);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}
.trust-logos {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}
.trust-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.trust-logo:hover {
    transform: scale(1.08);
}
.trust-logo img {
    max-height: 28px;
    max-width: 90px;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}
.trust-logo:hover img {
    opacity: 1;
}
.trust-logo .logo-fallback {
    color: rgba(255,255,255,0.7);
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    white-space: nowrap;
    font-family: var(--font-heading);
}

/* Floating Influencer Cards */
.floating-cards {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.float-card {
    position: absolute;
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: floatCard 15s ease-in-out infinite;
}
.float-card-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 700;
    font-size: 0.85rem;
}
.float-card-info span { display: block; }
.float-card-info .fc-name { color: var(--white); font-weight: 600; font-size: 0.8rem; }
.float-card-info .fc-stat { color: var(--gold); font-size: 0.7rem; }
.fc1 { top: 18%; right: 8%; animation-delay: 0s; }
.fc2 { bottom: 25%; left: 5%; animation-delay: -4s; }
.fc3 { top: 35%; left: 3%; animation-delay: -8s; }
.fc4 { bottom: 15%; right: 6%; animation-delay: -12s; }
@keyframes floatCard {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

/* ========== BRAND MARQUEE ========== */
/* ========== MICRO-INFLUENCERS BY CITY ========== */
.city-influencers-section {
    padding: 70px 0;
    background: #fff;
}
.city-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 16px;
    margin-top: 36px;
}
.city-card {
    text-align: center;
    text-decoration: none;
    color: var(--navy);
    transition: all 0.3s ease;
    cursor: pointer;
}
.city-card:hover { transform: translateY(-5px); }
.city-img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #e8e0ff, #ffe0ec);
    position: relative;
}
.city-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.city-card:hover .city-img img { transform: scale(1.08); }
.city-img .city-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(10,17,40,0.6));
    border-radius: 16px;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.city-card:hover .city-overlay { opacity: 1; }
.city-card h4 {
    font-size: 0.85rem;
    font-weight: 700;
    margin: 0;
}
@media (max-width: 1024px) { .city-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 768px) { .city-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; } .city-card h4 { font-size: 0.75rem; } }
@media (max-width: 480px) { .city-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } }

/* ========== SCROLLING MARQUEE STRIP (Restored) ========== */
.marquee-section {
    background: linear-gradient(135deg, var(--purple-dark), var(--purple));
    padding: 16px 0;
    overflow: hidden;
}
.marquee-track {
    display: flex;
    gap: 50px;
    align-items: center;
    animation: marqueeScroll 30s linear infinite;
    width: max-content;
}
.marquee-item {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    height: 36px;
    min-width: 100px;
}
.marquee-item img {
    max-height: 34px;
    max-width: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}
.marquee-item:hover img { opacity: 1; }
.marquee-item .marquee-fallback {
    color: rgba(255,255,255,0.7);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ========== BUSINESS SEGMENTS & CATEGORIES ========== */
.categories-section {
    padding: 70px 0;
    background: var(--gray-50);
}
.categories-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-top: 36px;
}
.cat-card {
    background: #fff;
    border-radius: 10px;
    padding: 18px 12px;
    text-align: center;
    border: 1px solid #eee;
    transition: all 0.25s ease;
    text-decoration: none;
    color: var(--navy);
    cursor: pointer;
}
.cat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(226,16,88,0.1);
    border-color: var(--purple);
}
/* PER-CATEGORY COLOUR (2026-09-17). `--cat` and `--cat-tint` are set inline
   per card from the API's own colour, so Fitness is green, Tech is indigo,
   Food is amber — the way the admin coloured them — instead of twenty pink
   squares. The glyph is the self-hosted Ionicons outline SVG painted through
   a mask, which is what lets a single-colour SVG take any colour without a
   copy per hue. The Font Awesome rules stay for the static fallback list. */
.cat-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--cat-tint, rgba(226,16,88,0.06));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-size: 1rem;
    color: var(--cat, var(--purple));
    transition: all 0.25s ease;
}
.cat-ico {
    display: block;
    width: 22px;
    height: 22px;
    background-color: var(--cat, var(--purple));
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
    transition: background-color 0.25s ease;
}
.cat-card:hover { border-color: var(--cat, var(--purple)); box-shadow: 0 6px 20px var(--cat-tint, rgba(226,16,88,0.1)); }
.cat-card:hover .cat-card-icon {
    background: var(--cat, var(--purple));
    color: #fff;
}
.cat-card:hover .cat-ico { background-color: #fff; }
.cat-card h4 {
    font-size: 0.78rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}
@media (max-width: 1024px) { .categories-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) { .categories-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } .cat-card { padding: 14px 10px; } }
@media (max-width: 480px) { .categories-grid { grid-template-columns: repeat(2, 1fr); } }

/* ========== TOP INFLUENCERS SECTIONS (Instagram & YouTube) ========== */
.top-influencers-section {
    padding: 80px 0;
    background: #fff;
}
.top-influencers-section.alt-bg { background: var(--gray-50); }
.ti-platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 16px;
}
.ti-platform-badge.instagram { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color:#fff; }
.ti-platform-badge.youtube { background: #FF0000; color:#fff; }
.ti-grid {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 40px;
    align-items: start;
    margin-top: 40px;
}
.ti-cats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.ti-cat-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 24px 14px;
    text-align: center;
    text-decoration: none;
    color: var(--navy);
    transition: all 0.3s ease;
}
.ti-cat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    border-color: var(--purple);
}
.ti-cat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--purple);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-size: 1.2rem;
    color: var(--purple);
}
.ti-cat-card:hover .ti-cat-icon { background: var(--purple); color: #fff; }
.ti-cat-card h4 { font-size: 0.8rem; font-weight: 600; margin: 0; }
.ti-visual {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    height: 100%;
    min-height: 300px;
    background: linear-gradient(135deg, var(--purple), var(--coral));
    display: flex;
    align-items: center;
    justify-content: center;
}
.ti-visual i { font-size: 4rem; color: rgba(255,255,255,0.3); }
/* When the box holds an illustration rather than a photo, it stops being a
   saturated colour panel. The line art is drawn for a light surface — on solid
   crimson the dark strokes disappear — so the tile becomes a soft brand tint
   with the drawing centred and breathing. */
.ti-visual:has(.ti-illus) {
    background: #FDF0F4 !important;
    border: 1px solid rgba(226,16,88,0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
}
#top-youtube .ti-visual:has(.ti-illus) { background: #FFF1F1 !important; border-color: rgba(255,0,0,0.12); }
.ti-visual .ti-illus { width: 100%; height: auto; max-height: 100%; object-fit: contain; display: block; }
/* :has() is unsupported on older browsers; this keeps the art sane there too. */
.ti-visual .ti-illus { background: transparent; }
.ti-cta-row {
    text-align: center;
    margin-top: 40px;
}
@media (max-width: 768px) {
    .ti-grid { grid-template-columns: 1fr; }
    .ti-cats-grid { grid-template-columns: repeat(2, 1fr); }
    .ti-visual { display: none; }
}

/* ========== BECOME A CREATOR SECTION ========== */
.join-creator-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #f0f8ff, #f5f0ff, #fff0f5);
}
.join-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.join-visual {
    text-align: center;
    position: relative;
}
.join-visual-circle {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--purple), var(--coral));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
}
.join-visual-circle i { font-size: 5rem; color: rgba(255,255,255,0.8); }
/* The creator illustration that replaced the gradient circle (2026-09-17).
   Transparent SVG, so it floats on the section's pastel gradient; a soft
   brand glow underneath gives it the same weight the circle had. */
.join-visual-illus {
    width: 320px;
    height: 320px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.join-visual-illus::before {
    content: '';
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(226,16,88,0.16), rgba(226,16,88,0) 70%);
    z-index: 0;
}
.join-visual-illus img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
/* The reviews mockup inside the WHY panel: fills the height, keeps its
   transparent edges, sits under the floating badges (z-index 2 on .why-visual-float). */
.why-visual-art { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 64px 40px 72px; }
.why-visual-art img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 18px 40px rgba(0,0,0,0.35)); }
.join-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
}
.join-step {
    background: #fff;
    border-radius: 14px;
    padding: 24px 16px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.join-step-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--purple), var(--coral));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    color: #fff;
    font-size: 1.2rem;
}
.join-step h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 6px; }
.join-step p { font-size: 0.8rem; color: var(--gray-400); margin: 0; line-height: 1.5; }
.join-info h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 16px; }
.join-info h2 span { color: var(--purple); }
.join-info > p { color: var(--gray-400); line-height: 1.7; margin-bottom: 28px; }
.join-benefits { display: flex; flex-direction: column; gap: 14px; margin-bottom: 30px; }
.join-benefit { display: flex; align-items: center; gap: 12px; font-weight: 500; color: var(--navy); }
.join-benefit i { color: var(--purple); font-size: 1.1rem; width: 20px; }
@media (max-width: 768px) {
    .join-grid { grid-template-columns: 1fr; }
    .join-steps { grid-template-columns: 1fr; }
    .join-visual-circle { width: 200px; height: 200px; }
    .join-visual-circle i { font-size: 3rem; }
}

/* ========== FAQ SECTION ========== */
.faq-section {
    padding: 80px 0;
    background: linear-gradient(180deg, #f8f9ff, #f0f2ff);
}
.faq-list {
    max-width: 800px;
    margin: 40px auto 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.faq-item {
    background: #fff;
    border: 1px solid #e8eaef;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}
.faq-item.active { border-color: var(--purple); box-shadow: 0 4px 20px rgba(226,16,88,0.1); }
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    color: var(--navy);
    transition: color 0.3s ease;
    gap: 14px;
}
.faq-item.active .faq-question { color: var(--purple); }
.faq-question i {
    font-size: 0.85rem;
    color: var(--purple);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
.faq-item.active .faq-question i { transform: rotate(180deg); }
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.faq-answer-inner {
    padding: 0 24px 20px;
    color: var(--gray-400);
    line-height: 1.7;
    font-size: 0.95rem;
}

/* ========== WHATSAPP FLOATING BUTTON ========== */
.whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9998;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.6rem;
    box-shadow: 0 4px 20px rgba(37,211,102,0.4);
    transition: all 0.3s ease;
    text-decoration: none;
    animation: whatsappPulse 2s infinite;
}
.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(37,211,102,0.5);
}
@keyframes whatsappPulse {
    0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,0.4); }
    50% { box-shadow: 0 4px 30px rgba(37,211,102,0.6), 0 0 0 10px rgba(37,211,102,0.1); }
}

/* ========== STATS SECTION ========== */
.stats-section {
    padding: 100px 0 80px;
    background: var(--gray-50);
    position: relative;
}
.stats-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%236c3ce0' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 60px;
    position: relative;
}
.stat-card {
    text-align: center;
    padding: 40px 20px;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--purple), var(--coral));
}
.stat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.stat-number {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--purple), var(--coral));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 4px;
}
.stat-label {
    font-size: 0.9rem;
    color: var(--gray-400);
    font-weight: 500;
}
.achievements {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
}
.achievement {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.achievement:hover { box-shadow: var(--shadow-md); }
.achievement-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(226,16,88,0.1), rgba(189,10,72,0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--purple);
    font-size: 1.2rem;
    flex-shrink: 0;
}
.achievement span {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--navy);
}

/* ========== CREATOR DATABASE SHOWCASE ========== */
.creator-db-section {
    padding: 100px 0;
    background: var(--white);
    position: relative;
}
.db-overview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 60px;
}
.db-visual {
    position: relative;
}
.db-ring-container {
    position: relative;
    width: 340px;
    height: 340px;
    margin: 0 auto;
}
.db-ring-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
}
.db-ring-center .db-big {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--purple), var(--coral));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}
.db-ring-center p {
    font-size: 0.9rem;
    color: var(--gray-400);
    font-weight: 600;
}
.db-ring-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.db-ring-svg circle {
    fill: none;
    stroke-width: 20;
    stroke-linecap: round;
}
.db-ring-bg { stroke: var(--gray-100); }
.platform-orbit {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--white);
    box-shadow: var(--shadow-md);
    z-index: 3;
    transition: var(--transition);
}
.platform-orbit:hover { transform: scale(1.15); }
.platform-orbit .orbit-count {
    position: absolute;
    bottom: -8px;
    right: -8px;
    background: var(--navy);
    color: var(--gold);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    border: 2px solid var(--white);
}
.po-yt { background: linear-gradient(135deg, #ff0000, #cc0000); top: 0; left: 50%; transform: translateX(-50%); }
.po-ig { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); top: 25%; right: -10px; }
.po-li { background: linear-gradient(135deg, #0077b5, #005e93); bottom: 25%; right: -10px; }
.po-tw { background: linear-gradient(135deg, #1a1a1a, #333); bottom: 0; left: 50%; transform: translateX(-50%); }
.po-meme { background: linear-gradient(135deg, var(--gold), #ff8c00); bottom: 25%; left: -10px; }
.po-blog { background: linear-gradient(135deg, var(--purple), #9b59b6); top: 25%; left: -10px; }

.db-info h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    margin-bottom: 16px;
}
.db-info > p {
    color: var(--gray-400);
    margin-bottom: 30px;
    font-size: 1rem;
    line-height: 1.7;
}
.db-breakdown {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.db-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--gray-50);
    border-radius: var(--radius);
    border: 1px solid var(--gray-100);
    transition: var(--transition);
}
.db-item:hover {
    border-color: var(--purple);
    background: rgba(226,16,88,0.04);
}
.db-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--white);
    flex-shrink: 0;
}
.db-item-info .db-item-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--navy);
}
.db-item-info .db-item-count {
    font-size: 0.75rem;
    color: var(--gray-400);
}

/* ── Creator-database section, rebuilt ────────────────────────────────
   The old left-hand visual was a fake donut; it is now a real illustration.
   The rows became links (each opens that category in the marketplace) and the
   icon tile lost its per-item gradient — six different gradients in one panel
   was a large part of why the section read as assembled rather than designed. */
.db-illus {
    background: #FDF0F4;
    border: 1px solid rgba(226,16,88,.14);
    border-radius: 20px;
    padding: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.db-illus img { width: 100%; height: auto; max-height: 400px; object-fit: contain; display: block; }

a.db-item { text-decoration: none; }
.db-item-icon {
    background: rgba(226,16,88,.10);
    border: 1px solid rgba(226,16,88,.18);
    color: #E21058;
}
.db-item-icon i { font-size: 18px; line-height: 1; }
.db-item-info .db-item-desc {
    font-size: 0.75rem;
    color: var(--gray-400);
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
}
@media (max-width: 900px) { .db-illus { max-width: 420px; margin: 0 auto; } }

/* Niche breakdown strip */
.niche-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
.niche-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--navy);
    transition: var(--transition);
    cursor: default;
}
.niche-chip:hover {
    border-color: var(--purple);
    background: rgba(226,16,88,0.06);
    color: var(--purple);
}
.niche-chip .niche-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.niche-chip .niche-num {
    color: var(--gray-400);
    font-weight: 400;
    font-size: 0.8rem;
}
@media (max-width: 1024px) {
    .db-overview { grid-template-columns: 1fr; }
    .db-ring-container { width: 280px; height: 280px; margin-bottom: 30px; }
}
@media (max-width: 768px) {
    .db-breakdown { grid-template-columns: 1fr; }
    .niche-chip { padding: 8px 14px; font-size: 0.8rem; }
}

/* ========== MARKETPLACE PREVIEW ========== */
.marketplace-section {
    padding: 100px 0;
    background: var(--white);
}
.filter-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}
.filter-tab {
    padding: 10px 24px;
    border-radius: 50px;
    border: 2px solid var(--gray-200);
    background: transparent;
    color: var(--gray-600);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition);
}
.filter-tab:hover, .filter-tab.active {
    background: var(--purple);
    border-color: var(--purple);
    color: var(--white);
}

/* Marketplace-style creator cards on homepage */
.hp-creators-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 50px;
}
.hp-creator-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-100);
    padding: 24px;
    transition: var(--transition);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.hp-creator-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}
.hp-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.hp-avatar { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; position: relative; overflow: hidden; }
.hp-avatar img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.hp-avatar-fallback { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); font-weight: 700; font-size: 1rem; }
.hp-creator-name { font-size: 0.95rem; font-family: var(--font-body); font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-creator-handle { font-size: 0.8rem; color: var(--gray-400); }
.hp-creator-handle i { margin-right: 3px; }
.hp-niche-tag { display: inline-block; background: linear-gradient(135deg, rgba(226,16,88,0.08), rgba(189,10,72,0.08)); color: var(--purple); padding: 4px 12px; border-radius: 50px; font-size: 0.75rem; font-weight: 600; margin-bottom: 14px; }
.hp-meta { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.hp-meta-item { text-align: center; padding: 8px 4px; background: var(--gray-50); border-radius: 8px; }
.hp-meta-value { font-weight: 700; font-size: 0.9rem; color: var(--navy); }
.hp-meta-label { font-size: 0.65rem; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.5px; }
.hp-brands-text { font-size: 0.78rem; color: var(--gray-400); margin-bottom: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.hp-brands-text strong { color: var(--gray-600); }
.hp-pricing { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.hp-price-chip { background: linear-gradient(135deg, rgba(226,16,88,0.06), rgba(189,10,72,0.06)); border: 1px solid rgba(226,16,88,0.12); padding: 4px 10px; border-radius: 8px; font-size: 0.75rem; font-weight: 600; color: var(--navy); white-space: nowrap; }
.hp-price-chip .hp-price-label { color: var(--gray-400); font-weight: 500; margin-right: 3px; }
.hp-price-chip .hp-price-val { color: var(--purple); font-weight: 700; }
.hp-card-actions { display: flex; gap: 8px; align-items: center; }
.hp-book-btn { flex: 1; text-align: center; padding: 11px; border-radius: 10px; border: none; background: linear-gradient(135deg, var(--purple), var(--coral)); color: var(--white); font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: var(--transition); font-family: var(--font-body); }
.hp-book-btn:hover { transform: scale(1.03); box-shadow: 0 4px 15px rgba(226,16,88,0.3); }
.hp-view-btn { flex: 1; text-align: center; padding: 11px; border-radius: 10px; border: 2px solid var(--purple); color: var(--purple); font-weight: 600; font-size: 0.85rem; background: transparent; cursor: pointer; transition: var(--transition); font-family: var(--font-body); text-decoration: none; display: block; }
.hp-view-btn:hover { background: var(--purple); color: var(--white); }
.hp-wa-btn { width: 42px; height: 42px; border-radius: 10px; border: none; background: #25D366; color: var(--white); font-size: 1.1rem; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; flex-shrink: 0; text-decoration: none; }
.hp-wa-btn:hover { background: #1da851; transform: scale(1.05); color: var(--white); }
.hp-compare-btn { width: 42px; height: 42px; border-radius: 10px; border: 2px solid var(--gray-200); background: var(--white); color: var(--gray-400); font-size: 0.85rem; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hp-compare-btn:hover { border-color: var(--purple); color: var(--purple); }
.hp-heart-btn { width: 42px; height: 42px; border-radius: 10px; border: 2px solid var(--gray-200); background: var(--white); color: var(--gray-400); font-size: 1rem; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hp-heart-btn:hover { border-color: #BD0A48; color: #BD0A48; }
.hp-heart-btn.shortlisted { background: #BD0A48; border-color: #BD0A48; color: var(--white); }
.hp-badge-row { position: absolute; top: 16px; right: 16px; display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.hp-featured-badge { background: linear-gradient(135deg, var(--gold), #ffaa00); color: #5a4200; font-size: 0.65rem; padding: 3px 10px; border-radius: 20px; font-weight: 700; display: flex; align-items: center; gap: 3px; box-shadow: 0 2px 8px rgba(255,215,0,0.4); }
.hp-top-rated-badge { background: linear-gradient(135deg, var(--purple), #BD0A48); color: var(--white); font-size: 0.65rem; padding: 3px 10px; border-radius: 20px; font-weight: 700; display: flex; align-items: center; gap: 3px; }
.hp-yt-badge { background: #ff0000; color: #fff; font-size: 0.65rem; padding: 3px 8px; border-radius: 20px; font-weight: 600; display: flex; align-items: center; gap: 3px; }
.hp-li-badge { background: rgba(0,119,181,0.1); color: #0077B5; font-size: 0.65rem; padding: 3px 8px; border-radius: 20px; font-weight: 600; display: flex; align-items: center; gap: 3px; }
.verified-badge { width: 16px; height: 16px; vertical-align: middle; display: inline-block; flex-shrink: 0; }

@media (max-width: 1024px) {
    .hp-creators-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .hp-creators-grid { grid-template-columns: 1fr; }
    .hp-card-actions { flex-wrap: wrap; }
}
@media (max-width: 480px) {
    .hp-creators-grid { gap: 16px; }
    .hp-creator-card { padding: 18px; }
}

/* ========== SERVICES SECTION ========== */
.services-section {
    padding: 100px 0;
    background: var(--navy);
    position: relative;
    overflow: hidden;
}
.services-section::before {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(226,16,88,0.15), transparent 70%);
}
.services-section .section-title { color: var(--white); }
.services-section .section-subtitle { color: rgba(255,255,255,0.5); }
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    position: relative;
}
.service-card {
    padding: 36px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-lg);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(226,16,88,0.1), rgba(189,10,72,0.05));
    opacity: 0;
    transition: var(--transition);
}
.service-card:hover {
    transform: translateY(-8px);
    border-color: rgba(226,16,88,0.3);
    box-shadow: var(--shadow-glow);
}
.service-card:hover::before { opacity: 1; }
.service-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--purple), var(--coral));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--white);
    margin-bottom: 20px;
    position: relative;
}
.service-card h3 {
    color: var(--white);
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 10px;
    position: relative;
}
.service-card p {
    color: rgba(255,255,255,0.5);
    font-size: 0.9rem;
    line-height: 1.6;
    position: relative;
}

/* ========== HOW IT WORKS ========== */
.how-section {
    padding: 100px 0;
    background: linear-gradient(180deg, var(--gray-50) 0%, var(--white) 100%);
}
.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative;
}
.steps::before {
    content: '';
    position: absolute;
    top: 50px;
    left: 12%;
    right: 12%;
    height: 3px;
    background: linear-gradient(90deg, var(--purple), var(--coral));
    border-radius: 2px;
}
.step {
    text-align: center;
    position: relative;
    z-index: 1;
}
.step-number {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--purple), var(--coral));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 4px 20px rgba(226,16,88,0.3);
}
.step-number i {
    font-size: 1.4rem;
    color: var(--white);
}
.step h3 {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.step p {
    font-size: 0.85rem;
    color: var(--gray-400);
    max-width: 220px;
    margin: 0 auto;
}

/* ========== WHY CHOOSE US ========== */
.why-section {
    padding: 100px 0;
    background: var(--white);
}
.why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.why-features {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.why-feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    border-radius: var(--radius);
    transition: var(--transition);
    border: 1px solid transparent;
}
.why-feature:hover {
    background: var(--gray-50);
    border-color: var(--gray-100);
}
.why-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(226,16,88,0.1), rgba(189,10,72,0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--purple);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.why-feature h4 {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.why-feature p {
    font-size: 0.85rem;
    color: var(--gray-400);
}
.why-visual {
    position: relative;
    height: 500px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--navy), #1a1050);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.why-visual-content {
    text-align: center;
    position: relative;
    z-index: 2;
}
.why-visual-content .big-number {
    font-family: var(--font-heading);
    font-size: 5rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--gold), #ffaa00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.why-visual-content p {
    color: rgba(255,255,255,0.6);
    font-size: 1.1rem;
}
.why-visual::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(226,16,88,0.3), transparent 70%);
    top: 10%;
    right: -10%;
}
.why-visual::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(189,10,72,0.2), transparent 70%);
    bottom: 10%;
    left: -5%;
}
.why-visual-float {
    position: absolute;
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius);
    padding: 12px 18px;
    color: var(--white);
    font-size: 0.8rem;
    font-weight: 600;
    animation: floatCard 12s ease-in-out infinite;
}
/* Badge positions were tuned around a centred block of text. With the reviews
   mockup in the panel (2026-09-17) they collided with the phones and one was
   cut off at the left edge, so they now sit in the panel's corners, above the
   image (z-index), with the image inset enough to leave them room. */
.wvf1 { top: 22px; left: 22px; animation-delay: 0s; }
.wvf2 { bottom: 22px; right: 22px; animation-delay: -4s; }
.wvf3 { bottom: 22px; left: 22px; animation-delay: -8s; }
.why-visual-float { z-index: 3; white-space: nowrap; }

/* ========== TESTIMONIALS ========== */
.testimonials-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #f5f0ff, #fff0f3);
}
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.testimonial-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 36px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    position: relative;
}
.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.testimonial-card .quote-icon {
    font-size: 2rem;
    color: var(--purple);
    opacity: 0.2;
    margin-bottom: 12px;
}
.testimonial-card .stars {
    color: var(--gold);
    margin-bottom: 14px;
    font-size: 0.9rem;
}
.testimonial-card blockquote {
    font-size: 0.95rem;
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: 20px;
    font-style: italic;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
}
.testimonial-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 700;
    font-size: 0.9rem;
}
.testimonial-author .author-name {
    font-weight: 700;
    color: var(--navy);
    font-size: 0.9rem;
}
.testimonial-author .author-role {
    font-size: 0.8rem;
    color: var(--gray-400);
}

/* ========== CTA / CONTACT SECTION ========== */
.cta-section {
    padding: 100px 0;
    background: linear-gradient(135deg, var(--purple-dark), var(--purple), var(--coral));
    position: relative;
    overflow: hidden;
}
.cta-section::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255,255,255,0.05), transparent 70%);
    top: -200px;
    right: -100px;
}
.cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    position: relative;
}
.cta-info h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    color: var(--white);
    margin-bottom: 16px;
}
.cta-info > p {
    color: rgba(255,255,255,0.7);
    font-size: 1.05rem;
    margin-bottom: 36px;
}
.cta-contact-item {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    color: rgba(255,255,255,0.8);
}
.cta-contact-item i {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}
.cta-socials {
    display: flex;
    gap: 12px;
    margin-top: 30px;
}
.cta-socials a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    transition: var(--transition);
}
.cta-socials a:hover { background: var(--white); color: var(--purple); transform: translateY(-3px); }
.powered-by {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.5);
    font-size: 0.85rem;
}
.powered-by strong { color: var(--gold); }
/* Contact Form */
.contact-form {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-lg);
    padding: 40px;
}
.contact-form h3 {
    color: var(--white);
    font-family: var(--font-body);
    font-size: 1.3rem;
    margin-bottom: 28px;
}

/* ── FORM FIELDS ──────────────────────────────────────────────────────
   There were no field styles at all, so the inputs fell through to a
   translucent white fill and sat on the pink CTA background as pink-on-pink.
   The placeholders were effectively unreadable and the boxes did not look
   like form fields. (Founder: "form proper nahi he, light pink use kiya he".)

   A form on a saturated background needs its own surface. White fill, dark
   text, a real placeholder contrast and a visible focus ring — the same thing
   any bank or checkout form does, because it is the only thing that reads as
   "type here" against colour. */
.contact-form .form-group { margin-bottom: 14px; }
.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    display: block;
    background: #FFFFFF;
    color: #17171F;
    border: 1px solid rgba(10,17,40,0.10);
    border-radius: 10px;
    padding: 13px 15px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(10,17,40,0.05);
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #8A8A96;      /* readable, not a ghost */
    opacity: 1;          /* Firefox dims placeholders by default */
}
.contact-form textarea { min-height: 104px; resize: vertical; }

/* The select needs its own arrow back: `appearance:none` removes the native
   one, and without it the control reads as a dead text box. */
.contact-form select {
    color: #17171F;
    padding-right: 40px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2317171F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}
.contact-form select:invalid { color: #8A8A96; }   /* the "Select Budget Range" prompt */

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.55);
}

/* Two-up rows on desktop, stacked on a phone. */
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .contact-form .form-row { grid-template-columns: 1fr; } }

.contact-form button[type="submit"],
.contact-form .btn {
    width: 100%;
    background: #FFFFFF;
    color: #E21058;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    padding: 15px 20px;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 4px;
    transition: background .15s ease;
}
.contact-form button[type="submit"]:hover,
.contact-form .btn:hover { background: #F6F6F8; }

/* ========== FRONT-PAGE RESPONSIVE ========== */
@media (max-width: 1024px) {
    .stats-grid, .achievements { grid-template-columns: repeat(2, 1fr); }
    .influencer-grid, .services-grid, .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: repeat(2, 1fr); gap: 30px; }
    .steps::before { display: none; }
    .why-grid { grid-template-columns: 1fr; }
    .why-visual { height: 350px; }
    .cta-grid { grid-template-columns: 1fr; }
    .join-grid { grid-template-columns: 1fr; }
    .ti-grid { grid-template-columns: 1fr; }
    .ti-visual { display: none; }
    .ti-cats-grid { grid-template-columns: repeat(3, 1fr); }
    .case-studies-grid { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .categories-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
    .hero h1 { font-size: 1.8rem; }
    .hero p { font-size: 0.95rem; }
    .influencer-grid, .services-grid, .testimonials-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .achievements { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .float-card { display: none; }
    .trust-logos { gap: 10px; flex-wrap: wrap; justify-content: center; }
    .trust-logo img { max-height: 20px; max-width: 70px; }
    .categories-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .cat-card { padding: 14px 8px; }
    .cat-card-icon { width: 34px; height: 34px; font-size: 0.85rem; }
    .cat-card h4 { font-size: 0.7rem; }
    .ti-cats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .ti-cat-card { padding: 12px 10px; }
    .case-studies-grid { grid-template-columns: 1fr; }
    .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
    .pricing-card.popular { transform: none; }
    .pricing-card.popular:hover { transform: translateY(-4px); }
    .blog-grid { grid-template-columns: 1fr; }
    .join-grid { grid-template-columns: 1fr; gap: 30px; }
    .join-steps { flex-direction: row; gap: 12px; }
    .join-step { padding: 14px 10px; }
    .join-benefits { grid-template-columns: 1fr; }
    .faq-question span { font-size: 0.9rem; }
    .cta-grid { grid-template-columns: 1fr; }
    .cta-info h2 { font-size: 1.6rem; }
    .section-title { font-size: 1.5rem; }
    .section-subtitle { font-size: 0.9rem; }
    .section-badge { font-size: 0.7rem; padding: 6px 14px; }
    /* Section padding reduction */
    .categories-section, .top-influencers-section, .join-creator-section,
    .faq-section, .case-studies-section, .pricing-section, .blog-section,
    .city-section, .stats-section { padding: 50px 0; }
    .why-section { padding: 50px 0; }
    .why-features { gap: 16px; }
    .why-feature { padding: 16px; }
    .why-visual { height: 280px; }
    /* CTA buttons */
    .btn-primary, .btn-outline { padding: 12px 24px; font-size: 0.85rem; }
}
@media (max-width: 480px) {
    .hero h1 { font-size: 1.5rem; line-height: 1.3; }
    .hero-btns { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
    .hero-btns .btn { padding: 12px 24px !important; font-size: 0.85rem !important; }
    .stat-number { font-size: 1.8rem; }
    .stat-label { font-size: 0.72rem; }
    .stat-card { padding: 20px 12px; }
    .whatsapp-float { bottom: 24px; right: 16px; width: 50px; height: 50px; font-size: 1.4rem; }
    .categories-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .cat-card { padding: 12px 6px; }
    .cat-card h4 { font-size: 0.65rem; }
    .ti-cats-grid { grid-template-columns: 1fr; }
    .section-title { font-size: 1.3rem; }
    .why-visual { height: 220px; }
    .testimonials-grid { gap: 16px; }
    .testimonial-card { padding: 20px; }
    /* Pricing single column */
    .pricing-price { font-size: 1.8rem; }
    .pricing-card { padding: 24px 20px; }
}

/* ========== MICRO-INFLUENCERS BY CITY ========== */
.city-section {
    padding: 70px 0;
    background: linear-gradient(135deg, #0f0a2a 0%, #1a1050 50%, #0f0a2a 100%);
    position: relative;
    overflow: hidden;
}
.city-section::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(226,16,88,0.1) 0%, transparent 70%);
    pointer-events: none;
}
.city-section .section-badge { background: rgba(226,16,88,0.15); color: #FF7BA6; }
.city-section .section-title { color: #fff; }
.city-section .section-title span { color: var(--gold); }
.city-section .section-subtitle { color: rgba(255,255,255,0.6); }
.city-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 14px;
    margin-top: 36px;
}
.city-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 20px 10px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.city-card:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,0.08);
    border-color: rgba(226,16,88,0.3);
    box-shadow: 0 8px 30px rgba(226,16,88,0.15);
}
/* One icon tile, one accent. The old .city-card-ic held a literal emoji
   on a per-card gradient — fourteen gradients on one row, which is most of
   why this section looked assembled rather than designed. */
.city-card-ic {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    background: rgba(226,16,88,0.14);
    border: 1px solid rgba(226,16,88,0.22);
    color: #FF7BA6;
}
.city-card-ic i { font-size: 19px; line-height: 1; }
/* Landmark art is dark line work drawn for a light surface; this section is
   dark navy, so invert it to white and let the tile's brand tint show through.
   A tile that has real art needs no border or fill competing with it. */
.city-card-ic.has-art {
    background: transparent;
    border: 0;
    width: 52px;
    height: 52px;
}
.city-card-ic.has-art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: invert(1) brightness(1.9);
    opacity: .92;
}
.city-card:hover .city-card-ic.has-art img { opacity: 1; }
.city-card { display: block; }
.city-card-name { display: block; }
.city-card-count { display: block; font-variant-numeric: tabular-nums; }
.city-card-name {
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 2px;
}
.city-card-count {
    color: rgba(255,255,255,0.4);
    font-size: 0.72rem;
}
@media (max-width: 1024px) { .city-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) { .city-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .city-grid { grid-template-columns: repeat(2, 1fr); } }

/* ========== REEL VIDEO SLIDER — Continuous Marquee ========== */
.reel-slider-wrap {
    margin-top: 50px;
    position: relative;
    overflow: hidden;
}
.reel-slider {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: reelMarquee 30s linear infinite;
}
.reel-slider:hover {
    animation-play-state: paused;
}
@keyframes reelMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.reel-item {
    flex: 0 0 300px;
    width: 300px;
    height: 533px; /* 9:16 ratio */
    border-radius: 16px;
    overflow: hidden;
    background: #1a1a2e;
    position: relative;
    box-shadow: 0 8px 30px rgba(0,0,0,0.35);
}
.reel-item iframe,
.reel-item video {
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    display: block;
}
/* Instagram official embed styling */
.reel-item .instagram-media {
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}
.reel-item .instagram-media iframe {
    border-radius: 16px !important;
}
.reel-item .reel-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, transparent 100%);
    z-index: 3;
    pointer-events: none;
}
.reel-header-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.reel-header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.reel-header-avatar i {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.7);
}
.reel-header-info {
    flex: 1;
}
.reel-header-name {
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.reel-header-brand {
    color: rgba(255,255,255,0.7);
    font-size: 0.65rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
@media (max-width: 768px) {
    .reel-slider-wrap { margin-top: 30px; }
    .reel-slider { gap: 12px; animation-duration: 20s; }
    .reel-item { flex: 0 0 240px; width: 240px; height: 427px; }
    .reel-header-name { font-size: 0.65rem; }
    .reel-header-brand { font-size: 0.55rem; }
    .reel-header-avatar { width: 22px; height: 22px; }
}
@media (max-width: 480px) {
    .reel-item { flex: 0 0 200px; width: 200px; height: 356px; }
    .reel-item .reel-header { padding: 8px; gap: 5px; }
    .reel-slider { animation-duration: 18s; }
}

/* ========== CASE STUDIES / SUCCESS STORIES ========== */
.case-studies-section {
    padding: 80px 0;
    background: #fff;
}
.case-studies-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}
.case-card {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #eee;
    transition: all 0.3s ease;
    text-decoration: none;
    color: var(--navy);
}
.case-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}
.case-card-image {
    height: 200px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.case-card-image .case-brand-logo {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.case-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(10px);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}
.case-card-body {
    padding: 20px;
}
.case-card-body h4 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.case-card-body p {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.5;
    margin-bottom: 14px;
}
.case-metrics {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.case-metric {
    text-align: center;
    flex: 1;
    min-width: 70px;
}
.case-metric-value {
    font-size: 1.1rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--purple), var(--coral));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.case-metric-label {
    font-size: 0.65rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
@media (max-width: 768px) { .case-studies-grid { grid-template-columns: 1fr; } }

/* ========== PRICING / PACKAGES ========== */
.pricing-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f6ff 0%, #fff5f7 100%);
}
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
    align-items: start;
}
.pricing-card {
    background: #fff;
    border-radius: 16px;
    padding: 36px 28px;
    text-align: center;
    border: 2px solid #eee;
    transition: all 0.3s ease;
    position: relative;
}
.pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(226,16,88,0.12);
}
.pricing-card.popular {
    border-color: var(--purple);
    box-shadow: 0 8px 30px rgba(226,16,88,0.15);
    transform: scale(1.04);
}
.pricing-card.popular:hover { transform: scale(1.04) translateY(-6px); }
.pricing-popular-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--purple), var(--coral));
    color: #fff;
    padding: 6px 20px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}
.pricing-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin: 0 auto 16px;
    color: #fff;
}
.pricing-card-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 4px;
}
.pricing-card-subtitle {
    font-size: 0.8rem;
    color: #999;
    margin-bottom: 16px;
}
.pricing-price {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 4px;
}
.pricing-price span {
    font-size: 0.85rem;
    font-weight: 400;
    color: #999;
}
.pricing-features {
    text-align: left;
    margin: 20px 0 24px;
}
.pricing-features li {
    font-size: 0.85rem;
    color: #555;
    padding: 7px 0;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pricing-features li i {
    color: var(--purple);
    font-size: 0.75rem;
}
.pricing-features li:last-child { border-bottom: 0; }
.pricing-cta {
    display: block;
    padding: 14px 28px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}
.pricing-cta-outline {
    border: 2px solid var(--purple);
    color: var(--purple);
}
.pricing-cta-outline:hover { background: var(--purple); color: #fff; }
.pricing-cta-fill {
    background: linear-gradient(135deg, var(--purple), var(--coral));
    color: #fff;
    border: 2px solid transparent;
}
.pricing-cta-fill:hover { opacity: 0.9; transform: translateY(-2px); }
@media (max-width: 768px) {
    .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
    .pricing-card.popular { transform: none; }
}

/* ========== BLOG / LATEST POSTS ========== */
.blog-section {
    padding: 80px 0;
    background: var(--gray-50);
}
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}
.blog-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #eee;
    transition: all 0.3s ease;
    text-decoration: none;
    color: var(--navy);
}
.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.blog-card-thumb {
    height: 180px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: flex-end;
}
.blog-card-thumb-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 50%, rgba(0,0,0,0.3));
}
.blog-card-cat {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--purple);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.blog-card-body {
    padding: 18px;
}
.blog-card-body h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-card-body p {
    font-size: 0.8rem;
    color: #777;
    line-height: 1.5;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    color: #aaa;
}
.blog-card-read-more {
    color: var(--purple);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.78rem;
}
@media (max-width: 768px) { .blog-grid { grid-template-columns: 1fr; } }

/* ========== BRAND PARTNERS TICKER ========== */
.brand-partners-section {
    padding: 60px 0;
    background: #fff;
    overflow: hidden;
}
.brand-partners-row {
    display: flex;
    gap: 40px;
    align-items: center;
    animation: brandScroll 25s linear infinite;
    width: max-content;
}
.brand-partner-logo {
    height: 40px;
    opacity: 0.35;
    filter: grayscale(100%);
    transition: all 0.3s ease;
    flex-shrink: 0;
}
.brand-partner-logo:hover {
    opacity: 1;
    filter: grayscale(0%);
}
@keyframes brandScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ========== COMPARE TABLE (2026-09-17) ==========
   Tokens only — every colour is a style.css :root variable or a tint of
   --purple, so the table re-skins with the site.

   THE CORNER (founder, on the first version: "corner dekho kaise bad dikh
   raha he, ek colour line and corner alag"): a 3px brand stripe sat on top of
   a rectangular header cell inside a 20px-rounded wrapper, so the stripe ran
   straight while the corner curved, and the column's 1px side borders read as
   stray lines. Now the header cells THEMSELVES carry the wrapper's radius
   (border-collapse: separate makes that legal), the brand column's header is a
   solid brand-gradient cell with white type — the same treatment as
   .pricing-popular-badge — and the column body is a tint with no side rules.
   Nothing straight meets anything round. */
.compare-section { padding: 90px 0; background: var(--white); }
.cmp-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    background: var(--white);
}
.cmp-table {
    width: 100%;
    min-width: 720px;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font-body);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-lg);
}
.cmp-table th, .cmp-table td {
    padding: 17px 20px;
    text-align: center;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
    font-size: 0.97rem;
    color: var(--navy);
}
.cmp-table thead th {
    background: var(--gray-50);
    padding: 22px 20px 18px;
}
/* The cells at the four corners follow the wrapper's curve */
.cmp-table thead th:first-child { border-top-left-radius: var(--radius-lg); }
.cmp-table thead th:last-child  { border-top-right-radius: var(--radius-lg); }
.cmp-table tbody tr:last-child th { border-bottom-left-radius: var(--radius-lg); }
.cmp-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius-lg); }
.cmp-table thead th.cmp-head-feat,
.cmp-table tbody th { text-align: left; }
.cmp-table tbody th {
    font-weight: 500;
    color: var(--navy);
    width: 36%;
    background: var(--white);
}
.cmp-table tbody tr:last-child th,
.cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-head-name {
    display: block;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--navy);
    line-height: 1.2;
}
.cmp-head-eyebrow {
    display: block;
    margin-top: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--gray-400);
}
/* The brand column: gradient header, soft tint body, no side rules */
.cmp-table thead th.cmp-us {
    background: linear-gradient(135deg, var(--purple), var(--coral));
}
.cmp-table thead th.cmp-us .cmp-head-name { color: var(--white); }
.cmp-table thead th.cmp-us .cmp-head-eyebrow { color: rgba(255,255,255,0.82); }
.cmp-table td.cmp-us {
    background: rgba(226,16,88,0.05);
    font-weight: 600;
}
.cmp-table tbody tr:nth-child(even) td.cmp-us { background: rgba(226,16,88,0.07); }
/* Glyphs: green for yes, a muted red for no — never emoji */
.cmp-ok { color: #16a34a; font-size: 1.2rem; }
.cmp-no { color: #e11d48; font-size: 1.1rem; opacity: 0.8; }
.cmp-txt { font-size: 0.92rem; color: var(--gray-600); }
.cmp-us .cmp-txt { color: var(--purple-dark); font-weight: 700; }
.cmp-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.cmp-note {
    margin: 18px auto 0;
    max-width: 760px;
    text-align: center;
    font-size: 0.86rem;
    color: var(--gray-400);
    line-height: 1.6;
}
.cmp-note a { color: var(--purple); text-decoration: underline; }
.cmp-cta { text-align: center; margin-top: 34px; }
/* See-more fold: the last nine rows are display:none until the section gets
   .cmp-expanded. The row above the fold keeps its bottom rule so the table
   still ends cleanly when collapsed. */
.cmp-table tr.cmp-more { display: none; }
.compare-section.cmp-expanded .cmp-table tr.cmp-more { display: table-row; }
.cmp-more-wrap { text-align: center; margin-top: 18px; }
.cmp-more-btn {
    appearance: none; border: 1px solid rgba(226,16,88,0.28); background: var(--white);
    color: var(--purple); font-family: var(--font-body); font-weight: 700; font-size: 0.92rem;
    padding: 11px 22px; border-radius: 999px; cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.cmp-more-btn:hover { background: var(--purple); color: var(--white); border-color: var(--purple); }
.cmp-more-btn i { margin-left: 6px; font-size: 0.8em; }
.cmp-more-close { display: none; }
.compare-section.cmp-expanded .cmp-more-open { display: none; }
.compare-section.cmp-expanded .cmp-more-close { display: inline; }
/* Collapsed: the 10th row is the last visible one, so it loses its rule like a true last row */
.cmp-table tbody tr:nth-child(10) th, .cmp-table tbody tr:nth-child(10) td { border-bottom: 0; }
.compare-section.cmp-expanded .cmp-table tbody tr:nth-child(10) th,
.compare-section.cmp-expanded .cmp-table tbody tr:nth-child(10) td { border-bottom: 1px solid var(--gray-100); }
/* MOBILE: all four columns fit, nothing hides behind a swipe.
   The first version pinned the feature column at 46% of a 720px table, so on
   a phone the pinned column filled the whole box and the three value columns
   were invisible behind it. Now the table has no minimum width, the feature
   column is a fixed share, and the values wrap. */
@media (max-width: 768px) {
    .compare-section { padding: 56px 0; }
    .cmp-table { min-width: 0; }
    .cmp-table th, .cmp-table td { padding: 12px 8px; font-size: 0.82rem; }
    .cmp-table thead th { padding: 14px 8px 12px; }
    .cmp-table tbody th { width: 34%; font-size: 0.8rem; line-height: 1.3; }
    .cmp-head-name { font-size: 0.82rem; }
    .cmp-head-eyebrow { font-size: 0.56rem; letter-spacing: 0.06em; margin-top: 3px; }
    .cmp-txt { font-size: 0.76rem; }
    .cmp-ok, .cmp-no { font-size: 1rem; }
}

/* FAQ fold (2026-09-17): questions 6+ hide until .faq-expanded. Reuses the
   compare table's See-more button styles. */
.faq-item.faq-more { display: none; }
.faq-section.faq-expanded .faq-item.faq-more { display: block; }
.faq-more-wrap { text-align: center; margin-top: 22px; }
.faq-section.faq-expanded .cmp-more-open { display: none; }
.faq-section.faq-expanded .cmp-more-close { display: inline; }