/* Flexion Elite — v2: Sage & Warm Sand */

:root {
    --bg-main: #f3f2ee;
    --bg-soft: #ebe8e1;
    --surface: #fffcf7;
    --text-main: #1a1f1d;
    --text-muted: #4a524e;
    --brand: #2d6a52;
    --brand-strong: #1d4d3d;
    --brand-light: #4a9180;
    --accent-warm: #c4a35a;
    --accent-warm-hover: #b08f45;
    --sand-highlight: #e2d4b0;
    --sand-nav: #d4c9a0;
    --line: #dcd7ce;
    --shadow: 0 8px 32px rgba(26, 31, 29, 0.06);
    --shadow-hover: 0 20px 48px rgba(26, 31, 29, 0.1);
    --hero-bg: linear-gradient(158deg, #0a1210 0%, #14231e 38%, #1b332b 72%, #234038 100%);
}

body {
    font-family: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(ellipse 120% 80% at 50% -20%, rgba(74, 145, 128, 0.06) 0%, transparent 50%),
        linear-gradient(180deg, #faf9f5 0%, var(--bg-main) 50%, #e8e6df 100%);
    color: var(--text-main);
    line-height: 1.65;
    letter-spacing: 0.01em;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.font-ui {
    font-family: "Outfit", system-ui, sans-serif;
}

.hero-gradient {
    background: var(--hero-bg);
    position: relative;
    overflow: hidden;
}

.hero-gradient::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 15% 25%, rgba(74, 145, 128, 0.22) 0%, transparent 52%),
        radial-gradient(ellipse 55% 45% at 90% 70%, rgba(196, 163, 90, 0.14) 0%, transparent 48%),
        repeating-linear-gradient(
            -12deg,
            transparent,
            transparent 96px,
            rgba(255, 255, 255, 0.02) 96px,
            rgba(255, 255, 255, 0.02) 97px
        );
    pointer-events: none;
}

.hero-gradient::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(196, 163, 90, 0.35), transparent);
    pointer-events: none;
}

.hero-gradient > * {
    position: relative;
    z-index: 1;
}

.card-hover {
    transition: transform 0.28s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.28s ease;
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.accent-border {
    border-left: 4px solid var(--brand-light);
}

.section-shell {
    border-radius: 1.35rem;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    background: linear-gradient(168deg, #fffcf7 0%, #f7f4ec 100%);
}

.pill-tag {
    border-radius: 999px;
    border: 1px solid rgba(226, 212, 176, 0.25);
    background: rgba(45, 106, 82, 0.42);
    color: #f4f1ea;
    backdrop-filter: blur(8px);
}

a {
    color: var(--brand);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--brand-strong);
}

input,
select,
textarea {
    border-color: #c9c4b8 !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--brand-light) !important;
    box-shadow: 0 0 0 3px rgba(74, 145, 128, 0.22) !important;
}

.ad-banner {
    background: linear-gradient(180deg, #f0ebe3 0%, #e8e2d8 100%);
    border-bottom: 1px solid #d9d2c5;
    color: #3d3a34;
}

.btn-gold {
    background: linear-gradient(180deg, #c9ad62 0%, #b8994a 100%);
    color: #141a16;
    box-shadow: 0 4px 20px rgba(196, 163, 90, 0.35);
}

.btn-gold:hover {
    background: linear-gradient(180deg, #b8994a 0%, #a78940 100%);
}

.footer-legal-title {
    color: #d4c9a0;
}

.link-footer {
    color: #7ec4b0;
}

.link-footer:hover {
    color: #b8e5d5;
}

.text-brand-accent {
    color: #a8d4c4;
}

.border-brand-card {
    border-color: rgba(74, 145, 128, 0.42);
}

.bg-contact-panel {
    background: linear-gradient(165deg, #101916 0%, #0c1412 50%, #13221d 100%);
    border: 1px solid rgba(74, 145, 128, 0.2);
}

.text-footer-muted {
    color: #9ecfc0;
}