/* ── Programmatic Section ── */
.programmatic-section {
    background: #000;
    padding: 60px 40px 120px;
    position: relative;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.programmatic-section.prog-visible {
    opacity: 1;
    transform: translateY(0);
}

.prog-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

@keyframes billboardSpin {
    0%   { transform: perspective(1200px) rotateY(0deg); }
    100% { transform: perspective(1200px) rotateY(360deg); }
}

/* ── Billboard wrapper ── */
.prog-billboard-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* ── Billboard container (static) ── */
.prog-billboard {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 40px 36px 36px;
    border-radius: 18px;
}

/* ── Spinning frame only ── */
.prog-frame {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    animation: billboardSpin 8s linear infinite;
    pointer-events: none;
}

.prog-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    padding: 4px;
    background: linear-gradient(135deg, #e91e8c 0%, #e60000 55%, #ff6600 100%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* ── Icons row ── */
.prog-icons {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 48px;
}

.prog-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Title & subtitle ── */
.prog-content {
    text-align: center;
}

.prog-title {
    font-family: 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(32px, 4vw, 56px);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -1px;
    margin: 0 0 14px;
    line-height: 1;
}

.prog-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(18px, 2.5vw, 26px);
    font-style: italic;
    font-weight: 400;
    background: linear-gradient(90deg, #e91e8c 0%, #e60000 50%, #ff6600 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

@keyframes billboardSpin {
    0%   { transform: perspective(1200px) rotateY(0deg); }
    100% { transform: perspective(1200px) rotateY(360deg); }
}

/* ── Billboard wrapper (frame + pole connected) ── */
.prog-billboard-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    perspective: 1200px;
}

/* ── Billboard pole ── */
.prog-pole {
    margin-top: -2px;
    width: 6px;
    height: 60px;
    background: linear-gradient(180deg, #e91e8c 0%, #e60000 100%);
    border-radius: 2px;
    margin: 0 auto;
}

/* ── Know more button ── */
.prog-footer {
    display: flex;
    justify-content: center;
    margin-top: 0;
}

/* ── Laptop cursor animation ── */
@keyframes progDrift {
    0%   { transform: translate(0,   0);   }
    25%  { transform: translate(8px, -6px); }
    50%  { transform: translate(14px, 4px); }
    75%  { transform: translate(4px,  10px); }
    100% { transform: translate(0,   0);   }
}
@keyframes progClick {
    0%,100% { opacity: 0; r: 0;  }
    55%     { opacity: .6; r: 6; }
    70%     { opacity: 0; r: 9;  }
}
.prog-cursor { animation: progDrift 3.2s ease-in-out infinite; }
.prog-click  { animation: progClick 3.2s ease-in-out infinite; }

/* ── Phone screen lines ── */
@keyframes progL1 { 0%,4%{width:0}24%,94%{width:34px}100%{width:0} }
@keyframes progL2 { 0%,11%{width:0}31%,94%{width:26px}100%{width:0} }
@keyframes progL3 { 0%,18%{width:0}38%,94%{width:32px}100%{width:0} }
@keyframes progL4 { 0%,25%{width:0}45%,94%{width:22px}100%{width:0} }
@keyframes progL5 { 0%,32%{width:0}52%,94%{width:30px}100%{width:0} }
.prog-l1 { animation: progL1 4s ease-out infinite; }
.prog-l2 { animation: progL2 4s ease-out infinite; }
.prog-l3 { animation: progL3 4s ease-out infinite; }
.prog-l4 { animation: progL4 4s ease-out infinite; }
.prog-l5 { animation: progL5 4s ease-out infinite; }

/* ── Phone decorative dots ── */
@keyframes progDp  { 0%,100%{opacity:.5}50%{opacity:1} }
@keyframes progDp2 { 0%,100%{opacity:.5}50%{opacity:1} }
@keyframes progDp3 { 0%,100%{opacity:.5}50%{opacity:1} }
.prog-d1 { animation: progDp  2.4s ease-in-out infinite 0s;   }
.prog-d2 { animation: progDp2 2.4s ease-in-out infinite .7s;  }
.prog-d3 { animation: progDp3 2.4s ease-in-out infinite 1.3s; }

/* ── Phone card nudge ── */
@keyframes progNudge { 0%,70%,100%{transform:translateX(0)}83%{transform:translateX(5px)} }
.prog-card { animation: progNudge 4s ease-in-out infinite; }

/* ── TV remote float ── */
@keyframes progFloat { 0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)} }
.prog-remote { animation: progFloat 2.6s ease-in-out infinite; }

/* ── TV WiFi arcs ── */
@keyframes progW1 { 0%,78%,100%{opacity:0}15%,55%{opacity:1} }
@keyframes progW2 { 0%,82%,100%{opacity:0}26%,60%{opacity:1} }
@keyframes progW3 { 0%,86%,100%{opacity:0}37%,65%{opacity:1} }
.prog-w1 { animation: progW1 2.6s ease-in-out infinite; }
.prog-w2 { animation: progW2 2.6s ease-in-out infinite; }
.prog-w3 { animation: progW3 2.6s ease-in-out infinite; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .programmatic-section { padding: 120px 16px; }

    .prog-icons {
        gap: 24px;
    }

    .prog-icon svg {
        transform: scale(0.75);
        transform-origin: center bottom;
    }

    .prog-footer {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .prog-icons { gap: 12px; }
    .prog-icon svg { transform: scale(0.6); }
}