/* ==========================================================================
   LANDING.CSS - NexusPrime VHost Landing Page Layout & Component Framework
   ========================================================================== */
:root {
    --section-bg: #e0e0e01f;
    --brand: #0e7490;
    --page: #ecfeff;
    --ink: #102a36;
    --muted: #5f7480;
    --line: #d4e5ea;
    --surface: #ffffff;
    --soft: #f2fbfc;
    --shadow: 0 28px 76px rgba(14, 116, 144, 0.15);
    --body:linear-gradient(180deg, rgba(255,255,255,0.82), rgba(236,254,255,0.95)),var(--page);
}




/* ====== 1. SYSTEM BASE & RESET ====== */
body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-color, #ffffff);
    color: var(--text-color, #111111);
    font-family: var(--font-main, 'Inter', sans-serif);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Pure CSS Fade-in to avoid JS dependencies and hidden content */
@keyframes nxFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nx-reveal {
    animation: nxFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.nx-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ====== 2. STRUCTURAL UTILITIES (BOOTSTRAP-STYLE) ====== */
.nx-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.nx-grid {
    display: grid;
    gap: 30px;
}

.nx-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.nx-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.nx-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}


/* Text alignment */
.nx-text--left {
    text-align: left;
}

.nx-text--center {
    text-align: center;
}

.nx-text--right {
    text-align: right;
}

.nx-text--justify {
    text-align: justify;
}

/* Helpers */
.nx-opacity-muted {
    opacity: 0.8;
}

.nx-section-fallback {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

/* ====== 3. GENERAL COMPONENTS ====== */
/* Buttons */
.nx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 30px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s, color 0.2s;
    font-size: 1rem;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.nx-btn--primary {
    background-color: var(--accent, #d4af37);
    color: #000000;
}

.nx-btn--primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.15);
}

.nx-btn--outline {
    background-color: transparent;
    border: 2px solid var(--text-color, #111111);
    color: var(--text-color, #111111);
}

.nx-btn--outline:hover {
    background-color: var(--text-color, #111111);
    color: var(--bg-color, #ffffff);
}

/* Cards */
.nx-card {
    background-color: rgba(128, 128, 128, 0.04);
    border: 1px solid rgba(128, 128, 128, 0.08);
    border-radius: 16px;
    padding: 30px;
    box-sizing: border-box;
    transition: transform 0.3s, border-color 0.3s;
}

.nx-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent, #d4af37);
}

/* ====== 4. BUILDER SECTIONS STRUCTURE ====== */

/* --- HERO VIDEO & IMAGE --- */
.nx-section--hero-video,
.nx-section--hero-image {
    position: relative;
    width: 100%;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 100px 20px;
    box-sizing: border-box;
    background-color: #000000;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.nx-section--hero-video__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.nx-section--hero-video__overlay,
.nx-section--hero-image__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.75) 100%);
    z-index: 2;
}

.nx-section--hero-video__content,
.nx-section--hero-image__content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 800px;
    color: #ffffff;
    padding: 0 20px;
}

.nx-section--hero-video__title,
.nx-section--hero-image__title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 20px 0;
}

.nx-section--hero-video__subtitle,
.nx-section--hero-image__subtitle {
    font-size: 1.3rem;
    opacity: 0.9;
    margin: 0 0 35px 0;
}

.nx-section--hero-video__btn,
.nx-section--hero-image__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent, #d4af37);
    color: #000000;
    padding: 14px 32px;
    border-radius: 30px;
    font-weight: 700;
    text-decoration: none;
    font-size: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.nx-section--hero-video__btn:hover,
.nx-section--hero-image__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* --- PRODUCT SHOWCASE --- */
.nx-section--product {
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
    box-sizing: border-box;
}

.nx-section--product__img-col,
.nx-section--product__txt-col {
    flex: 1;
}

.nx-section--product__img-col img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.nx-section--product--right {
    flex-direction: row-reverse;
}

.nx-section--product__title {
    font-size: 2.0rem;
    margin: 0 0 20px 0;
}

.nx-section--product__desc {
    font-size: 1.01rem;
    line-height: 1.7;
    opacity: 0.85;
}


/* --- TEXT BLOCK --- */
.nx-section--text {
    padding: 60px 20px;
    max-width: 900px;
    margin: 0 auto;
    box-sizing: border-box;
}

.nx-section--text__inner {
    line-height: 1.8;
    font-size: 1.15rem;
}

/* --- GALLERY --- */
.nx-section--gallery {
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.nx-section--gallery__title {
    text-align: center;
    font-size: 2.5rem;
    margin: 0 0 40px 0;
}

.nx-section--gallery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.nx-section--gallery__img {
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
    aspect-ratio: 4/3;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s;
}

.nx-section--gallery__img:hover {
    transform: scale(1.03);
}

/* --- DYNAMIC PRODUCTS & CAROUSEL --- */
.nx-section--products,
.nx-section--carousel {
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.nx-section--products__title,
.nx-section--carousel__title {
    text-align: center;
    font-size: 2.5rem;
    margin: 0 0 40px 0;
}

.nx-section--products__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 30px;
}

.nx-section--carousel__track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 15px;
}

.nx-product-card__empty {
    text-align: center;
    padding: 40px;
    grid-column: 1/-1;
    opacity: 0.6;
}

/* --- SOCIAL FOOTER --- */
.nx-section--social-footer {
    padding: 60px 20px;
    text-align: center;
    border-top: 1px solid rgba(128, 128, 128, 0.1);
}

.nx-section--social-footer__title {
    font-size: 1.6rem;
    margin: 0 0 20px 0;
}

.nx-social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.nx-social-links__link {
    color: var(--text-color, #111111);
    opacity: 0.7;
    transition: color 0.2s, opacity 0.2s;
}

.nx-social-links__link:hover {
    opacity: 1;
    color: var(--accent, #d4af37);
}

.nx-social-links__icon {
    width: 24px;
    height: 24px;
}

.nx-social-links__empty {
    opacity: 0.5;
}

/* ====== SEZIONE 14: VIDEO EMBED ====== */
.nx-section--video {
    padding: 80px 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.nx-section--video__title {
    text-align: center;
    font-size: 2.2rem;
    margin: 0 0 30px 0;
}

.nx-section--video__wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.nx-section--video__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.nx-section--video__placeholder {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    opacity: 0.7;
}

/* --- VIDEO PURE --- */
.nx-section--video-pure {
    position: relative;
    width: 100%;
    background: #000000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.nx-section--video-pure__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.nx-section--video-pure--fullscreen-100vh {
    height: 100vh;
    min-height: 480px;
}

.nx-section--video-pure--16-9-standard {
    aspect-ratio: 16 / 9;
}

.nx-section--video-pure--21-9-cinema {
    aspect-ratio: 21 / 9;
}

.nx-section--video-pure--4-3 {
    aspect-ratio: 4 / 3;
}

.nx-section--video-pure--1-1-square {
    aspect-ratio: 1 / 1;
    max-height: 80vh;
}

.nx-section--video-pure__placeholder {
    padding: 80px 20px;
    text-align: center;
    color: #94a3b8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
}

.nx-section--video-pure__placeholder-icon {
    width: 48px;
    height: 48px;
    stroke-width: 1.5;
    color: var(--accent, #d4af37);
}

/* --- FORM & REGISTRATION --- */
.nx-section--form {
    padding: 40px 20px;
    max-width: 700px;
    margin: 0 auto;
    box-sizing: border-box;
}

.nx-section--form__title {
    text-align: center;
    font-size: 2.5rem;
    margin: 0 0 10px 0;
}

.nx-section--form__subtitle {
    text-align: center;
    font-size: 1.15rem;
    opacity: 0.8;
    margin: 0 0 40px 0;
}

.nx-form {
    background-color: rgba(128, 128, 128, 0.03);
    border: 1px solid rgba(128, 128, 128, 0.1);
    padding: 40px;
    border-radius: 20px;
}

.nx-form__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.nx-form__col-1 {
    grid-column: span 1;
}

.nx-form__col-2 {
    grid-column: span 2;
}

.nx-form__label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 6px;
    opacity: 0.8;
}

.nx-form__input {
    width: 100%;
    padding: 14px;
    box-sizing: border-box;
    background-color: rgba(128, 128, 128, 0.05);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 8px;
    color: var(--text-color, #111111);
    font-size: 1rem;
    transition: border-color 0.2s;
}

.nx-form__input:focus {
    outline: none;
    border-color: var(--accent, #d4af37);
}

.nx-form__submit {
    width: 100%;
    background-color: var(--accent, #d4af37);
    color: #000000;
    border: none;
    padding: 16px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s;
}

.nx-form__submit:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.nx-form-response {
    margin-top: 15px;
    text-align: center;
    display: none;
    font-weight: 600;
}


/* --- STATS COUNTER --- */
.nx-section--stats {
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.nx-section--stats__title {
    text-align: center;
    font-size: 2.5rem;
    margin: 0 0 40px 0;
}

.nx-section--stats__grid {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
    justify-content: center;
}

.nx-stat-item {
    text-align: center;
    min-width: 180px;
    padding: 30px 20px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
}

.nx-stat-item__num {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--accent, #d4af37);
    display: block;
    line-height: 1.1;
    margin-bottom: 10px;
}

.nx-stat-item__label {
    font-size: 1rem;
    opacity: 0.7;
}

/* --- TESTIMONIALS --- */
.nx-section--testimonials {
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.nx-section--testimonials__title {
    text-align: center;
    font-size: 2.5rem;
    margin: 0 0 40px 0;
}

.nx-section--testimonials__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.nx-testimonial-card {
    background-color: rgba(128, 128, 128, 0.04);
    border: 1px solid rgba(128, 128, 128, 0.1);
    border-radius: 16px;
    padding: 35px 30px;
    box-sizing: border-box;
}

.nx-testimonial-card__text {
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0 0 20px 0;
    opacity: 0.95;
}

.nx-testimonial-card__name {
    font-weight: 700;
    display: block;
    font-size: 1.05rem;
}

.nx-testimonial-card__role {
    display: block;
    opacity: 0.6;
    font-size: 0.85rem;
}

/* --- CONTACTS & MAP --- */
.nx-section--contacts {
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.nx-section--contacts__title {
    text-align: center;
    font-size: 2.5rem;
    margin: 0 0 50px 0;
}

.nx-section--contacts__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.nx-contact-geo-tag {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    font-weight: 700;
    color: var(--accent, #d4af37);
    margin-bottom: 25px;
    font-size: 1.1rem;
}

.nx-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.nx-contact-row--last {
    margin-bottom: 30px;
}

.nx-contact-row__icon {
    color: var(--accent, #d4af37);
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

.nx-contact-row__link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.nx-contact-row__link:hover {
    color: var(--accent, #d4af37);
}

.nx-contact-hours {
    background-color: rgba(128, 128, 128, 0.03);
    border: 1px dashed rgba(128, 128, 128, 0.15);
    padding: 25px;
    border-radius: 12px;
    margin-top: 30px;
}

.nx-contact-hours__title {
    margin: 0 0 12px 0;
    font-size: 1.2rem;
    color: var(--accent, #d4af37);
}

.nx-contact-hours__line {
    display: block;
    margin-bottom: 8px;
    font-size: 0.95rem;
    opacity: 0.85;
}

.nx-contact-map__iframe {
    width: 100%;
    height: 350px;
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.nx-contact-map__placeholder {
    background-color: rgba(128, 128, 128, 0.04);
    border: 1px dashed rgba(128, 128, 128, 0.15);
    border-radius: 12px;
    padding: 80px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: #94a3b8;
}

.nx-contact-map__placeholder-icon {
    width: 48px;
    height: 48px;
    color: var(--accent, #d4af37);
}


/* --- TEAM MEMBERS --- */
.nx-section--team {
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.nx-section--team__title {
    text-align: center;
    font-size: 2.5rem;
    margin: 0 0 45px 0;
}

.nx-section--team__grid {
    display: flex;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
}

.nx-team-member {
    text-align: center;
    min-width: 200px;
}

.nx-team-member__avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    margin: 0 auto 20px;
    background-color: rgba(128, 128, 128, 0.1);
    border: 3px solid var(--accent, #d4af37);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.nx-team-member__name {
    display: block;
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 5px;
}

.nx-team-member__role {
    display: block;
    opacity: 0.6;
    font-size: 0.9rem;
}

/* --- PRICING TABLES --- */
.nx-section--pricing {
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.nx-section--pricing__title {
    text-align: center;
    font-size: 2.5rem;
    margin: 0 0 45px 0;
}

.nx-section--pricing__grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    align-items: stretch;
}

.nx-pricing-card {
    flex: 1;
    min-width: 280px;
    max-width: 350px;
    background: rgba(128, 128, 128, 0.03);
    border: 1px solid rgba(128, 128, 128, 0.1);
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
    box-sizing: border-box;
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
}

.nx-pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.nx-pricing-card--featured {
    border-color: var(--accent, #d4af37);
    background: rgba(128, 128, 128, 0.06);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.nx-pricing-card__badge {
    background: var(--accent, #d4af37);
    color: #000000;
    display: inline-block;
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 20px;
    align-self: center;
}

.nx-pricing-card__name {
    font-size: 1.5rem;
    margin: 0 0 10px 0;
}

.nx-pricing-card__price {
    font-size: 2.8rem;
    font-weight: 800;
    display: block;
    margin-bottom: 25px;
    color: var(--accent, #d4af37);
}

.nx-pricing-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 35px 0;
    text-align: left;
    flex-grow: 1;
}

.nx-pricing-card__feature {
    padding: 10px 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.06);
    font-size: 0.95rem;
}

.nx-pricing-card__check {
    color: var(--accent, #d4af37);
    margin-right: 10px;
    font-weight: bold;
}

.nx-pricing-card__btn {
    width: 100%;
    background: var(--accent, #d4af37);
    color: #000000;
    border: none;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
}

.nx-pricing-card__btn:hover {
    transform: translateY(-1px);
}

/* --- GOOGLE REVIEWS --- */
.nx-section--google-reviews {
    padding: 90px 5%;
    box-sizing: border-box;
}

.nx-section--google-reviews__inner {
    max-width: 1100px;
    margin: 0 auto;
}

.nx-google-badge {
    text-align: center;
    margin-bottom: 40px;
}

.nx-google-badge__score {
    font-size: 3rem;
    font-weight: 800;
    display: block;
    line-height: 1;
}

.nx-google-badge__stars {
    color: #f59e0b;
    font-size: 1.8rem;
    margin: 10px 0;
}

.nx-google-badge__count {
    font-size: 0.95rem;
    opacity: 0.7;
}

.nx-section--google-reviews__title {
    text-align: center;
    font-size: 2.5rem;
    margin: 0 0 45px 0;
}

.nx-reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 45px;
}

.nx-review-card {
    background: rgba(128, 128, 128, 0.03);
    border: 1px solid rgba(128, 128, 128, 0.08);
    border-radius: 16px;
    padding: 30px 25px;
    box-sizing: border-box;
}

.nx-review-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.nx-review-card__stars {
    color: #f59e0b;
    font-size: 1.1rem;
}

.nx-review-card__source {
    font-size: 0.75rem;
    font-weight: 700;
    color: #10b981;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.nx-review-card__text {
    font-style: italic;
    margin: 0 0 20px 0;
    line-height: 1.6;
    opacity: 0.9;
}

.nx-review-card__author {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    border-top: 1px solid rgba(128, 128, 128, 0.06);
    padding-top: 15px;
}

.nx-review-card__name {
    font-weight: 700;
}

.nx-review-card__city {
    opacity: 0.6;
}

.nx-reviews-cta {
    text-align: center;
}

.nx-reviews-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent, #d4af37);
    color: #000000;
    padding: 14px 32px;
    border-radius: 30px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s;
}

.nx-reviews-cta__btn:hover {
    transform: translateY(-2px);
}

/* --- COUNTDOWN --- */
.nx-section--countdown {
    padding: 80px 20px;
    max-width: 800px;
    margin: 0 auto;
    box-sizing: border-box;
}

.nx-section--countdown__title {
    text-align: center;
    font-size: 2.5rem;
    margin: 0 0 40px 0;
}

.nx-section--countdown__blocks {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.nx-countdown-block {
    text-align: center;
    min-width: 100px;
    background: rgba(128, 128, 128, 0.04);
    border: 1px solid rgba(128, 128, 128, 0.08);
    padding: 20px 10px;
    border-radius: 12px;
}

.nx-countdown-block__num {
    font-size: 3rem;
    font-weight: 800;
    display: block;
    line-height: 1.1;
    color: var(--accent, #d4af37);
    margin-bottom: 5px;
}

.nx-countdown-block__label {
    font-size: 0.85rem;
    opacity: 0.6;
    text-transform: uppercase;
}

/* --- CTA BANNER --- */
.nx-section--cta {
    padding: 90px 20px;
    text-align: center;
    box-sizing: border-box;
    background-color: var(--section-bg, rgba(128, 128, 128, 0.02));
}

.nx-section--cta__title {
    font-size: 2.8rem;
    font-weight: 800;
    margin: 0 0 15px 0;
    color: var(--accent);
}

.nx-section--cta__subtitle {
    font-size: 1.25rem;
    opacity: 0.8;
    max-width: 700px;
    margin: 0 auto 35px auto;
}

.nx-section--cta__btn {
    display: inline-flex;
    align-items: center;
    background: var(--accent, #d4af37);
    color: #000000;
    padding: 15px 36px;
    border-radius: 30px;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.05rem;
    transition: transform 0.2s;
}

.nx-section--cta__btn:hover {
    transform: translateY(-2px);
}


/* ====== SEZIONE PROGRAMMA AFFILIATI & REFERRAL ====== */
.nx-section--affiliate {
    padding: 90px 5%;
    background: var(--bg-color, #090a16);
    color: var(--text-color, #ffffff);
    text-align: center;
    box-sizing: border-box;
}

.nx-section--affiliate__inner {
    max-width: 1100px;
    margin: 0 auto;
}

.nx-section--affiliate__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(56, 189, 248, 0.12);
    color: var(--accent, #38bdf8);
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.nx-section--affiliate__title {
    font-size: 2.8rem;
    font-weight: 800;
    margin: 0 0 15px 0;
    color: var(--text-color, #ffffff);
}

.nx-section--affiliate__subtitle {
    font-size: 1.15rem;
    opacity: 0.85;
    max-width: 750px;
    margin: 0 auto 50px auto;
    line-height: 1.6;
}

.nx-affiliate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 45px;
}

.nx-affiliate-card {
    background: rgb(3 169 244 / 12%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    position: relative;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.nx-affiliate-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent, #38bdf8);
}

.nx-affiliate-card__badge {
    display: inline-block;
    background: var(--accent, #38bdf8);
    color: #000000;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 12px;
    margin-bottom: 15px;
}

.nx-affiliate-card__title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 10px 0;
}

.nx-affiliate-card__desc {
    font-size: 0.92rem;
    opacity: 0.8;
    margin: 0;
    line-height: 1.5;
}

.nx-affiliate-box {
    background: rgb(3 169 244 / 11%);
    border: 1px dashed var(--accent, #38bdf8);
    border-radius: 14px;
    padding: 20px;
    max-width: 650px;
    margin: 0 auto 35px auto;
    text-align: left;
}

.nx-affiliate-box__label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 10px;
    opacity: 0.9;
}

.nx-affiliate-box__row {
    display: flex;
    gap: 10px;
}

.nx-affiliate-box__input {
    flex: 1;
    background: rgb(255 255 255 / 42%);
    border: 1px solid rgb(255 255 255 / 69%);
    color: inherit;
    padding: 12px 16px;
    border-radius: 8px;
    font-family: monospace;
    font-size: 0.9rem;
}

.nx-affiliate-box__btn {
    background: var(--accent, #38bdf8);
    color: #000000;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
}

.nx-affiliate-box__btn:hover {
    filter: brightness(1.1);
}

.nx-affiliate-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--accent, #38bdf8);
    color: #d7d7d7;
    padding: 16px 36px;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.nx-affiliate-cta__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(56, 189, 248, 0.3);
}

.nx-social-links__link {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--accent, #d4af37);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent, #d4af37);
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
}

.nx-social-links__link:hover {
    background: var(--accent, #d4af37);
    color: #ffffff;
}

/* ====== NETWORKER TEMPLATE CLASSES ====== */
.net-header {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(17, 24, 39, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
}

.header__container {
    padding: 9px 29px;
    color: inherit;
}

.net-header__logo {
    font-size: 1.4rem;
    font-weight: 800;
    color: #F8FBFB;
}

.net-header__badge {
    font-size: 0.75rem;
    background: var(--accent, #38bdf8);
    color: #fff;
    padding: 3px 8px;
    border-radius: 12px;
    margin-left: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
}

.net-header__nav {
    display: flex;
    gap: 20px;
    align-items: center;
}

.net-header__nav a {
    /* color: var(--text-color, #f8fafc); */
    text-decoration: none;
    font-size: 0.9rem;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.net-header__nav a:hover {
    opacity: 1;
}

/* ====== PREMIUM FOOTER & ECOSYSTEM JOIN ====== */

/* Ecosystem Join Sections */
.net-ecosystem-join,
.corp-ecosystem-join,
.ecosystem-join {
    position: sticky;
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.01) 0%, rgba(255, 255, 255, 0.03) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.net-ecosystem-join p,
.corp-ecosystem-join p,
.ecosystem-join__desc {
    font-size: 1.15rem;
    max-width: 650px;
    margin: 0 auto 30px auto;
    color: var(--text-color);
    line-height: 1.7;
}

.ecosystem-join__heading {
    font-size: 2.2rem;
    margin-bottom: 20px;
    color: var(--accent, #d4af37);
    font-weight: 700;
}

/* Footers Base */
.net-footer,
.corp-footer,
.footer {
    background: #050810;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 60px 20px 30px;
    position: relative;
    overflow: hidden;
}

/* Footer Content Flex Layout */
.net-footer__content,
.corp-footer__content,
.footer__content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
}

.net-footer__info,
.corp-footer__info,
.footer__contact {
    flex: 1 1 auto;
    text-align: left;
}

.net-footer__desc,
.corp-footer__desc {
    color: #cececed9;
    font-size: 0.95rem;
    margin-bottom: 12px;
    line-height: 1.8;
}

.net-footer__info h3,
.corp-footer__info h3,
.footer__contact h3 {
    color: #e5e5e5;
}

.corp-footer__contact-list li {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Premium Badge Cards */
.net-footer__badge,
.corp-footer__badge,
.footer__nexus-branding {
    flex: 1 1 350px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.net-footer__badge:hover,
.corp-footer__badge:hover,
.footer__nexus-branding:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.2);
}

.net-footer__badge h4,
.corp-footer__badge h4,
.elite-footer__badge-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 1.05rem;
    color: var(--accent, #38bdf8);
    margin-bottom: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: left;
}

.net-footer__badge h4 svg,
.corp-footer__badge h4 svg,
.elite-footer__badge-title svg {
    stroke-width: 2.5;
    flex-shrink: 0;
    margin-top: 3px;
}

.net-footer__badge p,
.corp-footer__badge p,
.elite-footer__disclaimer {
    font-size: 0.9rem;
    color: #cbd5e1;
    margin-bottom: 25px;
    line-height: 1.6;
    text-align: left;
}

/* Referral Buttons inside Badge */
.net-footer__badge a,
.corp-footer__badge a,
.elite-footer__link-text a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent, #38bdf8);
    color: #000;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    width: 100%;
    gap: 10px;
}

.elite-footer__link-text {
    margin: 0;
}

.net-footer__badge a:hover,
.corp-footer__badge a:hover,
.elite-footer__link-text a:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(var(--accent-rgb, 56, 189, 248), 0.3);
}

/* Copyright Section */
.net-footer__copyright,
.corp-footer__copyright,
.footer__bottom {
    text-align: center;
    margin-top: 50px;
    font-size: 0.85rem;
    color: #64748b;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 25px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* ====== TEMPLATE HEADERS & VAULT (Elite, Corporate, Shopping) ====== */

/* Common Header Base */
.header,
.header-shop {
    z-index: 1000;
    background: rgba(5, 8, 16, 0.85);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.header__container,
.header-shop__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 20px;
}

.header__logo,
.header-shop__brand {
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff;
    /* FORCE WHITE for contrast with dark header */
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.header__logo span {
    color: var(--accent, #d4af37);
}

.header__badge,
.header-shop__tag,
.header-corp__badge,
.net-header__badge {
    font-size: 0.7rem;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.header-corp__nav a,
.net-header__nav a {
    color: #f8fafc;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.header-corp__nav a:hover,
.net-header__nav a:hover {
    opacity: 1;
}



/* Shopping Specific */
.btn-shop {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-shop--solid {
    background: var(--accent, #d4af37);
    color: #000;
    border: none;
}

.btn-shop--solid:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.footer-shop {
    background: #050810;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 40px 20px;
    text-align: center;
}

.footer-shop__brand h3 {
    color: var(--accent, #d4af37);
    margin-bottom: 10px;
}

.footer-shop__brand p {
    color: #94a3b8;
    font-size: 0.95rem;
}

.footer-shop__copy {
    margin-top: 30px;
    font-size: 0.85rem;
    color: #64748b;
}

/* Elite Vault Section */
.vault {
    padding: 80px 20px;
    text-align: center;
    background: linear-gradient(180deg, #050810 0%, #0a0f1a 100%);
}

.vault__heading {
    font-size: 2rem;
    color: var(--accent, #d4af37);
    margin-bottom: 30px;
}

.vault__glass-panel {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 40px;
    max-width: 600px;
    margin: 0 auto;
    backdrop-filter: blur(10px);
}

.vault__glass-panel p {
    color: #cbd5e1;
    font-size: 1.05rem;
    margin-bottom: 25px;
    line-height: 1.6;
}

.btn--secondary {
    background: transparent;
    border: 1px solid var(--accent, #d4af37);
    color: var(--accent, #d4af37);
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn--secondary:hover {
    background: rgba(212, 175, 55, 0.1);
}

/* --- HELPER CLASSI PER BLOCCHI DINAMICI (NO INLINE STYLES) --- */
.nx-video--hero {
    width: 100%;
    border-radius: 12px;
}
.nx-video--cover {
    object-fit: cover;
}
.nx-thumb--relative {
    position: relative;
    overflow: hidden;
}
.nx-video--cover-absolute {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
.nx-video--avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* --- LUXURY GOLD & SILVER GRADIENTS --- */
.text-gradient-gold {
    background: linear-gradient(135deg, #bf953f 0%, #fcf6ba 25%, #b38728 50%, #fbf5b7 75%, #aa771c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    text-shadow: 0 2px 10px rgba(212, 175, 55, 0.2);
}

.text-gradient-silver {
    background: linear-gradient(135deg, #70706F 0%, #E9E9E9 25%, #B3B3B3 50%, #F5F5F5 75%, #8A8A8A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    text-shadow: 0 2px 10px rgba(233, 233, 233, 0.15);
}

.btn--gold-gradient {
    background: linear-gradient(135deg, #bf953f 0%, #fcf6ba 50%, #aa771c 100%) !important;
    color: #0b0f19 !important;
    font-weight: 700 !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.35) !important;
    transition: all 0.3s ease !important;
}

.btn--gold-gradient:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.5) !important;
    filter: brightness(1.08);
}

.btn--silver-gradient {
    background: linear-gradient(135deg, #8A8A8A 0%, #F5F5F5 50%, #B3B3B3 100%) !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(233, 233, 233, 0.25) !important;
    transition: all 0.3s ease !important;
}

.btn--silver-gradient:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(233, 233, 233, 0.4) !important;
    filter: brightness(1.08);
}

.border-gradient-gold {
    border-image: linear-gradient(135deg, #bf953f, #fcf6ba, #aa771c) 1 !important;
}

.border-gradient-silver {
    border-image: linear-gradient(135deg, #70706F, #E9E9E9, #8A8A8A) 1 !important;
}

/* ============================================================
   SEZIONI LUSSO & ORO Ã¢â‚¬â€ NEXUS VIP
   Conforme DEVELOPMENT_GUIDELINES (zero inline styles)
   ============================================================ */

/* Ã¢â€â‚¬Ã¢â€â‚¬ MANIFESTO LETTER Ã¢â€â‚¬Ã¢â€â‚¬ */
.nx-section--manifesto {
    padding: 80px 40px;
    background: var(--bg, #0a0905);
    display: flex;
    justify-content: center;
    align-items: center;
}
.nx-manifesto__inner {
    position: relative;
    max-width: 820px;
    width: 100%;
    padding: 60px 70px;
    border: 1px solid rgba(212,175,55,0.35);
    background: rgba(255,255,255,0.02);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 4px;
    text-align: center;
}
.nx-section--manifesto--gold .nx-manifesto__inner {
    border-color: rgba(212,175,55,0.45);
    box-shadow: 0 0 60px rgba(212,175,55,0.08), inset 0 0 40px rgba(212,175,55,0.03);
}
.nx-section--manifesto--silver .nx-manifesto__inner {
    border-color: rgba(192,192,192,0.45);
    box-shadow: 0 0 60px rgba(192,192,192,0.08);
}
.nx-section--manifesto--dual .nx-manifesto__inner {
    border-image: linear-gradient(135deg, #d4af37 0%, #c0c0c0 50%, #d4af37 100%) 1;
}
.nx-manifesto__corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: var(--accent, #d4af37);
    border-style: solid;
}
.nx-manifesto__corner--tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.nx-manifesto__corner--tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.nx-manifesto__corner--bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.nx-manifesto__corner--br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.nx-manifesto__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--accent, #d4af37);
    border: 1px solid rgba(212,175,55,0.4);
    padding: 5px 16px;
    border-radius: 2px;
    margin-bottom: 28px;
    text-transform: uppercase;
}
.nx-manifesto__title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    margin: 0 0 20px 0;
    background: linear-gradient(135deg, #bf953f 0%, #fcf6ba 50%, #b07d2b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.nx-manifesto__divider {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent, #d4af37), transparent);
    margin: 0 auto 28px;
}
.nx-manifesto__quote {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    font-style: italic;
    line-height: 1.7;
    color: var(--text, #f5f0e8);
    margin: 0 0 14px 0;
    padding: 0;
    border: none;
    opacity: 0.92;
}
.nx-manifesto__author {
    font-size: 0.88rem;
    color: var(--accent, #d4af37);
    letter-spacing: 0.06em;
    margin: 0 0 28px 0;
    font-weight: 600;
}
.nx-manifesto__body {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text, #f5f0e8);
    opacity: 0.8;
    margin: 0 0 36px 0;
}
.nx-manifesto__btn {
    display: inline-block;
    padding: 14px 40px;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    border-radius: 4px;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.nx-manifesto__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(212,175,55,0.4);
}

/* Ã¢â€â‚¬Ã¢â€â‚¬ SHOWCASE GRID Ã¢â€â‚¬Ã¢â€â‚¬ */
.nx-section--showcase-grid {
    padding: 80px 40px;
    background: var(--bg, #080604);
}
.nx-showcase-grid__header {
    text-align: center;
    margin-bottom: 56px;
}
.nx-showcase-grid__title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    margin: 0 0 14px 0;
    background: linear-gradient(135deg, #bf953f 0%, #fcf6ba 50%, #b07d2b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.nx-showcase-grid__subtitle {
    font-size: 1.05rem;
    color: var(--text, #f7f3ec);
    opacity: 0.75;
    margin: 0;
}
.nx-showcase-grid__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
    max-width: 1100px;
    margin: 0 auto;
}
.nx-showcase-grid__card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(212,175,55,0.2);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.nx-showcase-grid__card:hover {
    transform: translateY(-6px);
    border-color: rgba(212,175,55,0.55);
    box-shadow: 0 20px 50px rgba(212,175,55,0.1);
}
.nx-showcase-grid__img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
}
.nx-showcase-grid__img-placeholder {
    width: 100%;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212,175,55,0.05);
    color: rgba(212,175,55,0.4);
    font-size: 3rem;
}
.nx-showcase-grid__card-body { padding: 24px; }
.nx-showcase-grid__card-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    color: var(--text, #f7f3ec);
}
.nx-showcase-grid__card-desc {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text, #f7f3ec);
    opacity: 0.72;
    margin: 0 0 18px 0;
}
.nx-showcase-grid__card-btn {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent, #d4af37);
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: letter-spacing 0.25s ease;
}
.nx-showcase-grid__card-btn:hover { letter-spacing: 0.12em; }

/* Ã¢â€â‚¬Ã¢â€â‚¬ STEPS WORKFLOW Ã¢â€â‚¬Ã¢â€â‚¬ */
.nx-section--steps {
    padding: 80px 40px;
    background: var(--bg, #0a0905);
}
.nx-steps__header {
    text-align: center;
    margin-bottom: 56px;
}
.nx-steps__main-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    margin: 0 0 14px 0;
    color: var(--text, #f5f0e8);
}
.nx-steps__main-subtitle {
    font-size: 1.05rem;
    color: var(--text, #f5f0e8);
    opacity: 0.72;
    max-width: 600px;
    margin: 0 auto;
}
.nx-steps__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
    max-width: 1000px;
    margin: 0 auto;
}
.nx-steps__card {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(212,175,55,0.18);
    border-radius: 12px;
    padding: 36px 32px;
    position: relative;
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.nx-steps__card:hover {
    transform: translateY(-5px);
    border-color: rgba(212,175,55,0.5);
    box-shadow: 0 20px 40px rgba(212,175,55,0.08);
}
.nx-steps__num {
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(212,175,55,0.25), rgba(212,175,55,0.06));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.nx-steps__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 14px 0;
    color: var(--accent, #d4af37);
}
.nx-steps__desc {
    font-size: 0.93rem;
    line-height: 1.7;
    color: var(--text, #f5f0e8);
    opacity: 0.78;
    margin: 0;
}

/* Ã¢â€â‚¬Ã¢â€â‚¬ TECHSEO METRICS Ã¢â€â‚¬Ã¢â€â‚¬ */
.nx-section--metrics {
    padding: 80px 40px;
    background: var(--bg, #020b18);
}
.nx-metrics__header {
    text-align: center;
    margin-bottom: 56px;
}
.nx-metrics__title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    margin: 0 0 14px 0;
    color: var(--text, #e8f4f8);
}
.nx-metrics__subtitle {
    font-size: 1.05rem;
    color: var(--text, #e8f4f8);
    opacity: 0.7;
    max-width: 600px;
    margin: 0 auto;
}
.nx-metrics__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
}
.nx-metrics__card {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(245,158,11,0.2);
    border-radius: 12px;
    padding: 36px 20px;
    text-align: center;
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.nx-metrics__card:hover {
    transform: translateY(-5px);
    border-color: rgba(245,158,11,0.55);
    box-shadow: 0 0 40px rgba(245,158,11,0.12);
}
.nx-metrics__val {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 900;
    line-height: 1;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #f59e0b 0%, #fcd34d 50%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.nx-metrics__label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text, #e8f4f8);
    margin-bottom: 6px;
}
.nx-metrics__desc {
    font-size: 0.78rem;
    color: var(--text, #e8f4f8);
    opacity: 0.55;
    letter-spacing: 0.03em;
}

/* Ã¢â€â‚¬Ã¢â€â‚¬ TECHSEO MOCKUP Ã¢â€â‚¬Ã¢â€â‚¬ */
.nx-section--mockup {
    padding: 80px 40px;
    background: var(--bg, #020b18);
    overflow: hidden;
}
.nx-mockup__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}
.nx-mockup__title {
    font-size: clamp(1.6rem, 3.5vw, 2.5rem);
    font-weight: 700;
    margin: 0 0 16px 0;
    color: var(--text, #e8f4f8);
    line-height: 1.25;
}
.nx-mockup__subtitle {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text, #e8f4f8);
    opacity: 0.72;
    margin: 0 0 32px 0;
}
.nx-mockup__btn {
    display: inline-block;
    padding: 14px 36px;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 6px;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.nx-mockup__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(245,158,11,0.4);
}
.nx-mockup__visual { position: relative; }
.nx-mockup__frame {
    background: #111827;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
}
.nx-mockup__browser-bar {
    background: #1f2937;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.nx-mockup__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    display: inline-block;
}
.nx-mockup__url-bar {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.45);
    margin-left: 8px;
}
.nx-mockup__screen {
    aspect-ratio: 16/10;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nx-mockup__screen-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.nx-mockup__screen-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px;
    color: rgba(255,255,255,0.25);
    font-size: 0.85rem;
    text-align: center;
}
.nx-mockup__badges {
    position: absolute;
    top: 0;
    right: -16px;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 10px;
}
.nx-mockup__badge {
    background: rgba(245,158,11,0.12);
    border: 1px solid rgba(245,158,11,0.4);
    color: #fcd34d;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    white-space: nowrap;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: nx-badge-float 3s ease-in-out infinite;
}
.nx-mockup__badge--1 { animation-delay: 0s; }
.nx-mockup__badge--2 { animation-delay: 0.75s; }
.nx-mockup__badge--3 { animation-delay: 1.5s; }
.nx-mockup__badge--4 { animation-delay: 2.25s; }

@keyframes nx-badge-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Responsive VIP */
@media (max-width: 768px) {
    .nx-manifesto__inner { padding: 36px 24px; }
    .nx-mockup__layout { grid-template-columns: 1fr; gap: 40px; }
    .nx-mockup__badges {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 16px;
        right: auto;
        top: auto;
        bottom: auto;
    }
    .nx-steps__grid,
    .nx-metrics__grid,
    .nx-showcase-grid__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   MODULO TESTO ORO / ARGENTO / FOIL Ã¢â‚¬â€ Effetti gradiente lusso sui font
   Uso: aggiungere la classe al tag h1/h2/span/p desiderato
   ========================================================================== */

/* Keyframes shimmer per effetto foil animato */
@keyframes nx-foil-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

@keyframes nx-silver-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

/* Oro classico */
.nx-text--gold {
    background: linear-gradient(135deg, #bf953f 0%, #fcf6ba 30%, #b38728 50%, #fbf5b7 70%, #aa771c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

/* Oro animato (shimmer foil) */
.nx-text--gold-animated {
    background: linear-gradient(90deg, #bf953f 0%, #fcf6ba 25%, #d4af37 50%, #fbf5b7 75%, #aa771c 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
    animation: nx-foil-shimmer 3s linear infinite;
}

/* Argento */
.nx-text--silver {
    background: linear-gradient(135deg, #8e9eab 0%, #eef2f3 30%, #8e9eab 50%, #d4d4d4 70%, #9fa8b0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

/* Argento animato */
.nx-text--silver-animated {
    background: linear-gradient(90deg, #8e9eab 0%, #eef2f3 25%, #b0bec5 50%, #ffffff 75%, #8e9eab 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
    animation: nx-silver-shimmer 3s linear infinite;
}

/* Platino */
.nx-text--platinum {
    background: linear-gradient(135deg, #c0c0c0 0%, #f0f0f0 40%, #e8e8e8 60%, #a0a0a0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

/* Gradiente oro-arancio (sunburst) */
.nx-text--gold-fire {
    background: linear-gradient(135deg, #f7971e 0%, #ffd200 50%, #d4af37 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

/* ==========================================================================
   MODULO PRESET SFONDO SEZIONE Ã¢â‚¬â€ 11 effetti CSS puri, zero immagini esterne
   Applicabili via campo "Tipo Sfondo" nel builder
   ========================================================================== */

/* Base comune: position per gli pseudo-elementi */
.nx-section--bg-mesh-dark,
.nx-section--bg-gold-glow,
.nx-section--bg-aurora,
.nx-section--bg-dot-grid,
.nx-section--bg-diagonal,
.nx-section--bg-wave,
.nx-section--bg-silver-fog,
.nx-section--bg-noise,
.nx-section--bg-glass-dark,
.nx-section--bg-radial-spotlight,
.nx-section--bg-gradient-gold,
.nx-section--bg-gradient-silver,
.nx-section--bg-gradient-dark {
    position: relative;
    overflow: hidden;
}

/* --- 1. Mesh Dark: sfondo nero con blob di luce --- */
.nx-section--bg-mesh-dark {
    background-color: #050810;
}

.nx-section--bg-mesh-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 20%, rgba(212, 175, 55, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(139, 92, 246, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 50% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

/* --- 2. Gold Glow: alone dorato radiale --- */
.nx-section--bg-gold-glow {
    background-color: #060b10;
}

.nx-section--bg-gold-glow::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 50% 50%, rgba(212, 175, 55, 0.25) 0%, rgba(212, 175, 55, 0.05) 50%, transparent 80%),
        radial-gradient(ellipse 40% 30% at 15% 85%, rgba(180, 120, 20, 0.2) 0%, transparent 60%);
    pointer-events: none;
}

/* --- 3. Aurora: gradiente multi-colore tipo aurora boreale --- */
.nx-section--bg-aurora {
    background: #050a1a;
}

.nx-section--bg-aurora::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 40% at 0% 60%, rgba(16, 185, 129, 0.2) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 100% 30%, rgba(139, 92, 246, 0.2) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 50% 0%, rgba(56, 189, 248, 0.15) 0%, transparent 70%);
    pointer-events: none;
    animation: nx-aurora-pulse 8s ease-in-out infinite alternate;
}

@keyframes nx-aurora-pulse {
    0%   { opacity: 0.7; }
    100% { opacity: 1; }
}

/* --- 4. Dot Grid: griglia di puntini su sfondo scuro --- */
.nx-section--bg-dot-grid {
    background-color: #0a0f1a;
    background-image: radial-gradient(rgba(212, 175, 55, 0.25) 1px, transparent 1px);
    background-size: 28px 28px;
}

/* --- 5. Diagonal Lines: righe diagonali stile lusso --- */
.nx-section--bg-diagonal {
    background-color: #080c14;
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 20px,
        rgba(212, 175, 55, 0.04) 20px,
        rgba(212, 175, 55, 0.04) 21px
    );
}

/* --- 6. Wave SVG: onde decorative (SVG encoded nel CSS) --- */
.nx-section--bg-wave {
    background-color: #060b10;
}

.nx-section--bg-wave::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120'%3E%3Cpath fill='rgba(212,175,55,0.08)' d='M0,64L60,69.3C120,75,240,85,360,80C480,75,600,53,720,48C840,43,960,53,1080,58.7C1200,64,1320,64,1380,64L1440,64L1440,120L1380,120C1320,120,1200,120,1080,120C960,120,840,120,720,120C600,120,480,120,360,120C240,120,120,120,60,120L0,120Z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
}

/* --- 7. Silver Fog: nebbia argentata --- */
.nx-section--bg-silver-fog {
    background: linear-gradient(145deg, #1a1f2e 0%, #2a3040 50%, #1a1f2e 100%);
}

.nx-section--bg-silver-fog::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 30% 30%, rgba(200, 210, 220, 0.12) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 70% 70%, rgba(180, 190, 210, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

/* --- 8. Noise Texture: grana fine over gradiente --- */
.nx-section--bg-noise {
    background: linear-gradient(135deg, #0f0f1a 0%, #1a0f2e 100%);
}

.nx-section--bg-noise::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
    opacity: 0.4;
    pointer-events: none;
}

/* --- 9. Glass Dark: glassmorphism scuro --- */
.nx-section--bg-glass-dark {
    background: rgba(10, 15, 26, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* --- 10. Radial Spotlight: spotlight al centro --- */
.nx-section--bg-radial-spotlight {
    background: #030610;
}

.nx-section--bg-radial-spotlight::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 60% at 50% 40%, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.05) 40%, transparent 80%);
    pointer-events: none;
}

/* --- 11. Gradient Gold / Silver / Dark (sfondi sfumati puri) --- */
.nx-section--bg-gradient-gold {
    background: linear-gradient(135deg, #1a1200 0%, #3d2c00 40%, #1a1200 100%);
}

.nx-section--bg-gradient-silver {
    background: linear-gradient(135deg, #1a1f2e 0%, #2c3347 40%, #1a1f2e 100%);
}

.nx-section--bg-gradient-dark {
    background: linear-gradient(135deg, #050810 0%, #0f172a 50%, #050810 100%);
}

/* Watermark image (sfondo immagine filigrana Ã¢â‚¬â€ background-image inline ammesso da DEVELOPMENT_GUIDELINES Ã‚Â§4) */
.nx-section--bg-watermark {
    position: relative;
}

.nx-section--bg-watermark::before {
    content: '';
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* L'URL viene applicato via background-image inline runtime sull'elemento ::before tramite custom property */
    opacity: var(--nx-watermark-opacity, 0.1);
    pointer-events: none;
}

/* OpacitÃƒÂ  varianti per sfondo */
.nx-section--bg-opacity-10::before { opacity: 0.10; }
.nx-section--bg-opacity-20::before { opacity: 0.20; }
.nx-section--bg-opacity-30::before { opacity: 0.30; }
.nx-section--bg-opacity-50::before { opacity: 0.50; }
.nx-section--bg-opacity-70::before { opacity: 0.70; }

/* ==========================================================================
   MODULO SPACER / DIVISORE Ã¢â‚¬â€ Separatore configurabile tra sezioni
   ========================================================================== */

.nx-spacer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    box-sizing: border-box;
}

/* Altezze */
.nx-spacer--h20  { height: 20px; }
.nx-spacer--h40  { height: 40px; }
.nx-spacer--h60  { height: 60px; }
.nx-spacer--h80  { height: 80px; }
.nx-spacer--h120 { height: 120px; }
.nx-spacer--h160 { height: 160px; }

/* Linee decorative centrate nella metÃƒÂ  verticale dello spacer */
.nx-spacer__line {
    width: 80%;
    max-width: 600px;
    height: 1px;
    display: block;
    flex-shrink: 0;
}

.nx-spacer--line-gold .nx-spacer__line {
    background: linear-gradient(90deg, transparent 0%, #d4af37 30%, #fcf6ba 50%, #d4af37 70%, transparent 100%);
}

.nx-spacer--line-silver .nx-spacer__line {
    background: linear-gradient(90deg, transparent 0%, #8e9eab 30%, #eef2f3 50%, #8e9eab 70%, transparent 100%);
}

.nx-spacer--line-gradient .nx-spacer__line {
    background: linear-gradient(90deg, transparent 0%, var(--accent, #d4af37) 30%, #ffffff 50%, var(--accent, #d4af37) 70%, transparent 100%);
}

/* Divisore a dots (oro) */
.nx-spacer--dots-gold .nx-spacer__line {
    height: 8px;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.nx-spacer--dots-gold .nx-spacer__line::before {
    content: 'Ã¢â€”â€  Ã¢â€”â€  Ã¢â€”â€ ';
    color: #d4af37;
    font-size: 0.5rem;
    letter-spacing: 8px;
}

/* Onda SVG come divisore */
.nx-spacer--wave-svg .nx-spacer__line {
    height: 24px;
    background: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M0,12 C50,0 150,24 200,12' stroke='rgba(212,175,55,0.5)' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 200px 24px;
}

/* ==========================================================================
   MODULO TWO-COLUMN LAYOUT Ã¢â‚¬â€ Sezione a 2 colonne configurabile
   Desktop: affiancate Ã¢â‚¬â€ Mobile: impilate
   ========================================================================== */

.nx-two-col {
    width: 100%;
    box-sizing: border-box;
    padding: 60px 20px;
}

.nx-two-col__inner {
    max-width: 1200px;
    margin: 0 auto;
    align-items: stretch;
    display: grid;
    grid-template-columns: minmax(380px, 0.95fr) minmax(520px, 1.05fr);
    gap: clamp(22px, 4vw, 46px);
}

/* Proporzioni colonne */
.nx-two-col--50-50  .nx-two-col__inner { flex-wrap: nowrap; }
.nx-two-col--50-50  .nx-two-col__left,
.nx-two-col--50-50  .nx-two-col__right  { flex: 1 1 50%; }

.nx-two-col--60-40  .nx-two-col__left  {flex: 3 1 60%;}
.nx-two-col--60-40  .nx-two-col__right { flex: 2 1 40%; }

.nx-two-col--40-60  .nx-two-col__left  { flex: 2 1 40%; }
.nx-two-col--40-60  .nx-two-col__right { flex: 3 1 60%; }

.nx-two-col--70-30  .nx-two-col__left  { flex: 7 1 70%; }
.nx-two-col--70-30  .nx-two-col__right { flex: 3 1 30%; }

/* Colonne */
.nx-two-col__left {
    box-sizing: border-box;
    gap: .6rem;
    display: flex;
    flex-direction: column;
}
.nx-two-col__right
{
    display: flex;
    grid-template-rows: 150px minmax(0, 1fr);
    flex-direction: column;
}
/* Allineamento verticale colonne */
.nx-two-col__left--top,
.nx-two-col__right--top {
    justify-content: flex-start;
}

/* Widget all'interno di una colonna */
.nx-two-col__widget {
    width: 100%;
}

/* Invertita su desktop (colonne inverse) */
.nx-two-col--reversed .nx-two-col__inner {
    flex-direction: row-reverse;
}

/* Titolo di sezione two-col */
.nx-two-col__section-title {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    margin: 0 0 12px;
    line-height: 1.2;
    color: var(--text-color, #111111);
}

.nx-two-col__section-subtitle {
    font-size: 1rem;
    opacity: 0.8;
    margin: 0 0 20px;
    color: var(--text-color, #111111);
}

.nx-two-col__image {
    width: 100%;
    border-radius: 12px;
    display: block;
    object-fit: cover;
    max-height: 500px;
}

.nx-two-col__caption {
    font-size: 0.85rem;
    opacity: 0.6;
    margin: 8px 0 0;
    text-align: center;
}

.nx-two-col__video {
    width: 100%;
    border-radius: 12px;
    display: block;
    max-height: 500px;
    object-fit: cover;
}

/* Box form embedded nella colonna */
.nx-two-col__form-box {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 32px 28px;
    box-sizing: border-box;
}

.nx-two-col__form-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--text-color, #111111);
}

.nx-two-col__form-subtitle {
    font-size: 0.9rem;
    opacity: 0.7;
    margin: 0 0 24px;
    color: var(--text-color, #111111);
}

/* Responsive: impila le colonne sotto 768px */
@media (max-width: 768px) {
    .nx-two-col__inner {
        flex-direction: column !important;
        gap: 32px;
    }

    .nx-two-col__left,
    .nx-two-col__right {
        flex: 1 1 100% !important;
    }

    .nx-two-col {
        padding: 40px 16px;
    }
}


#nexus-upsell-modal h3{
    display: flex;
    gap: 10px;
}
#nexus-upsell-modal p {
    font-size: 0.95rem;
    opacity: 0.8;
    margin-bottom: 20px;
    line-height: 1.5;
    color: var(--accent-text);
}


/* --- FAQ & ACCORDION --- */
.nx-section--faq {
    padding: 40px 20px;
    max-width: 900px;
    margin: 0 auto;
    box-sizing: border-box;
}

.nx-section--faq__title {
    text-align: center;
    font-size: 2.5rem;
    margin: 0 0 45px 0;
}

.nx-section--faq__list {
    display: flex;
    flex-direction: column;
}

.nx-faq-item {
    border-bottom: 1px solid rgb(128 128 128 / 6%);
    padding: 2px 2px;
    margin-bottom: 15px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    overflow: hidden;    
}

.nx-faq-item__question {
    font-size: 1.25rem;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    padding: 8px 13px;
    background: rgb(128 128 128 / 4%);
    border-radius: 9px;
}

.nx-faq-item__toggle {
    font-size: 1.8rem;
    color: var(--accent, #d4af37);
    line-height: 1;
    transition: transform 0.2s;
}

.nx-faq-item__answer {
    display: none;
    padding: 15px 22px;
    opacity: 0.85;
    line-height: 1.6;
    font-size: 1.01rem;
    background: #38bdf82b;
    border-radius: 10px 10px;
    margin-top: 3px;
}
/* ===== TWO COLUMN LAYOUT - classi widget interni ===== */
.nx-two-col__inner{display:flex;gap: 1.5rem;max-width:1200px;margin:0 auto;padding:40px 24px;}
.nx-two-col__left,.nx-two-col__right{flex:1;min-width:280px}
.nx-two-col--reversed .nx-two-col__inner{flex-direction:row-reverse}
.nx-two-col__title{font-size:28px;font-weight:700;margin-bottom:12px}
.nx-two-col__subtitle{font-size:16px;opacity:.7;margin-bottom:16px}
.nx-two-col__text{font-size:15px;line-height:1.6;margin-bottom:20px}
.nx-two-col__btn{display:inline-block;padding:10px 24px;background:var(--accent,#d4af37);color:#fff;border-radius:6px;text-decoration:none;font-weight:600}
.nx-two-col__media{margin-bottom:16px}
.nx-two-col__img{width:100%;height:auto;border-radius:8px;display:block}
.nx-two-col__video{width:100%;border-radius:8px;display:block}
.nx-two-col__placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;background:var(--card-bg,rgba(128,128,128,0.05));border:2px dashed var(--card-border,rgba(128,128,128,0.2));border-radius:12px;text-align:center;color:var(--text-muted,#888)}
.nx-two-col__placeholder i{font-size:36px;margin-bottom:12px;opacity:.5}
.nx-two-col__placeholder p{font-size:14px;margin:0}
@media(max-width:768px){.nx-two-col__inner{flex-direction:column!important}.nx-two-col__left,.nx-two-col__right{flex:1 1 100%}}
.nx-two-col__form-title{font-size:22px;font-weight:700;margin-bottom:8px}
.nx-two-col__form-subtitle{font-size:14px;opacity:.7;margin-bottom:20px}
.nx-two-col__form{display:flex;flex-direction:column;gap:12px}
.nx-two-col__form-input{width:100%;padding:12px 16px;background:var(--card-bg,rgba(128,128,128,0.05));border:1px solid var(--card-border,rgba(128,128,128,0.2));border-radius:6px;color:inherit;font-size:14px;font-family:inherit;outline:none;transition:border .2s}
.nx-two-col__form-input:focus{border-color:var(--accent,#d4af37)}
.nx-two-col__form-input::placeholder{color:var(--text-muted,#888)}
.nx-two-col__form-btn{padding:12px 28px;background:var(--accent,#d4af37);color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;align-self:flex-start;transition:opacity .2s}
.nx-two-col__form-btn:hover{opacity:.9}

@media (max-width: 576px) {
    .nx-form__col-1 {
        grid-column: span 2;
    }

    .nx-form {
        padding: 25px 20px;
    }
}

@media (max-width: 768px) {

    .nx-grid--2,
    .nx-grid--3,
    .nx-grid--4 {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .nx-section--contacts__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}
@media (max-width: 768px) {

    .nx-section--product,
    .nx-section--product--right {
        flex-direction: column;
        gap: 30px;
        margin: auto 11px;
    }
    .nx-section--product__title {
        font-size: 1.6rem;
        margin: 0 0 20px 0;
    }
    
    .nx-section--product__desc {
        font-size: 0.9rem;
        line-height: 1.7;
        opacity: 0.85;
    }
    .nx-section--text__inner {
        font-size: 1.0rem;
    }
    .nx-section--cta__title {
        font-size: 1.8rem;
    }
    .nx-section--cta__subtitle{
        font-size: 1.0rem;
    }
    .nx-section--stats__title {
        font-size: 1.8rem;
    }
    .nx-stat-item__num {
        font-size: 2.5rem;
        font-weight: 800;
        color: var(--accent, #d4af37);
        display: block;
        line-height: 1.1;
        margin-bottom: 10px;
    }
    .nx-stat-item {
        text-align: center;
        width: 100%;
        min-width: 100%;
        padding: 22px 20px;
    }
    .nx-section--stats__grid{
        gap: 15px;
    }
    .nx-section--contacts__title{
        font-size: 1.8rem;
    }    
    .nx-section--form__title{
        font-size: 1.8rem;
    }
    .nx-section--faq__title{
        font-size: 1.8rem;
    }
    .nx-faq-item__question{
        font-size: 1.0rem;
    }
    .nx-faq-item__answer{
        font-size: 0.90rem;
    }
    .nx-section--hero-video__title, .nx-section--hero-image__title{
         font-size: 1.8rem;
    }
    .nx-section--hero-video__subtitle, .nx-section--hero-image__subtitle{
        font-size: 1.0rem;
    }
    .nx-steps__num {
        font-size: 2.5rem;
    }
    .nx-steps__card{
    display: flex;
    flex-direction: column;
    align-items: center;
    }
    .header__logo, .header-shop__brand{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
    }
    .header__badge, .header-shop__tag, .header-corp__badge, .net-header__badge{
        font-size: 0.5rem;
    }
    .header__container, .header-shop__container{
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    main{
        position: relative;
        margin-left: 4px;
        margin-right: 4px;
    }
    .header,.header-shop {
        position: relative;
        margin-bottom: 1rem;
    }
    .net-footer__badge a, .corp-footer__badge a, .elite-footer__link-text a{
        font-size: 0.70rem !important;
        gap: 5px;
    }
    .ecosystem-join__heading{
        font-size: 1.75rem;
    }
    .corp-ecosystem-join p{
        font-size: 0.95rem;
    }    
}