/* ═══════════════════════════════════════════
   DataDeep — About (Chi siamo) Page
   ═══════════════════════════════════════════ */

/* ─── ABOUT INTRO ─── */
.about-intro {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.about-intro-title {
    font-size: var(--font-size-4xl);
    color: var(--dd-navy);
    margin-bottom: var(--space-5);
    white-space: nowrap;
}

.about-intro p {
    font-size: var(--font-size-md);
    color: var(--dd-muted);
    line-height: var(--line-height-relaxed);
}

.about-intro p + p {
    margin-top: var(--space-4);
}

.about-intro strong {
    color: var(--dd-navy);
    font-weight: 600;
}

/* ─── VISION SECTION (text + video) ─── */
.vision-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.vision-text p {
    font-size: var(--font-size-base);
    color: var(--dd-muted);
    line-height: var(--line-height-relaxed);
}

.vision-text p + p {
    margin-top: var(--space-3);
}

.vision-text strong {
    color: var(--dd-navy);
    font-weight: 600;
}

.video-container {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl), var(--shadow-glow-purple);
    position: relative;
    aspect-ratio: 16/9;
}

.video-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ─── PILLARS (bento grid) ─── */
.pillars-bento {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
    max-width: 1000px;
    margin: 0 auto;
}

.pillar-bento-card {
    background: var(--dd-off-white);
    border: 1px solid rgba(10, 10, 40, 0.06);
    border-radius: var(--radius);
    padding: 40px 32px;
    transition: all var(--duration-normal) var(--ease-smooth);
    position: relative;
    overflow: hidden;
}

.pillar-bento-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
}

.pillar-bento-card:nth-child(1)::before { background: var(--dd-pink); }
.pillar-bento-card:nth-child(2)::before { background: var(--dd-purple); }
.pillar-bento-card:nth-child(3)::before { background: var(--dd-blue); }
.pillar-bento-card:nth-child(4)::before { background: var(--dd-gradient-icon); }

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

.pillar-bento-card .pb-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
    color: var(--dd-white);
}

.pillar-bento-card:nth-child(1) .pb-icon { background: var(--dd-pink); }
.pillar-bento-card:nth-child(2) .pb-icon { background: var(--dd-purple); }
.pillar-bento-card:nth-child(3) .pb-icon { background: var(--dd-blue); }
.pillar-bento-card:nth-child(4) .pb-icon { background: var(--dd-gradient-icon); }

.pillar-bento-card .pb-icon svg { width: 24px; height: 24px; }

.pillar-bento-card h3 { font-size: var(--font-size-lg); margin-bottom: var(--space-3); }
.pillar-bento-card p { font-size: var(--font-size-sm); color: var(--dd-muted); line-height: var(--line-height-relaxed); }

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
    .vision-content { grid-template-columns: 1fr; gap: var(--space-6); }
    .vision-text { text-align: center; }
    .vision-video { max-width: 600px; margin: 0 auto; }
}

@media (max-width: 768px) {
    .pillars-bento { grid-template-columns: 1fr; }
}