/* ============================================================
   Hero -> Breaking News: sfondo unico continuo, effetto "wow".
   Additivo, sovrascrive style.css. Reversibile: basta togliere il <link>.
   ============================================================ */

/* ---------- Contenuti Quill: neutralizza sfondi bianchi incollati inline ----------
   Alcuni contenuti incollati nell'editor portano uno style inline con sfondo bianco
   (copiato da Word/altre pagine). Invece di ripulire ogni contenuto o intervenire
   nell'editor, forziamo qui il reset: qualunque elemento con uno sfondo bianco/quasi
   bianco inline diventa trasparente, ovunque nel sito. */
[style*="background-color: rgb(255, 255, 255)"],
[style*="background-color:rgb(255,255,255)"],
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background-color: #FFF"],
[style*="background-color:#FFF"],
[style*="background-color: #ffffff"],
[style*="background-color:#ffffff"],
[style*="background-color: #FFFFFF"],
[style*="background-color:#FFFFFF"],
[style*="background-color: white"],
[style*="background-color:white"],
[style*="background: rgb(255, 255, 255)"],
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background: white"],
[style*="background:white"] {
    background-color: transparent !important;
}

/* ---------- Hero: overlay a gradiente che si fonde nel colore del blocco successivo ---------- */
#hero-webgl.tc-header-style2 {
    position: relative;
    z-index: 1;
}

#hero-webgl.tc-header-style2::after {
    background: linear-gradient(180deg,
        rgba(3, 14, 9, .55) 0%,
        rgba(6, 10, 18, .55) 55%,
        #161225 100%) !important;
    opacity: 1 !important;
}

/* la navbar sticky sta sopra, sfondo scuro-trasparente: qui l'hero si vede sotto il vetro
   (non tocchiamo "position" qui: deve restare "sticky" da navbar-enhance.css su ogni pagina/stato
   tranne quando l'overlay hero è attivo, gestito sotto).
   z-index basso SOLO quando la navbar è ancora sovrapposta all'hero (posizione "absolute", non
   ancora scrollata): in quel momento non c'è altro contenuto di pagina sotto, quindi va bene stare
   appena sopra il canvas dell'hero. ATTENZIONE: "ds-hero-active" resta sul body per tutta la durata
   del pannello Blog (non solo mentre l'hero è a schermo: non viene rimossa scrollando), quindi UNA
   VOLTA scrollata (classe "nav-scrolled", navbar diventata "fixed" e ancorata in alto) lo z-index
   deve tornare a 1030 come nelle altre pagine, altrimenti il contenuto sotto (es. i badge ".num"
   z-index:2 della sezione "Post in tendenza") pareggia lo z-index e, essendo dopo nel DOM, ci
   finisce sopra: navbar coperta e link non cliccabili. */
body.ds-home-hero.ds-hero-active .navbar-container {
    z-index: 2;
}

body.ds-home-hero.ds-hero-active .navbar-container.nav-scrolled {
    z-index: 1030;
}

/* ---------- Grafica decorativa a destra della navbar: solo il frammento destro dell'immagine,
   ancorato a destra, MAI esteso/scalato su tutta la larghezza (per restare performante: nessuno
   scaling continuo, il browser dipinge l'immagine alla sua dimensione naturale). ---------- */
.navbar-container {
    background-image: url('/img/nav/navbar-bg-right.png') !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    background-size: auto 100% !important;
}

.navbar-container.nav-scrolled {
    background-image: url('/img/nav/navbar-bg-right.png') !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    background-size: auto 100% !important;
}

/* ---------- Home: la navbar galleggia sopra l'hero-webgl SOLO quando il pannello hero è attivo.
   Su ogni altro stato (es. pannello Cyber Attack Map) la navbar resta sticky normale, in flusso,
   cosi il contenuto sotto si aggancia subito senza margini fissi indovinati. ---------- */
body.ds-home-hero.ds-hero-active .navbar-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
}

body.ds-home-hero.ds-hero-active .navbar-container.nav-scrolled {
    position: fixed;
    background-color: rgba(10, 14, 22, .82) !important;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .35);
}

body.ds-home-hero.ds-hero-active #hero-webgl.tc-header-style2 {
    padding-top: 210px !important;
}

body.ds-home-hero.ds-hero-active .tc-header-style2 .content .tc-header-slider2 {
    margin-top: 60px;
}

@media (max-width: 991px) {
    body.ds-home-hero.ds-hero-active #hero-webgl.tc-header-style2 {
        padding-top: 260px !important;
    }
}

/* ---------- Breaking news: continuità visiva col gradiente dell'hero ---------- */
.tc-breaking-news-style2 {
    position: relative;
    background: linear-gradient(180deg, #161225 0%, #161225 100%);
}

.tc-breaking-news-style2::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 140px;
    background: linear-gradient(180deg, rgba(6, 10, 18, .0) 0%, #161225 100%);
    pointer-events: none;
}

/* ---------- Wow: comparsa contenuto hero ---------- */
@media (prefers-reduced-motion: no-preference) {
    #hero-webgl .content {
        animation: dsHeroIn .9s cubic-bezier(.2, .8, .2, 1) both;
    }
    @keyframes dsHeroIn {
        from { opacity: 0; transform: translateY(22px); }
        to { opacity: 1; transform: translateY(0); }
    }
}

/* ---------- Wow: titolo sezione con accento a gradiente animato ---------- */
.tc-breaking-news-style2 .section-title-style2 h3 {
    position: relative;
    display: inline-block;
}

.tc-breaking-news-style2 .section-title-style2 h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    height: 3px;
    width: 56px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--color-blue1, #2d8cff), #8b5cf6);
    background-size: 200% 200%;
    animation: dsAccentShift 4s ease infinite;
}

@keyframes dsAccentShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ---------- Wow: card breaking news con hover ad alto impatto ---------- */
.tc-breaking-news-style2 .card-breaking-style2 {
    border-radius: 16px;
    overflow: hidden;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}

.tc-breaking-news-style2 .card-breaking-style2:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(0, 0, 0, .45);
}

.tc-breaking-news-style2 .card-breaking-style2 .img,
.tc-breaking-news-style2 .card-breaking-style2 .img img {
    border-radius: 16px;
}

/* ============================================================
   Estensione "wow" a tutte le pagine pubbliche interne (stessa
   direzione grafica della home): header di pagina condiviso
   (_PageHeader.cshtml), titoli di sezione, card con hover.
   ============================================================ */

/* ---------- Header di pagina interne: stesso linguaggio grafico dell'hero home,
   ma leggero (niente canvas WebGL) — si applica a .tc-header-style2 ovunque TRANNE
   sull'hero della home (che ha id="hero-webgl" e il suo trattamento dedicato). ---------- */
.tc-header-style2:not(#hero-webgl) {
    position: relative;
    min-height: 260px;
    display: flex;
    align-items: center;
}

.tc-header-style2:not(#hero-webgl)::after {
    background: linear-gradient(135deg,
        rgba(3, 14, 9, .78) 0%,
        rgba(10, 14, 22, .78) 55%,
        rgba(45, 140, 255, .35) 100%) !important;
    opacity: 1 !important;
}

@media (prefers-reduced-motion: no-preference) {
    .tc-header-style2:not(#hero-webgl) .content {
        animation: dsHeroIn .8s cubic-bezier(.2, .8, .2, 1) both;
    }
}

.tc-header-style2:not(#hero-webgl) .slider-content .title {
    position: relative;
    display: inline-block;
    font-weight: 800;
    padding-bottom: 14px;
}

.tc-header-style2:not(#hero-webgl) .slider-content .title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 64px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--color-blue1, #2d8cff), #8b5cf6);
    background-size: 200% 200%;
    animation: dsAccentShift 4s ease infinite;
}

.tc-header-style2:not(#hero-webgl) .tags a {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: transform .25s ease, box-shadow .25s ease;
}

.tc-header-style2:not(#hero-webgl) .tags a:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(45, 140, 255, .30);
}

/* ---------- Titoli di sezione: accento a gradiente animato, ovunque nel sito ---------- */
.section-title-style2 h3 {
    position: relative;
    display: inline-block;
}

.section-title-style2 h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    height: 3px;
    width: 56px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--color-blue1, #2d8cff), #8b5cf6);
    background-size: 200% 200%;
    animation: dsAccentShift 4s ease infinite;
}

/* ---------- Card con hover ad alto impatto, ovunque nel sito ---------- */
.tc-post-grid-default .item,
.tc-post-overlay-default,
.card-item,
.tc-widget-recent-style2 .main-card,
.tc-widget-popular-list .item,
.tc-post-list-style2 .item {
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
    border-radius: 14px;
    overflow: hidden;
}

.tc-post-grid-default .item:hover,
.tc-post-overlay-default:hover,
.card-item:hover,
.tc-widget-recent-style2 .main-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 44px rgba(2, 12, 27, .16);
}

.dark-theme .tc-post-grid-default .item:hover,
.dark-theme .tc-post-overlay-default:hover,
.dark-theme .card-item:hover,
.dark-theme .tc-widget-recent-style2 .main-card:hover {
    box-shadow: 0 20px 44px rgba(0, 0, 0, .5);
}

/* ============================================================
   Card "next level" (tc-post-grid-default / card-item): superficie scura
   con bordo a doppio livello, accento a gradiente in cima, immagine in un
   frame con padding — così anche una cover a sfondo bianco resta sempre
   racchiusa e distinta dal resto della pagina, mai "a galleggiare".
   ============================================================ */
.tc-post-grid-default .item,
.card-item {
    position: relative;
    background: #12151f;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 14px 34px rgba(2, 12, 27, .14);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease;
}

.tc-post-grid-default .item::before,
.card-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3px;
    z-index: 2;
    background: linear-gradient(90deg, var(--color-blue1, #2d8cff), #8b5cf6, var(--color-blue1, #2d8cff));
    background-size: 200% 100%;
    opacity: 0;
    transition: opacity .3s ease;
}

.tc-post-grid-default .item:hover,
.card-item:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, .16);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 30px 60px rgba(0, 0, 0, .55);
}

.tc-post-grid-default .item:hover::before,
.card-item:hover::before {
    opacity: 1;
    animation: dsAccentShift 3s ease infinite;
}

/* Frame per l'immagine: padding + sfondo proprio, così una cover chiara resta sempre inquadrata */
.tc-post-grid-default .item .img,
.card-item .img {
    margin: 12px 12px 0;
    width: calc(100% - 24px);
    border-radius: 12px;
    background: #05070c;
    border: 1px solid rgba(255, 255, 255, .06);
    overflow: hidden;
}

.tc-post-grid-default .item .img img,
.card-item .img img {
    border-radius: 11px;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.tc-post-grid-default .item:hover .img img,
.card-item:hover .img img {
    transform: scale(1.06);
}

.tc-post-grid-default .item .content,
.card-item .info {
    padding: 20px 22px 24px;
}

.tc-post-grid-default .item .title,
.tc-post-grid-default .item .title a,
.card-item .title,
.card-item .title a {
    color: #f1f5f9;
}

.tc-post-grid-default .item .title a:hover,
.card-item .title a:hover {
    color: #7db6ff;
}

.tc-post-grid-default .item p,
.tc-post-grid-default .item .color-666,
.tc-post-grid-default .item .color-999,
.card-item p,
.card-item .color-666,
.card-item .color-999 {
    color: #9aa4b2 !important;
}

.tc-post-grid-default .item .meta-bot a,
.tc-post-grid-default .item .meta-bot li,
.card-item .meta-bot a,
.card-item .meta-bot li {
    color: #8b96a8;
}

.tc-post-grid-default .item .meta-bot a:hover,
.card-item .meta-bot a:hover {
    color: #cbd5e1;
}

/* ---------- Icona a sinistra nei titoli delle card (stesso stile dei link di navigazione/lista post) ---------- */
.tc-post-grid-default .item .title,
.tc-post-overlay-default .title,
.card-item .title,
.tc-post-list-style2 .item .title,
.tc-trends-news-slider2 .card-item .title,
.tc-new-posts-style2 .title {
    position: relative;
}

.tc-post-grid-default .item .title::before,
.tc-post-overlay-default .title::before,
.card-item .title::before,
.tc-post-list-style2 .item .title::before,
.tc-new-posts-style2 .title::before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 8px;
    vertical-align: -1px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--color-blue1, #2d8cff), #8b5cf6);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Scroll reveal: fade-up leggero all'ingresso in viewport (via JS in _Layout) ---------- */
@media (prefers-reduced-motion: no-preference) {
    .ds-reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1);
    }
    .ds-reveal.ds-inview {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Bottoni pillola con gradiente: hover coerente ovunque ---------- */
.ibt-btn.ibt-btn-outline:hover,
.ibt-btn.ibt-btn-outline-3:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(45, 140, 255, .25);
}

/* ============================================================
   Form pubblici: input/select/bottoni coerenti col tema scuro,
   niente più caselle bianche isolate. Non tocca l'admin (CSS
   separato). Stessa altezza (52px) per allineamento perfetto.
   ============================================================ */
body:not([class*="admin"]) .form-control,
body:not([class*="admin"]) .form-select {
    height: 52px;
    background: rgba(255, 255, 255, .05);
    border: 1.5px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    color: #e6edf3;
    padding: 0 18px;
    font-size: 15px;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

body:not([class*="admin"]) textarea.form-control {
    height: auto;
    padding: 14px 18px;
}

body:not([class*="admin"]) .form-control::placeholder {
    color: #8b96a8;
}

body:not([class*="admin"]) .form-control:focus,
body:not([class*="admin"]) .form-select:focus {
    background: rgba(255, 255, 255, .08);
    border-color: var(--color-blue1, #2d8cff);
    box-shadow: 0 0 0 4px rgba(45, 140, 255, .16);
    outline: none;
}

body:not([class*="admin"]) .form-select option {
    background: #12151f;
    color: #e6edf3;
}

/* ---------- Barra di ricerca/filtro (Blog e simili): stessa grafica della mega-search home ---------- */
.ds-filterbar {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
}

.ds-filterbar-field {
    flex: 1 1 260px;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    background: rgba(255, 255, 255, .05);
    border: 1.5px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    padding: 0 20px;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.ds-filterbar-field:focus-within {
    background: rgba(255, 255, 255, .08);
    border-color: var(--color-blue1, #2d8cff);
    box-shadow: 0 0 0 4px rgba(45, 140, 255, .16);
}

.ds-filterbar-field .ds-search-ic {
    width: 19px;
    height: 19px;
    color: #8b96a8;
    flex: 0 0 auto;
}

.ds-filterbar-field .form-control,
.ds-filterbar-field .form-select {
    height: 50px;
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 0;
}

.ds-filterbar-field .form-control:focus,
.ds-filterbar-field .form-select:focus {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.ds-filterbar-select {
    flex: 0 1 240px;
}

.ds-filterbar-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding: 0 28px;
    border: 0;
    cursor: pointer;
    border-radius: 999px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    font-size: 13px;
    color: #fff;
    background: linear-gradient(135deg, var(--color-blue1, #2d8cff), #8b5cf6);
    transition: transform .2s ease, box-shadow .2s ease;
}

.ds-filterbar-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(139, 92, 246, .40);
}

.ds-filterbar-btn svg { width: 16px; height: 16px; }

@media (max-width: 575px) {
    .ds-filterbar { flex-direction: column; }
    .ds-filterbar-field, .ds-filterbar-select, .ds-filterbar-btn { flex: 1 1 auto; width: 100%; }
}

/* ---------- Pulsanti primari pubblici: gradiente coerente col tema ---------- */
body:not([class*="admin"]) .btn-primary {
    background: linear-gradient(135deg, var(--color-blue1, #2d8cff), #8b5cf6);
    border: 0;
    transition: transform .2s ease, box-shadow .2s ease;
}

body:not([class*="admin"]) .btn-primary:hover,
body:not([class*="admin"]) .btn-primary:focus {
    background: linear-gradient(135deg, var(--color-blue1, #2d8cff), #8b5cf6);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(45, 140, 255, .30);
}

/* ---------- Bottoni outline pubblici: glass scuro, si riempiono di gradiente in hover/active ---------- */
body:not([class*="admin"]) .btn-outline-primary {
    color: #7db6ff;
    border-color: rgba(45, 140, 255, .45);
    background: rgba(45, 140, 255, .06);
}

body:not([class*="admin"]) .btn-outline-primary:hover,
body:not([class*="admin"]) .btn-outline-primary:focus {
    color: #fff;
    background: linear-gradient(135deg, var(--color-blue1, #2d8cff), #8b5cf6);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(45, 140, 255, .30);
}

body:not([class*="admin"]) .btn-outline-secondary {
    color: #cbd5e1;
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .03);
}

body:not([class*="admin"]) .btn-outline-secondary:hover,
body:not([class*="admin"]) .btn-outline-secondary:focus {
    color: #fff;
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .30);
    transform: translateY(-2px);
}

body:not([class*="admin"]) .btn.text-uppercase {
    border-radius: 999px !important;
    font-weight: 700;
    letter-spacing: .3px;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

/* ---------- Banner immagine full-width (ChiSiamo/Progetti): overlay a gradiente coerente con l'hero ---------- */
.chisiamo-banner,
.progetti-banner {
    position: relative;
}

.chisiamo-banner::after,
.progetti-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(3, 14, 9, .55) 0%,
        rgba(10, 14, 22, .45) 55%,
        rgba(45, 140, 255, .22) 100%);
    pointer-events: none;
}

/* ---------- Pagination: pillole scure con stato attivo a gradiente, ovunque nel sito ---------- */
body:not([class*="admin"]) .pagination {
    gap: 8px;
    flex-wrap: wrap;
}

body:not([class*="admin"]) .pagination .page-item .page-link {
    height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border-radius: 999px !important;
    border: 1.5px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    color: #cbd5e1;
    font-weight: 600;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

body:not([class*="admin"]) .pagination .page-item .page-link:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
    transform: translateY(-2px);
}

body:not([class*="admin"]) .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--color-blue1, #2d8cff), #8b5cf6);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 24px rgba(45, 140, 255, .30);
}

body:not([class*="admin"]) .pagination .page-item.disabled .page-link {
    opacity: .4;
}

/* ---------- Newsletter (tc-subscribe-style2): card moderna, niente input bianco ---------- */
.tc-subscribe-style2 {
    padding: 44px 40px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-top: 0;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(60% 140% at 0% 0%, rgba(45, 140, 255, .16), transparent 60%),
        radial-gradient(60% 140% at 100% 100%, rgba(139, 92, 246, .16), transparent 60%),
        #12151f;
    box-shadow: 0 24px 60px rgba(2, 12, 27, .25);
}

.dark-theme .tc-subscribe-style2 { background-color: #0d1117; }

.tc-subscribe-style2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-blue1, #2d8cff), #8b5cf6, var(--color-blue1, #2d8cff));
    background-size: 200% 100%;
    animation: dsAccentShift 5s ease infinite;
}

.tc-subscribe-style2 .sub-info h5 {
    font-size: 26px;
    color: #fff;
    font-weight: 800;
    letter-spacing: .2px;
}

.tc-subscribe-style2 .sub-form .form-group {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, .05);
    border: 1.5px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    padding: 6px 6px 6px 22px;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.tc-subscribe-style2 .sub-form .form-group:focus-within {
    border-color: var(--color-blue1, #2d8cff);
    box-shadow: 0 0 0 4px rgba(45, 140, 255, .16);
}

.tc-subscribe-style2 .sub-form .form-group .icon {
    position: static;
    display: inline-flex;
    color: #8ea2c2;
    font-size: 19px;
    margin-right: 10px;
}

.tc-subscribe-style2 .sub-form .form-group .form-control {
    flex: 1;
    min-width: 0;
    width: auto;
    height: 52px;
    background: transparent !important;
    border: 0 !important;
    color: #fff;
    padding: 0 10px !important;
    font-size: 15px;
}

.tc-subscribe-style2 .sub-form .form-group .form-control::placeholder {
    color: #93a0b4;
}

.tc-subscribe-style2 .sub-form .form-group button {
    position: static;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    cursor: pointer;
    border-radius: 999px;
    padding: 13px 26px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    font-size: 13px;
    color: #fff;
    background: linear-gradient(135deg, var(--color-blue1, #2d8cff), #8b5cf6);
    transition: transform .2s ease, box-shadow .2s ease;
}

.tc-subscribe-style2 .sub-form .form-group button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(139, 92, 246, .40);
}

.tc-subscribe-style2 .sub-form p a { color: #cbd5e1; }

@media (max-width: 767px) {
    .tc-subscribe-style2 { padding: 30px 22px; }
    .tc-subscribe-style2 .sub-form .form-group { flex-wrap: wrap; border-radius: 20px; padding: 14px 16px; }
    .tc-subscribe-style2 .sub-form .form-group .form-control { flex-basis: 100%; order: 1; margin: 8px 0; }
    .tc-subscribe-style2 .sub-form .form-group .icon { order: 0; }
    .tc-subscribe-style2 .sub-form .form-group button { order: 2; width: 100%; justify-content: center; }
}

/* ---------- Post in tendenza: card con icona fiamma sul badge numero ---------- */
.ds-trend-card .img .num {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 800;
}

.ds-trend-card .img .num i {
    color: #ff7a45;
    font-size: 15px;
}

.ds-trend-card {
    border-radius: 14px;
    overflow: hidden;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}

.ds-trend-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 44px rgba(2, 12, 27, .18);
}

.dark-theme .ds-trend-card:hover {
    box-shadow: 0 20px 44px rgba(0, 0, 0, .5);
}

/* ---------- Blocco unificato "Ultimi Contenuti": nav-pills superiori con icone ---------- */
.ds-unified-latest .tc-tabs-header .section-title-style2 {
    flex-wrap: wrap;
    gap: 16px 24px;
}

.ds-nav-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: rgba(120, 120, 120, .08);
    padding: 6px;
    border-radius: 999px;
}

.dark-theme .ds-nav-pills { background: rgba(255, 255, 255, .05); }

.ds-nav-pills .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .2px;
    color: #667085 !important;
    background: transparent !important;
    border: 0 !important;
    transition: color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.ds-nav-pills .nav-link i { font-size: 15px; }

.ds-nav-pills .nav-link:hover {
    color: var(--color-blue1, #2d8cff) !important;
}

.ds-nav-pills .nav-link.active {
    color: #fff !important;
    background: linear-gradient(135deg, var(--color-blue1, #2d8cff), #8b5cf6) !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(45, 140, 255, .30);
}

@media (max-width: 767px) {
    .ds-nav-pills { width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .ds-nav-pills .nav-link { white-space: nowrap; }
}

/* ---------- Mobile: stesso effetto wow, animazioni più contenute ---------- */
@media (max-width: 767px) {
    #hero-webgl.tc-header-style2::after {
        background: linear-gradient(180deg,
            rgba(3, 14, 9, .60) 0%,
            rgba(6, 10, 18, .60) 45%,
            #161225 100%) !important;
    }
    .tc-breaking-news-style2 .card-breaking-style2:hover {
        transform: translateY(-3px);
    }
}