@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,700;0,9..144,900;1,9..144,300&family=DM+Sans:wght@300;400;500;600&display=swap");

    :root {
        --yn-bg: #f5f7ff;
        --yn-surface: #ffffff;
        --yn-text: #0f1c3f;
        --yn-text-muted: #64748b;
        --yn-text-faint: #94a3b8;
        --yn-blue: #293d75;
        --yn-blue-soft: rgba(29, 78, 216, 0.08);
        --yn-gold: #d97706;
        --yn-border: rgba(15, 28, 63, 0.08);
        --yn-border-mid: rgba(15, 28, 63, 0.12);
    }

    .yn-ph {
        background: var(--yn-surface);
        padding: 80px 0 72px;
        position: relative;
        overflow: hidden;
        border-bottom: 1px solid var(--yn-border);
        font-family: "DM Sans", sans-serif;
    }

    .yn-ph-mesh {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(
                ellipse 60% 80% at 5% 60%,
                rgba(29, 78, 216, 0.05) 0%,
                transparent 55%
        ),
        radial-gradient(
                ellipse 40% 50% at 95% 15%,
                rgba(217, 119, 6, 0.04) 0%,
                transparent 50%
        );
    }

    .yn-ph-grid {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: linear-gradient(var(--yn-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--yn-border) 1px, transparent 1px);
        background-size: 52px 52px;
        mask-image: radial-gradient(
                ellipse 100% 100% at 50% 50%,
                #000 0%,
                transparent 65%
        );
    }

    .yn-ph-inner {
        position: relative;
        z-index: 1;
        text-align: center;
    }

    .yn-ph-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        color: var(--yn-gold);
        margin-bottom: 14px;
    }

    .yn-ph-eyebrow::before,
    .yn-ph-eyebrow::after {
        content: "";
        display: block;
        width: 20px;
        height: 1px;
        background: var(--yn-gold);
    }

    .yn-ph-title {
        font-family: "Fraunces", serif;
        font-size: clamp(28px, 3.5vw, 48px);
        font-weight: 900;
        line-height: 1.05;
        letter-spacing: -1px;
        color: var(--yn-text);
        margin-bottom: 14px;
    }

    .yn-ph-desc {
        font-size: 15px;
        font-weight: 300;
        line-height: 1.7;
        color: var(--yn-text-muted);
        max-width: 520px;
        margin: 0 auto;
    }