/* css/variables.css */
:root {
    /* Brand Colors */
    --clr-black: #050505;
    --clr-dark: #0A0A0A;
    --clr-blue: #0B132B;
    --clr-darkblue: #000814;
    --clr-gold: #D4AF37;
    --clr-goldlight: #F3E5AB;
    --clr-golddark: #A67D27;

    /* Typography */
    --font-sans: 'Outfit', 'Inter', sans-serif;
    --font-serif: 'Playfair Display', serif;
    
    /* Effects */
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.05);
    --gold-glow: 0 0 20px rgba(212, 175, 55, 0.3);
    --blue-glow: 0 0 40px rgba(11, 19, 43, 0.8);

    /* Hero Typography Classes (Metanoia Reference) */
    /* 1. Main Title Style */
    --hero-title-size: 84px;
    --hero-title-weight: 500;
    --hero-title-line-height: 1.15;

    /* 2. Highlight Sub-headline Style (Italic) */
    --hero-highlight-size: 38px;
    --hero-highlight-weight: 400;
    --hero-highlight-letter-spacing: 0.01em;

    /* 3. Description Style */
    --hero-desc-size: 16px;
    --hero-desc-weight: 400;
    --hero-desc-line-height: 1.7;
}

.hero-title {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 8vw, var(--hero-title-size));
    font-weight: var(--hero-title-weight);
    line-height: var(--hero-title-line-height);
    color: white;
}

.hero-highlight {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 4vw, var(--hero-highlight-size));
    font-weight: var(--hero-highlight-weight);
    font-style: italic;
    letter-spacing: var(--hero-highlight-letter-spacing);
    color: rgba(255, 255, 253, 0.85); /* Replaced invalid hex #FFFFFD9 */
}

.hero-description {
    font-family: var(--font-sans);
    font-size: var(--hero-desc-size);
    font-weight: var(--hero-desc-weight);
    line-height: var(--hero-desc-line-height);
    color: rgba(255, 255, 255, 0.7); /* Replaced invalid hex #FFFFFFB3 */
}

.offer-card {
    background: rgba(81, 190, 204, 0.1); /* Based on #51BECC4D from print */
    border: 1px solid rgba(212, 175, 55, 0.3); /* Using brand gold instead of blue */
    border-radius: 8px;
    padding: 12px 20px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.offer-card:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--clr-gold);
    transform: translateY(-2px);
}