/* =================================================
   AI4CALL Home — News Cards Section
   API REST + Widget sito web
   Tutto scoped sotto .n2-news per evitare leak globali
   ================================================= */

.n2-news{
    position:relative;
    padding:80px 0;
    background:#08080f;
}
.n2-news .container{position:relative;z-index:1}

.n2-news-header{text-align:center;margin-bottom:48px}
.n2-news-label{
    display:inline-flex;align-items:center;gap:8px;
    background:rgba(255,0,0,0.15);
    border:1px solid rgba(255,0,0,0.35);
    color:#ff4444;
    padding:6px 16px;border-radius:50px;
    font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
    margin-bottom:16px;
}
.n2-news-label .n2-dot{
    width:8px;height:8px;border-radius:50%;
    background:#ff4444;
    animation:n2NewsPulse 1.5s infinite;
}
@keyframes n2NewsPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(255,68,68,0.7)}
    50%{box-shadow:0 0 0 8px rgba(255,68,68,0)}
}
.n2-news-header h2{
    font-family:var(--font-display, 'Sora', sans-serif);
    font-size:clamp(28px, 4vw, 40px);
    font-weight:800;color:#fff;
    margin:0 0 12px;letter-spacing:-0.01em;
}
.n2-news-header p{
    color:#b0b0c0;font-size:17px;
    max-width:680px;margin:0 auto;
}

.n2-stack{display:flex;flex-direction:column;gap:32px;max-width:1100px;margin:0 auto}

.n2-card{
    display:grid;grid-template-columns:1.15fr 1fr;gap:48px;
    align-items:center;
    background:#11111d;
    border:1px solid rgba(255,255,255,0.08);
    border-top:3px solid #ff0000;
    border-radius:20px;
    padding:48px;
    box-shadow:0 16px 50px rgba(0,0,0,0.4);
    transition:transform .3s, border-color .3s;
}
.n2-card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,0,0,0.35);
    border-top-color:#ff4444;
}

.n2-card .n2-badge{
    display:inline-block;
    background:linear-gradient(135deg, #ff0000, #cc0000);
    color:#fff;font-size:11px;font-weight:800;
    padding:5px 12px;border-radius:6px;
    letter-spacing:1.5px;text-transform:uppercase;
    box-shadow:0 4px 16px rgba(255,0,0,0.4);
    margin-bottom:14px;
}
.n2-card .n2-eyebrow{
    color:#ff6666;font-size:12px;font-weight:700;
    letter-spacing:2px;text-transform:uppercase;
    margin:0 0 8px;
}
.n2-card h3{
    font-family:var(--font-display, 'Sora', sans-serif);
    font-size:clamp(22px, 2.4vw, 30px);font-weight:800;
    color:#fff;
    margin:0 0 14px;letter-spacing:-0.01em;line-height:1.2;
}
.n2-card .n2-subtitle{
    color:#b0b0c0;
    font-size:16px;line-height:1.6;
    margin:0 0 24px;
}

.n2-card ul.n2-feats{
    list-style:none;padding:0;margin:0 0 32px;
    display:flex;flex-direction:column;gap:14px;
}
.n2-card ul.n2-feats li{
    display:flex;gap:12px;align-items:flex-start;
    color:#b0b0c0;font-size:14.5px;line-height:1.5;
    margin:0;padding:0;
}
.n2-card ul.n2-feats li .n2-icon{
    flex-shrink:0;
    width:32px;height:32px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg, rgba(255,0,0,0.18), rgba(255,0,0,0.05));
    border:1px solid rgba(255,0,0,0.3);
    border-radius:8px;font-size:16px;
    line-height:1;
}
.n2-card ul.n2-feats li strong{
    color:#fff;font-weight:700;
    display:block;margin-bottom:2px;font-size:15px;
}

.n2-ctas{display:flex;gap:14px;flex-wrap:wrap;margin:0}
.n2-cta-primary{
    display:inline-flex;align-items:center;gap:8px;
    background:linear-gradient(135deg, #ff0000, #cc0000);
    color:#fff !important;font-weight:700;font-size:14.5px;
    padding:13px 26px;border-radius:50px;
    text-decoration:none;
    box-shadow:0 8px 24px rgba(255,0,0,0.35);
    transition:transform .2s, box-shadow .2s;
}
.n2-cta-primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(255,0,0,0.5);color:#fff !important}
.n2-cta-primary svg{width:16px;height:16px}
.n2-cta-secondary{
    display:inline-flex;align-items:center;gap:8px;
    color:#fff !important;font-weight:600;font-size:14px;
    padding:13px 22px;border-radius:50px;
    border:1px solid rgba(255,255,255,0.18);
    background:rgba(255,255,255,0.03);
    text-decoration:none;
    transition:all .2s;
}
.n2-cta-secondary:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.3);color:#fff !important}

/* Visual right column */
.n2-visual{
    position:relative;
    display:flex;align-items:center;justify-content:center;
    min-height:220px;
}

/* Card 1 — code snippet (no <pre>, just <div> with <br>) */
.n2-snippet{
    background:#0a0a18;
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px;
    padding:48px 22px 22px;
    width:100%;
    font-family:'SF Mono','Monaco','Consolas',monospace;
    font-size:12.5px;line-height:1.7;
    color:#e0e0e0;
    box-shadow:0 16px 40px rgba(0,0,0,0.5);
    position:relative;
    overflow:hidden;
    word-break:break-all;
}
.n2-snippet .n2-dots{
    position:absolute;top:14px;left:14px;
    display:flex;gap:8px;
}
.n2-snippet .n2-dots i{
    display:block;width:10px;height:10px;border-radius:50%;
    background:#666;
}
.n2-snippet .n2-dots i:nth-child(1){background:#ff5f56}
.n2-snippet .n2-dots i:nth-child(2){background:#ffbd2e}
.n2-snippet .n2-dots i:nth-child(3){background:#27c93f}
.n2-snippet .n2-line{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.n2-snippet .n2-curl{color:#ff4444;font-weight:600}
.n2-snippet .n2-method{color:#7CD3FF}
.n2-snippet .n2-string{color:#A6E22E}
.n2-snippet .n2-key{color:#FFA657}
.n2-snippet .n2-indent{display:inline-block;width:14px}

/* Card 2 — buttons preview */
.n2-btns{
    display:flex;flex-direction:column;gap:18px;align-items:center;justify-content:center;
    width:100%;
}
.n2-fakebtn{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--font-display, 'Sora', sans-serif);
    font-weight:600;font-size:14.5px;
    cursor:default;pointer-events:none;
}
.n2-fakebtn svg{width:18px;height:18px;flex-shrink:0}
.n2-fakebtn.bp-pill{padding:11px 22px;border-radius:50px;background:#e2241c;color:#fff;box-shadow:0 8px 28px rgba(226,36,28,0.4)}
.n2-fakebtn.bp-neon{padding:11px 22px;border-radius:50px;background:transparent;border:2px solid #2ecc71;color:#2ecc71;box-shadow:0 0 12px rgba(46,204,113,0.5),inset 0 0 8px rgba(46,204,113,0.2);text-shadow:0 0 6px rgba(46,204,113,0.6)}
.n2-fakebtn.bp-gradient{padding:13px 26px;border-radius:50px;background:linear-gradient(135deg,#3498db,#3498dbcc);color:#fff;font-weight:700;box-shadow:0 12px 32px rgba(52,152,219,0.4);letter-spacing:.5px}

/* Responsive */
@media(max-width:900px){
    .n2-card{grid-template-columns:1fr;gap:32px;padding:32px}
    .n2-visual{min-height:180px}
    .n2-news{padding:60px 0}
    .n2-snippet{font-size:11px}
}
@media(max-width:480px){
    .n2-card{padding:24px}
}