@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
#bee-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }
}

#partnerTrack {
    display: flex;
    width: max-content;
    animation: partnerScroll 35s linear infinite;
}

#partnerTrack:hover {
    animation-play-state: paused;
}

@keyframes partnerScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}




/* ============ Honey pour effect ============ */

/* Falling drop that plays once as the modal opens */
.honey-drop {
    position: absolute;
    top: -18px;
    left: 50%;
    width: 14px;
    height: 18px;
    background: radial-gradient(circle at 35% 30%, #ffd580, #F5A623 70%);
    border-radius: 50% 50% 50% 0;
    transform: translateX(-50%) rotate(45deg) scale(0);
    opacity: 0;
    z-index: 30;
    pointer-events: none;
}

.honey-drop.play {
    animation: dropFall 0.5s cubic-bezier(0.55, 0, 1, 0.45) forwards,
               dropFade 0.15s ease-in 0.45s forwards;
}

@keyframes dropFall {
    0%   { transform: translateX(-50%) rotate(45deg) scale(0.3); top: -18px; opacity: 1; }
    70%  { transform: translateX(-50%) rotate(45deg) scale(1);   top: 6px;   opacity: 1; }
    100% { transform: translateX(-50%) rotate(45deg) scale(1.15) scaleY(0.6); top: 10px; opacity: 1; }
}

@keyframes dropFade {
    to { opacity: 0; }
}

/* The honey layer that fills the card, then recedes to reveal the form */
.honey-fill {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: linear-gradient(180deg, #F5A623 0%, #e0941f 100%);
    transform: scaleY(0);
    transform-origin: bottom;
    pointer-events: none;
}

.honey-fill.pour {
    animation: honeyPourIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s forwards,
               honeyRecede 0.6s cubic-bezier(0.55, 0, 0.55, 0.2) 1.1s forwards;
}

@keyframes honeyPourIn {
    0%   { transform: scaleY(0); }
    100% { transform: scaleY(1); }
}

@keyframes honeyRecede {
    0%   { transform: scaleY(1); opacity: 1; }
    100% { transform: scaleY(0); opacity: 0.4; }
}

.honey-wave {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 20px;
}

.honey-fill.pour .honey-wave path {
    animation: waveWobble 0.7s ease-in-out 0.35s;
}

@keyframes waveWobble {
    0%   { d: path("M0,40 L0,35 Q50,25 100,35 T200,35 T300,35 T400,35 L400,40 Z"); }
    50%  { d: path("M0,40 L0,8  Q50,-6 100,8  T200,8  T300,8  T400,8  L400,40 Z"); }
    100% { d: path("M0,40 L0,20 Q50,5  100,20 T200,20 T300,20 T400,20 L400,40 Z"); }
}

.timeline-line::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, #F5A623, #43604E);
}
@media (max-width: 768px) {
    .timeline-line::before { left: 24px; }
}



.honeycomb {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    justify-content: center;
    align-items: center;
    max-width: 1050px;
    margin: 0 auto;
}

.honeycomb-cell {
    position: relative;
    width: 260px;
    height: 300px;

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

    clip-path: polygon(
        25% 6.7%,
        75% 6.7%,
        100% 50%,
        75% 93.3%,
        25% 93.3%,
        0% 50%
    );

    background: #ffffff;

    transition:
        transform 0.3s ease,
        filter 0.3s ease;

    margin: -20px;
}

.honeycomb-cell::before {
    content: "";
    position: absolute;
    inset: 3px;

    background: #FFF8E7;

    clip-path: polygon(
        25% 6.7%,
        75% 6.7%,
        100% 50%,
        75% 93.3%,
        25% 93.3%,
        0% 50%
    );
}

.honeycomb-content {
    position: relative;
    z-index: 2;

    width: 78%;
    text-align: center;
}

.honeycomb-number {
    position: absolute;
    top: -5px;
    right: 0;

    font-size: 11px;
    font-weight: 800;
    color: #F5A623;
}

.honeycomb-icon {
    width: 48px;
    height: 48px;

    margin: 0 auto 12px;

    border-radius: 14px;

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

    background: #F5A623;
    font-size: 22px;

    box-shadow: 0 8px 20px rgba(245, 166, 35, 0.2);
}

.honeycomb-cell h3 {
    color: #1a1a1a;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 800;

    margin-bottom: 10px;
}

.honeycomb-cell p {
    color: #6b7280;
    font-size: 12px;
    line-height: 1.6;
}

.honeycomb-cell:hover {
    transform: translateY(-8px);
    filter: drop-shadow(0 15px 25px rgba(67, 96, 78, 0.15));
    z-index: 10;
}


.honeycomb-cell:nth-child(1) {
    grid-column: 3 / span 2;
}

.honeycomb-cell:nth-child(2) {
    grid-column: 2 / span 2;
    margin-top: -35px;
}

.honeycomb-cell:nth-child(3) {
    grid-column: 4 / span 2;
    margin-top: -35px;
}

.honeycomb-cell:nth-child(4) {
    grid-column: 1 / span 2;
    margin-top: -35px;
}

.honeycomb-cell:nth-child(5) {
    grid-column: 3 / span 2;
    margin-top: -35px;
}

.honeycomb-cell:nth-child(6) {
    grid-column: 5 / span 2;
    margin-top: -35px;
}

.honeycomb-cell:nth-child(7) {
    grid-column: 3 / span 2;
    margin-top: -35px;
}

@media (max-width: 768px) {

    .honeycomb {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .honeycomb-cell {
        width: min(320px, 95vw);
        height: 300px;
        margin: -25px 0 0 !important;
    }

    .honeycomb-cell:first-child {
        margin-top: 0 !important;
    }

}