/* ==========================================================================
   KOPSOON CSS BUNDLE: kopsoon-reseller.css
   Generated for deployment bundling. Source files are kept for development.
   ========================================================================== */


/* ==========================================================================
   Source: reseller-page.css
   ========================================================================== */
/* ========================================================================
   KOPSOON - RESELLER PAGE BASE
   ======================================================================== */

.reseller-page {
    background: var(--color-white);
    color: #191817;
}

.reseller-page main {
    width: 100%;
    overflow: hidden;
}

.reseller-page section {
    position: relative;
}

.reseller-page .container {
    max-width: 1280px;
}

.reseller-curve,
.reseller-wave,
.reseller-circle,
.reseller-bean,
.reseller-beans-outline {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.reseller-curve,
.reseller-circle {
    border-radius: 50%;
}

.reseller-bean {
    width: 170px;
    height: 82px;
    border-radius: 50%;
    background: #7A4B35;
    transform: rotate(9deg);
    opacity: 0.98;
}

.reseller-bean::after {
    content: '';
    position: absolute;
    inset: 17px 70px;
    border-left: 10px solid rgba(255, 255, 255, 0.88);
    border-radius: 50%;
    transform: rotate(18deg);
}

.reseller-beans-outline {
    width: 150px;
    height: 135px;
    opacity: 0.18;
}

.reseller-beans-outline::before,
.reseller-beans-outline::after {
    content: '';
    position: absolute;
    width: 54px;
    height: 86px;
    border: 6px solid #7A6A5B;
    border-radius: 50%;
    transform: rotate(-28deg);
}

.reseller-beans-outline::before {
    left: 10px;
    top: 18px;
}

.reseller-beans-outline::after {
    right: 16px;
    top: 36px;
    transform: rotate(28deg);
}

@media (max-width: 768px) {
    .reseller-page .container {
        padding-left: 24px;
        padding-right: 24px;
    }

    .reseller-bean {
        width: 120px;
        height: 58px;
    }
}


/* ==========================================================================
   Source: reseller-hero.css
   ========================================================================== */
/* ========================================================================
   KOPSOON - RESELLER HERO
   ======================================================================== */

.reseller-hero-section {
    min-height: 635px;
    background: linear-gradient(90deg, #EFE6D3 0%, #EFE6D3 51%, #C8B9A7 51%, #C8B9A7 100%);
    display: flex;
    align-items: center;
    padding: 155px 0 94px;
}

.reseller-hero-container {
    position: relative;
    z-index: 2;
}

.reseller-hero-content {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    transform: translateY(24px);
}

.reseller-hero-content h1 {
    font-family: var(--font-heading);
    font-size: 46px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-coffee);
    margin-bottom: 25px;
    letter-spacing: -0.5px;
}

.reseller-hero-content p {
    max-width: 540px;
    margin: 0 auto;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--color-text-body);
}

.reseller-curve-hero {
    width: 760px;
    height: 500px;
    right: -102px;
    top: 72px;
    border: 28px solid rgba(255, 250, 236, 0.82);
    border-top-color: transparent;
    border-left-color: transparent;
    transform: rotate(-20deg);
    box-shadow: 16px 12px 0 rgba(91, 73, 55, 0.12);
}

.reseller-bean-left {
    left: -74px;
    bottom: 98px;
}

.reseller-beans-hero {
    right: 114px;
    bottom: 54px;
}

@media (max-width: 992px) {
    .reseller-hero-section {
        min-height: 560px;
        padding-top: 140px;
        background: linear-gradient(90deg, #EFE6D3 0%, #EFE6D3 55%, #C8B9A7 55%, #C8B9A7 100%);
    }

    .reseller-hero-content h1 {
        font-size: 38px;
    }

    .reseller-hero-content p {
        font-size: 15.5px;
    }
}

@media (max-width: 768px) {
    .reseller-hero-section {
        min-height: auto;
        padding: 132px 0 86px;
        background: #EFE6D3;
    }

    .reseller-hero-content {
        transform: none;
    }

    .reseller-hero-content h1 {
        font-size: 30px;
        line-height: 1.35;
        letter-spacing: -0.3px;
    }

    .reseller-hero-content p {
        font-size: 15px;
        line-height: 1.7;
        font-weight: 400;
    }

    .reseller-curve-hero {
        width: 420px;
        height: 300px;
        right: -185px;
        top: 95px;
        border-width: 18px;
    }

    .reseller-bean-left {
        left: -80px;
        bottom: 32px;
    }

    .reseller-beans-hero {
        right: 12px;
        bottom: 18px;
        transform: scale(0.72);
    }
}


/* ==========================================================================
   Source: reseller-deals.css
   ========================================================================== */
/* ========================================================================
   KOPSOON - SPECIAL DEALS
   ======================================================================== */

.reseller-deals-section {
    background: #302217;
    color: #F4EFE5;
    padding: 70px 0 88px;
    overflow: hidden;
}

.reseller-deals-container {
    position: relative;
    z-index: 2;
}

.reseller-deals-container h2 {
    font-family: var(--font-heading);
    font-size: 34px;
    font-weight: 800;
    line-height: 1.16;
    color: #E4DED5;
    text-align: center;
    margin-bottom: 50px;
    letter-spacing: 0.3px;
}

.reseller-deals-list {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.reseller-deal-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 36px;
    background: #F0E6D4;
    color: #2C241E;
    padding: 34px 16px 34px 36px;
    min-height: 118px;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.16);
}

.reseller-deal-text h3 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 6px;
}

.reseller-deal-text p {
    max-width: 680px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.45;
    margin: 0;
}

.reseller-deal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 280px;
    height: 54px;
    padding: 0 22px;
    background: #D95454;
    border: 2px solid #D95454;
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition);
}

.reseller-deal-btn:hover {
    background: #B93F3F;
    border-color: #B93F3F;
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(217, 84, 84, 0.28);
}

.reseller-wave-top {
    left: -70px;
    top: -52px;
    width: 102%;
    height: 148px;
    background: #6E442F;
    border-radius: 0 0 50% 50%;
    transform: rotate(4deg);
    opacity: 0.48;
}

.reseller-circle-deals {
    right: -86px;
    bottom: 40px;
    width: 330px;
    height: 330px;
    border: 11px solid rgba(122, 75, 53, 0.72);
    opacity: 0.55;
}

@media (max-width: 992px) {
    .reseller-deal-card {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 32px 28px;
        gap: 24px;
    }

    .reseller-deal-text p {
        margin-left: auto;
        margin-right: auto;
    }

    .reseller-deal-btn {
        justify-self: center;
    }
}

@media (max-width: 768px) {
    .reseller-deals-section {
        padding: 58px 0 70px;
    }

    .reseller-deals-container h2 {
        font-size: 28px;
        margin-bottom: 34px;
    }

    .reseller-deals-list {
        gap: 26px;
    }

    .reseller-deal-card {
        border-radius: 18px;
        padding: 28px 22px;
    }

    .reseller-deal-text h3 {
        font-size: 19px;
    }

    .reseller-deal-text p {
        font-size: 13.5px;
    }

    .reseller-deal-btn {
        min-width: 100%;
        height: 48px;
        font-size: 14px;
    }
}


/* ==========================================================================
   Source: reseller-benefits.css
   ========================================================================== */
/* ========================================================================
   KOPSOON - RESELLER BENEFITS
   ======================================================================== */

.reseller-benefits-section {
    background: #1F3B27;
    color: #F7F3E8;
    padding: 72px 0 92px;
}

.reseller-benefits-container {
    position: relative;
    z-index: 2;
}

.reseller-benefits-header {
    max-width: 760px;
    margin: 0 auto 62px;
    text-align: center;
}

.reseller-benefits-header h2 {
    font-family: var(--font-heading);
    font-size: 31px;
    font-weight: 800;
    line-height: 1.18;
    margin-bottom: 10px;
    color: #F4EFE5;
}

.reseller-benefits-header p {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.55;
    color: rgba(247, 243, 232, 0.88);
}

.reseller-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 58px 90px;
    max-width: 1040px;
    margin: 0 auto;
}

.reseller-benefit-item {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 22px;
    align-items: start;
}

.reseller-benefit-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #E6E6E6;
    color: #202020;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.18);
}

.reseller-benefit-icon svg {
    width: 31px;
    height: 31px;
}

.reseller-benefit-item h3 {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.22;
    margin-bottom: 6px;
    color: #F4EFE5;
}

.reseller-benefit-item p {
    max-width: 380px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: rgba(247, 243, 232, 0.86);
}

@media (max-width: 992px) {
    .reseller-benefits-grid {
        gap: 42px 46px;
    }
}

@media (max-width: 768px) {
    .reseller-benefits-section {
        padding: 62px 0 74px;
    }

    .reseller-benefits-header {
        margin-bottom: 42px;
    }

    .reseller-benefits-header h2 {
        font-size: 26px;
    }

    .reseller-benefits-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .reseller-benefit-item {
        grid-template-columns: 56px 1fr;
        gap: 18px;
    }

    .reseller-benefit-item p {
        max-width: none;
    }
}


/* ==========================================================================
   Source: reseller-packages.css
   ========================================================================== */
/* ========================================================================
   KOPSOON - RESELLER PACKAGES
   ======================================================================== */

.reseller-packages-section {
    background: #EFE6D3;
    padding: 74px 0 86px;
    color: #241D18;
    overflow: hidden;
}

.reseller-packages-container {
    position: relative;
    z-index: 2;
}

.reseller-packages-container h2 {
    font-family: var(--font-heading);
    font-size: 34px;
    font-weight: 800;
    line-height: 1.16;
    text-align: center;
    margin-bottom: 44px;
    color: #121212;
    letter-spacing: -0.2px;
}

.reseller-package-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 120px;
    align-items: start;
    max-width: 1080px;
    margin: 0 auto;
}

.reseller-package-card {
    position: relative;
    z-index: 2;
}

.reseller-package-image-wrap {
    width: 185px;
    height: 155px;
    margin: 0 0 28px 98px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 0 18px 34px rgba(60, 42, 33, 0.14);
}

.reseller-package-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.reseller-package-card:hover .reseller-package-image {
    transform: scale(1.06);
}

.reseller-package-card h3 {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 10px;
    color: #241D18;
}

.reseller-package-card h3 span {
    font-size: 0.92em;
}

.reseller-package-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.reseller-package-card li {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.48;
    color: #241D18;
}

.reseller-curve-packages-left {
    left: -250px;
    top: 170px;
    width: 560px;
    height: 380px;
    border: 20px solid rgba(255, 250, 236, 0.92);
    border-right-color: transparent;
    border-bottom-color: transparent;
    transform: rotate(-17deg);
}

.reseller-curve-packages-right {
    right: -150px;
    bottom: -130px;
    width: 520px;
    height: 350px;
    border: 22px solid rgba(122, 75, 53, 0.42);
    border-top-color: transparent;
    border-left-color: transparent;
    transform: rotate(-19deg);
}

@media (max-width: 992px) {
    .reseller-package-grid {
        gap: 58px;
    }

    .reseller-package-image-wrap {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .reseller-packages-section {
        padding: 60px 0 72px;
    }

    .reseller-packages-container h2 {
        font-size: 27px;
        margin-bottom: 36px;
    }

    .reseller-package-grid {
        grid-template-columns: 1fr;
        gap: 46px;
        max-width: 520px;
    }

    .reseller-package-card {
        text-align: center;
    }

    .reseller-package-image-wrap {
        width: 190px;
        height: 160px;
        margin: 0 auto 24px;
    }

    .reseller-package-card h3 {
        font-size: 21px;
    }

    .reseller-package-card li {
        font-size: 13.5px;
    }
}


/* ==========================================================================
   Source: reseller-join.css
   ========================================================================== */
/* ========================================================================
   KOPSOON - RESELLER JOIN STEPS
   ======================================================================== */

.reseller-join-section {
    background: #FAF9F6;
    padding: 78px 0 88px;
    color: #241D18;
    overflow: hidden;
}

.reseller-join-container {
    position: relative;
    z-index: 2;
}

.reseller-join-container h2 {
    font-family: var(--font-heading);
    font-size: 34px;
    font-weight: 800;
    line-height: 1.16;
    margin-bottom: 50px;
    color: #241D18;
}

.reseller-join-container h2 span {
    font-size: 0.95em;
}

.reseller-steps {
    display: flex;
    flex-direction: column;
    gap: 38px;
    margin-bottom: 54px;
}

.reseller-step-item {
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: start;
    gap: 26px;
}

.reseller-step-item span {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #EFE6D3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 23px;
    font-weight: 800;
    line-height: 1;
    color: #191817;
}

.reseller-step-item p {
    max-width: 1040px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
    color: #241D18;
    margin: 0;
}

.reseller-join-bottom {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: end;
}

.reseller-join-bottom p {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.28;
    margin: 0;
    color: #241D18;
}

.reseller-join-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 320px;
    height: 58px;
    padding: 0 28px;
    background: #D95454;
    border: 2px solid #D95454;
    color: #FFFFFF;
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 800;
    transition: var(--transition);
    white-space: nowrap;
}

.reseller-join-btn:hover {
    background: #B93F3F;
    border-color: #B93F3F;
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(217, 84, 84, 0.28);
}

.reseller-curve-join {
    width: 570px;
    height: 370px;
    right: -90px;
    top: 24px;
    border: 22px solid rgba(200, 185, 167, 0.56);
    border-top-color: transparent;
    border-left-color: transparent;
    transform: rotate(-18deg);
}

.reseller-bean-join {
    left: -82px;
    bottom: 34px;
    width: 260px;
    height: 130px;
}

.reseller-bean-join::after {
    inset: 25px 112px;
    border-left-width: 12px;
}

.reseller-beans-join {
    right: 132px;
    bottom: 42px;
}

@media (max-width: 992px) {
    .reseller-join-bottom {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .reseller-join-btn {
        justify-self: start;
    }
}

@media (max-width: 768px) {
    .reseller-join-section {
        padding: 62px 0 74px;
    }

    .reseller-join-container h2 {
        font-size: 27px;
        margin-bottom: 36px;
    }

    .reseller-steps {
        gap: 28px;
        margin-bottom: 40px;
    }

    .reseller-step-item {
        grid-template-columns: 36px 1fr;
        gap: 16px;
    }

    .reseller-step-item p {
        font-size: 16px;
    }

    .reseller-join-bottom p {
        font-size: 16px;
    }

    .reseller-join-btn {
        min-width: 100%;
        height: 52px;
        font-size: 15px;
    }

    .reseller-curve-join {
        width: 350px;
        height: 230px;
        right: -188px;
        top: 40px;
        border-width: 18px;
    }

    .reseller-bean-join {
        width: 160px;
        height: 80px;
        left: -90px;
        bottom: 18px;
    }

    .reseller-beans-join {
        right: 16px;
        bottom: 18px;
        transform: scale(0.72);
    }
}


/* ==========================================================================
   Source: reseller-parallax.css
   ========================================================================== */
/* ===========================================================================
   KOPSOON - RESELLER PARALLAX + REVISED SECTION DESIGN
   =========================================================================== */

body.reseller-parallax {
    --reseller-hero-bg-y: 0px;
    --reseller-hero-content-y: 0px;
    --reseller-hero-opacity: 1;
    --reseller-parallax-y: 0px;
    background: #FBF6EE;
}

/* ---------------------------------------------------------------------------
   HERO: disamakan dengan karakter Home/About/Serving
   --------------------------------------------------------------------------- */
.reseller-parallax .reseller-hero-section {
    min-height: 100vh;
    padding: 150px 0 96px;
    display: flex;
    align-items: center;
    isolation: isolate;
    overflow: hidden;
    background-image:
        linear-gradient(90deg, rgba(244, 236, 216, 0.76) 0%, rgba(244, 236, 216, 0.60) 44%, rgba(201, 184, 164, 0.38) 100%),
        url('../images/hero.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center calc(50% + var(--reseller-hero-bg-y));
    transition: background-position 80ms linear;
    will-change: background-position;
}

.reseller-parallax .reseller-hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 72% 32%, rgba(255, 255, 255, 0.24), transparent 30%),
        linear-gradient(180deg, rgba(255, 252, 244, 0.08) 0%, rgba(77, 56, 40, 0.08) 100%);
}

.reseller-parallax .reseller-hero-container {
    position: relative;
    z-index: 3;
}

.reseller-parallax .reseller-hero-content {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
    transform: none;
    opacity: var(--reseller-hero-opacity);
    translate: 0 var(--reseller-hero-content-y);
    will-change: translate, opacity;
}

.reseller-parallax .reseller-hero-content h1 {
    max-width: 830px;
    margin: 0 auto 24px;
    font-size: clamp(38px, 5vw, 74px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -1.5px;
    color: #3C2A21;
}

.reseller-parallax .reseller-hero-content p {
    max-width: 790px;
    margin: 0 auto;
    font-size: clamp(17px, 1.8vw, 25px);
    font-weight: 700;
    line-height: 1.46;
    color: #58524C;
}

.reseller-parallax .reseller-curve-hero,
.reseller-parallax .reseller-bean-left,
.reseller-parallax .reseller-beans-hero {
    z-index: 2;
}

.reseller-parallax .reseller-curve-hero {
    width: 880px;
    height: 640px;
    right: -120px;
    top: 46px;
    border-width: 30px;
    opacity: 0.92;
}

.reseller-parallax .reseller-bean-left {
    left: -74px;
    bottom: 94px;
}

.reseller-parallax .reseller-beans-hero {
    right: 120px;
    bottom: 54px;
}

/* ---------------------------------------------------------------------------
   GENERAL PARALLAX / REVEAL
   --------------------------------------------------------------------------- */
.reseller-parallax [data-reseller-parallax] {
    --reseller-parallax-y: 0px;
    translate: 0 var(--reseller-parallax-y);
    will-change: translate;
}

.reseller-parallax [data-reseller-reveal] {
    opacity: 0;
    transform: translate3d(0, 44px, 0) scale(0.985);
    filter: blur(8px);
    transition:
        opacity 760ms ease,
        transform 760ms cubic-bezier(0.18, 0.84, 0.28, 1),
        filter 760ms ease;
    transition-delay: var(--reseller-reveal-delay, 0ms);
    will-change: opacity, transform, filter;
}

.reseller-parallax [data-reseller-reveal].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

.reseller-parallax .reseller-parallax-section {
    transform-style: preserve-3d;
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
   SPECIAL DEALS: panel lebih compact seperti referensi
   --------------------------------------------------------------------------- */
.reseller-parallax .reseller-deals-section {
    padding: 88px 0 0;
    background:
        radial-gradient(circle at 12% 6%, rgba(243, 234, 216, 0.92) 0 130px, transparent 132px),
        radial-gradient(circle at 88% 0%, rgba(235, 191, 171, 0.68) 0 180px, transparent 182px),
        #FBF6EE;
    color: #FBF6EE;
}

.reseller-parallax .reseller-deals-container {
    max-width: 980px;
    padding: 72px 48px 62px;
    border-radius: 0;
    background:
        radial-gradient(circle at 86% 22%, rgba(255, 255, 255, 0.055), transparent 25%),
        linear-gradient(135deg, #3C2A21 0%, #432B1F 100%);
    box-shadow: 0 28px 70px rgba(60, 42, 33, 0.18);
}

.reseller-parallax .reseller-deals-container h2 {
    margin: 0 0 34px;
    font-size: clamp(24px, 2.4vw, 35px);
    font-weight: 800;
    color: #FBF6EE;
    text-align: center;
    letter-spacing: -0.025em;
}

.reseller-parallax .reseller-deals-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    max-width: 720px;
    margin: 0 auto;
}

.reseller-parallax .reseller-deal-card {
    position: relative;
    display: flex;
    min-height: 172px;
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;
    padding: 28px 28px 24px;
    border-radius: 14px;
    background: rgba(251, 246, 238, 0.96);
    color: #3C2A21;
    box-shadow: 0 18px 38px rgba(14, 10, 8, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.72);
    overflow: hidden;
    transition:
        transform 360ms cubic-bezier(0.18, 0.84, 0.28, 1),
        box-shadow 360ms ease,
        background 360ms ease;
}

.reseller-parallax .reseller-deal-card::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 22px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(93, 156, 89, 0.16);
    box-shadow: inset 0 0 0 1px rgba(93, 156, 89, 0.14);
}

.reseller-parallax .reseller-deal-card:hover {
    transform: translateY(-10px) scale(1.015);
    box-shadow: 0 28px 64px rgba(14, 10, 8, 0.25);
    background: #FFFFFF;
}

.reseller-parallax .reseller-deal-text h3 {
    margin: 0 0 8px;
    padding-right: 44px;
    font-size: 18px;
    line-height: 1.18;
    color: #3C2A21;
}

.reseller-parallax .reseller-deal-text p {
    max-width: none;
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.55;
    color: #58524C;
}

.reseller-parallax .reseller-deal-btn {
    width: 100%;
    min-width: 0;
    height: 42px;
    border-radius: 999px;
    background: #5D9C59;
    border-color: #5D9C59;
    color: #FBF6EE;
    font-size: 12px;
    letter-spacing: 0.04em;
    box-shadow: 0 12px 25px rgba(93, 156, 89, 0.22);
}

.reseller-parallax .reseller-deal-btn:hover {
    background: #1F3B27;
    border-color: #1F3B27;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(31, 59, 39, 0.28);
}

.reseller-parallax .reseller-wave-top,
.reseller-parallax .reseller-circle-deals {
    opacity: 0.18;
}

/* ---------------------------------------------------------------------------
   BENEFITS: green panel, card hover untuk semua benefit
   --------------------------------------------------------------------------- */
.reseller-parallax .reseller-benefits-section {
    padding: 0 0 92px;
    background: #FBF6EE;
    color: #FBF6EE;
}

.reseller-parallax .reseller-benefits-container {
    max-width: 980px;
    padding: 74px 54px 78px;
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.08), transparent 22%),
        linear-gradient(135deg, #254B35 0%, #1F3B27 100%);
    box-shadow: 0 30px 68px rgba(31, 59, 39, 0.18);
}

.reseller-parallax .reseller-benefits-header {
    max-width: 720px;
    margin: 0 auto 58px;
}

.reseller-parallax .reseller-benefits-header h2 {
    font-size: clamp(26px, 2.6vw, 38px);
    color: #FBF6EE;
    margin-bottom: 14px;
}

.reseller-parallax .reseller-benefits-header p {
    color: rgba(251, 246, 238, 0.78);
    font-size: 14.5px;
    line-height: 1.65;
}

.reseller-parallax .reseller-benefits-grid {
    gap: 34px 42px;
    max-width: 860px;
}

.reseller-parallax .reseller-benefit-item {
    position: relative;
    grid-template-columns: 58px 1fr;
    gap: 18px;
    padding: 22px 20px;
    border-radius: 22px;
    background: rgba(251, 246, 238, 0.045);
    border: 1px solid rgba(251, 246, 238, 0.10);
    transition:
        transform 340ms cubic-bezier(0.18, 0.84, 0.28, 1),
        background 340ms ease,
        border-color 340ms ease,
        box-shadow 340ms ease;
}

.reseller-parallax .reseller-benefit-item:hover {
    transform: translateY(-8px);
    background: rgba(251, 246, 238, 0.085);
    border-color: rgba(251, 246, 238, 0.22);
    box-shadow: 0 24px 44px rgba(0, 0, 0, 0.16);
}

.reseller-parallax .reseller-benefit-icon {
    width: 46px;
    height: 46px;
    background: rgba(251, 246, 238, 0.13);
    color: #FBF6EE;
    box-shadow: inset 0 0 0 1px rgba(251, 246, 238, 0.20);
    transition: transform 340ms ease, background 340ms ease;
}

.reseller-parallax .reseller-benefit-item:hover .reseller-benefit-icon {
    transform: rotate(-5deg) scale(1.08);
    background: rgba(93, 156, 89, 0.32);
}

.reseller-parallax .reseller-benefit-icon svg {
    width: 24px;
    height: 24px;
}

.reseller-parallax .reseller-benefit-item h3 {
    color: #FBF6EE;
    font-size: 18px;
    margin-bottom: 7px;
}

.reseller-parallax .reseller-benefit-item p {
    max-width: none;
    color: rgba(251, 246, 238, 0.76);
    font-size: 13.5px;
    line-height: 1.55;
}

/* ---------------------------------------------------------------------------
   PACKAGES: card image premium + hover
   --------------------------------------------------------------------------- */
.reseller-parallax .reseller-packages-section {
    padding: 92px 0 92px;
    background:
        radial-gradient(circle at 6% 0%, rgba(111, 74, 54, 0.08), transparent 30%),
        radial-gradient(circle at 94% 12%, rgba(93, 156, 89, 0.07), transparent 28%),
        #FBF6EE;
}

.reseller-parallax .reseller-packages-container {
    max-width: 1040px;
}

.reseller-parallax .reseller-packages-container h2 {
    color: #3C2A21;
    font-size: clamp(25px, 2.6vw, 38px);
    margin-bottom: 48px;
}

.reseller-parallax .reseller-package-grid {
    max-width: 960px;
    gap: 36px;
}

.reseller-parallax .reseller-package-card {
    position: relative;
    padding: 0 0 30px;
    border-radius: 22px;
    overflow: hidden;
    background: rgba(251, 246, 238, 0.94);
    border: 1px solid rgba(60, 42, 33, 0.10);
    box-shadow: 0 18px 44px rgba(60, 42, 33, 0.12);
    transition:
        transform 380ms cubic-bezier(0.18, 0.84, 0.28, 1),
        box-shadow 380ms ease,
        border-color 380ms ease;
}

.reseller-parallax .reseller-package-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 34px 70px rgba(60, 42, 33, 0.20);
    border-color: rgba(93, 156, 89, 0.32);
}

.reseller-parallax .reseller-package-card.is-featured::before {
    content: "Paling Diminati";
    position: absolute;
    z-index: 4;
    top: 16px;
    right: 16px;
    padding: 8px 13px;
    border-radius: 999px;
    background: #5D9C59;
    color: #FBF6EE;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 10px 22px rgba(31, 59, 39, 0.24);
}

.reseller-parallax .reseller-package-image-wrap {
    position: relative;
    width: 100%;
    height: 245px;
    margin: 0 0 0;
    border-radius: 0;
    background: #EAE3D2;
    box-shadow: none;
}

.reseller-parallax .reseller-package-image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(60, 42, 33, 0.20) 100%);
    pointer-events: none;
}

.reseller-parallax .reseller-package-image {
    transform-origin: center;
}

.reseller-parallax .reseller-package-card:hover .reseller-package-image {
    transform: scale(1.08);
}

.reseller-parallax .reseller-package-card h3,
.reseller-parallax .reseller-package-card ul {
    padding-left: 28px;
    padding-right: 28px;
}

.reseller-parallax .reseller-package-card h3 {
    margin: 24px 0 16px;
    color: #3C2A21;
    font-size: 23px;
}

.reseller-parallax .reseller-package-card h3 span {
    display: block;
    margin-top: 3px;
    font-size: 0.78em;
    font-weight: 700;
    color: #746A62;
}

.reseller-parallax .reseller-package-card li {
    position: relative;
    padding-left: 27px;
    margin-bottom: 12px;
    color: #58524C;
    font-size: 14px;
    line-height: 1.55;
}

.reseller-parallax .reseller-package-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.1em;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(93, 156, 89, 0.15);
    color: #1F3B27;
    font-size: 11px;
    font-weight: 900;
}

.reseller-parallax .reseller-package-card li strong {
    color: #3C2A21;
}

/* ---------------------------------------------------------------------------
   JOIN: timeline card revised + hover
   --------------------------------------------------------------------------- */
.reseller-parallax .reseller-join-section {
    padding: 92px 0 104px;
    background:
        radial-gradient(circle at 7% 86%, rgba(111, 74, 54, 0.10), transparent 26%),
        radial-gradient(circle at 96% 8%, rgba(255, 255, 255, 0.60), transparent 30%),
        #F3EAD8;
}

.reseller-parallax .reseller-join-container {
    max-width: 980px;
    padding: 70px 64px 66px;
    border-radius: 0;
    background: rgba(251, 246, 238, 0.88);
    box-shadow: 0 28px 70px rgba(60, 42, 33, 0.13);
    text-align: center;
}

.reseller-parallax .reseller-join-container h2 {
    margin-bottom: 48px;
    color: #3C2A21;
    font-size: clamp(25px, 2.5vw, 36px);
}

.reseller-parallax .reseller-steps {
    position: relative;
    max-width: 620px;
    margin: 0 auto 52px;
    gap: 26px;
}

.reseller-parallax .reseller-steps::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 24px;
    bottom: 24px;
    width: 2px;
    background: rgba(31, 59, 39, 0.20);
}

.reseller-parallax .reseller-step-item {
    position: relative;
    grid-template-columns: 46px 1fr;
    align-items: center;
    gap: 26px;
    text-align: left;
}

.reseller-parallax .reseller-step-item span {
    position: relative;
    z-index: 2;
    width: 46px;
    height: 46px;
    background: #1F3B27;
    color: #FBF6EE;
    font-size: 15px;
    box-shadow: 0 14px 30px rgba(31, 59, 39, 0.28);
    transition: transform 320ms ease, background 320ms ease;
}

.reseller-parallax .reseller-step-item p {
    max-width: none;
    margin: 0;
    padding: 22px 26px;
    border-radius: 13px;
    background: #FFFFFF;
    color: #3C2A21;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.42;
    box-shadow: 0 18px 38px rgba(60, 42, 33, 0.08);
    transition: transform 320ms ease, box-shadow 320ms ease;
}

.reseller-parallax .reseller-step-item:hover span {
    transform: scale(1.08);
    background: #5D9C59;
}

.reseller-parallax .reseller-step-item:hover p {
    transform: translateX(8px);
    box-shadow: 0 24px 48px rgba(60, 42, 33, 0.13);
}

.reseller-parallax .reseller-join-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

.reseller-parallax .reseller-join-bottom p {
    max-width: 620px;
    color: #58524C;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
}

.reseller-parallax .reseller-join-btn {
    min-width: 280px;
    height: 52px;
    border-radius: 999px;
    background: #5D9C59;
    border-color: #5D9C59;
    color: #FBF6EE;
    font-size: 14px;
    box-shadow: 0 16px 32px rgba(93, 156, 89, 0.26);
}

.reseller-parallax .reseller-join-btn:hover {
    background: #1F3B27;
    border-color: #1F3B27;
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(31, 59, 39, 0.28);
}

/* Responsive */
@media (max-width: 992px) {
    .reseller-parallax .reseller-hero-section {
        min-height: 86vh;
        padding: 136px 0 86px;
        background-image:
            linear-gradient(90deg, rgba(244, 236, 216, 0.80) 0%, rgba(244, 236, 216, 0.68) 52%, rgba(201, 184, 164, 0.32) 100%),
            url('../images/hero.webp');
    }

    .reseller-parallax .reseller-curve-hero {
        width: 660px;
        height: 470px;
        right: -210px;
        top: 88px;
        border-width: 24px;
    }

    .reseller-parallax .reseller-deals-container,
    .reseller-parallax .reseller-benefits-container,
    .reseller-parallax .reseller-join-container {
        max-width: calc(100% - 44px);
        padding-left: 32px;
        padding-right: 32px;
    }

    .reseller-parallax .reseller-benefits-grid {
        gap: 24px;
    }

    .reseller-parallax .reseller-package-grid {
        gap: 28px;
    }
}

@media (max-width: 768px) {
    .reseller-parallax .reseller-hero-section {
        min-height: 100svh;
        padding: 126px 0 72px;
        background-image:
            linear-gradient(180deg, rgba(244, 236, 216, 0.86), rgba(239, 228, 207, 0.76)),
            url('../images/hero.webp');
        background-position: center center;
    }

    .reseller-parallax .reseller-hero-content h1 {
        font-size: 34px;
        letter-spacing: -0.7px;
    }

    .reseller-parallax .reseller-hero-content p {
        font-size: 15.5px;
        font-weight: 700;
    }

    .reseller-parallax .reseller-curve-hero,
    .reseller-parallax .reseller-bean-left,
    .reseller-parallax .reseller-beans-hero {
        opacity: 0.42;
    }

    .reseller-parallax .reseller-deals-section {
        padding-top: 62px;
    }

    .reseller-parallax .reseller-deals-container,
    .reseller-parallax .reseller-benefits-container,
    .reseller-parallax .reseller-join-container {
        max-width: calc(100% - 28px);
        padding: 48px 22px;
        border-radius: 24px;
    }

    .reseller-parallax .reseller-deals-list,
    .reseller-parallax .reseller-benefits-grid,
    .reseller-parallax .reseller-package-grid {
        grid-template-columns: 1fr;
    }

    .reseller-parallax .reseller-benefits-section {
        padding-bottom: 64px;
    }

    .reseller-parallax .reseller-benefit-item {
        grid-template-columns: 50px 1fr;
        padding: 18px 16px;
    }

    .reseller-parallax .reseller-packages-section,
    .reseller-parallax .reseller-join-section {
        padding: 66px 0 74px;
    }

    .reseller-parallax .reseller-package-image-wrap {
        height: 220px;
    }

    .reseller-parallax .reseller-step-item {
        grid-template-columns: 40px 1fr;
        gap: 16px;
    }

    .reseller-parallax .reseller-step-item span {
        width: 40px;
        height: 40px;
    }

    .reseller-parallax .reseller-step-item p {
        padding: 18px;
        font-size: 13.5px;
    }

    .reseller-parallax .reseller-steps::before {
        left: 19px;
    }

    .reseller-parallax [data-reseller-reveal] {
        transform: translate3d(0, 28px, 0) scale(0.99);
        filter: blur(5px);
        transition-duration: 620ms;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reseller-parallax .reseller-hero-section {
        background-position: center center !important;
        transition: none !important;
    }

    .reseller-parallax .reseller-hero-content,
    .reseller-parallax [data-reseller-parallax] {
        translate: 0 0 !important;
        opacity: 1 !important;
    }

    .reseller-parallax [data-reseller-reveal] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    .reseller-parallax .reseller-deal-card,
    .reseller-parallax .reseller-benefit-item,
    .reseller-parallax .reseller-package-card,
    .reseller-parallax .reseller-step-item p,
    .reseller-parallax .reseller-step-item span {
        transition: none !important;
    }
}

/* ---------------------------------------------------------------------------
   FULL-WIDTH RESELLER DEALS + BENEFITS FIX
   Membuat panel promo dan benefit memenuhi lebar halaman, sementara isi tetap
   terkunci di tengah agar readable.
   --------------------------------------------------------------------------- */
.reseller-parallax .reseller-deals-section {
    width: 100%;
    padding: 0;
    background:
        radial-gradient(circle at 9% 0%, rgba(243, 234, 216, 0.18) 0 155px, transparent 158px),
        radial-gradient(circle at 88% -8%, rgba(235, 191, 171, 0.24) 0 220px, transparent 224px),
        linear-gradient(135deg, #3C2A21 0%, #432B1F 100%);
    color: #FBF6EE;
    overflow: hidden;
}

.reseller-parallax .reseller-deals-container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(70px, 7vw, 112px) clamp(28px, 8vw, 140px) clamp(70px, 6vw, 96px);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.reseller-parallax .reseller-deals-list {
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
}

.reseller-parallax .reseller-benefits-section {
    width: 100%;
    padding: 0;
    background:
        radial-gradient(circle at 74% 16%, rgba(255, 255, 255, 0.075), transparent 28%),
        radial-gradient(circle at 18% 92%, rgba(93, 156, 89, 0.13), transparent 32%),
        linear-gradient(135deg, #254B35 0%, #1F3B27 100%);
    color: #FBF6EE;
    overflow: hidden;
}

.reseller-parallax .reseller-benefits-container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(78px, 7vw, 116px) clamp(28px, 8vw, 140px) clamp(84px, 7vw, 126px);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.reseller-parallax .reseller-benefits-header {
    max-width: 820px;
}

.reseller-parallax .reseller-benefits-grid {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    gap: 34px 46px;
}

@media (max-width: 992px) {
    .reseller-parallax .reseller-deals-list {
        max-width: 760px;
    }

    .reseller-parallax .reseller-benefits-grid {
        max-width: 820px;
    }
}

@media (max-width: 768px) {
    .reseller-parallax .reseller-deals-container,
    .reseller-parallax .reseller-benefits-container {
        padding-left: 24px;
        padding-right: 24px;
    }

    .reseller-parallax .reseller-deals-list {
        grid-template-columns: 1fr;
        max-width: 440px;
    }

    .reseller-parallax .reseller-benefits-grid {
        grid-template-columns: 1fr;
        max-width: 520px;
    }
}

/* ---------------------------------------------------------------------------
   FULL-WIDTH RESELLER JOIN FIX
   Membuat section Cara Bergabung memenuhi lebar halaman seperti Special Deals
   dan Benefits. Konten tetap dikunci di tengah agar tidak terlalu melebar.
   --------------------------------------------------------------------------- */
.reseller-parallax .reseller-join-section {
    width: 100%;
    padding: 0;
    background:
        radial-gradient(circle at 8% 88%, rgba(111, 74, 54, 0.10), transparent 28%),
        radial-gradient(circle at 92% 8%, rgba(255, 255, 255, 0.62), transparent 32%),
        linear-gradient(135deg, #F3EAD8 0%, #FBF6EE 52%, #F3EAD8 100%);
    overflow: hidden;
}

.reseller-parallax .reseller-join-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(82px, 7vw, 118px) clamp(28px, 8vw, 140px) clamp(88px, 7vw, 124px);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
}

.reseller-parallax .reseller-join-container::before {
    content: "";
    position: absolute;
    inset: clamp(34px, 4vw, 62px) clamp(24px, 7vw, 132px);
    z-index: -1;
    border-radius: 34px;
    background: rgba(251, 246, 238, 0.62);
    box-shadow: 0 28px 80px rgba(60, 42, 33, 0.09);
    pointer-events: none;
}

.reseller-parallax .reseller-join-container h2 {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.reseller-parallax .reseller-steps {
    max-width: 780px;
}

.reseller-parallax .reseller-step-item p {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(60, 42, 33, 0.055);
}

.reseller-parallax .reseller-join-bottom {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.reseller-parallax .reseller-join-btn {
    transition:
        transform 340ms cubic-bezier(0.18, 0.84, 0.28, 1),
        box-shadow 340ms ease,
        background 340ms ease,
        border-color 340ms ease;
}

.reseller-parallax .reseller-join-btn:hover {
    transform: translateY(-6px) scale(1.015);
}

@media (max-width: 992px) {
    .reseller-parallax .reseller-join-container {
        max-width: none;
        padding-left: 42px;
        padding-right: 42px;
    }

    .reseller-parallax .reseller-join-container::before {
        inset: 28px 22px;
        border-radius: 28px;
    }
}

@media (max-width: 768px) {
    .reseller-parallax .reseller-join-container {
        max-width: none;
        padding: 66px 22px 74px;
        border-radius: 0;
    }

    .reseller-parallax .reseller-join-container::before {
        inset: 18px 14px;
        border-radius: 24px;
    }

    .reseller-parallax .reseller-steps {
        max-width: 520px;
    }
}

/* ---------------------------------------------------------------------------
   RESELLER HERO TEXT PATCH
   Menyamakan karakter teks hero Reseller dengan Home tanpa mengubah dekorasi,
   background, navbar, dan section lainnya.
   --------------------------------------------------------------------------- */
.reseller-parallax .reseller-hero-content {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}

.reseller-parallax .reseller-hero-content h1 {
    max-width: 620px;
    margin: 0 auto 25px;
    font-family: var(--font-heading);
    font-size: 46px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.5px;
    color: var(--color-coffee);
}

.reseller-parallax .reseller-hero-content p {
    max-width: 540px;
    margin: 0 auto;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--color-text-body);
}

@media (max-width: 992px) {
    .reseller-parallax .reseller-hero-content {
        max-width: 600px;
    }

    .reseller-parallax .reseller-hero-content h1 {
        font-size: 40px;
    }

    .reseller-parallax .reseller-hero-content p {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .reseller-parallax .reseller-hero-content {
        max-width: 100%;
        padding: 0 18px;
    }

    .reseller-parallax .reseller-hero-content h1 {
        font-size: 32px;
        line-height: 1.25;
        letter-spacing: -0.35px;
        margin-bottom: 18px;
    }

    .reseller-parallax .reseller-hero-content p {
        max-width: 440px;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.7;
    }
}

/* ---------------------------------------------------------------------------
   RESELLER HERO CONTACT STYLE PATCH
   Menyamakan desain section hero Reseller dengan Contact hero.
   --------------------------------------------------------------------------- */
.reseller-eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    color: rgba(36, 29, 24, 0.62);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.reseller-parallax .reseller-hero-section {
    min-height: 100vh;
    padding: 150px 0 80px;
    align-items: center;
    background-image:
        linear-gradient(90deg, rgba(244, 236, 216, 0.76) 0%, rgba(244, 236, 216, 0.62) 42%, rgba(201, 184, 164, 0.34) 100%),
        url('../images/hero.webp');
    background-position: center calc(50% + var(--reseller-hero-bg-y));
}

.reseller-parallax .reseller-hero-section::after {
    background:
        radial-gradient(circle at 72% 24%, rgba(255, 255, 255, 0.22), transparent 32%),
        linear-gradient(180deg, rgba(255, 252, 244, 0.05) 0%, rgba(77, 56, 40, 0.08) 100%);
}

.reseller-parallax .reseller-hero-container {
    position: relative;
    z-index: 3;
}

.reseller-parallax .reseller-hero-content {
    max-width: 560px;
    margin: 0 auto;
    padding: 0;
    text-align: left;
    transform: none;
    opacity: var(--reseller-hero-opacity);
    translate: 0 var(--reseller-hero-content-y);
    will-change: translate, opacity;
}

.reseller-parallax .reseller-hero-content h1 {
    max-width: 560px;
    margin: 0 0 25px;
    font-family: var(--font-heading);
    font-size: 46px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--color-coffee);
    letter-spacing: -0.5px;
}

.reseller-parallax .reseller-hero-content p {
    max-width: 540px;
    margin: 0;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 400;
    color: var(--color-text-body);
}

.reseller-parallax .reseller-curve-hero {
    top: -240px;
    right: -250px;
    width: 850px;
    height: 620px;
    border: 18px solid rgba(118, 99, 77, 0.22);
    border-radius: 0 0 0 70%;
    transform: rotate(-20deg);
    box-shadow: none;
    opacity: 1;
}

.reseller-parallax .reseller-curve-hero::after {
    content: '';
    position: absolute;
    inset: 32px;
    border: 16px solid rgba(255, 251, 239, 0.95);
    border-radius: 0 0 0 70%;
}

.reseller-parallax .reseller-bean-left {
    left: -125px;
    bottom: -145px;
    width: 390px;
    height: 340px;
    background: #764a35;
    border-radius: 58% 42% 42% 58% / 42% 48% 52% 58%;
    transform: rotate(-12deg);
    opacity: 1;
}

.reseller-parallax .reseller-bean-left::before {
    content: '';
    position: absolute;
    top: 72px;
    left: 78px;
    width: 210px;
    height: 158px;
    border: 28px solid #f7f0df;
    border-radius: 50%;
    transform: rotate(28deg);
}

.reseller-parallax .reseller-bean-left::after {
    content: '';
    position: absolute;
    right: -70px;
    bottom: 2px;
    inset: auto;
    width: 250px;
    height: 98px;
    border: 0;
    border-top: 5px solid rgba(255, 251, 239, 0.72);
    border-radius: 50%;
    transform: rotate(-4deg);
}

.reseller-parallax .reseller-beans-hero {
    right: 72px;
    bottom: 36px;
    width: 130px;
    height: 140px;
    opacity: 0.28;
}

.reseller-parallax .reseller-beans-hero::before,
.reseller-parallax .reseller-beans-hero::after {
    width: 45px;
    height: 72px;
    border: 5px solid #8e806d;
    border-radius: 50%;
    transform: rotate(-48deg);
}

.reseller-parallax .reseller-beans-hero::before {
    top: 24px;
    left: 16px;
    box-shadow: 58px 12px 0 -5px transparent, 48px 36px 0 -3px transparent;
}

.reseller-parallax .reseller-beans-hero::after {
    top: 58px;
    right: 12px;
    transform: rotate(40deg);
}

@media (max-width: 992px) {
    .reseller-parallax .reseller-hero-content h1 {
        font-size: 38px;
    }

    .reseller-parallax .reseller-hero-content p {
        font-size: 15.5px;
    }
}

@media (max-width: 768px) {
    .reseller-parallax .reseller-hero-section {
        min-height: 100vh;
        padding: 132px 0 86px;
        background-image:
            linear-gradient(180deg, rgba(244, 236, 216, 0.84), rgba(239, 228, 207, 0.74)),
            url('../images/hero.webp');
        background-position: center center;
    }

    .reseller-parallax .reseller-hero-content {
        max-width: 100%;
        padding: 0 18px;
        text-align: left;
    }

    .reseller-parallax .reseller-hero-content h1 {
        max-width: 520px;
        font-size: 30px;
        line-height: 1.35;
        letter-spacing: -0.3px;
        margin-bottom: 20px;
    }

    .reseller-parallax .reseller-hero-content p {
        max-width: 520px;
        font-size: 15px;
        line-height: 1.7;
    }

    .reseller-parallax .reseller-curve-hero {
        width: 520px;
        height: 380px;
        right: -260px;
        top: -110px;
        border-width: 14px;
    }

    .reseller-parallax .reseller-curve-hero::after {
        inset: 22px;
        border-width: 12px;
    }

    .reseller-parallax .reseller-bean-left {
        left: -175px;
        bottom: -170px;
        width: 330px;
        height: 285px;
    }

    .reseller-parallax .reseller-bean-left::before {
        top: 64px;
        left: 68px;
        width: 170px;
        height: 125px;
        border-width: 22px;
    }

    .reseller-parallax .reseller-bean-left::after {
        right: -48px;
        width: 200px;
        height: 76px;
    }

    .reseller-parallax .reseller-beans-hero {
        right: 12px;
        bottom: 18px;
        transform: scale(0.72);
    }
}