/* Insights sections (Instagram .section-3 = light, TikTok .section-5 = dark) */
.insights {
    position: relative;
    z-index: 20; /* below section 2 so its gift overlaps this section */
    background: #fff;
    min-height: 100vh;
    padding: 6vw 4vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    color: #111;
    --accent: #e02a2a;
}

/* two columns: audience numbers on the left, charts on the right */
.ins-wrap {
    position: relative;
    width: 100%;
    max-width: min(1380px, 92vw);
    display: grid;
    grid-template-columns: 1fr 1.08fr;
    gap: 4.5vw;
    align-items: center;
}

/* ---------- left column ---------- */
.ins-info { display: flex; flex-direction: column; gap: 2.6vw; }

.ins-head { display: flex; align-items: center; gap: 1.6vw; }
.ins-logo {
    flex: none;
    width: clamp(70px, 8.4vw, 140px);
    height: clamp(70px, 8.4vw, 140px);
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.1;
}
.ins-logo .dotf, .ins-logo .fillp { fill: var(--accent); stroke: none; }
.insights-title .platform {
    font-size: clamp(18px, 1.9vw, 32px);
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1;
}
.insights-title h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: clamp(64px, 7.6vw, 130px);
    line-height: 0.84;
    letter-spacing: 0.01em;
    margin: 0.06em 0 0.04em;
}
.insights-title .handle {
    font-size: clamp(13px, 1.25vw, 21px);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.ins-label {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: clamp(30px, 3.1vw, 54px);
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--accent);
    margin-bottom: 1.1vw;
}

.stat { display: flex; flex-direction: column; justify-content: center; gap: 0.3vw; }
.stat strong {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: clamp(40px, 4.4vw, 76px);
    line-height: 0.9;
    letter-spacing: 0.01em;
}
.stat span { font-size: clamp(12px, 1.05vw, 17px); font-weight: 500; line-height: 1.3; opacity: 0.85; }

/* 2 x 2 grid with a cross of hairlines, like a scoreboard */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; }
.stat-grid .stat { padding: 1.3vw 1.6vw; }
.stat-grid .stat:nth-child(odd)  { border-right: 1px solid rgba(17, 17, 17, 0.16); padding-left: 0; }
.stat-grid .stat:nth-child(-n+2) { border-bottom: 1px solid rgba(17, 17, 17, 0.16); }

.stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-radius: 1.4vw;
    background: #f5f5f5;
    padding: 1.3vw 0.4vw;
}
.stat-row.two { grid-template-columns: repeat(2, 1fr); }
.stat-row .stat { padding: 0 1.2vw; text-align: center; }
.stat-row .stat + .stat { border-left: 1px solid rgba(17, 17, 17, 0.12); }
.stat-row .stat strong { font-size: clamp(30px, 3vw, 52px); color: var(--accent); }

.ins-foot { font-size: clamp(11px, 0.85vw, 14px); opacity: 0.55; letter-spacing: 0.02em; }

/* ---------- right column: chart cards (light, airy) ---------- */
.ins-cards { display: flex; flex-direction: column; gap: 1vw; }

.card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 1.4vw;
    padding: 1.5vw 1.8vw 1.6vw;
    box-shadow: 0 0.8vw 2.4vw rgba(17, 17, 17, 0.05);
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 1vw; }
.card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(11px, 0.85vw, 14px);
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #8a8a8a;
    margin-bottom: 1vw;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; }

.tabs { display: inline-flex; gap: 2px; margin-bottom: 1vw; padding: 3px; border-radius: 999px; background: #f2f2f2; }
.tab {
    font: 600 clamp(10px, 0.72vw, 12px) 'Inter', sans-serif;
    letter-spacing: 0.06em;
    padding: 0.5em 1.1em;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: #8a8a8a;
    cursor: pointer;
    transition: background .25s, color .25s;
}
.tab:hover { color: #111; }
.tab.active { background: #fff; color: #111; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }

.bars { display: flex; flex-direction: column; gap: 0.75vw; }
.bar-row {
    display: grid;
    grid-template-columns: 9.5vw 1fr 3.6vw;
    align-items: center;
    gap: 1vw;
}
.bar-label { font-size: clamp(11px, 0.9vw, 15px); font-weight: 500; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { height: clamp(6px, 0.5vw, 9px); border-radius: 999px; background: #f0f0f0; overflow: hidden; }
.bar-fill { height: 100%; width: 0; border-radius: 999px; background: var(--accent); }
.bar-val { font-size: clamp(11px, 0.9vw, 15px); font-weight: 600; color: #111; text-align: right; font-variant-numeric: tabular-nums; }

/* gender: legend on the left, thin donut on the right */
.gender-body { display: flex; align-items: center; justify-content: space-between; gap: 2vw; }
.gender-stats { flex: 1; display: flex; flex-direction: column; gap: 0.7vw; max-width: 22vw; }
.gender-stat { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.7vw; }
.gender-stat i { width: 10px; height: 10px; border-radius: 50%; }
.gender-stat span { font-size: clamp(12px, 0.95vw, 16px); font-weight: 500; color: #333; }
.gender-stat strong { font-size: clamp(14px, 1.2vw, 20px); font-weight: 600; color: #111; font-variant-numeric: tabular-nums; }
.gender-stat.women i { background: var(--accent); }
.gender-stat.men i { background: #1d1d1d; }
.gender-stat.other i { background: #c9c9c9; }
.donut { position: relative; flex: none; width: clamp(96px, 8.4vw, 150px); aspect-ratio: 1; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 22; }
.donut-base { stroke: var(--accent); }                            /* women */
.donut-men { stroke: #1d1d1d; stroke-dasharray: 0 490; }
.donut-other { stroke: #c9c9c9; stroke-dasharray: 0 490; }

@media (max-width: 900px) {
    .insights { min-height: 0; padding: 60px 18px 68px; }
    .ins-wrap { grid-template-columns: 1fr; gap: 40px; }
    .ins-info { gap: 30px; }
    .ins-head { gap: 16px; }
    .ins-logo { width: 22vw; height: 22vw; }
    .insights-title .platform { font-size: 5.2vw; }
    .insights-title h2 { font-size: 19vw; }
    .insights-title .handle { font-size: 4vw; }
    .ins-label { font-size: 9vw; margin-bottom: 10px; }
    .stat { gap: 4px; }
    .stat strong { font-size: 12vw; }
    .stat span { font-size: 3.5vw; }
    .stat-grid .stat { padding: 16px 0 16px 18px; }
    .stat-grid .stat:nth-child(odd) { padding-left: 0; }
    .stat-row { border-radius: 18px; padding: 16px 4px; }
    .stat-row .stat { padding: 0 8px; }
    .stat-row .stat strong { font-size: 8.5vw; }
    .stat-row .stat span { font-size: 3vw; }
    .ins-foot { font-size: 11px; }

    .ins-cards { gap: 14px; }
    .card { border-radius: 18px; padding: 18px 18px 20px; }
    .card-title { font-size: 11px; margin-bottom: 14px; }
    .tabs { margin-bottom: 14px; }
    .tab { font-size: 11px; }
    .bars { gap: 12px; }
    .bar-row { grid-template-columns: 30vw 1fr 13vw; gap: 10px; }
    .bar-label, .bar-val { font-size: 13px; }
    .bar-track { height: 7px; }
    .gender-body { gap: 18px; }
    .gender-stats { gap: 10px; max-width: none; }
    .gender-stat { gap: 10px; }
    .gender-stat span { font-size: 14px; }
    .gender-stat strong { font-size: 16px; }
    .donut { width: 28vw; }
}