/* ═══════════════════════════════════════════
   TRUST BAR
   ═══════════════════════════════════════════ */
.trust-bar {
    padding: 20px 40px;
    border-top: 1px solid #f0e6e0;
    border-bottom: 1px solid #f0e6e0;
    background: white;
    margin-top: 10px;
}
.trust-items {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 32px;
    position: relative;
    cursor: default;
}
.trust-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 30px;
    background: #edd8d4;
}

/* SVG gradient definition */
.trust-svg-defs { position: absolute; width: 0; height: 0; }

/* Icon shape container */
.trust-icon-shape {
    flex-shrink: 0;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    transition: transform 0.3s ease;
}
.trust-item:hover .trust-icon-shape {
    transform: scale(1.08);
}

/* Shapes */
.shape-rounded { background: linear-gradient(135deg, #fce8f3, #f5d5ea); border-radius: 12px; }
.shape-hex { background: linear-gradient(135deg, #fde8d8, #f8d5c0); clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.shape-diamond { background: linear-gradient(135deg, #f5e0f5, #e8d0f0); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); width: 44px; height: 44px; }
.shape-pill { background: linear-gradient(135deg, #fdf0d8, #f8e4c0); border-radius: 50px; width: 52px; height: 36px; }
.shape-circle { background: linear-gradient(135deg, #e8f0fd, #d0e0f8); border-radius: 50%; }

/* SVG icon hover animation */
.trust-icon-shape svg { overflow: visible; }
.trust-icon-shape svg path,
.trust-icon-shape svg rect,
.trust-icon-shape svg circle,
.trust-icon-shape svg polyline,
.trust-icon-shape svg polygon,
.trust-icon-shape svg line {
    stroke-dasharray: 200;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.6s ease, fill 0.4s ease;
}
.trust-item:hover .trust-icon-shape svg path,
.trust-item:hover .trust-icon-shape svg rect,
.trust-item:hover .trust-icon-shape svg circle,
.trust-item:hover .trust-icon-shape svg polyline,
.trust-item:hover .trust-icon-shape svg polygon,
.trust-item:hover .trust-icon-shape svg line {
    stroke-dashoffset: 200;
    fill: url(#trustGrad);
    stroke: url(#trustGrad);
}

.trust-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: #2a2a2a;
    line-height: 1.3;
}
.trust-desc {
    font-size: 0.67rem;
    color: #aaa;
    font-weight: 300;
    line-height: 1.3;
}

@media (max-width: 1024px) {
    .trust-items { flex-wrap: wrap; justify-content: center; }
    .trust-item:not(:last-child)::after { display: none; }
    .trust-item { padding: 12px 16px; flex: 1 1 30%; justify-content: center; }
}

@media (max-width: 768px) {
    .trust-bar {
        padding: 20px;
        border-top: none;
        border-bottom: none;
        background: transparent;
    }
    .trust-items {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch; /* Forces all items in a row to have exactly the same height */
        border: 1px solid #f0e6e0;
        border-radius: 8px;
        background: white;
        overflow: hidden;
    }
    .trust-item {
        padding: 16px 12px;
        gap: 10px;
        justify-content: flex-start;
        align-items: center; /* Keeps the icon and text vertically centered inside the stretched item */
        flex: none; /* override previous flex rules */
    }
    
    /* Borders for grid */
    .trust-item:nth-child(1), .trust-item:nth-child(2),
    .trust-item:nth-child(3), .trust-item:nth-child(4) {
        border-bottom: 1px solid #f0e6e0;
    }
    .trust-item:nth-child(odd):not(:last-child) {
        border-right: 1px solid #f0e6e0;
    }
    .trust-item:nth-child(5) {
        grid-column: 1 / -1;
        justify-content: center;
    }
    
    .trust-icon-shape { width: 32px; height: 32px; }
    .shape-pill { width: 40px; height: 28px; }
    .shape-diamond { width: 34px; height: 34px; }
    .trust-icon-shape svg { transform: scale(0.8); }

    .trust-title { font-size: 0.7rem; }
    .trust-desc { font-size: 0.6rem; }
}

@media (max-width: 480px) {
    .trust-bar { padding: 10px; }
    .trust-item { padding: 12px 8px; }
    .trust-icon-shape { width: 28px; height: 28px; }
    .shape-pill { width: 34px; height: 24px; }
    .shape-diamond { width: 30px; height: 30px; }
    .trust-icon-shape svg { transform: scale(0.7); }
    
    .trust-title { font-size: 0.65rem; }
    .trust-desc { font-size: 0.55rem; }
}

/* ═══════════════════════════════════════════
           ═══════════════════════════════════════════ */
        .dark-section {
            background: var(--eden-black);
            color: var(--eden-text);
        }

        .section-header {
            text-align: center;
            margin-bottom: 60px;
        }
        .section-tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 0.6rem;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: var(--eden-gold);
            margin-bottom: 16px;
        }
        .section-tag::before, .section-tag::after {
            content: ''; width: 20px; height: 1px;
            background: var(--eden-gold); opacity: 0.3;
        }
        .section-title {
            font-family: var(--font-display);
            font-size: clamp(2rem, 4vw, 3.2rem);
            font-weight: 300;
            color: var(--eden-cream);
            line-height: 1.2;
        }
        .section-subtitle {
            font-size: 0.9rem;
            color: var(--eden-text-muted);
            max-width: 550px;
            margin: 16px auto 0;
            font-weight: 300;
            line-height: 1.7;
        }

        /* ═══════════════════════════════════════════
           HOW IT WORKS
           ═══════════════════════════════════════════ */
        .how-it-works {
            padding: var(--section-padding) 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        .steps-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
        }
        .step-card { text-align: center; padding: 40px 24px; }
        .step-number {
            width: 56px; height: 56px;
            border: 1px solid var(--eden-gold);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 24px;
            font-family: var(--font-display);
            font-size: 1.2rem; color: var(--eden-gold);
        }
        .step-icon { font-size: 2rem; margin-bottom: 16px; }
        .step-title {
            font-family: var(--font-display);
            font-size: 1.3rem; color: var(--eden-cream);
            margin-bottom: 12px;
        }
        .step-desc {
            font-size: 0.8rem; color: var(--eden-text-muted);
            line-height: 1.7; font-weight: 300;
        }

        /* ═══════════════════════════════════════════
           ABOUT PRODUCTS
           ═══════════════════════════════════════════ */
        .about-products {
            background: #f5f1ed; /* Match the screenshot beige */
            padding: clamp(60px, 8vw, 100px) 20px;
        }
        .ap-inner {
            max-width: 1100px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 60px;
            align-items: center;
        }
        .ap-content {
            padding-right: 20px;
        }
        .ap-title {
            font-family: var(--font-display);
            font-size: clamp(1.8rem, 3.5vw, 2.5rem);
            font-weight: 500;
            color: #4a403a; 
            margin-bottom: 24px;
            line-height: 1.2;
        }
        .ap-desc {
            font-size: 0.85rem;
            color: #7a6e65;
            line-height: 1.8;
            font-weight: 300;
            margin-bottom: 40px;
        }
        .ap-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 12px 24px;
            border: 1px solid #b25d76;
            color: #b25d76;
            font-size: 0.65rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            font-weight: 600;
            border-radius: 4px;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        .ap-btn:hover {
            background: var(--eden-burgundy);
            color: white;
            border-color: var(--eden-burgundy);
        }
        .ap-visuals {
            display: flex;
            gap: 20px;
            position: relative;
        }
        .ap-visuals::before {
            content: '•';
            position: absolute;
            left: -30px;
            top: 70%;
            width: 24px;
            height: 24px;
            border: 1px solid #e0ccc2;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--eden-burgundy);
            font-size: 0.5rem;
        }
        .ap-card {
            flex: 1;
            aspect-ratio: 1/1.05;
            background: #fdf5f3;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 40px rgba(140, 17, 85, 0.05);
            transition: transform 0.4s ease;
            position: relative;
        }
        .ap-card:hover {
            transform: translateY(-8px);
        }
        .ap-img-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            font-size: 5rem;
            filter: drop-shadow(0 15px 15px rgba(0,0,0,0.15));
        }

        @media (max-width: 900px) {
            .steps-grid { grid-template-columns: 1fr; gap: 30px; }
            .ap-inner {
                grid-template-columns: 1fr;
                gap: 30px;
                text-align: left;
            }
            .ap-content {
                padding-right: 0;
            }
            .ap-visuals::before {
                display: none;
            }
            .ap-btn {
                margin: 0;
            }
        }
        @media (max-width: 480px) {
            .how-it-works { padding: 40px 15px; }
            .step-card { padding: 20px 15px; }
            .step-title { font-size: 1.1rem; }
            .ap-visuals { gap: 15px; }
            .ap-title { font-size: 1.6rem; }
            .ap-desc { font-size: 0.8rem; }
        }