@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&family=Inter:wght@400;500;600&display=swap');

    :root {
        --bg-white: #ffffff;
        --surface-light: #f8fafc;
        --border-soft: #e2e8f0;
        --accent-blue: #2563eb;
        --accent-orange: orange;
        --accent-green: green;
        --text-main: #0f172a;
        --text-muted: #64748b;
    }

    body {
        background-color: var(--bg-white);
        color: var(--text-main);
        font-family: 'Inter', sans-serif;
        margin: 0;
        -webkit-font-smoothing: antialiased;
    }

    .container-pro { max-width: 1400px; margin: 0 auto; padding: 0 40px; }

    /* --- HERO --- */
    .adv-hero-light { padding: 80px 0 60px; position: relative; overflow: hidden; }
    .mesh-overlay-light {
        position: absolute; inset: 0;
        background-image: linear-gradient(var(--border-soft) 1px, transparent 1px), linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
        background-size: 60px 60px; mask-image: radial-gradient(circle at center, black, transparent 90%);
        opacity: 0.5; z-index: 0;
    }

    .kpi-pill-light {
        display: inline-flex; align-items: center; gap: 10px;
        background: #fff7ed; border: 1px solid #ffedd5;
        color: var(--accent-orange); padding: 8px 16px; border-radius: 100px;
        font-size: 11px; font-weight: 700; text-transform: uppercase;
    }

    .pulse-blue {
        width: 8px; height: 8px; background: var(--accent-green); border-radius: 50%;
        animation: pulse-ring 2s infinite;
    }

    @keyframes pulse-ring {
        0% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(0, 128, 0, 0.4); }
        70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(0, 128, 0, 0); }
        100% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(0, 128, 0, 0); }
    }

    .adv-title-light {
        font-family: 'Space Grotesk', sans-serif; font-size: 4rem;
        font-weight: 700; letter-spacing: -3px; margin: 25px 0;
    }
    .adv-title-light span { color: var(--accent-orange); }
    .adv-lead-light { max-width: 650px; color: var(--text-muted); font-size: 1.1rem; line-height: 1.5; }

    .adv-metrics-light {
        display: flex; gap: 60px; margin-top: 40px;
        border-top: 1px solid var(--border-soft); padding-top: 30px;
    }
    .m-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; font-weight: 600; }
    .m-value-dark { font-family: 'Space Grotesk'; font-size: 2.5rem; font-weight: 700; }

    /* --- BENTO GRID --- */
    .adv-grid-section-light { padding-bottom: 100px; background: #fafafa; border-top: 1px solid var(--border-soft); padding-top: 60px;}
    .adv-bento-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 24px; }

    .adv-node-card-light {
        background: var(--bg-white); border: 1px solid var(--border-soft);
        border-radius: 24px; overflow: hidden; display: flex; flex-direction: column;
        transition: all 0.4s ease;
    }

    .node-wide { grid-column: span 2; flex-direction: row; }
    .node-visual { height: 240px; position: relative; background: #f1f5f9; }
    .node-wide .node-visual { width: 45%; height: auto; }
    .node-visual img { width: 100%; height: 100%; object-fit: cover; }

    /* --- PRODUCT NAME SECTION DESIGN --- */
    .node-body-light { padding: 30px; flex: 1; display: flex; align-items: center; }
    
    .node-header-flex { display: flex; align-items: flex-start; gap: 20px; width: 100%; }
    
    .index-box {
        background: var(--text-main); color: #fff;
        font-family: 'Space Grotesk'; font-size: 12px; font-weight: 800;
        padding: 6px 10px; border-radius: 6px;
    }

    .title-wrap { flex: 1; }
    .node-title-dark { font-family: 'Space Grotesk'; font-size: 1.8rem; margin: 0; line-height: 1.1; letter-spacing: -1px; }

    .design-meta-line { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
    .meta-bar { height: 2px; width: 40px; background: var(--border-soft); border-radius: 2px; }
    .meta-dot { width: 6px; height: 6px; background: var(--accent-orange); border-radius: 50%; }
    .meta-text { font-size: 10px; font-weight: 700; color: var(--text-muted); letter-spacing: 2px; }

    .adv-node-card-light:hover { transform: translateY(-5px); border-color: var(--accent-orange); box-shadow: 0 15px 30px rgba(0,0,0,0.05); }

    @media (max-width: 992px) {
        .node-wide { grid-column: span 1; flex-direction: column; }
        .node-wide .node-visual { width: 100%; height: 240px; }
    }