/* About Tradel Page Styles - Scoped to #page-content */

#page-content {
    --green: #32a930;
    --ink: #1b1f23;
    --muted: #6a6f76;
    --line: #e3e7ee;
    --bg: #ffffff;
}

/* Glass Card + Gradient-Rand */
#page-content .glass-card {
    position: relative;
    border-radius: 22px;
    background: rgba(255, 255, 255, .65);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .10);
}

#page-content .glass-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(50, 169, 48, .35), rgba(50, 169, 48, .05), rgba(27, 31, 35, .08));
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
    pointer-events: none;
}

/* Glass Card 2 (variant) */
#page-content .glass-card2 {
    position: relative;
    border-radius: 22px;
    background: rgba(255, 255, 255, .65);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .10);
}

#page-content .glass-card2::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(50, 169, 48, .35), rgba(50, 169, 48, .05), rgba(27, 31, 35, .08));
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
    pointer-events: none;
}

/* Fancy Divider */
#page-content .fancy-divider {
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, transparent, rgba(50, 169, 48, .35), transparent);
}

/* Values Grid */
#page-content .values-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(130px, 160px) 1fr;
}

@media (max-width:768px) {
    #page-content .values-grid {
        grid-template-columns: 1fr;
    }
}

/* Tools Box */
#page-content .tools-box {
    background: linear-gradient(90deg, #5fb965 0%, #a5d6a7 100%);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 16px;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .10);
}

/* Image Wrapper */
#page-content .img-wrap {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
    max-width: 424px;
}

#page-content .img-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .05));
    pointer-events: none;
}

/* Typography - Playfair Display for headings */
#page-content h1[style*="Playfair Display"],
#page-content h2[style*="Playfair Display"],
#page-content .playfair-display {
    font-family: 'Playfair Display', serif;
}