@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

/* Coffee Widgets - Semantic Styles */
:root {
    --coffee-brand-gold: #CFA676;
    --coffee-brand-dark: #130d0a;
    --coffee-brand-light: #F4E4BE;
    --coffee-gradient-premium: linear-gradient(135deg, #f4e4be 0%, #cfa676 50%, #b8813f 100%);
    --color-white: #ffffff;
    --color-gold: #CFA676;
    --color-gold-light: #F4E4BE;
}

/* --- Layout Utilities --- */
.coffee-order-reversed .unified-container,
.coffee-order-reversed .coffee-hero-container,
.coffee-order-reversed .coffee-footer-grid,
.coffee-order-reversed .coffee-steps-container,
.coffee-order-reversed .coffee-why-grid-cards,
.coffee-order-reversed .coffee-screenshots-v2-grid,
.coffee-order-reversed .coffee-download-grid,
.coffee-order-reversed .coffee-partners-inner,
.coffee-order-reversed .coffee-hero-grid,
.coffee-order-reversed.coffee-header-nav .flex,
.coffee-order-reversed .coffee-header-nav-container {
    flex-direction: row-reverse !important;
}





/* Reveal animations logic - Refined for React parity */
.coffee-reveal-ready .coffee-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.21, 1.02, 0.44, 1.01), transform 0.8s cubic-bezier(0.21, 1.02, 0.44, 1.01);
    will-change: opacity, transform;
}

.coffee-reveal-ready .reveal-up {
    transform: translateY(40px);
}

.coffee-reveal-ready .reveal-down {
    transform: translateY(-40px);
}

.coffee-reveal-ready .reveal-left {
    transform: translateX(-40px);
}

.coffee-reveal-ready .reveal-right {
    transform: translateX(40px);
}

.coffee-reveal-ready .reveal-scale {
    transform: scale(0.94);
}

.coffee-reveal-ready .coffee-reveal.reveal-up.reveal-scale {
    transform: translateY(40px) scale(0.94);
}

.coffee-reveal-ready .coffee-reveal.reveal-left.reveal-scale {
    transform: translateX(-40px) scale(0.94);
}

.coffee-reveal-ready .coffee-reveal.reveal-right.reveal-scale {
    transform: translateX(40px) scale(0.94);
}

.coffee-reveal.is-visible {
    opacity: 1 !important;
    transform: translate(0, 0) scale(1) !important;
}

:not(.coffee-reveal-ready) .coffee-reveal {
    opacity: 1 !important;
    transform: none !important;
}

/* --- Scoped Widget Base Styles --- */
html,
body {
    background: radial-gradient(circle at center, #1e1814 0%, #1a1410 100%) !important;
    background-color: #1a1410 !important;
    color: var(--color-white);
    margin: 0;
    padding: 0;
    font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    width: 100%;
    overflow-x: hidden;
}

[class*="elementor-widget-coffee-"] {
    color: var(--color-white);
    font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Background only on sections inside coffee widgets */
[class*="elementor-widget-coffee-"] section,
.coffee-header-nav {
    background-color: #1a1410;
}

/* --- Reusable Components (Enhanced) --- */
.glass-effect {
    background: rgba(31, 27, 24, 0.6) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(207, 166, 118, 0.2) !important;
}

.text-gradient-gold {
    background: var(--coffee-gradient-premium);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.coffee-ui-glass-panel {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(31, 27, 24, 0.6);
    border: 1px solid rgba(207, 166, 118, 0.2);
}

.coffee-brand-display-title {
    background: var(--coffee-gradient-premium) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 800;
}



@media (max-width: 767px) {

    [class*="-section"],
    section {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .coffee-merchant-journey,
    .coffee-customer-journey {
        margin-top: 3rem !important;
    }
    
    
}

/* --- Layout Containers --- */
.unified-container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    width: 100%;
}

@media (max-width: 767px) {
    .unified-container {
        padding-left: 1rem;
        padding-right: 1rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .unified-container {
        padding-left: 2rem;
        padding-right: 2rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    [class*="-section"],
    section {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden;
    }
}

@media (min-width: 1025px) and (max-width: 1280px) {
    .unified-container {
        padding-left: 3rem;
        padding-right: 3rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* --- Hero Section Specific Utilities --- */
.glow-circle-border {
    border: 1px solid rgba(207, 166, 118, 0.15);
    background: radial-gradient(circle, rgba(207, 166, 118, 0.08) 0%, transparent 70%);
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--coffee-brand-gold);
    border-radius: 50%;
    filter: blur(1px);
}

/* --- Animations --- */
.animate-shimmer {
    animation: coffee-shimmer 3s ease-in-out infinite;
}

.animate-twinkle {
    animation: coffee-twinkle 4s ease-in-out infinite;
}

.animate-float {
    animation: coffee-float 6s ease-in-out infinite;
}

@keyframes coffee-shimmer {

    0%,
    100% {
        opacity: 0.2;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.5);
    }
}

@keyframes coffee-twinkle {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

@keyframes coffee-float {

    0%,
    100% {
        transform: translateY(0) rotateY(4deg);
    }

    50% {
        transform: translateY(-20px) rotateY(8deg);
    }
}

@keyframes coffee-bounce-soft {

    0%,
    100% {
        transform: translate(-50%, 0);
    }

    50% {
        transform: translate(-50%, 10px);
    }
}

@keyframes coffee-spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes coffee-twinkle {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

@keyframes coffee-float {

    0%,
    100% {
        transform: translateY(0) rotateY(4deg);
    }

    50% {
        transform: translateY(-20px) rotateY(8deg);
    }
}

/* Badge spinning coffee cup */
.coffee-badge-spin {
    display: inline-block !important;
    animation: coffee-spin 4s linear infinite !important;
    transform-origin: center center;
}

@keyframes coffee-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Stats grid - no background */
.coffee-hero-stats-grid,
.coffee-hero-stats-grid *:not([class*="text-"]) {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: rgba(207, 166, 118, 0.2) !important;
    box-shadow: none !important;
}

/* --- Footer Widget (Semantic) --- */
.coffee-footer-section {
    position: relative;
    width: 100%;
    padding-top: 6rem;
    padding-bottom: 3rem;
    background-color: #0a0705;
    overflow: hidden;
}

@media (max-width: 767px) {
    .coffee-footer-section {
        padding-top: 3rem;
        padding-bottom: 2rem;
    }
}

.coffee-footer-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent, #0a0705);
    pointer-events: none;
}

.coffee-footer-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 800px;
    height: 12rem;
    background-color: rgba(207, 166, 118, 0.1);
    filter: blur(120px);
    border-radius: 9999px;
    pointer-events: none;
}

.coffee-footer-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom: 5rem;
}

@media (min-width: 768px) {
    .coffee-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .coffee-footer-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.coffee-footer-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Brand Column */
.coffee-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.coffee-footer-logo-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    background: #CFA676;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1410;
    box-shadow: 0 25px 50px -12px rgba(207, 166, 118, 0.2);
}

.coffee-footer-logo-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1.5rem;
}

.coffee-footer-logo-svg svg {
    width: 2.5rem;
    height: 2.5rem;
}

.coffee-footer-logo-text {
    font-size: 1.875rem;
    font-family: 'Noto Serif', serif;
    font-style: italic;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #F4E4BE;
    display: block;
}

.coffee-footer-logo-subtitle {
    display: block;
    font-size: 0.625rem;
    color: rgba(207, 166, 118, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.25em;
}

.coffee-footer-desc {
    font-size: 0.875rem;
    color: rgba(234, 225, 219, 0.7);
    line-height: 1.7;
    max-width: 20rem;
}

/* Nav Column */
.coffee-footer-nav {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.coffee-footer-nav-title {
    color: #F4E4BE;
    font-family: 'Noto Serif', serif;
    font-style: italic;
    font-size: 1.25rem;
}

.coffee-footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.coffee-footer-link {
    color: rgba(234, 225, 219, 0.6);
    font-size: 0.875rem;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
}

.coffee-footer-link:hover {
    color: #CFA676;
    transform: translateX(-4px);
}

/* Contact Column */
.coffee-footer-contact {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.coffee-contact-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.coffee-contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: rgba(234, 225, 219, 0.8);
    transition: color 0.3s ease;
    text-decoration: none;
}

.coffee-contact-item:hover {
    color: #CFA676;
}

.coffee-contact-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background-color: #1a1410;
    border: 1px solid rgba(207, 166, 118, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #CFA676;
    transition: all 0.3s ease;
}

.coffee-contact-item:hover .coffee-contact-icon {
    border-color: rgba(207, 166, 118, 0.5);
}

.coffee-contact-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Divider */
.coffee-footer-divider {
    height: 1px;
    width: 100%;
    background: linear-gradient(to left, transparent, rgba(207, 166, 118, 0.3), transparent);
    margin-bottom: 3rem;
}

/* Bottom Bar */
.coffee-footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

@media (min-width: 768px) {
    .coffee-footer-bottom {
        flex-direction: row;
    }
}

.coffee-copyright-wrap {
    order: 3;
}

@media (min-width: 768px) {
    .coffee-copyright-wrap {
        order: 1;
    }
}

.coffee-copyright {
    font-size: 0.875rem;
    color: rgba(234, 225, 219, 0.4);
}

.coffee-footer-social {
    display: flex;
    gap: 1rem;
    order: 2;
}

.coffee-social-link {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    border: 1px solid rgba(207, 166, 118, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(234, 225, 219, 0.6);
    transition: all 0.3s ease;
    text-decoration: none;
}

.coffee-social-link:hover {
    color: #CFA676;
    border-color: rgba(207, 166, 118, 0.5);
    background: rgba(31, 27, 24, 0.6);
}

.coffee-social-link svg {
    width: 1.25rem;
    height: 1.25rem;
}

.coffee-powered-by {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    order: 1;
}

@media (min-width: 768px) {
    .coffee-powered-by {
        order: 3;
    }
}

.coffee-powered-by span {
    font-size: 0.625rem;
    color: rgba(207, 166, 118, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.25em;
    transform: translateY(1px);
}

.coffee-puiux-logo {
    color: #CFA676;
}

/* --- Global Icon & SVG Color Restoration --- */
.coffee-hero svg {
    fill: none;
    stroke: currentColor;
}

.coffee-hero svg path,
.coffee-hero svg circle,
.coffee-hero svg rect,
.coffee-hero svg line {
    stroke: currentColor !important;
    vector-effect: non-scaling-stroke;
}

/* Specific handling for filled icons (FontAwesome Solid, etc.) */
.coffee-hero .e-font-icon-svg path,
.coffee-hero [class^="e-fas"] path,
.coffee-hero [class*=" fas "] path {
    fill: currentColor !important;
    stroke: none !important;
}

/* Ensure the wrapper span passes the color correctly */
.coffee-hero .text-\[\#CFA676\] {
    color: #CFA676 !important;
}

/*
 * FIX STICKY / FIXED POSITIONING IN ELEMENTOR
 * Elementor often uses transforms, animations, or filters on sections/columns/containers.
 * The CSS spec breaks `position: fixed` if ANY parent has a transform/filter/perspective.
 * This code strips those breaking properties from all ancestors of the header.
 */
.elementor-section:has(.coffee-header-nav),
.elementor-column:has(.coffee-header-nav),
.elementor-widget-wrap:has(.coffee-header-nav),
.elementor-widget:has(.coffee-header-nav),
.elementor-container:has(.coffee-header-nav),
.elementor-element:has(.coffee-header-nav),
.e-con:has(.coffee-header-nav),
.e-con-inner:has(.coffee-header-nav),
.e-container:has(.coffee-header-nav),
.elementor-widget-coffee-header {
    transform: none !important;
    perspective: none !important;
    filter: none !important;
    contain: none !important;
    will-change: auto !important;
    animation: none !important;
    overflow: visible !important;
    clip-path: none !important;
    backdrop-filter: none !important;
}

.coffee-header-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 99999 !important;
    padding: 1rem 1.5rem;
    box-sizing: border-box !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: auto;
    /* Restored interactivity */
}

/*
 * WP Admin Bar Fix
 * Ensures header stays below the admin bar when logged in
 */
.admin-bar .coffee-header-nav {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    .admin-bar .coffee-header-nav {
        top: 46px !important;
    }
}

/* Re-enable interaction for actual content */
.coffee-header-nav * {
    pointer-events: auto;
}

/* Base Layout Helpers for Mobile Menu */
.flex {
    display: flex !important;
}

.flex-col {
    flex-direction: column !important;
}

.gap-4 {
    gap: 1rem !important;
}

.w-full {
    width: 100% !important;
}

.text-right {
    text-align: right !important;
}

/* =============================================
   DIRECTION ENFORCEMENT (RTL / LTR)
   Targets html[dir] + Elementor containers.
   This block is supplemented by PHP-injected <style> at wp_head priority 999.
   ============================================= */

/* --- RTL Micro-interactions --- */
[dir="rtl"] .coffee-nav-link:hover {
    transform: translateX(4px) !important;
}

[dir="rtl"] .coffee-footer-link:hover {
    transform: translateX(4px) !important;
}

/* --- RTL: How It Works Step Layout --- */
[dir="rtl"] .coffee-step-number {}

[dir="rtl"] .coffee-step-connector {
    background: linear-gradient(to right, rgba(207, 166, 118, 0.5), transparent) !important;
}

[dir="rtl"] .coffee-step-connector-dot {
    right: auto !important;
    left: 0 !important;
}



.items-center {
    align-items: center !important;
}

.justify-between {
    justify-content: space-between !important;
}

.coffee-header-container {
    max-width: 1400px;
    margin: 0 auto;
}

.coffee-header-card {
    padding: 0.75rem 1.5rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(207, 166, 118, 0.2);
    background: rgba(26, 20, 16, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.coffee-header-nav.coffee-header-scrolled {
    padding-top: 0.5rem;
}

.coffee-header-nav.coffee-header-scrolled .coffee-header-card {
    background: rgba(26, 20, 16, 0.85);
    border-color: rgba(207, 166, 118, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.coffee-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}

/* Utility Classes for Header Navigation (Tailwind Parity) */
.px-6 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.py-3 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

.px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.rounded-xl {
    border-radius: 0.75rem !important;
}

.rounded-3xl {
    border-radius: 1.5rem !important;
}

.text-sm {
    font-size: 0.875rem !important;
}

.font-medium {
    font-weight: 500 !important;
}

.text-\[\#F4E4BE\]\/70 {
    color: rgba(244, 228, 190, 0.7) !important;
}

.hover\:text-\[\#CFA676\]:hover {
    color: #CFA676 !important;
}

.hover\:bg-\[\#CFA676\]\/10:hover {
    background-color: rgba(207, 166, 118, 0.1) !important;
}

.transition-all {
    transition: all 0.3s ease !important;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    transition: transform 0.3s ease;
    flex-direction: row;
}

.logo-link:hover {
    transform: scale(1.05);
}

/* Target the logo icon wrapper div from NEW PHP */
.logo-link div:not(.logo-img-wrapper) {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: #CFA676;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1410;
    box-shadow: 0 10px 20px rgba(207, 166, 118, 0.2);
    transition: transform 0.6s ease;
}

.logo-link:hover div:not(.logo-img-wrapper) {
    transform: rotate(360deg);
}

.coffee-logo-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.logo-link span {
    color: #F4E4BE;
    font-weight: 600;
    font-size: 1.1rem;
    transition: color 0.3s ease;
    display: none;
}

@media (min-width: 640px) {
    .logo-link span {
        display: block;
    }
}

.logo-link:hover span {
    color: #CFA676;
}

.coffee-nav-menu-desktop {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .coffee-nav-menu-desktop {
        display: flex;
    }
}

.coffee-nav-link {
    color: rgba(244, 228, 190, 0.8);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: block;
}

.coffee-nav-link:hover {
    color: #CFA676;
    transform: translateY(-2px);
}

/* Actions */
.coffee-header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Language Switcher Alignment */
.coffee-lang-switch {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    background: rgba(92, 64, 51, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(207, 166, 118, 0.2);
    color: #F4E4BE;
    cursor: pointer;
    transition: all 0.3s ease;
}

@media (min-width: 640px) {
    .coffee-lang-switch {
        display: flex;
    }
}

.coffee-lang-switch:hover {
    border-color: rgba(207, 166, 118, 0.4);
    transform: scale(1.05);
}

.coffee-lang-switch span {
    font-size: 0.875rem;
    opacity: 0.8;
}

.coffee-lang-switch svg {
    width: 1rem;
    height: 1rem;
    color: #CFA676;
    transition: transform 0.5s ease;
}

.coffee-lang-switch:hover svg {
    transform: rotate(180deg);
}

/* Download Button */
.coffee-download-button {
    display: none;
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
    background: #211B17;
    color: #F4E4BE;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    border: 1px solid rgba(207, 166, 118, 0.3);
    transition: all 0.3s ease;
}

@media (min-width: 768px) {
    .coffee-download-button {
        display: block;
    }
}

.coffee-download-button:hover {
    background: #2a1f1b;
    border-color: #CFA676;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 10px 20px rgba(207, 166, 118, 0.25), 0 0 15px rgba(207, 166, 118, 0.2);
}

/* Mobile Toggle */
.mobile-nav-toggle {
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 9999px;
    background: rgba(92, 64, 51, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(207, 166, 118, 0.2);
}

@media (min-width: 1024px) {
    .mobile-nav-toggle {
        display: none !important;
    }
}

.mobile-nav-toggle svg {
    width: 1.5rem;
    height: 1.5rem;
    color: #CFA676;
}

.toggle-icon-close {
    display: none;
}

/* Mobile Dropdown Logic */
.mobile-dropdown {
    z-index: 20;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(26, 20, 16, 0.95);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(207, 166, 118, 0.1);
    padding: 1.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.coffee-header-card.is-open .mobile-dropdown {
    z-index: 20;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mobile-nav-link {
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--item-index) * 0.1s);
}

.coffee-header-card.is-open .mobile-nav-link {
    opacity: 1;
    transform: translateX(0);
}

.coffee-header-card.is-open .toggle-icon-menu {
    display: none !important;
}

.coffee-header-card.is-open .toggle-icon-close {
    display: block !important;
}

.mobile-dropdown-inner {
    padding-bottom: 1.5rem;
}

.mobile-nav-link {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(244, 228, 190, 0.8) !important;
    padding: 0.75rem 1rem !important;
    border-radius: 0.75rem;
    background: transparent;
    transition: all 0.3s ease;
}

.mobile-nav-link:hover {
    color: #CFA676 !important;
    background: rgba(207, 166, 118, 0.1);
}

.mobile-lang-switch {
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--item-index) * 0.1s);
    background: rgba(207, 166, 118, 0.05) !important;
    border: 1px solid rgba(207, 166, 118, 0.1) !important;
    color: #F4E4BE !important;
    font-weight: 500;
    margin: 0.5rem auto !important;
    width: fit-content !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 999px !important;
    display: flex !important;
}

.coffee-header-card.is-open .mobile-lang-switch {
    opacity: 1;
    transform: translateX(0);
}

.mobile-cta-button {
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--item-index) * 0.1s);
    background: #CFA676 !important;
    color: #1a1410 !important;
    font-weight: 700 !important;
    box-shadow: 0 10px 20px rgba(207, 166, 118, 0.2);
    margin: 0.5rem auto !important;
    width: fit-content !important;
    padding: 0.75rem 2rem !important;
    border-radius: 999px !important;
    text-decoration: none;
    display: block !important;
}

.coffee-header-card.is-open .mobile-cta-button {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 1023px) {
    .coffee-header-nav {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* --- About Section Widget (Matched to Frontend) --- */
.coffee-about-section {
    position: relative;
    padding: 6rem 0;
    /* py-24 */
    overflow: hidden;
}

@media (max-width: 767px) {
    .coffee-about-section {
        padding: 3rem 0;
    }
}

/* Smooth blend from hero to about — matches Hero's gradient endpoint #1a1410 */
.coffee-about-section::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -50px;
    height: 150px;
    background: linear-gradient(to bottom, #1a1410 0%, rgba(26, 20, 16, 0.92) 25%, rgba(26, 20, 16, 0.60) 55%, rgba(26, 20, 16, 0.20) 80%,
            transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.coffee-about-bg-atmosphere {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(26, 20, 16, 0.35) 0%, transparent 35%, rgba(207, 166, 118, 0.05) 62%, transparent 100%);
    pointer-events: none;
}

.coffee-about-main-card {
    max-width: 1280px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    border-radius: 3rem;
    /* rounded-[3rem] */
    border: 1px solid rgba(207, 166, 118, 0.2);
    background: rgba(26, 20, 16, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .coffee-about-main-card {
        max-width: 100%;
        border-radius: 1.5rem;
        padding: 2rem 1rem;
    }
}

@media (min-width: 768px) {
    .coffee-about-main-card {
        padding: 4rem;
    }
}

.coffee-about-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    /* px-5 py-2 */
    border-radius: 9999px;
    border: 1px solid rgba(207, 166, 118, 0.3);
    background: rgba(26, 20, 16, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #CFA676;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.coffee-about-badge-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.coffee-about-title {
    color: #F4E4BE;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    text-align: center;
    margin-bottom: 2rem;
    /* mb-8 */
    line-height: 1.2;
    background: var(--coffee-gradient-premium);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.coffee-about-summary-text {
    color: rgba(244, 228, 190, 0.9);
    /* text-[#F4E4BE]/90 */
    font-size: 1.25rem;
    /* text-xl */
    text-align: center;
    max-width: 896px;
    /* max-w-4xl */
    margin: 0 auto 3rem;
    /* mb-12 */
    line-height: 1.6;
}

@media (max-width: 767px) {
    .coffee-about-summary-text {
        max-width: 100%;
        font-size: 1.1rem;
        margin-bottom: 2rem;
    }
}

.coffee-about-features-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
    /* gap-8 */
}

@media (min-width: 768px) {
    .coffee-about-features-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .coffee-about-features-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

.coffee-about-feature-box {
    text-align: center;
    padding: 1rem;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.coffee-about-feature-box:hover {
    transform: translateY(-2px);
}

.coffee-about-icon-container {
    width: 4rem;
    /* w-16 */
    height: 4rem;
    /* h-16 */
    border-radius: 1rem;
    /* rounded-2xl */
    background: #CFA676;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: #1a1410;
    font-size: 1.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.coffee-about-feature-box:hover .coffee-about-icon-container {
    transform: rotate(360deg);
}

.coffee-about-icon-container svg {
    width: 2rem;
    height: 2rem;
    stroke: currentColor;
    fill: none;
}

.coffee-about-icon-container .e-font-icon-svg path,
.coffee-about-icon-container [class^="e-fas"] path,
.coffee-about-icon-container [class*=" fas "] path {
    fill: currentColor !important;
    stroke: none !important;
}

.coffee-about-feature-label {
    color: #CFA676;
    /* text-[#CFA676] */
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

.coffee-about-feature-desc {
    color: rgba(244, 228, 190, 0.6);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* --- How It Works Section (Matched to Frontend) --- */
.coffee-how-it-works-section {
    position: relative;
    padding: 6rem 0;
    overflow: visible;
    /* Changed to visible to allow step numbers to show */
}

@media (max-width: 767px) {
    .coffee-how-it-works-section {
        padding: 3rem 0;
    }
}

.coffee-howit-bg-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(62, 39, 35, 0.1), transparent, rgba(62, 39, 35, 0.1));
    pointer-events: none;
}

.coffee-howit-title-section {
    text-align: center;
    margin-bottom: 5rem;
}

.coffee-howit-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    background: rgba(92, 64, 51, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(207, 166, 118, 0.3);
    color: #CFA676;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.coffee-howit-title {
    display: block !important;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800 !important;
    line-height: 1.2;
    background: var(--coffee-gradient-premium) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    margin-bottom: 2rem !important;
}

.coffee-steps-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 8rem;
}

@media (max-width: 767px) {
    .coffee-steps-container {
        gap: 3rem;
        margin-bottom: 3rem;
    }
}

@media (min-width: 768px) {
    .coffee-steps-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

.coffee-step-card-wrapper {
    position: relative;
    height: 100%;
    overflow: visible !important;
}

.coffee-step-card {
    position: relative;
    padding: 2.5rem;
    height: 100%;
    border-radius: 1.875rem;
    background: rgba(92, 64, 51, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(207, 166, 118, 0.2);
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: visible !important;
}

/* Glow Effect matching React motion.div */
.coffee-step-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #CFA676;
    opacity: 0;
    border-radius: 1.5rem;
    filter: blur(24px);
    z-index: -1;
    transition: opacity 0.4s ease;
}

.coffee-step-card:hover::after {
    opacity: 0.3;
    animation: coffee-card-glow 4s infinite ease-in-out;
}

@keyframes coffee-card-glow {

    0%,
    100% {
        transform: scale(0.8);
        opacity: 0.1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.3;
    }
}

.coffee-cta-section.coffee-download-section.coffee-reveal {
    overflow: hidden;
}

.coffee-step-card:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: rgba(207, 166, 118, 0.5);
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.4);
}

.coffee-step-number {
    position: absolute;
    top: -1.25rem;
    inset-inline-start: -1.25rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: #CFA676 !important;
    /* Ensure gold color */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1410 !important;
    /* Ensure dark number */
    font-size: 1.25rem;
    font-weight: 700;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    z-index: 1;
    /* Increase z-index */
    pointer-events: none;
}

@media (max-width: 767px) {
    .coffee-step-number {
        top: 1.25rem;
        inset-inline-start: 1.25rem !important;
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.1rem;
    }
}

.coffee-step-icon {
    width: 6rem;
    height: 6rem;
    border-radius: 1.5rem;
    background: #CFA676;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: white;
    font-size: 2.5rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.coffee-step-card:hover .coffee-step-icon {
    transform: rotate(360deg) scale(1.1);
}

.coffee-step-icon svg {
    width: 3rem;
    height: 3rem;
    stroke: white;
}

.coffee-step-title {
    color: #F4E4BE;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.coffee-step-desc {
    color: rgba(244, 228, 190, 0.7);
    line-height: 1.8;
    font-size: 1rem;
}

.coffee-step-connector {
    display: none !important;
    position: absolute;
    top: 5rem;
    right: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to left, rgba(207, 166, 118, 0.5), transparent);
    z-index: 1;
    transform: translateX(50%);
}

@media (min-width: 768px) {
    .coffee-step-connector {
        display: block;
    }
}

.coffee-step-connector-dot {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #CFA676;
}

.coffee-journey-tonal-divider {
    display: none !important;
}

.coffee-cta-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 7rem;
}

.coffee-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 3rem;
    background: #CFA676;
    border-radius: 9999px;
    color: #1a1410;
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.coffee-cta-button:hover {
    transform: scale(1.05);
    background: #e1b485;
    box-shadow: 0 20px 50px rgba(207, 166, 118, 0.4);
}

.coffee-cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.coffee-cta-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.coffee-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: 6rem;
    background: transparent !important;
}

.coffee-hero-title {
    color: #F4E4BE !important;
    background: var(--coffee-gradient-premium);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.coffee-hero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.coffee-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--coffee-brand-gold);
    border-radius: 50%;
    filter: blur(1px);
    animation: coffee-twinkle 4s ease-in-out infinite;
}

.coffee-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #0a0705, #1a1410, #1a1410);
    z-index: 1;
}

.coffee-hero-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(120px);
    z-index: 1;
}

.coffee-hero-glow-right {
    top: 25%;
    right: 25%;
    background: rgba(207, 166, 118, 0.2);
    animation: coffee-hero-glow-right-pulse 8s ease-in-out infinite;
}

.coffee-hero-glow-left {
    bottom: 25%;
    left: 25%;
    width: 500px;
    height: 500px;
    filter: blur(100px);
    background: rgba(91, 76, 65, 0.15);
    animation: coffee-hero-glow-left-pulse 10s ease-in-out infinite;
}

@keyframes coffee-hero-glow-right-pulse {

    0%,
    100% {
        opacity: 0.10;
        transform: scale(1);
    }

    50% {
        opacity: 0.20;
        transform: scale(1.2);
    }
}

@keyframes coffee-hero-glow-left-pulse {

    0%,
    100% {
        opacity: 0.05;
        transform: scale(1);
    }

    50% {
        opacity: 0.15;
        transform: scale(1.3);
    }
}

.coffee-hero-content {
    position: relative;
    z-index: 1;
    padding: 0 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.coffee-hero-grid {
    display: grid;
    gap: 4rem;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .coffee-hero-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.coffee-hero-editorial {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

@media (min-width: 1024px) {
    .coffee-hero-editorial {
        align-items: flex-start;
        text-align: right;
        order: 2;
    }
}

.coffee-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 9999px;
    border: 1px solid rgba(207, 166, 118, 0.3);
    background: rgba(26, 20, 16, 0.4);
    backdrop-filter: blur(8px);
    margin-bottom: 2rem;
}

.coffee-badge-icon {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    animation: coffee-spin 4s linear infinite;
}

.coffee-badge-icon img {
    width: 100%;
    height: auto;
}

.coffee-badge-text {
    font-size: 0.875rem;
    color: #F4E4BE;
}

.coffee-hero-title {
    margin-bottom: 1.5rem;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    background: linear-gradient(135deg, #f4e4be 0%, #cfa676 50%, #b8813f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (min-width: 768px) {
    .coffee-hero-title {
        font-size: 3.5rem;
    }
}

@media (min-width: 1024px) {
    .coffee-hero-title {
        font-size: 5.8rem;
    }
}

.coffee-hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin-bottom: 2.5rem;
}

@media (min-width: 640px) {
    .coffee-hero-buttons {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
}

.coffee-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.25rem 2.5rem;
    border-radius: 9999px;
    font-size: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.coffee-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.coffee-btn-primary {
    background: #211B17;
    border: 1px solid rgba(207, 166, 118, 0.3);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    color: #F4E4BE;
}

.coffee-btn-primary:hover {
    background: #2a1f1b;
}

.coffee-btn-secondary {
    background: rgba(26, 20, 16, 0.4);
    border: 1px solid rgba(207, 166, 118, 0.3);
    color: #F4E4BE;
    backdrop-filter: blur(8px);
}

.coffee-btn-secondary:hover {
    border-color: rgba(207, 166, 118, 0.8);
}

.coffee-hero-description {
    color: #F4E4BE;
    opacity: 0.9;
    font-size: 1.25rem;
    line-height: 1.625;
    max-width: 36rem;
    margin: 0 auto 2.5rem;
}

@media (min-width: 1024px) {
    .coffee-hero-description {
        margin-right: 0;
        margin-left: auto;
    }
}

.coffee-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(207, 166, 118, 0.2);
    align-items: start;
}

.coffee-stat {
    text-align: center;
    overflow: visible;
}

@media (min-width: 1024px) {
    .coffee-stat {
        text-align: right;
    }
}

.coffee-stat-value {
    font-size: 1.875rem;
    font-weight: 700;
    color: #CFA676;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.coffee-stat-label {
    display: block;
    font-size: 0.875rem;
    color: rgba(244, 228, 190, 0.7);
    line-height: 1.4;
    min-height: 1.25rem;
}

.coffee-hero-showcase {
    position: relative;
    overflow: visible;
}

@media (min-width: 1024px) {
    .coffee-hero-showcase {
        order: 1;
    }
}

.coffee-showcase-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.coffee-float {
    animation: coffee-float 6s ease-in-out infinite;
}

.coffee-showcase-inner {
    position: relative;
    max-width: 42rem;
    margin: 0 auto;
    overflow: visible;
}

.coffee-hero-image {
    width: 100%;
    position: relative;
    z-index: 1;
}

.coffee-showcase-shadow {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.coffee-showcase-shadow-top {
    background: linear-gradient(to top, rgba(91, 76, 65, 0.6), rgba(62, 39, 35, 0.4), transparent) !important;
    filter: blur(100px);
    transform: scale(1.15);
}

.coffee-showcase-shadow-bottom {
    background: linear-gradient(to bottom right, rgba(91, 76, 65, 0.5), rgba(78, 52, 46, 0.3)) !important;
    filter: blur(120px);
    transform: scale(1.2);
}

.coffee-dashed-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    height: 110%;
    border-radius: 50%;
    border: 2px dashed rgba(207, 166, 118, 0.1);
    z-index: 1;
    pointer-events: none;
    animation: coffee-dashed-ring-spin 20s linear infinite;
}

@keyframes coffee-dashed-ring-spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Button icon bounce (approx motion bounce on hover) */
@keyframes coffee-icon-bounce {

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

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

.coffee-btn-primary:hover svg {
    animation: coffee-icon-bounce 0.8s ease-in-out infinite;
}

.coffee-showcase-particle {
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    background: rgba(207, 166, 118, 0.8);
    border-radius: 50%;
    animation: coffee-twinkle 4s ease-in-out infinite;
}

.coffee-scroll-indicator {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    z-index: 1;
    animation: coffee-bounce-soft 2s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.coffee-scroll-indicator svg {
    width: 2rem;
    height: 2rem;
    color: #CFA676;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.coffee-scroll-indicator:hover svg {
    opacity: 1;
}

.coffee-badge-icon-spin {
    display: inline-block;
    animation: coffee-spin-slow 4s linear infinite;
}

@keyframes coffee-bounce {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

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

/* --- Features Widget --- */
.coffee-features-section {
    position: relative;
    padding: 6rem 0;
    overflow: hidden;
}

.coffee-features-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(212, 175, 55, 0.10), rgba(91, 76, 65, 0.05), rgba(92, 64, 51, 0.10));
    pointer-events: none;
    transform-origin: center;
    animation: coffee-features-bg-float 25s ease-in-out infinite;
}

@keyframes coffee-features-bg-float {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 0.10;
    }

    50% {
        transform: scale(1.3) rotate(180deg);
        opacity: 0.20;
    }

    100% {
        transform: scale(1) rotate(360deg);
        opacity: 0.10;
    }
}

.coffee-features-title-section {
    text-align: center;
    margin-bottom: 4rem;
}

.coffee-features-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    border: 1px solid rgba(207, 166, 118, 0.3);
    background: rgba(31, 27, 24, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: var(--coffee-brand-gold);
    font-size: 0.875rem;
    margin: 0 auto 1.5rem;
}

.coffee-features-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    color: var(--coffee-brand-light);
    line-height: 1.2;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #f4e4be 0%, #cfa676 50%, #b8813f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.coffee-features-description {
    color: rgba(244, 228, 190, 0.7);
    font-size: 1.125rem;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto;
}

.coffee-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .coffee-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .coffee-features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.coffee-feature-card {
    position: relative;
    padding: 2rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(207, 166, 118, 0.2);
    background: rgba(31, 27, 24, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.coffee-feature-card:hover {
    border-color: rgba(207, 166, 118, 0.5);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.coffee-feature-card-hover-aura {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(207, 166, 118, 0.15), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.coffee-feature-card:hover .coffee-feature-card-hover-aura {
    opacity: 1;
}

.coffee-feature-ordinal {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(207, 166, 118, 0.2);
    color: var(--coffee-brand-gold);
    font-size: 0.75rem;
    font-weight: 700;
}

.coffee-feature-icon-box {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: rgba(207, 166, 118, 0.15);
    color: var(--coffee-brand-light);
    font-size: 2rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.coffee-feature-card:hover .coffee-feature-icon-box {
    background: var(--coffee-brand-gold);
    color: #1a1410;
}

.coffee-feature-icon-box svg {
    width: 2rem;
    height: 2rem;
}

.coffee-feature-title {
    color: var(--coffee-brand-light);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.coffee-feature-desc {
    color: rgba(244, 228, 190, 0.7);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.coffee-feature-momentum-bar {
    width: 100%;
    height: 4px;
    background: rgba(207, 166, 118, 0.2);
    border-radius: 2px;
    overflow: hidden;
    margin-top: auto;
}

.coffee-feature-momentum-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--coffee-brand-gold), var(--coffee-brand-light));
    border-radius: 2px;
    transition: width 0.8s ease;
}

.coffee-feature-watermark {
    position: absolute;
    bottom: -2rem;
    right: -2rem;
    width: 8rem;
    height: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.06;
    pointer-events: none;
}

.coffee-feature-watermark-icon svg {
    width: 100%;
    height: auto;
    color: var(--coffee-brand-light);
}

/* Features RTL Support */
[dir="rtl"] .coffee-feature-watermark {
    left: -2rem;
    right: auto;
}

/* Features Accessibility */
.coffee-feature-card:focus-within {
    outline: 2px solid var(--coffee-brand-gold);
    outline-offset: 2px;
}

/* --- Screenshots Widget --- */
.coffee-screenshots-section {
    position: relative;
    padding: 6rem 0;
    overflow: hidden;
}

/* --- Screenshots v2 (1:1 with AppScreenshots.tsx) --- */
.coffee-screenshots-v2 {
    position: relative;
    padding: 6rem 0;
    overflow: hidden;
}

.coffee-screenshots-v2-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(207, 166, 118, 0.10), rgba(92, 64, 51, 0.10));
    opacity: 0.08;
    animation: coffee-screenshots-v2-bg 10s ease-in-out infinite;
    pointer-events: none;
}

@keyframes coffee-screenshots-v2-bg {

    0%,
    100% {
        opacity: 0.05;
    }

    50% {
        opacity: 0.10;
    }
}

.coffee-screenshots-v2-title {
    text-align: center;
    margin-bottom: 5rem;
    position: relative;
    z-index: 1;
}

.coffee-screenshots-v2-badge {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    border: 1px solid rgba(207, 166, 118, 0.30);
    margin-bottom: 1.5rem;
}

.coffee-screenshots-v2-badge {
    color: #CFA676;
}

.coffee-screenshots-v2-h2 {
    margin-bottom: 1.5rem;
}

.coffee-screenshots-v2-desc {
    color: rgba(244, 228, 190, 0.80);
    max-width: 42rem;
    margin: 0 auto;
    font-size: 1.125rem;
    line-height: 1.7;
}

.coffee-screenshots-v2-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 72rem;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .coffee-screenshots-v2-grid {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        padding: 0 1rem;
    }
}

@media (min-width: 768px) {
    .coffee-screenshots-v2-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .coffee-screenshots-v2-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.coffee-screenshots-v2-card {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.coffee-screenshots-v2-card:hover {
    transform: translateY(-5px) scale(1.02);
}

.coffee-screenshots-v2-card-inner {
    width: 100%;
    border-radius: 1.875rem;
    overflow: hidden;
    border: 1px solid rgba(207, 166, 118, 0.20);
    transition: border-color 0.3s ease;
}

.coffee-screenshots-v2-card:hover .coffee-screenshots-v2-card-inner {
    border-color: rgba(207, 166, 118, 0.50);
}

.coffee-screenshots-v2-phone {
    background: #211B17;
    padding: 2rem;
}

.coffee-screenshots-v2-screen {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 10;
    border-radius: 1.875rem;
    overflow: hidden;
    background: linear-gradient(135deg, #211B17, #3a2f2a);
    display: flex;
    align-items: center;
    justify-content: center;
}

.coffee-screenshots-v2-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.5s ease;
}

.coffee-screenshots-v2-card:hover .coffee-screenshots-v2-img {
    transform: scale(1.06);
}

.coffee-screenshots-v2-icon {
    position: relative;
    z-index: 1;
    color: #CFA676;
}

.coffee-screenshots-v2-icon svg {
    width: 6rem;
    height: 6rem;
    fill: currentColor;
}

.coffee-screenshots-v2-icon svg path {
    fill: currentColor !important;
    stroke: none !important;
}

.coffee-screenshots-v2-topfade,
.coffee-screenshots-v2-bottomfade {
    position: absolute;
    left: 0;
    right: 0;
    height: 4rem;
    pointer-events: none;
    z-index: 1;
}

.coffee-screenshots-v2-topfade {
    top: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.20), transparent);
}

.coffee-screenshots-v2-bottomfade {
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.20), transparent);
}

.coffee-screenshots-v2-status {
    position: absolute;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(207, 166, 118, 0.40);
    font-size: 0.75rem;
    z-index: 1;
}

.coffee-screenshots-v2-dots {
    display: inline-flex;
    gap: 0.25rem;
}

.coffee-screenshots-v2-dots span {
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    border: 1px solid currentColor;
}

.coffee-screenshots-v2-homebar {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 6rem;
    height: 0.25rem;
    border-radius: 9999px;
    background: rgba(207, 166, 118, 0.30);
    z-index: 1;
}

.coffee-screenshots-v2-glow {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.10);
    filter: blur(48px);
    opacity: 0.2;
    z-index: 1;
    pointer-events: none;
    animation: coffee-screenshots-v2-glow 4s ease-in-out infinite;
}

@keyframes coffee-screenshots-v2-glow {

    0%,
    100% {
        opacity: 0.2;
        transform: scale(0.9);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

.coffee-screenshots-v2-caption {
    padding: 1.5rem;
    text-align: center;
}

.coffee-screenshots-v2-h4 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 500;
    color: #F4E4BE;
    transition: color 0.3s ease;
}

.coffee-screenshots-v2-card:hover .coffee-screenshots-v2-h4 {
    color: #CFA676;
}

.coffee-screenshots-v2-banner {
    text-align: center;
    margin-top: 4rem;
    position: relative;
    z-index: 1;
}

.coffee-screenshots-v2-banner-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border-radius: 1rem;
    border: 1px solid rgba(207, 166, 118, 0.30);
}

.coffee-screenshots-v2-banner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: #CFA676;
}

.coffee-screenshots-v2-banner-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
}

.coffee-screenshots-v2-banner-icon svg path {
    fill: currentColor !important;
}

.coffee-screenshots-v2-banner-text {
    text-align: right;
}

.coffee-screenshots-v2-banner-primary {
    color: #CFA676;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.coffee-screenshots-v2-banner-secondary {
    color: rgba(244, 228, 190, 0.60);
    font-size: 0.875rem;
}

.coffee-screenshots-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(207, 166, 118, 0.10), rgba(92, 64, 51, 0.10));
    opacity: 0.08;
    animation: coffee-screenshots-bg-breathe 10s ease-in-out infinite;
    pointer-events: none;
}

@keyframes coffee-screenshots-bg-breathe {

    0%,
    100% {
        opacity: 0.05;
    }

    50% {
        opacity: 0.10;
    }
}

.coffee-screenshots-title-section {
    max-width: 800px;
    margin: 0 auto 4rem;
    text-align: center;
}

.coffee-screenshots-description {
    color: rgba(244, 228, 190, 0.8);
    max-width: 42rem;
    margin: 1.5rem auto 0;
    line-height: 1.7;
}

.coffee-screenshots-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    border: 1px solid rgba(207, 166, 118, 0.2);
    background: rgba(31, 27, 24, 0.6);
    backdrop-filter: blur(20px);
    color: var(--coffee-brand-gold);
    font-size: 0.875rem;
    margin: 0 auto 1.5rem;
}

.coffee-screenshots-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--coffee-brand-light);
    background: linear-gradient(135deg, #f4e4be 0%, #cfa676 50%, #b8813f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0;
}

/* Carousel / Grid Layout */
.coffee-screenshots-carousel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 72rem;
    margin: 0 auto;
    padding: 0;
}

@media (max-width: 767px) {
    .coffee-screenshots-carousel {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        padding: 0 1rem;
    }
}

@media (min-width: 768px) {
    .coffee-screenshots-carousel {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

@media (min-width: 1024px) {
    .coffee-screenshots-carousel {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Phone Frame (Chassis) */
.coffee-phone-frame {
    position: relative;
    border-radius: 1.875rem;
    /* rounded-3xl */
    padding: 0;
    border: 1px solid rgba(207, 166, 118, 0.2);
    background: rgba(92, 64, 51, 0.10);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.coffee-phone-frame:hover {
    border-color: rgba(207, 166, 118, 0.5);
    transform: translateY(-5px) scale(1.02);
}

/* Featured screen gets extra glow */
.coffee-featured-screen.coffee-phone-frame {
    border-color: rgba(207, 166, 118, 0.2);
}

.coffee-featured-screen.coffee-phone-frame:hover {
    box-shadow: none;
}

/* Ensure screenshot fallback SVG icons render gold (not black) */
.coffee-screenshot-icon svg {
    color: currentColor;
    fill: currentColor;
}

.coffee-screenshot-icon svg path {
    fill: currentColor !important;
    stroke: none !important;
}

/* Phone Screen (Viewport) */
.coffee-phone-screen {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    max-height: 500px;
    overflow: hidden;
    background: #211B17;
    padding: 2rem;
    /* p-8 */
    display: flex;
    flex-direction: column;
}

/* Phone Status Bar */
.coffee-phone-status-bar {
    position: absolute;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    color: rgba(207, 166, 118, 0.4);
    z-index: 1;
}

.coffee-phone-status-icons {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.coffee-phone-status-icons .material-symbols-outlined {
    font-size: 14px;
}

/* Phone Interface (Inner Content) */
.coffee-phone-interface {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    border-radius: 1.875rem;
    /* rounded-3xl */
    overflow: hidden;
    background: linear-gradient(135deg, #211B17, #3a2f2a);
}

.coffee-screenshot-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.5s ease;
}

.coffee-phone-frame.group:hover .coffee-screenshot-image {
    transform: scale(1.06);
}

.coffee-screenshot-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26, 20, 16, 0.35), rgba(26, 20, 16, 0.10), transparent);
    pointer-events: none;
}

.coffee-screenshot-icon-wrapper {
    position: relative;
    z-index: 1;
    transition: transform 0.5s ease;
}

.coffee-phone-frame.group:hover .coffee-screenshot-icon-wrapper {
    transform: scale(1.1);
}

.coffee-screenshot-icon {
    color: #CFA676;
    font-size: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.coffee-screenshot-icon svg,
.coffee-screenshot-icon .material-symbols-outlined {
    width: 4rem;
    height: 4rem;
}

@media (min-width: 768px) {
    .coffee-screenshot-icon {
        font-size: 6rem;
    }

    .coffee-screenshot-icon svg,
    .coffee-screenshot-icon .material-symbols-outlined {
        width: 5rem;
        height: 5rem;
    }
}

/* Glow Effects */
.coffee-screen-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
}

.coffee-screen-gold-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(207, 166, 118, 0.15) 0%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
}

/* Home Indicator (bottom bar) */
.coffee-phone-home-indicator {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 6rem;
    height: 0.25rem;
    border-radius: 9999px;
    background: rgba(207, 166, 118, 0.30);
    z-index: 1;
}

/* Screenshot Caption */
.coffee-screenshot-caption {
    padding: 1.5rem;
    /* p-6 */
    text-align: center;
    background: transparent;
    border-top: 0;
    transition: all 0.3s ease;
}

.coffee-screenshot-caption--featured {
    background: rgba(207, 166, 118, 0.05);
    border-color: rgba(207, 166, 118, 0.2);
}

.coffee-screenshot-title {
    color: var(--coffee-brand-light);
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.coffee-phone-frame:hover .coffee-screenshot-title {
    color: #CFA676;
}

/* Availability Banner */
.coffee-screenshot-banner-wrapper {
    max-width: 600px;
    margin: 4rem auto 0;
    padding: 0 1.5rem;
}

.coffee-screenshot-banner {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    /* px-8 py-4 */
    border-radius: 1rem;
    /* rounded-2xl */
    border: 1px solid rgba(207, 166, 118, 0.3);
    text-align: right;
    transition: all 0.3s ease;
    justify-content: center;
    width: auto;
    margin: 0 auto;
}

.coffee-screenshot-banner:hover {
    border-color: rgba(207, 166, 118, 0.5);
    transform: translateY(-4px);
}

.coffee-screenshot-banner-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0;
    background: transparent;
    color: #CFA676;
    flex-shrink: 0;
}

.coffee-screenshot-banner-icon svg,
.coffee-screenshot-banner-icon .material-symbols-outlined {
    width: 1.5rem;
    height: 1.5rem;
}

.coffee-screenshot-banner-text {
    flex: 1;
}

.coffee-screenshot-banner-primary {
    color: #CFA676;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.coffee-screenshot-banner-secondary {
    color: rgba(244, 228, 190, 0.6);
    font-size: 0.875rem;
}

/* --- Why Choose Us Widget --- */
.coffee-orbit-section {
    position: relative;
    width: 100%;
    padding: 6rem 1rem;
    overflow: hidden;
    background-color: #0a0705 !important;
}

.coffee-orbit-title {
    color: #F4E4BE !important;
    background: var(--coffee-gradient-premium);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.coffee-orbit-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.4;
}

.coffee-particle {
    position: absolute;
    background: var(--coffee-brand-gold);
    border-radius: 50%;
}

.coffee-particle-1 {
    top: 25%;
    left: 25%;
    width: 4px;
    height: 4px;
    filter: blur(1px);
}

.coffee-particle-2 {
    bottom: 25%;
    right: 25%;
    width: 8px;
    height: 8px;
    filter: blur(2px);
}

.coffee-orbit-title-section {
    text-align: center;
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.coffee-orbit-badge {
    display: inline-block;
    padding: 0.375rem 1rem;
    border: 1px solid rgba(207, 166, 118, 0.3);
    border-radius: 0.25rem;
    font-size: 0.875rem;
    color: var(--coffee-brand-gold);
}

.coffee-orbit-title {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
}

@media (min-width: 768px) {
    .coffee-orbit-title {
        font-size: 3.75rem;
    }
}

.coffee-orbit-desc {
    color: #9ca3af;
    max-width: 42rem;
    margin: 0 auto;
    font-size: 1.125rem;
}

.coffee-orbit-rings {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.coffee-orbit-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(207, 166, 118, 0.1);
}

.coffee-orbit-ring-outer {
    width: 70%;
    height: 70%;
    border-color: rgba(207, 166, 118, 0.05);
}

.coffee-orbit-ring-inner {
    width: 50%;
    height: 50%;
    border-color: rgba(207, 166, 118, 0.1);
}

.coffee-reason-center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
}

.coffee-nucleus-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(207, 166, 118, 0.2) 0%, transparent 70%);
    border-radius: 50%;
}

.coffee-reason-center-inner {
    position: relative;
    width: 100%;
    height: 100%;
    background: #1a1410;
    border-radius: 50%;
    overflow: hidden;
    padding: 0.5rem;
}

.coffee-reason-center-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: #CFA676;
}

.coffee-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.coffee-icon-wrapper svg {
    width: 3rem;
    height: 3rem;
}

.coffee-reason-card {
    position: relative;
}

.coffee-satellite-visual {
    position: relative;
}

.coffee-reason-icon {
    color: var(--coffee-brand-gold);
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.coffee-reason-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.coffee-satellite-info-tip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1rem;
    background: rgba(31, 27, 24, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(207, 166, 118, 0.2);
    border-radius: 0.5rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.coffee-reason-card:hover .coffee-satellite-info-tip {
    opacity: 1;
    visibility: visible;
}

.coffee-reason-title {
    color: var(--coffee-brand-gold);
    font-weight: 700;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.coffee-reason-desc {
    color: #d1d5db;
    font-size: 0.75rem;
    line-height: 1.5;
    margin: 0;
}

.coffee-tooltip-arrow {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: rgba(26, 20, 16, 0.8);
}

/* --- Reveal Animations --- */
/* Reveal Animations Consolidate to bottom */



/* --- Partners Widget --- */
.coffee-partners-wrapper {
    position: relative;
    padding: 6rem 0;
    overflow: hidden;
}

.coffee-partners-glow-right,
.coffee-partners-glow-left {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
}

.coffee-partners-glow-right {
    top: 10%;
    right: -10%;
    background: rgba(207, 166, 118, 0.12);
}

.coffee-partners-glow-left {
    bottom: 0;
    left: -12%;
    background: rgba(91, 76, 65, 0.10);
}

.coffee-partners-header {
    text-align: center;
    margin-bottom: 4rem;
}

.coffee-brand-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    border: 1px solid rgba(207, 166, 118, 0.3);
    color: #CFA676;
    margin-bottom: 1.25rem;
}

.coffee-partners-desc {
    color: rgba(244, 228, 190, 0.8);
    max-width: 42rem;
    margin: 0.75rem auto 0;
}

.coffee-partner-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 4rem;
}

@media (max-width: 767px) {
    .coffee-partner-grid {
        gap: 1rem;
        margin-bottom: 2rem;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .coffee-partner-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .coffee-partner-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

.coffee-partner-showcase-box {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.2);
    transition: transform 0.4s ease, border-color 0.3s ease;
    aspect-ratio: 1 / 1;
    min-height: 170px;
}

@media (max-width: 767px) {
    .coffee-partner-showcase-box {
        min-height: 140px;
    }
}

.coffee-partner-showcase-box:hover {
    transform: translateY(-5px) scale(1.05);
    border-color: rgba(212, 175, 55, 0.6);
}

.coffee-partner-thumbnail,
.coffee-partner-placeholder {
    width: 100%;
    height: 100%;
}

.coffee-partner-thumbnail {
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.coffee-partner-showcase-box:hover .coffee-partner-thumbnail {
    transform: scale(1.08);
}

.coffee-partner-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(33, 27, 23, 0.95), rgba(58, 47, 42, 0.95));
    color: rgba(244, 228, 190, 0.35);
    font-size: 2.5rem;
}

.coffee-partner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26, 20, 16, 0.95), rgba(26, 20, 16, 0.45), transparent);
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.coffee-partner-showcase-box:hover .coffee-partner-overlay {
    opacity: 0.8;
}

.coffee-partner-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.75rem;
    padding: 0 0.65rem;
    text-align: center;
    color: #F4E4BE;
    font-size: 0.85rem;
}

.coffee-partner-rank-badge {
    position: absolute;
    top: 0.65rem;
    inset-inline-start: 0.65rem;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background: #CFA676;
    color: #1a1410;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.coffee-partner-star-icon {
    font-size: 0.9rem;
    line-height: 1;
}

.coffee-launch-registration-panel {
    position: relative;
    border-radius: 3rem;
    padding: 3rem;
    text-align: center;
    border: 1px solid rgba(212, 175, 55, 0.3);
    overflow: hidden;
}

@media (min-width: 768px) {
    .coffee-launch-registration-panel {
        padding: 4rem;
    }
}

.coffee-launch-panel-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(212, 175, 55, 0.2), rgba(92, 64, 51, 0.2));
    filter: blur(60px);
    pointer-events: none;
}

.coffee-launch-icon-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.coffee-launch-icon {
    width: 5rem;
    height: 5rem;
    border-radius: 1.5rem;
    background: #CFA676;
    color: #1a1410;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
    animation: coffee-launch-float 3s ease-in-out infinite;
}

@keyframes coffee-launch-float {

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

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

.coffee-launch-registration-panel .coffee-cta-button {
    padding: 1.25rem 2.5rem;
}

/* Why We Are Different - exact card-grid section (frontend-like) */
.coffee-why-grid-section {
    position: relative;
    padding: 6rem 0;
    overflow: hidden;
}

@media (max-width: 767px) {
    .coffee-why-grid-section {
        padding: 3rem 0;
    }
}


.coffee-why-grid-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(212, 175, 55, 0.10), rgba(91, 76, 65, 0.05), rgba(92, 64, 51, 0.10));
    animation: coffee-features-bg-float 25s ease-in-out infinite;
    pointer-events: none;
}

.coffee-why-grid-title-section {
    text-align: center;
    margin-bottom: 5rem;
}

.coffee-why-grid-badge {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    border: 1px solid rgba(207, 166, 118, 0.3);
    background: rgba(92, 64, 51, 0.1);
    color: #CFA676;
    margin-bottom: 1.5rem;
}

.coffee-why-grid-title {
    background: linear-gradient(135deg, #f4e4be 0%, #cfa676 50%, #b8813f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.coffee-why-grid-desc {
    color: rgba(244, 228, 190, 0.8);
    max-width: 42rem;
    margin: 0 auto;
}

.coffee-why-grid-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 72rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .coffee-why-grid-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .coffee-why-grid-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .coffee-why-grid-card-wrap-last {
        grid-column: span 2;
        max-width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
}

.coffee-why-grid-card {
    position: relative;
    border-radius: 1.5rem;
    border: 1px solid rgba(212, 175, 55, 0.2);
    background: rgba(92, 64, 51, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
    padding: 2.5rem;
}

@media (max-width: 767px) {
    .coffee-why-grid-card {
        padding: 1.5rem;
    }
}

.coffee-why-grid-card:hover {
    transform: translateY(-5px) scale(1.03);
    border-color: rgba(212, 175, 55, 0.5);
}

.coffee-why-grid-card:hover .coffee-why-grid-card-title {
    color: #CFA676;
}

.coffee-why-grid-number {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    background: rgba(207, 166, 118, 0.2);
    border: 1px solid rgba(207, 166, 118, 0.3);
    color: #CFA676;
    display: flex;
    align-items: center;
    justify-content: center;
}

.coffee-why-grid-icon {
    width: 5rem;
    height: 5rem;
    border-radius: 1rem;
    background: #CFA676;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: transform 0.7s ease;
}

.coffee-why-grid-icon i,
.coffee-feature-icon-box i {
    font-size: 2.5rem;
    line-height: 1;
    color: currentColor;
    display: inline-block;
}

.coffee-why-grid-icon svg {
    width: 2.5rem;
    height: 2.5rem;
    color: currentColor;
    fill: currentColor;
}

.coffee-why-grid-pattern-icon i,
.coffee-feature-watermark i {
    font-size: 8rem;
    line-height: 1;
    display: block;
}

/* Elementor FontAwesome SVG output */
.coffee-why-grid-icon .e-font-icon-svg,
.coffee-why-grid-icon .e-font-icon-svg path {
    fill: currentColor !important;
    stroke: none !important;
}

/* Hover parity with frontend: icon rotates + scales */
.coffee-why-grid-card:hover .coffee-why-grid-icon {
    transform: rotate(360deg) scale(1.15);
}

.coffee-why-grid-card:hover .coffee-why-grid-icon i,
.coffee-why-grid-card:hover .coffee-why-grid-icon svg {
    color: #ffffff !important;
}

.coffee-why-grid-card-title {
    color: #F4E4BE;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

.coffee-why-grid-card-desc {
    color: rgba(244, 228, 190, 0.7);
    line-height: 1.8;
}

.coffee-why-grid-line {
    width: 70%;
    height: 4px;
    border-radius: 9999px;
    margin-top: 1.25rem;
    background: #CFA676;
}

.coffee-why-grid-glow {
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    background: #CFA676;
    opacity: 0;
    filter: blur(24px);
    z-index: -1;
    transition: opacity 0.3s ease;
}

.coffee-why-grid-card:hover .coffee-why-grid-glow {
    opacity: 0.2;
}

.coffee-why-grid-pattern-icon {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 8rem;
    height: 8rem;
    opacity: 0.05;
    color: #CFA676;
    pointer-events: none;
}

[dir="rtl"] .coffee-why-grid-pattern-icon {
    right: auto;
    left: 0;
}

.coffee-why-grid-pattern-icon svg {
    width: 100%;
    height: 100%;
}

.coffee-launch-desc {
    color: rgba(244, 228, 190, 0.85);
    margin: 1rem auto 1.5rem;
}

.coffee-benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .coffee-benefits-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.coffee-launch-benefit-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.coffee-benefit-icon-box {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(207, 166, 118, 0.3);
    background: rgba(207, 166, 118, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #CFA676;
}

.coffee-benefit-text {
    color: #F4E4BE;
    font-size: 0.9rem;
}

/* Partners section final parity with frontend PartnerShops.tsx */
.coffee-partners-wrapper {
    padding: 6rem 0 !important;
}

.coffee-partners-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(62, 39, 35, 0.1), transparent, rgba(62, 39, 35, 0.1));
    pointer-events: none;
}

.coffee-partners-header {
    margin-bottom: 5rem !important;
    position: relative;
    z-index: 1;
}

.coffee-partners-desc {
    margin: 0 auto 2rem !important;
}

.coffee-partner-grid {
    gap: 1.5rem !important;
    margin-bottom: 4rem !important;
    position: relative;
    z-index: 1;
}

.coffee-partner-showcase-box {
    border-radius: 1rem !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
}

.coffee-partner-showcase-box:hover {
    transform: translateY(-10px) scale(1.05) !important;
    border-color: rgba(212, 175, 55, 0.6) !important;
}

.coffee-partner-showcase-box:hover .coffee-partner-thumbnail {
    transform: scale(1.1) !important;
}

.coffee-launch-registration-panel {
    max-width: 56rem;
    margin: 0 auto;
    border-radius: 3rem !important;
    padding: 3rem !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .coffee-launch-registration-panel {
        padding: 4rem !important;
    }
}

.coffee-launch-panel-glow {
    background: linear-gradient(to bottom right, rgba(212, 175, 55, 0.2), rgba(92, 64, 51, 0.2)) !important;
    filter: blur(60px) !important;
    opacity: 0.5;
    animation: coffee-launch-panel-breathe 8s ease-in-out infinite;
}

@keyframes coffee-launch-panel-breathe {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.35;
    }

    50% {
        transform: scale(1.15);
        opacity: 0.6;
    }
}

.coffee-launch-icon-wrapper {
    margin-bottom: 1.5rem !important;
}

.coffee-launch-icon {
    width: 5rem !important;
    height: 5rem !important;
    border-radius: 1.5rem !important;
    background: #cfa676 !important;
    color: #1a1410 !important;
}

.coffee-launch-icon svg,
.coffee-launch-icon i {
    width: 2.5rem !important;
    height: 2.5rem !important;
    color: #1a1410 !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
}

.coffee-launch-registration-panel .coffee-brand-display-title {
    font-size: 1.875rem !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
}

.coffee-launch-desc {
    font-size: 1.125rem !important;
    margin: 0 auto 2rem !important;
}

.coffee-launch-registration-panel .coffee-cta-button {
    padding: 1.25rem 2.5rem !important;
    border-radius: 9999px !important;
    font-size: 1.125rem !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

.coffee-benefits-grid {
    gap: 1.5rem !important;
    margin-top: 3rem !important;
}

.coffee-launch-benefit-item {
    gap: 0.75rem !important;
}

.coffee-benefit-icon-box {
    width: 2.5rem !important;
    height: 2.5rem !important;
    border-radius: 0.75rem !important;
}

.coffee-benefit-icon-box svg,
.coffee-benefit-icon-box i {
    width: 1.25rem !important;
    height: 1.25rem !important;
    color: #cfa676 !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* Footer v2 matching frontend */
.coffee-footer-v2 {
    position: relative;
    padding: 5rem 0;
    border-top: 1px solid rgba(207, 166, 118, 0.2);
    overflow: hidden;
}

.coffee-footer-v2-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent, #0a0705);
    pointer-events: none;
}

.coffee-footer-v2-container {
    position: relative;
    z-index: 10;
}

.coffee-footer-v2-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
    width: 100%;
}

@media (min-width: 768px) {
    .coffee-footer-v2-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .coffee-footer-v2-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.coffee-footer-v2-brand-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.coffee-footer-v2-logo-box {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: #CFA676;
    color: #1a1410;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.coffee-footer-v2-logo-box svg {
    width: 1.7rem;
    height: 1.7rem;
}

.coffee-footer-v2-logo {
    display: block;
    color: #CFA676;
    font-size: 1.25rem;
}

.coffee-footer-v2-subtitle {
    display: block;
    color: rgba(244, 228, 190, 0.6);
    font-size: 0.75rem;
}

.coffee-footer-v2-desc {
    color: rgba(244, 228, 190, 0.7);
    font-size: 0.875rem;
    line-height: 1.75;
}

.coffee-footer-v2-links h4,
.coffee-footer-v2-contact h4 {
    color: #F4E4BE;
    margin-bottom: 1.5rem;
}

.coffee-footer-v2-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.coffee-footer-v2-links li {
    margin-bottom: 0.75rem;
}

.coffee-footer-v2-links a {
    color: rgba(244, 228, 190, 0.6);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    font-size: 0.875rem;
}

.coffee-footer-v2-links a:hover {
    color: #CFA676;
    transform: translateX(-4px);
}

.coffee-footer-v2-contact-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.coffee-footer-v2-contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(244, 228, 190, 0.7);
    margin-bottom: 10px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.coffee-footer-v2-contact-item:hover {
    color: #CFA676;
}

.coffee-footer-v2-contact-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(207, 166, 118, 0.2);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #CFA676 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.coffee-footer-v2-contact-item:hover .coffee-footer-v2-contact-icon {
    border-color: rgba(207, 166, 118, 0.6);
}

.coffee-footer-v2-contact-icon svg,
.coffee-footer-v2-contact-icon i {
    width: 1.25rem;
    height: 1.25rem;
    stroke: currentColor;
    fill: none;
    color: #CFA676 !important;
}

.coffee-footer-v2-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(207, 166, 118, 0.3), transparent);
    margin-bottom: 3rem;
}

.coffee-footer-v2-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem 0;

}

@media (min-width: 768px) {
    .coffee-footer-v2-bottom {
        flex-direction: row !important;
        gap: 1.5rem;
    }
}

.coffee-footer-v2-copyright {
    color: rgba(244, 228, 190, 0.5);
    font-size: 0.875rem;
    margin: 0;
}

.coffee-footer-v2-social {
    display: flex;
    gap: 1rem;
}

.coffee-footer-v2-social-link {
    width: 3rem;
    /* 48px - Matches w-12 */
    height: 3rem;
    /* 48px - Matches h-12 */
    border-radius: 0.75rem;
    /* rounded-xl */
    border: 1px solid rgba(207, 166, 118, 0.2);
    background: rgba(92, 64, 51, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #CFA676 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none;
}

.coffee-footer-v2-social-link:hover {
    border-color: rgba(207, 166, 118, 0.6);
    background: rgba(207, 166, 118, 0.1);
}

.coffee-footer-v2-social-link svg {
    width: 1.25rem;
    /* 20px - Matches w-5 */
    height: 1.25rem;
    /* 20px - Matches h-5 */
    stroke: currentColor;
    fill: none;
    transition: transform 0.3s ease;
}

.coffee-footer-v2-social-link:hover svg {
    transform: scale(1.1);
    /* Matches group-hover:scale-110 */
}

.coffee-footer-v2-powered {
    width: 6rem;
    /* 96px */
    height: 2.5rem;
    /* 40px */
}

.coffee-footer-v2-powered-link {
    display: block;
    width: 100%;
    height: 100%;
    color: #F4E4BE;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.coffee-footer-v2-powered-link:hover {
    opacity: 1;
    transform: scale(1.05);
}

.coffee-footer-v2-powered-link svg {
    width: 100%;
    height: 100%;
}

/* Download section - frontend parity */
.coffee-download-section {
    position: relative;
    padding: 6rem 0;
    overflow: hidden;
}

.coffee-download-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(207, 166, 118, 0.2), rgba(92, 64, 51, 0.2), rgba(207, 166, 118, 0.2));
    animation: coffee-download-bg-pulse 10s ease-in-out infinite;
}

@keyframes coffee-download-bg-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.2;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.4;
    }
}

.coffee-download-container {
    position: relative;
    z-index: 1;
}

.coffee-download-panel {
    border: 1px solid rgba(207, 166, 118, 0.3);
    border-radius: 3rem;
    overflow: hidden;
}

.coffee-download-grid {
    display: grid;
    gap: 3rem;
    padding: 3rem;
}

@media (min-width: 768px) {
    .coffee-download-grid {
        padding: 4rem;
    }
}

@media (min-width: 1024px) {
    .coffee-download-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.coffee-download-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.coffee-download-title {
    margin-bottom: 1.5rem;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.2;
    background: linear-gradient(135deg, #f4e4be 0%, #cfa676 50%, #b8813f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.coffee-download-description {
    color: rgba(244, 228, 190, 0.8);
    margin-bottom: 2.5rem;
    font-size: 1.125rem;
    line-height: 1.75;
}

.coffee-download-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.coffee-download-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 2rem;
    border-radius: 9999px;
    border: 1px solid rgba(207, 166, 118, 0.3);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    text-decoration: none !important;
}

.coffee-download-btn-apple {
    background: #1a1410;
}

.coffee-download-btn-play {
    background: #211B17;
}

.coffee-download-btn:hover {
    transform: translateX(-5px) scale(1.03);
}

.coffee-download-btn-apple:hover {
    background: #2a2420;
}

.coffee-download-btn-play:hover {
    background: #2a1f1b;
}

.coffee-download-btn-icon {
    width: 2rem;
    height: 2rem;
    color: #CFA676 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.coffee-download-btn-icon svg,
.coffee-download-btn-icon i {
    width: 100% !important;
    height: 100% !important;
}

.coffee-download-btn-icon svg path,
.coffee-download-btn-icon [class*="e-fab"] path {
    fill: #CFA676 !important;
    color: #CFA676 !important;
}

.coffee-download-btn:hover .coffee-download-btn-icon {
    transform: scale(1.1);
}

.coffee-download-btn-text {
    display: flex;
    flex-direction: column;
    text-align: right;
}

.coffee-download-btn-text small {
    color: rgba(244, 228, 190, 0.6);
    font-size: 0.75rem;
}

.coffee-download-btn-text strong {
    color: #F4E4BE;
    font-weight: 500;
}

.coffee-download-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(207, 166, 118, 0.2);
}

.coffee-download-stat {
    text-align: center;
}

.coffee-download-stat-value {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #f4e4be 0%, #cfa676 50%, #b8813f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.coffee-download-stat-label {
    color: rgba(244, 228, 190, 0.6);
    font-size: 0.875rem;
}

.coffee-download-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.coffee-download-phone-wrap {
    position: relative;
}

.coffee-download-phone {
    width: 21rem;
    height: 27.25rem;
    border-radius: 3rem;
    background: linear-gradient(to bottom right, #2a1f1b, #1a1410);
    border: 4px solid rgba(207, 166, 118, 0.2);
    padding: 0.75rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    position: relative;
    z-index: 1;
    animation: coffee-download-phone-float 5s ease-in-out infinite;
    max-width: 100%;
}

@keyframes coffee-download-phone-float {

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

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

.coffee-download-phone-screen {
    width: 100%;
    height: 100%;
    border-radius: 2.5rem;
    overflow: hidden;
    position: relative;
}

.coffee-download-phone-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.coffee-download-phone-glow {
    position: absolute;
    inset: 0;
    border-radius: 3rem;
    background: linear-gradient(to bottom right, rgba(207, 166, 118, 0.4), rgba(184, 129, 63, 0.2));
    filter: blur(48px);
    z-index: 1;
    animation: coffee-download-glow-breath 4s ease-in-out infinite;
}

@keyframes coffee-download-glow-breath {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.95);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}

.coffee-download-qr-card {
    position: absolute;
    top: -2rem;
    left: -2rem;
    padding: 1.5rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(207, 166, 118, 0.3);
    background: rgba(92, 64, 51, 0.1);
    backdrop-filter: blur(20px);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
    transform: rotate(-10deg);
    z-index: 1;
}

.coffee-download-qr-box {
    width: 8rem;
    height: 8rem;
    border-radius: 1rem;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.coffee-download-qr-icon {
    width: 6rem;
    height: 6rem;
    color: #1a1410;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.coffee-download-qr-icon svg {
    width: 100%;
    height: 100%;
}

.coffee-download-qr-label {
    text-align: center;
    color: #CFA676;
    font-size: 0.875rem;
}

.coffee-download-float {
    position: absolute;
    width: 16rem;
    height: 16rem;
    border-radius: 9999px;
    filter: blur(48px);
    pointer-events: none;
    opacity: 0.4;
}

.coffee-download-float-left {
    top: -8rem;
    left: -8rem;
    background: linear-gradient(to bottom right, rgba(207, 166, 118, 0.1), transparent);
    animation: coffee-spin-slow 30s linear infinite;
}

.coffee-download-float-right {
    bottom: -8rem;
    right: -8rem;
    background: linear-gradient(to bottom right, rgba(92, 64, 51, 0.1), transparent);
    animation: coffee-spin-slow 30s linear infinite reverse;
}

/* Remove decorative underline from button-like links globally */
.coffee-header-actions a,
.coffee-btn,
.coffee-cta-button,
.coffee-app-store-btn,
.coffee-download-button,
.coffee-faq-support-button {
    text-decoration: none !important;
}

.elementor-widget [class*="coffee-"] a,
.elementor-widget [class*="coffee-"] a:hover,
.elementor-widget [class*="coffee-"] a:focus {
    text-decoration: none !important;
}

/* --- FAQ Widget --- */
.coffee-faq-section {
    position: relative;
    padding: 6rem 0;
    overflow: hidden;
}

.coffee-faq-bg-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent, rgba(207, 166, 118, 0.05), transparent);
    pointer-events: none;
}

.coffee-faq-content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.coffee-faq-title-section {
    text-align: center;
    margin-bottom: 5rem;
}

.coffee-faq-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    border: 1px solid rgba(207, 166, 118, 0.3);
    background: rgba(31, 27, 24, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #CFA676;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.coffee-faq-title {
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #f4e4be 0%, #cfa676 50%, #b8813f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .coffee-faq-title {
        font-size: 3.5rem;
    }
}

.coffee-faq-description {
    color: rgba(244, 228, 190, 0.8);
    font-size: 1.125rem;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

.coffee-faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.coffee-faq-item {
    border-radius: 1rem;
    border: 1px solid rgba(207, 166, 118, 0.2);
    background: rgba(31, 27, 24, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
    transition: all 0.3s ease;
}

.coffee-faq-item:hover {
    border-color: rgba(207, 166, 118, 0.4);
}

.coffee-faq-item-open {
    border-color: rgba(207, 166, 118, 0.4);
}

.coffee-faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: transparent;
    border: none;
    color: #F4E4BE;
    font-family: "IBM Plex Sans Arabic", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-align: right;
    cursor: pointer;
    transition: all 0.3s ease;
}

@media (min-width: 768px) {
    .coffee-faq-question {
        padding: 2rem;
    }
}

.coffee-faq-question:hover {
    color: #F4E4BE;
}

.coffee-faq-question-text {
    flex: 1;
    line-height: 1.5;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #F4E4BE;
    text-align: start;
}

.coffee-faq-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: #cfa676;
    color: #1a1410;
    border: 1px solid rgba(207, 166, 118, 0.75);
    flex-shrink: 0;
    position: relative;
    transition: transform 0.3s ease;
}

.coffee-faq-item-open .coffee-faq-icon-wrap {
    transform: rotate(180deg);
}

.coffee-faq-icon {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.coffee-faq-icon-minus {
    opacity: 0;
    transform: scale(0.65);
}

.coffee-faq-item-open .coffee-faq-icon-plus {
    opacity: 0;
    transform: scale(0.65);
}

.coffee-faq-item-open .coffee-faq-icon-minus {
    opacity: 1;
    transform: scale(1);
}

.coffee-faq-answer {
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 1.5rem;
    color: rgba(244, 228, 190, 0.8);
    font-size: 0.9375rem;
    line-height: 1.7;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}

.coffee-faq-answer-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, rgba(207, 166, 118, 0.5), transparent);
    margin: 0 0 1.5rem;
}

.coffee-faq-item-open .coffee-faq-answer {
    max-height: 600px;
    opacity: 1;
    padding: 0 1.5rem 1.5rem;
}

@media (min-width: 768px) {
    .coffee-faq-item-open .coffee-faq-answer {
        padding: 0 2rem 2rem;
    }
}

.coffee-faq-support {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 4rem auto 0;
    padding: 1rem 2rem;
    border-radius: 1rem;
    border: 1px solid rgba(207, 166, 118, 0.3);
    background: rgba(92, 64, 51, 0.10);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    text-align: right;
    justify-content: center;
    width: fit-content;
}

.coffee-faq-support-text {
    color: rgba(244, 228, 190, 0.7);
    font-size: 1rem;
}

.coffee-faq-support-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
    background: #CFA676;
    color: #1a1410;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 10px 25px -5px rgba(207, 166, 118, 0.3);
    transition: all 0.3s ease;
}

.coffee-faq-support-button:hover {
    background: rgba(207, 166, 118, 0.9);
    transform: scale(1.05);
}

.coffee-faq-support-button:active {
    transform: scale(0.95);
}

/* --- CTA Section Widget --- */
.coffee-cta-section {
    position: relative;
    padding: 6rem 0;
    overflow: hidden;
}

.coffee-cta-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, #1c1511 0%, #130d0a 100%);
    pointer-events: none;
}

.coffee-cta-container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.coffee-cta-main-panel {
    position: relative;
    padding: 3rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(207, 166, 118, 0.2);
    background: rgba(31, 27, 24, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
}

.coffee-cta-aura {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(207, 166, 118, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.coffee-cta-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.coffee-cta-orb-1 {
    top: -20%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: rgba(207, 166, 118, 0.1);
}

.coffee-cta-orb-2 {
    bottom: -30%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: rgba(207, 166, 118, 0.08);
}

.coffee-cta-content-wrapper {
    position: relative;
    z-index: 1;
}

.coffee-cta-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .coffee-cta-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.coffee-cta-content {
    display: flex;
    flex-direction: column;
    text-align: center;
}

@media (min-width: 1024px) {
    .coffee-cta-content {
        text-align: right;
    }
}

.coffee-cta-title {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #f4e4be 0%, #cfa676 50%, #b8813f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (min-width: 768px) {
    .coffee-cta-title {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .coffee-cta-title {
        font-size: 3.25rem;
    }
}

.coffee-cta-description {
    color: rgba(244, 228, 190, 0.8);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .coffee-cta-description {
        font-size: 1.125rem;
    }
}

.coffee-app-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 640px) {
    .coffee-app-buttons {
        flex-direction: row;
        justify-content: flex-start;
    }
}

@media (min-width: 1024px) {
    .coffee-app-buttons {
        justify-content: flex-start;
    }
}

.coffee-app-store-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(207, 166, 118, 0.3);
    background: rgba(26, 20, 16, 0.4);
    text-decoration: none;
    transition: all 0.3s ease;
}

.coffee-app-store-btn:hover {
    border-color: rgba(207, 166, 118, 0.6);
    transform: translateY(-2px);
}

.coffee-store-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--coffee-brand-gold);
    font-size: 1.25rem;
    transition: transform 0.3s ease;
}

.coffee-app-store-btn:hover .coffee-store-icon {
    transform: scale(1.1);
}

.coffee-store-icon svg {
    width: 100%;
    height: auto;
}

.coffee-app-info {
    text-align: right;
}

.coffee-app-label {
    font-size: 0.625rem;
    color: rgba(244, 228, 190, 0.5);
    margin-bottom: 0.125rem;
}

.coffee-app-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #F4E4BE;
}

.coffee-cta-stats {
    display: flex;
    gap: 2rem;
    justify-content: center;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(207, 166, 118, 0.15);
}

@media (min-width: 1024px) {
    .coffee-cta-stats {
        justify-content: flex-start;
    }
}

.coffee-cta-stat {
    text-align: right;
}

.coffee-cta-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    background: linear-gradient(135deg, #f4e4be 0%, #cfa676 50%, #b8813f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.coffee-cta-stat-label {
    font-size: 0.625rem;
    color: rgba(244, 228, 190, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.coffee-cta-mockup-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 480px;
}

.coffee-cta-mockup-container {
    position: relative;
}

@media (min-width: 768px) {
    .coffee-cta-mockup-container {
        transform: scale(1);
    }
}

.coffee-cta-mockup {
    position: relative;
    animation: coffee-float-soft 6s ease-in-out infinite;
}

.coffee-mockup-frame {
    width: 280px;
    height: 560px;
    border-radius: 2.5rem;
    overflow: hidden;
    background: #000;
    border: 3px solid rgba(207, 166, 118, 0.3);
}

.coffee-mockup-screen {
    position: relative;
    width: 100%;
    height: 100%;
}

.coffee-mockup-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.coffee-mockup-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent 40%, transparent);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.25rem 1.5rem 2rem;
    text-align: right;
}

.coffee-mockup-overlay-label {
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.25rem;
}

.coffee-mockup-overlay-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--coffee-brand-gold);
}

.coffee-mockup-glow {
    position: absolute;
    inset: 0;
    background: rgba(207, 166, 118, 0.15);
    filter: blur(40px);
    transform: scale(1.25);
    z-index: -1;
    border-radius: 50%;
}

.coffee-qr-section {
    position: absolute;
    bottom: -1rem;
    right: -1rem;
}

.coffee-qr-card {
    width: 4rem;
    height: 4rem;
    border-radius: 0.75rem;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1410;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}

.coffee-qr-code {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.875rem;
}

.coffee-qr-code svg {
    width: 100%;
    height: auto;
}

@keyframes coffee-float-soft {

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

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

/* --- Global Reveal Animations (Synchronized & Fallback Protected) --- */
/*
  Reveal system safety:
  - Never hide content unless the JS reveal observer is actually running.
  - If JS fails to boot (or Elementor hook doesn't fire), content must remain visible.
*/
/* Baseline transform for transitions using 0-specificity to never override :hover */
:where(.coffee-reveal, [class*="reveal-"], [class*="-in-"]) {
    transform: translate(0, 0) scale(1);
}

.coffee-reveal,
.reveal-up,
.reveal-up-sm,
.reveal-up-lg,
.reveal-scale,
.reveal-fade,
.reveal-left,
.reveal-right,
.coffee-fade-in-up,
.coffee-zoom-in,
.coffee-slide-in-left,
.coffee-slide-in-right {
    opacity: 1;
}

/* Hide ONLY after JS declares reveal is ready */
.coffee-reveal-ready .coffee-reveal:not(.is-visible),
.coffee-reveal-ready .reveal-up:not(.is-visible),
.coffee-reveal-ready .reveal-up-sm:not(.is-visible),
.coffee-reveal-ready .reveal-up-lg:not(.is-visible),
.coffee-reveal-ready .reveal-scale:not(.is-visible),
.coffee-reveal-ready .reveal-fade:not(.is-visible),
.coffee-reveal-ready .reveal-left:not(.is-visible),
.coffee-reveal-ready .reveal-right:not(.is-visible),
.coffee-reveal-ready .coffee-fade-in-up:not(.is-visible),
.coffee-reveal-ready .coffee-zoom-in:not(.is-visible),
.coffee-reveal-ready .coffee-slide-in-left:not(.is-visible),
.coffee-reveal-ready .coffee-slide-in-right:not(.is-visible) {
    opacity: 0;
}

.coffee-reveal,
.reveal-up,
.reveal-up-sm,
.reveal-up-lg,
.reveal-scale,
.reveal-fade,
.reveal-left,
.reveal-right,
.coffee-fade-in-up,
.coffee-zoom-in,
.coffee-slide-in-left,
.coffee-slide-in-right {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.reveal-up:not(.is-visible),
.coffee-fade-in-up:not(.is-visible) {
    transform: translateY(30px);
}

.reveal-up-sm:not(.is-visible) {
    transform: translateY(20px);
}

.reveal-up-lg:not(.is-visible) {
    transform: translateY(50px);
}

.reveal-scale:not(.is-visible),
.coffee-zoom-in:not(.is-visible) {
    transform: scale(0.8);
}

.coffee-slide-in-left:not(.is-visible),
.reveal-left:not(.is-visible) {
    transform: translateX(0px);
}

.coffee-slide-in-right:not(.is-visible),
.reveal-right:not(.is-visible) {
    transform: translateX(30px);
}

.is-visible {
    opacity: 1 !important;
    /* transform is naturally reverted to normal state, letting :hover states work freely! */
}

/* Staggered Children Support */
.coffee-reveal-children:not(.is-visible)>*,
.coffee-reveal-children>*:not(.is-visible) {
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.coffee-reveal-children.is-visible>*,
.coffee-reveal-children>*.is-visible {
    opacity: 1 !important;
    transform: translate(0) scale(1);
}


/* ============================================
   UNIVERSAL STYLE MOLDS SYSTEM
   Cross-widget styling utilities
   ============================================ */
/* --- Icon Molds (Apply Orbit-style icons to any section) --- */
.mold-icon-orbit {
    position: relative;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(207, 166, 118, 0.15) 0%, rgba(207, 166, 118, 0.05) 100%);
    border: 1px solid rgba(207, 166, 118, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--coffee-brand-gold, #CFA676);
    font-size: 1.75rem;
}

.mold-icon-orbit::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px dashed rgba(207, 166, 118, 0.2);
    animation: orbit-rotate 10s linear infinite;
}

@keyframes orbit-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.mold-icon-feature {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.75rem;
    background: var(--coffee-brand-gold, #CFA676);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1410;
    font-size: 1.5rem;
}

.mold-icon-hero {
    width: 3rem;
    height: 3rem;
    border-radius: 0.625rem;
    background: rgba(207, 166, 118, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--coffee-brand-gold, #CFA676);
    font-size: 1.25rem;
}

.mold-icon-stat {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--coffee-brand-gold, #CFA676);
    font-size: 1.125rem;
}

/* --- Card Molds --- */
.mold-card-glass {
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid rgba(207, 166, 118, 0.2);
    background: rgba(31, 27, 24, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.mold-card-solid {
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid rgba(207, 166, 118, 0.15);
    background: #1a1410;
}

.mold-card-elevated {
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid rgba(207, 166, 118, 0.2);
    background: linear-gradient(180deg, rgba(26, 20, 16, 0.8) 0%, rgba(19, 13, 10, 1) 100%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* --- Badge Molds --- */
.mold-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    border: 1px solid rgba(207, 166, 118, 0.3);
    background: rgba(26, 20, 16, 0.4);
    backdrop-filter: blur(8px);
    color: var(--coffee-brand-gold, #CFA676);
    font-size: 0.875rem;
}

.mold-badge-square {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid rgba(207, 166, 118, 0.2);
    background: rgba(207, 166, 118, 0.1);
    color: var(--coffee-brand-gold, #CFA676);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- Button Molds --- */
.mold-button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    background: var(--coffee-brand-gold, #CFA676);
    color: #1a1410;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mold-button-primary:hover {
    background: #dfb888;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(207, 166, 118, 0.3);
}

.mold-button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    background: rgba(26, 20, 16, 0.6);
    border: 1px solid rgba(207, 166, 118, 0.3);
    color: #F4E4BE;
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mold-button-secondary:hover {
    border-color: rgba(207, 166, 118, 0.6);
    background: rgba(26, 20, 16, 0.8);
}

/* --- Title Molds --- */
.mold-title-display {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.2;
    background: linear-gradient(135deg, #f4e4be 0%, #cfa676 50%, #b8813f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mold-title-section {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 600;
    color: #F4E4BE;
    line-height: 1.3;
}

.mold-title-card {
    font-size: 1.25rem;
    font-weight: 600;
    color: #F4E4BE;
    margin-bottom: 0.5rem;
}

/* --- Text Molds --- */
.mold-text-lead {
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgba(244, 228, 190, 0.8);
}

.mold-text-body {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(244, 228, 190, 0.7);
}

.mold-text-caption {
    font-size: 0.875rem;
    color: rgba(244, 228, 190, 0.5);
}

/* --- Grid Molds --- */
.mold-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.mold-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.mold-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.mold-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .coffee-launch-benefit-item {
        justify-content: start;

    }

    .mold-grid-3,
    .mold-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {

    .mold-grid-2,
    .mold-grid-3,
    .mold-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* --- Layout Molds --- */
.mold-center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mold-center-start {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mold-center-end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

/* --- Spacing Molds --- */
.mold-pad-sm {
    padding: 1rem;
}

.mold-pad-md {
    padding: 2rem;
}

.mold-pad-lg {
    padding: 3rem;
}

.mold-pad-xl {
    padding: 4rem;
}

.mold-gap-sm {
    gap: 0.5rem;
}

.mold-gap-md {
    gap: 1rem;
}

.mold-gap-lg {
    gap: 2rem;
}

.mold-gap-xl {
    gap: 3rem;
}

.mold-margin-auto {
    margin-left: auto;
    margin-right: auto;
}

.mold-margin-none {
    margin: 0;
}

/* --- Responsive Molds --- */
.mold-show-mobile {
    display: block;
}

.mold-show-tablet {
    display: none;
}

.mold-show-desktop {
    display: none;
}

@media (min-width: 768px) {
    .mold-show-mobile {
        display: none;
    }

    .mold-show-tablet {
        display: block;
    }
}

@media (min-width: 1024px) {

    .mold-show-mobile,
    .mold-show-tablet {
        display: none;
    }

    .mold-show-desktop {
        display: block;
    }
}

.mold-hide-mobile {
    display: none;
}

@media (min-width: 768px) {
    .mold-hide-mobile {
        display: block;
    }
}

.mold-hide-desktop {
    display: block;
}

@media (min-width: 1024px) {
    .mold-hide-desktop {
        display: none;
    }
}

/* =====================================================
   Why Choose Us Grid Section (coffee-why-grid-*)
   Matches WhyChooseUs.tsx frontend component
   ===================================================== */
/* Section wrapper — matches <section className="py-24 relative overflow-hidden"> */
.coffee-why-grid-section {
    position: relative;
    padding: 6rem 0;
    overflow: hidden;
}

@media (max-width: 767px) {
    .coffee-why-grid-section {
        padding: 3rem 0;
    }
}

/* Animated rotating background — matches motion.div bg-gradient-to-br */
.coffee-why-grid-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.10) 0%, rgba(91, 76, 65, 0.05) 50%, rgba(92, 64, 51, 0.10) 100%);
    pointer-events: none;
    animation: coffee-why-bg-rotate 25s ease-in-out infinite;
    transform-origin: center;
}

@keyframes coffee-why-bg-rotate {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 0.10;
    }

    50% {
        transform: scale(1.3) rotate(180deg);
        opacity: 0.20;
    }

    100% {
        transform: scale(1) rotate(360deg);
        opacity: 0.10;
    }
}

/* Title section — matches motion.div text-center mb-20 */
.coffee-why-grid-title-section {
    text-align: center;
    margin-bottom: 5rem;
    position: relative;
    z-index: 1;
}

/* Badge — matches inline-block px-5 py-2 rounded-full glass-effect border border-[#CFA676]/30 */
.coffee-why-grid-badge {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    background: rgba(92, 64, 51, 0.10);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(207, 166, 118, 0.30);
    color: var(--coffee-brand-gold, #CFA676);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

/* Title — matches h2 className="text-gradient-gold mb-6" */
.coffee-why-grid-title {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.2;
    background: var(--coffee-gradient-premium, linear-gradient(135deg, #f4e4be 0%, #cfa676 50%, #b8813f 100%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.5rem;
}

/* Description — matches p text-[#F4E4BE]/80 max-w-2xl mx-auto */
.coffee-why-grid-desc {
    color: rgba(244, 228, 190, 0.80);
    max-width: 42rem;
    margin: 0 auto;
    font-size: 1.125rem;
    line-height: 1.7;
}

/* Cards grid — matches grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto */
.coffee-why-grid-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 72rem;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .coffee-why-grid-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .coffee-why-grid-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Last card centering on md — matches md:col-span-2 lg:col-span-1 md:mx-auto lg:mx-0 */
.coffee-why-grid-card-wrap {
    position: relative;
    min-width: 0;
}

.coffee-why-grid-card-wrap-last {
    max-width: none;
    margin: 0;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .coffee-why-grid-card-wrap-last {
        grid-column: 1 / -1;
        max-width: calc(50% - 1rem);
        width: 100%;
        margin: 0 auto;
    }
}

@media (min-width: 1024px) {
    .coffee-why-grid-card-wrap-last {
        grid-column: auto;
        max-width: none;
        width: auto;
    }
}

/* --- Orbit Features Section (Matched to Frontend KeyFeatures.tsx) --- */
.coffee-orbit-section {
    position: relative;
    padding: 8rem 0;
    overflow: hidden;
    background: #1a1410;
    z-index: 1;
}

/* Matches absolute inset-0 bg-gradient-to-b from-[#1a1410] via-[#0a0705] to-[#1a1410] */
.coffee-orbit-bg-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #1a1410 0%, #0a0705 50%, #1a1410 100%);
    pointer-events: none;
}

/* Matches motion.div absolute top-0 left-1/4 w-[800px] h-[800px] bg-gradient-radial from-[#CFA676]/20 */
.coffee-orbit-mesh-glow {
    position: absolute;
    top: 0;
    left: 25%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(207, 166, 118, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    animation: orbit-mesh-breathe 20s ease-in-out infinite;
}

@keyframes orbit-mesh-breathe {

    0%,
    100% {
        opacity: 0.03;
        transform: scale(1);
    }

    50% {
        opacity: 0.08;
        transform: scale(1.1);
    }
}

/* Header — matches text-center mb-20 max-w-4xl mx-auto */
.coffee-orbit-header {
    text-align: center;
    margin-bottom: 5rem;
    max-width: 896px;
    /* max-w-4xl */
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

/* Badge — matches inline-block px-6 py-3 rounded-full glass-effect mb-8 border border-[#CFA676]/20 */
.coffee-orbit-badge {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    border-radius: 9999px;
    background: rgba(43, 34, 27, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(207, 166, 118, 0.2);
    margin-bottom: 2rem;
}

.coffee-orbit-badge span {
    color: rgba(207, 166, 118, 0.9);
    font-size: 0.875rem;
    letter-spacing: 0.05em;
}

/* Title — matches text-gradient-gold text-5xl md:text-6xl lg:text-7xl mb-6 */
.coffee-orbit-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

/* Description — matches text-[#F4E4BE]/60 text-lg leading-relaxed */
.coffee-orbit-desc {
    color: rgba(244, 228, 190, 0.6);
    font-size: 1.125rem;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ──────────────────────────────────────────────────────────────────────
   Orbit Container — matches max-w-5xl mx-auto flex items-center
   justify-center min-h-[800px] relative
   ────────────────────────────────────────────────────────────────────── */
.coffee-orbit-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    min-height: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

/* ──────────────────────────────────────────────────────────────────────
   Center Piece (Coffee Cup) — matches w-72 h-72 rounded-full relative
   ────────────────────────────────────────────────────────────────────── */
.coffee-orbit-center {
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: 1;
    width: 288px;
    /* w-72 */
    height: 288px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.coffee-orbit-core {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Matches bg-gradient-radial from-[#CFA676]/10 via-[#5B4C41]/5 to-transparent blur-2xl */
.coffee-orbit-radial-glow {
    position: absolute;
    inset: -50px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(207, 166, 118, 0.10) 0%, rgba(91, 76, 65, 0.05) 50%, transparent 100%);
    filter: blur(24px);
    pointer-events: none;
}

/* Matches bg-gradient-conic from-[#CFA676]/20 via-[#5B4C41]/10 to-[#CFA676]/20 animate-spin-slow 20s */
.coffee-orbit-conic-spin {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(207, 166, 118, 0.20), rgba(91, 76, 65, 0.10), rgba(207, 166, 118, 0.20));
    animation: orbit-conic-rotation-v2 20s linear infinite;
}

/* Cup image — matches w-64 h-64 object-contain drop-shadow-2xl
   React animates opacity[0.5, 1, 0.5] + rotate[0,360] with different durations */
.coffee-orbit-cup-wrapper {
    position: relative;
    z-index: 1;
    width: 256px;
    /* w-64 */
    height: 256px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
    animation:
        orbit-cup-opacity-v2 3s ease-in-out infinite;
}

.coffee-orbit-cup-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.6));
    transform-origin: center center;
    animation: orbit-cup-spin-v2 20s linear infinite;
}

/* Ripple Rings — matches [...Array(3)].map() scale:[1, 2, 2.5] opacity:[0, 0.3,0] */
.coffee-orbit-ripple {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(207, 166, 118, 0.20);
    opacity: 0;
    pointer-events: none;
}

.orbit-ripple-1 {
    animation: orbit-rippling-v2 4s infinite 0s ease-out;
}

.orbit-ripple-2 {
    animation: orbit-rippling-v2 4s infinite 1.3s ease-out;
}

.orbit-ripple-3 {
    animation: orbit-rippling-v2 4s infinite 2.6s ease-out;
}

/* ──────────────────────────────────────────────────────────────────────
   Orbit Items — positioned via PHP inline styles (like React)
   Matches: group cursor-pointer style={{ position:'absolute', left:`calc(50% + ${x}px)`, top:`calc(50% + ${y}px)`, transform:'translate(-50%,-50%)' }}
   ────────────────────────────────────────────────────────────────────── */
.coffee-orbit-item-wrapper {
    /* position, left, top set by PHP inline style */
    width: 128px;
    /* w-32 */
    height: 128px;
    cursor: pointer;
    z-index: 1;
}

.coffee-orbit-item {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.coffee-orbit-item:hover {
    transform: scale(1.15);
}

/* Icon Box — matches w-32 h-32 rounded-full bg-gradient-to-br from-[#CFA676]/20 to-[#5B4C41]/20
   backdrop-blur-md border border-[#CFA676]/20 flex items-center justify-center relative overflow-hidden
   group-hover:border-[#CFA676]/50 transition-all duration-500 */
.coffee-orbit-icon-box {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(207, 166, 118, 0.20), rgba(91, 76, 65, 0.20));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(207, 166, 118, 0.20);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: border-color 0.5s ease, background 0.5s ease;
}

.coffee-orbit-item:hover .coffee-orbit-icon-box {
    border-color: rgba(207, 166, 118, 0.50);
}

/* Icon glow — matches Tailwind blur-xl (24px) and linear-gradient */
.coffee-orbit-icon-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(207, 166, 118, 0.30), rgba(91, 76, 65, 0.30));
    filter: blur(24px);
    opacity: 0.10;
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}

.coffee-orbit-item:hover .coffee-orbit-icon-glow {
    opacity: 0.40;
    transform: scale(1.5);
}

/* Icon — matches w-12 h-12 text-[#CFA676] relative z-10 strokeWidth={1.5} */
.coffee-orbit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--coffee-brand-gold, #CFA676);
    position: relative;
    z-index: 1;
    transition: transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.coffee-orbit-icon>* {
    display: block;
}

/* FontAwesome <i> tags */
.coffee-orbit-icon i,
.coffee-orbit-icon .coffee-orbit-icon-svg {
    font-size: 3rem;
    line-height: 1;
    color: var(--coffee-brand-gold, #CFA676);
    font-style: normal;
}

/* Elementor SVG icons — Refined for stroke-only aesthetic with stroke-width 1.5 */
/* High specificity to win over master overrides */
.coffee-orbit-section .coffee-orbit-icon svg,
.coffee-orbit-section .coffee-orbit-icon .e-font-icon-svg,
.coffee-orbit-section .coffee-orbit-icon .coffee-orbit-icon-svg {
    width: 48px !important;
    height: 48px !important;
    fill: none !important;
    color: var(--coffee-brand-gold, #CFA676) !important;
}

/* Ensure all vector paths use stroke 1.5 and correct color */
.coffee-orbit-section .coffee-orbit-icon svg path,
.coffee-orbit-section .coffee-orbit-icon svg circle,
.coffee-orbit-section .coffee-orbit-icon svg rect,
.coffee-orbit-section .coffee-orbit-icon svg polygon,
.coffee-orbit-section .coffee-orbit-icon svg line,
.coffee-orbit-section .coffee-orbit-icon svg polyline {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 3.0 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    vector-effect: non-scaling-stroke !important;
    opacity: 1 !important;
}

.coffee-orbit-item:hover .coffee-orbit-icon {
    transform: rotate(360deg);
}

/* Card text wrapper — matches div.text-center in React */
.coffee-orbit-card-text {
    text-align: center;
}

/* Orbital Ring — matches motion.div absolute inset-0 rounded-full border dashed 1px scale(1.3) */
.coffee-orbit-dashed-ring {
    position: absolute;
    inset: 0;
    border: 1px dashed rgba(207, 166, 118, 0.30);
    border-radius: 50%;
    transform: scale(1.3);
    animation: orbit-item-rotation-v2 8s linear infinite;
    pointer-events: none;
}

/* Connecting Line — matches h-px bg-gradient-to-r from-[#CFA676]/30 opacity 0.3 */
.coffee-orbit-line {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 1px;
    background: linear-gradient(to right, rgba(207, 166, 118, 0.30), transparent);
    transform-origin: left center;
    z-index: -1;
    pointer-events: none;
    opacity: 0.3;
}

/* Tooltip Card — matches motion.div top-24 left-1/2 -translate-x-1/2 w-48 p-4 rounded-2xl
   glass-effect border border-[#CFA676]/20 backdrop-blur-xl
   initial:{opacity:0, y:10} animate:{opacity:0|1, y:0|10} */
.coffee-orbit-card {
    position: absolute;
    top: 6rem;
    /* top-24 = 96px */
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 192px;
    /* w-48 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    pointer-events: none;
    z-index: 1;
}

.coffee-orbit-item:hover .coffee-orbit-card {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Card inner — matches p-4 rounded-2xl glass-effect border border-[#CFA676]/20 backdrop-blur-xl */
.coffee-orbit-card-inner {
    position: relative;
    /* needed for arrow absolute positioning */
    background: rgba(26, 20, 16, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(207, 166, 118, 0.20);
    border-radius: 1rem;
    /* rounded-2xl */
    padding: 1rem;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

/* Matches h4 text-[#F4E4BE] mb-1.5 text-sm */
.coffee-orbit-card h4 {
    color: #F4E4BE;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.375rem;
    margin-top: 0;
}

/* Matches p text-[#F4E4BE]/60 text-xs leading-relaxed */
.coffee-orbit-card p {
    color: rgba(244, 228, 190, 0.60);
    font-size: 0.75rem;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

/* Arrow — matches: absolute -top-2 left-1/2 -translate-x-1/2 w-3 h-3
   bg-[#1a1410] border-t border-l border-[#CFA676]/20 rotate-45
   Arrow is inside .coffee-orbit-card-inner (position:relative) */
.coffee-orbit-card-arrow {
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: rgba(26, 20, 16, 0.85);
    border-top: 1px solid rgba(207, 166, 118, 0.20);
    border-left: 1px solid rgba(207, 166, 118, 0.20);
}

/* Floating Particle — matches motion.div w-1 h-1 rounded-full bg-[#CFA676]/60 animate y:[-10, -30, -10] opacity:[0, 1,0] */
.coffee-orbit-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(207, 166, 118, 0.60);
    border-radius: 50%;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    animation: orbit-particle-up 3s infinite ease-in-out;
}

/* Bottom Accent — matches motion.div mt-20 h-px bg-gradient-to-r from-transparent via-[#CFA676]/30 to-transparent max-w-3xl */
.coffee-orbit-footer-accent {
    margin: 5rem auto 0;
    height: 1px;
    max-width: 768px;
    background: linear-gradient(to right, transparent, rgba(207, 166, 118, 0.30), transparent);
}


section#about {
    padding-bottom: 100px;
}

/* ──────────────────────────────────────────────────────────────────────
   Animations
   ────────────────────────────────────────────────────────────────────── */
@keyframes orbit-conic-rotation-v2 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Matches React: opacity[0.5, 1, 0.5] at 3s + rotate[0,360] at 20s separately */
@keyframes orbit-cup-float-gentle {

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

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

@keyframes orbit-cup-spin-v2 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes orbit-cup-opacity-v2 {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

@keyframes orbit-rippling-v2 {
    0% {
        transform: scale(1);
        opacity: 0;
    }

    30% {
        opacity: 0.3;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

@keyframes orbit-item-rotation-v2 {
    from {
        transform: scale(1.3) rotate(0deg);
    }

    to {
        transform: scale(1.3) rotate(360deg);
    }
}

@keyframes orbit-particle-up {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
        opacity: 0;
    }

    50% {
        transform: translateX(-50%) translateY(-25px);
        opacity: 1;
    }
}

/* ──────────────────────────────────────────────────────────────────────
   Responsive — Mobile collapses to 2-col grid (matching React mobile)
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .coffee-orbit-container {
        min-height: 700px;
    }
}

@media (max-width: 768px) {
    .coffee-orbit-container {
        min-height: auto;
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem 1rem;
        padding-top: 3rem;
    }
section#about {
    padding-bottom: 50px;
}
    .coffee-orbit-item-wrapper {
        position: static !important;
        transform: none !important;
        width: 100%;
        height: auto;
    }

        .coffee-orbit-item-wrapper.coffee-reveal.is-visible {
        margin: 0 !important;
                /*margin-bottom: 4rem;*/

    }
.coffee-step-card-wrapper {
   
    height: fit-content;
 }

.coffee-step-icon svg {
    width: 2rem;
    height: 2rem;
 }
    .coffee-orbit-container {
        max-width: 100%;
        margin: 0 auto;
    }

    .coffee-orbit-center,
    .coffee-orbit-line,
    .coffee-orbit-dashed-ring {
        display: none;
    }

    .coffee-orbit-icon-box {
        width: 90px;
        height: 90px;
        margin: 0 auto;
    }

    .coffee-orbit-icon {
        font-size: 2.5rem;
    }

    .coffee-orbit-card {
        position: static;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        width: 100%;
        margin-top: 0.75rem;
    }
}

/* ==========================================================================
   ☕ Features Grid Widget
   ========================================================================== */
.coffee-features-section {
    position: relative;
    padding: 6rem 0;
    overflow: hidden;
    background: transparent;
}

.coffee-features-title-section {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    z-index: 1;
}

.coffee-features-badge {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    background: rgba(207, 166, 118, 0.1);
    border: 1px solid rgba(207, 166, 118, 0.3);
    color: var(--coffee-brand-gold, #CFA676);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.coffee-features-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #F4E4BE;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.coffee-features-description {
    color: rgba(244, 228, 190, 0.8);
    max-width: 42rem;
    margin: 0 auto;
    font-size: 1.125rem;
}

.coffee-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.coffee-feature-card {
    position: relative;
    padding: 2.5rem;
    border-radius: 1.5rem;
    background: linear-gradient(135deg, rgba(26, 20, 16, 0.6) 0%, rgba(10, 7, 5, 0.8) 100%);
    border: 1px solid rgba(207, 166, 118, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1;
}

.coffee-feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(207, 166, 118, 0.4);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.coffee-feature-card-hover-aura {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(207, 166, 118, 0.15), transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.coffee-feature-card:hover .coffee-feature-card-hover-aura {
    opacity: 1;
}

.coffee-feature-ordinal {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    font-size: 1.5rem;
    font-weight: 800;
    color: rgba(244, 228, 190, 0.1);
}

.coffee-feature-icon-box {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    background: rgba(207, 166, 118, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(207, 166, 118, 0.2);
    transition: transform 0.4s ease;
}

.coffee-feature-card:hover .coffee-feature-icon-box {
    transform: scale(1.1) rotate(-5deg);
    background: rgba(207, 166, 118, 0.2);
}

.coffee-feature-icon-box svg,
.coffee-feature-icon-box i {
    font-size: 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--coffee-brand-gold, #CFA676);
    fill: var(--coffee-brand-gold, #CFA676);
}

.coffee-feature-icon-box svg[fill="none"] {
    fill: none;
    stroke: var(--coffee-brand-gold, #CFA676);
    stroke-width: 1.8;
}

.coffee-feature-icon-box svg path,
.coffee-feature-icon-box svg circle,
.coffee-feature-icon-box svg rect,
.coffee-feature-icon-box svg line,
.coffee-feature-icon-box svg polyline,
.coffee-feature-icon-box svg polygon {
    stroke: currentColor;
}

.coffee-feature-fallback-icon {
    display: inline-block;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--coffee-brand-gold, #CFA676);
}

.coffee-feature-title {
    font-size: 1.25rem;
    color: #F4E4BE;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.coffee-feature-desc {
    color: rgba(244, 228, 190, 0.6);
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.coffee-feature-momentum-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow: hidden;
    margin-top: auto;
}

.coffee-feature-momentum-fill {
    height: 100%;
    background: var(--coffee-brand-gold, #CFA676);
    border-radius: 2px;
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.coffee-feature-card:hover .coffee-feature-momentum-fill {
    transform: scaleX(1);
}

.coffee-feature-watermark {
    position: absolute;
    bottom: -1rem;
    right: -1rem;
    opacity: 0.03;
    pointer-events: none;
    transform: rotate(-15deg) scale(3);
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.coffee-feature-card:hover .coffee-feature-watermark {
    transform: rotate(0deg) scale(3.5);
    opacity: 0.06;
}

.coffee-feature-watermark-icon svg,
.coffee-feature-watermark-icon i {
    font-size: 5rem;
    color: currentColor;
}

.coffee-orbit-card-arrow {
    display: none;
}

.coffee-orbit-card-inner {
    background: rgba(255, 255, 255, 0.05);
}


/* ──────────────────────────────────────────────────────────────────────
   Elementor editor — force visible state, no offscreen positioning
   ────────────────────────────────────────────────────────────────────── */
.elementor-editor-active .coffee-orbit-section .coffee-reveal {
    opacity: 1 !important;
    transform: none !important;
}

.elementor-editor-active .coffee-orbit-card {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* ==========================================================================
   Final overrides: Hero + Features visual parity
   ========================================================================== */
/* Hero: keep same gradient tone as frontend and adjacent section */
.coffee-hero {
    background: linear-gradient(to bottom, #0a0705, #1a1410, #1a1410) !important;
    padding-bottom: 4rem !important;
}

.coffee-hero-bg {
    background: linear-gradient(to bottom, #0a0705, #1a1410, #1a1410) !important;
}

.coffee-hero-particles {
    position: absolute !important;
}

.coffee-hero-glow-right {
    background: rgba(207, 166, 118, 0.2) !important;
}

.coffee-hero-glow-left {
    background: rgba(91, 76, 65, 0.15) !important;
}

/* Hero stats: prevent clipped labels under numbers */
.coffee-hero-stats {
    align-items: start !important;
}

.coffee-stat {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: visible !important;
}

.coffee-stat-value {
    display: block;
    line-height: 1.2 !important;
    margin-bottom: 0.5rem !important;
}

.coffee-stat-label {
    display: block !important;
    line-height: 1.4 !important;
    white-space: normal;
    opacity: 0.7;
}

/* Features: force same card language as frontend WhyChooseUs cards */
.coffee-features-section {
    padding: 6rem 0 !important;
    background: transparent !important;
}

.coffee-feature-card {
    padding: 2.5rem !important;
    border-radius: 1.875rem !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    background: rgba(92, 64, 51, 0.1) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    transition: all 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.coffee-feature-card:hover {
    transform: translateY(-5px) scale(1.03) !important;
    border-color: rgba(212, 175, 55, 0.5) !important;
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.4) !important;
}

/* Hide non-frontend extras in this section */
.coffee-feature-momentum-bar,
.coffee-feature-watermark {
    display: none !important;
}

.coffee-feature-icon-box {
    width: 5rem !important;
    height: 5rem !important;
    margin-bottom: 1.5rem !important;
    border-radius: 1rem !important;
    background: #cfa676 !important;
    border: 0 !important;
    color: #ffffff !important;
}

.coffee-feature-icon-box i,
.coffee-feature-icon-box svg {
    display: block !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    font-size: 2.5rem !important;
    color: #ffffff !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.coffee-feature-fallback-icon {
    color: #ffffff !important;
}

.coffee-feature-title {
    color: #f4e4be !important;
    font-size: 1.25rem !important;
    margin-bottom: 1rem !important;
}

.coffee-feature-desc {
    color: rgba(244, 228, 190, 0.7) !important;
    line-height: 1.75 !important;
    margin-bottom: 0 !important;
    position: relative;
    z-index: 1;
}

/* --- Features Grid Section (Matches WhyChooseUs.tsx) --- */
.coffee-features-section {
    position: relative;
    padding: 6rem 0;
    overflow: hidden;
}

.coffee-features-bg-animation {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(212, 175, 55, 0.1), rgba(91, 76, 65, 0.05), rgba(92, 64, 51, 0.1));
    animation: coffee-features-bg-pulse 25s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes coffee-features-bg-pulse {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.1;
    }

    50% {
        transform: scale(1.3) rotate(180deg);
        opacity: 0.2;
    }
}

.coffee-features-title-section {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 5rem;
}

.coffee-features-badge-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.coffee-features-badge {
    display: inline-flex;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    background: rgba(92, 64, 51, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(207, 166, 118, 0.3);
    color: #CFA676;
    font-size: 0.875rem;
}

.coffee-features-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.coffee-features-description {
    color: rgba(244, 228, 190, 0.8);
    max-width: 42rem;
    margin: 0 auto;
    font-size: 1.125rem;
    line-height: 1.6;
}

.coffee-features-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 72rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .coffee-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .coffee-features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.coffee-feature-last-odd {
    grid-column: span 1;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .coffee-feature-last-odd {
        grid-column: span 2;
        width: 50%;
        margin-lef
        
        
        section#about {
    padding-bottom: 100px;
}t: auto;
        margin-right: auto;
    }
}

@media (min-width: 1024px) {
    .coffee-feature-last-odd {
        grid-column: span 1;
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }
}

.coffee-feature-card-wrapper {
    height: 100%;
    box-sizing: border-box;
}

.coffee-feature-card {
    position: relative;
    padding: 2.5rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    background: rgba(92, 64, 51, 0.1) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    cursor: pointer;
    overflow: hidden;
    height: 100%;
    box-sizing: border-box;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1;
}

.coffee-feature-card:hover {
    transform: translateY(-15px) scale(1.03);
    border-color: rgba(212, 175, 55, 0.5) !important;
}

.coffee-feature-ordinal {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    background: rgba(207, 166, 118, 0.2);
    border: 1px solid rgba(207, 166, 118, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.coffee-feature-ordinal span {
    font-size: 1.25rem;
    color: #CFA676;
    line-height: 1;
}

.coffee-feature-icon-box {
    width: 5rem;
    height: 5rem;
    margin-bottom: 1.5rem;
    border-radius: 1rem;
    background: #CFA676;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.coffee-feature-icon-box>.coffee-svg-icon,
.coffee-feature-icon-box>i,
.coffee-feature-icon-box>svg {
    width: 2.5rem !important;
    height: 2.5rem !important;
    font-size: 2.5rem !important;
    color: #ffffff !important;
    fill: #ffffff !important;
    max-width: 100%;
}

.coffee-feature-icon-box svg path {
    fill: #ffffff !important;
}

.coffee-feature-card:hover .coffee-feature-icon-box {
    transform: rotate(360deg) scale(1.15);
}

.coffee-feature-title {
    color: #F4E4BE !important;
    font-size: 1.25rem !important;
    margin-bottom: 1rem !important;
    transition: color 0.3s ease;
    position: relative;
    z-index: 1;
}

.coffee-feature-card:hover .coffee-feature-title {
    color: #CFA676 !important;
}

.coffee-feature-decorative-line {
    height: 0.25rem;
    background: #CFA676;
    margin-top: 1.5rem;
    border-radius: 9999px;
    width: 70%;
    transition: width 0.6s ease;
    position: relative;
    z-index: 1;
}

.coffee-feature-card-hover-glow {
    position: absolute;
    inset: 0;
    background: rgba(207, 166, 118, 0.3);
    opacity: 0;
    border-radius: 1.5rem;
    filter: blur(24px);
    z-index: -1;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.coffee-feature-card:hover .coffee-feature-card-hover-glow {
    opacity: 0.2;
    animation: coffee-card-glow-pulse 4s infinite ease-in-out;
}

@keyframes coffee-card-glow-pulse {

    0%,
    100% {
        transform: scale(0.9);
        opacity: 0;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.25;
    }
}

.coffee-feature-watermark {
    position: absolute;
    bottom: -1rem;
    right: -1rem;
    width: 8rem;
    height: 8rem;
    opacity: 0.05;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Master overrides follow... */
/* ==========================================================================
   FINAL MASTER OVERRIDE: Ensuring Icon Visibility (Premium Parity)
   Targeting both why-grid (React structure) and features (WP structure)
   ========================================================================== */
.coffee-why-grid-icon i,
.coffee-why-grid-icon svg,
.coffee-why-grid-icon .e-font-icon-svg,
.coffee-feature-icon-box i,
.coffee-feature-icon-box svg,
.coffee-feature-icon-box .e-font-icon-svg {
    width: 2.5rem !important;
    height: 2.5rem !important;
    font-size: 2.5rem !important;
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
    /* Allow stroke for Lucide icons */
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    line-height: 1 !important;
    margin: 0 auto !important;
}

/* Specific path overrides for both SVG types */
.coffee-why-grid-icon svg path,
.coffee-why-grid-icon svg circle,
.coffee-why-grid-icon svg line,
.coffee-why-grid-icon svg rect,
.coffee-why-grid-icon svg polygon,
.coffee-feature-icon-box svg path,
.coffee-feature-icon-box svg circle,
.coffee-feature-icon-box svg line,
.coffee-feature-icon-box svg rect,
.coffee-feature-icon-box svg polygon {
    fill: transparent;
    /* Default for stroke icons */
    stroke: #ffffff !important;
    stroke-width: 2;
    opacity: 1 !important;
}

/* FontAwesome Fill icons (they usually have .e-font-icon-svg or specific classes) */
.coffee-why-grid-icon .e-font-icon-svg path,
.coffee-feature-icon-box .e-font-icon-svg path {
    fill: #ffffff !important;
    stroke: none !important;
}

.coffee-why-grid-pattern-icon i,
.coffee-why-grid-pattern-icon svg,
.coffee-why-grid-pattern-icon .e-font-icon-svg,
.coffee-feature-watermark i,
.coffee-feature-watermark svg,
.coffee-feature-watermark .e-font-icon-svg {
    width: 8rem !important;
    height: 8rem !important;
    font-size: 8rem !important;
    color: #CFA676 !important;
    fill: #CFA676 !important;
    stroke: #CFA676 !important;
    opacity: 0.1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

.coffee-why-grid-pattern-icon svg path,
.coffee-why-grid-pattern-icon svg circle,
.coffee-why-grid-pattern-icon svg line,
.coffee-why-grid-pattern-icon svg rect,
.coffee-why-grid-pattern-icon svg polygon,
.coffee-feature-watermark svg path {
    fill: transparent;
    stroke: #CFA676 !important;
    stroke-width: 2;
}

.coffee-why-grid-pattern-icon .e-font-icon-svg path {
    fill: #CFA676 !important;
    stroke: none !important;
}

a.skip-link.screen-reader-text {
    display: none;
}

/* ==========================================================================
   RESPONSIVE FIXES — ALL IMPORTANT
   ========================================================================== */

.coffee-layout-main-container {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Global */
.coffee-hero,
.coffee-about-section-wrapper,
.coffee-how-it-works-section,
.coffee-why-grid-section,
.coffee-orbit-section,
.coffee-partners-wrapper,
.coffee-screenshots-v2,
.coffee-faq-section,
.coffee-download-section,
.coffee-footer-v2 {
    box-sizing: border-box !important;
    width: 100% !important;
    overflow-x: hidden !important;
}

/* Hero */
@media (max-width: 1023px) {
    .coffee-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        padding-top: 50px;
    }

    .coffee-hero-editorial {
        text-align: center !important;
        align-items: center !important;
        order: 1 !important;
    }

    .coffee-hero-showcase {
        order: 2 !important;
        max-width: 380px !important;
        margin: 0 auto !important;
    }

    .coffee-hero-description {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .coffee-hero-buttons,
    .coffee-hero-stats {
        justify-content: center !important;
    }

    .coffee-stat {
        text-align: center !important;
    }
}

@media (max-width: 767px) {

    .coffee-hero,
    .coffee-about-section-wrapper,
    .coffee-how-it-works-section,
    .coffee-why-grid-section,
    .coffee-partners-wrapper,
    .coffee-faq-section,
    .coffee-download-section {
        padding-top: 3.5rem !important;
        padding-bottom: 2rem !important;
        min-height: auto !important;
    }

    .coffee-hero-content {
        padding: 0 1rem !important;
    }

    .coffee-hero-title {
        font-size: 2.2rem !important;
    }

    .coffee-hero-description {
        font-size: 1rem !important;
        margin-bottom: 2rem !important;
    }

    .coffee-hero-stats {
        gap: 0.75rem !important;
        padding-top: 1.5rem !important;
    }

    .coffee-stat-value {
        font-size: 1.5rem !important;
    }

    .coffee-stat-label {
        font-size: 0.75rem !important;
    }

    .coffee-btn {
        padding: 1rem 1.75rem !important;
        font-size: 0.9rem !important;
    }

    .coffee-showcase-inner {
        max-width: 280px !important;
    }

    .coffee-scroll-indicator {
        display: none !important;
    }


    .coffee-about-feature-desc {
        font-size: 0.75rem !important;
    }

    /* Cards & Icons Spacing */
    .coffee-why-grid-card,
    .coffee-step-card,
    .coffee-partner-showcase-box,
    .coffee-launch-registration-panel {
        padding: 1.5rem !important;
        border-radius: 1.25rem !important;
    }

    .coffee-why-grid-icon,
    .coffee-step-icon {
        width: 3.5rem !important;
        height: 3.5rem !important;
        margin-bottom: 1.25rem !important;
    }

    .coffee-partner-showcase-box {
        min-height: 130px !important;
    }

    .coffee-why-grid-number {
        width: 2.25rem !important;
        height: 2.25rem !important;
        font-size: 0.8rem !important;
    }

    .coffee-faq-question {
        padding: 1rem 1.25rem !important;
    }
}

/* Orbit mobile critical */
@media (max-width: 767px) {
    .coffee-orbit-container {
        position: relative !important;
        min-height: auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
        padding: 0 1rem !important;
    }

    .coffee-orbit-item-wrapper {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
    }

    .coffee-orbit-card {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        width: 100% !important;
        pointer-events: auto !important;
    }
}

/* Footer */
@media (max-width: 767px) {
    .coffee-footer-v2-bottom {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 1.25rem !important;
    }
}

/* General titles */
@media (max-width: 767px) {
    .coffee-footer-v2-grid {
        display: flex;
        flex-wrap: wrap;
    }
    section#screenshots {
    padding-bottom: 0;
}
section#why-choose-us {
    padding-bottom: 5px;
}

    .coffee-screenshots-v2-screen {
        aspect-ratio: 9 / 9;
    }

    .coffee-download-phone {
        width: 21rem;
        height: 20.25rem;

    }

    .coffee-download-qr-card {
        top: 50%;
        left: 50%;
        padding: 1.5rem;
        transform: translate(-50%, -50%);
    }

    .coffee-download-grid {
        gap: 1rem;
        padding: 1rem;
    }

    .coffee-howit-title,
    .coffee-about-title,
    .coffee-why-grid-title,
    .coffee-orbit-title,
    .coffee-faq-title,
    .coffee-download-title,
    .coffee-features-title,
    .coffee-screenshots-v2-h2,
    .coffee-partners-header h2,
    .coffee-brand-display-title {
        font-size: clamp(1.75rem, 6vw, 2.25rem) !important;
        line-height: 1.25 !important;
    }
}

.otgs-development-site-front-end {
    display: none !important;
}




/* --- Tailwind Utility Classes for Header & Responsive --- */
.hidden {
    display: none !important;
}

@media (min-width: 640px) {
    .sm\:block {
        display: block !important;
    }
}

@media (min-width: 768px) {
    .md\:block {
        display: block !important;
    }

    .md\:hidden {
        display: none !important;
    }

    .md\:flex-row {
        flex-direction: row !important;
    }

    .md\:gap-2 {
        gap: 0.5rem !important;
    }

    .md\:px-4 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .md\:text-right {
        text-align: right !important;
    }
}

@media (min-width: 1024px) {
    .lg\:hidden {
        display: none !important;
    }

    .lg\:flex {
        display: flex !important;
    }

    .lg\:block {
        display: block !important;
    }
}

.coffee-header-nav .text-\[\#CFA676\] {
    color: #CFA676 !important;
}

.text-center {
    text-align: center !important;
}

.justify-center {
    justify-content: center !important;
}

.transition-all {
    transition-property: all !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 150ms !important;
}

.group:hover .group-hover\:scale-110 {
    transform: scale(1.1) !important;
}

.group-hover\:scale-110 {
    transition: transform 0.3s ease;
}

.hover\:bg-\[\#CFA676\]\/10:hover {
    background-color: rgba(207, 166, 118, 0.1) !important;
}

.hover\:border-\[\#CFA676\]\/60:hover {
    border-color: rgba(207, 166, 118, 0.6) !important;
}

/* --- Missing Utility Classes for Footer & Mobile Menu --- */
.max-h-0 {
    max-height: 0 !important;
}

.opacity-0 {
    opacity: 0 !important;
}

.coffee-mobile-dropdown {
    display: none;
}

.coffee-header-card.is-open .coffee-mobile-dropdown {
    display: block;
    max-height: 1000px !important;
    opacity: 1 !important;
    margin-top: 1rem;
}

.coffee-header-card.is-open .toggle-icon-menu {
    display: none !important;
}

.coffee-header-card.is-open .toggle-icon-close {
    display: block !important;
}

/* Social Icons & PUIUX Logo Layout */
.w-12 {
    width: 3rem !important;
}

.h-12 {
    height: 3rem !important;
}

.w-24 {
    width: 6rem !important;
}

.h-10 {
    height: 2.5rem !important;
}

.w-5 {
    width: 1.25rem !important;
}

.h-5 {
    height: 1.25rem !important;
}

.size-full {
    width: 100% !important;
    height: 100% !important;
}

.block {
    display: block !important;
}

.relative {
    position: relative !important;
}

.flex-col {
    flex-direction: column !important;
}

.items-center {
    align-items: center !important;
}

.justify-between {
    justify-content: space-between !important;
}

.gap-6 {
    gap: 1.5rem !important;
}

.gap-4 {
    gap: 1rem !important;
}

/* Hero Alignment Fix - Start aligned on all devices per user request */
.coffee-hero-editorial,
.coffee-hero-buttons,
.coffee-hero-stats,
.coffee-stat {
    align-items: flex-start !important;
    text-align: start !important;
    justify-content: flex-start !important;
}

/* Reverse Hero Columns on Desktop & Prevent Header Overlap */
@media (min-width: 1024px) {
    .coffee-hero { margin-top: 120px !important; }
    .coffee-hero-editorial { order: 1 !important; }
    .coffee-hero-showcase { order: 2 !important; }
}