/* reset & base */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: var(--color-primary); font-family: 'Napzer', sans-serif; color: var(--color-white); }

/* palette & variabili */
:root {
    --color-primary: #000000;
    --color-secondary: #FFED00;
    --color-white: #ffffff;
    --color-grey-light: #f2f2fc;
    --color-olive-grey: #807E6B;
    --text-light: #666666;
    --gradient-main: linear-gradient(135deg, #F2F9FE 0%, #FFED00 100%);
}

/* FONT GLANCYR NEUE - TUTTI I PESI */
@font-face { font-family: 'Glancyr Neue'; src: url('../font/glancyr-neue/GlancyrNeue-VF.woff2') format('woff2'), url('../font/glancyr-neue/GlancyrNeue-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }

/* FONT NAPZER - TUTTI I PESI */
@font-face { font-family: 'Napzer'; src: url('../font/napzer/Napzer-Regular.woff2') format('woff2'), url('../font/napzer/Napzer-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }

/* TITOLI */
h1, h2, h3, h4, h5, h6 {font-family: 'Glancyr Neue', sans-serif;font-weight: 00;line-height: 1.2;}
h1 {font-size: 4rem; font-weight: 400;}
h2 {font-size: 2.5rem;}
h3 {font-size: 2rem;}
h4 {font-size: 1.5rem;}

p {font-family: 'Napzer', sans-serif; font-size: 1.1rem; font-weight: 300;}

/* CLASSI UTILI */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-white { background-color: var(--color-white) !important; }
.bg-grey { background-color: var(--color-grey) !important; }
.bg-olive-grey { background-color: var(--color-olive-grey) !important; }
.bg-gradient-main { background: var(--gradient-main) !important; }
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-white { color: var(--color-white) !important; }
.text-grey { color: var(--color-grey) !important; }
.card-bg-color { var(--card-bg-color) !important; }
.zindex-0{z-index:0;}
.zindex-1{z-index:1;}
.zindex-2{z-index:2;}
.zindex-3{z-index:3;}
.zindex-4{z-index:4;}
.zindex-5{z-index:5;}
.zindex-6{z-index:6;}
.zindex-7{z-index:7;}
.zindex-8{z-index:8;}
.zindex-9{z-index:9;}
.zindex-10{z-index:10;}
.zindex-1000{z-index:1000;}

/* BUTTONS */
/* REGISTER BUTTON */
.btn-register { position:relative; display:flex; align-items:center; gap:.5rem; background:transparent; color:var(--color-white); border:1px solid var(--color-white); padding:.5rem 1.5rem; font-size:16px; font-weight:400; text-transform:uppercase; letter-spacing:1px; border-radius:50px; overflow:hidden; transition:all .3s ease; animation:slideInRight .6s ease-out .5s both; }
.btn-register::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:var(--color-secondary); opacity:.25; transition:left .3s ease; }
.btn-register:hover { color:var(--color-secondary); border-color:var(--color-secondary); transform:translateY(-2px); box-shadow:0 0 8px var(--color-secondary),0 0 16px var(--color-secondary); }
.btn-register:hover::before { left:0; }
.btn-register .arrow-icon { font-size:1.2rem; transition:transform .3s ease; }
.btn-register:hover .arrow-icon { transform:translate(2px,-2px); }

/* CTA buttons */
.btn-cta { max-width: 400px; background-color: var(--color-secondary); color: var(--color-primary); border: 1px solid var(--color-secondary); padding: 0.5rem 1.5rem; font-weight: 300; border-radius: 50px; transition: all 0.3s ease; letter-spacing: 1px; position: relative; overflow: hidden;  gap: 0.5rem; }
.btn-cta:hover {background: var(--color-primary); color: var(--color-secondary); transform: translateY(-2px); box-shadow: 0 0 8px var(--color-secondary), 0 0 16px var(--color-secondary); }
.btn-cta:hover::before { right: 0; }
.btn-cta-mockup {bottom: 2rem;}

/* Multistep buttons */
.btn-cta-multistep {background: var(--color-secondary); color: var(--color-primary); border: 1px solid var(--color-secondary); padding: 0.5rem 1.5rem; font-weight: 400; border-radius: 50px; transition: all 0.3s ease; letter-spacing: 1px; position: relative; overflow: hidden;  gap: 0.5rem; text-align: left; max-width: 400px; }
.btn-cta-multistep:hover {background: var(--color-primary); color: var(--color-secondary); transform: translateY(-2px); box-shadow: 0 0 8px var(--color-secondary), 0 0 16px var(--color-secondary); }
.btn-next, .btn-prev, .btn-next-registrati { padding: .5rem 1rem; border-radius: 8px; font-weight: 300; border: none; cursor: pointer; }
.btn-next { background: var(--color-secondary); color: var(--color-primary); }
.btn-prev { background: var(--color-grey-light); color: var(--color-primary);border: 1px solid var(--color-primary); }
.btn-next:hover { background-color: var(--color-primary); color: var(--color-secondary); filter: brightness(1.05); }
.btn-prev:hover { background: var(--color-primary); color: var(--color-white); }
.btn-next-registrati { background: var(--color-secondary); color: var(--color-primary); border: 1px solid var(--color-primary);}
.btn-next-registrati:hover { background: var(--color-primary); color: var(--color-white); }

/* Features buttons */
.btn-feature-cta { display: inline-flex; align-items: center; background-color: #FFD700; color: #000; font-family: 'Glancyr Neue', sans-serif; font-size: 16px; padding: 16px 32px; border-radius: 50px; text-decoration: none; transition: background-color .3s; }
.btn-feature-cta .arrow { margin-left: 8px; font-size: 20px; }

/* NAVIGATION */
.navbar { background-color:#000; box-shadow:0 2px 10px rgba(0,0,0,0.3); padding:1rem 0; position:fixed; width:100%; top:0; z-index:1001; transition:all .3s ease; }
.navbar-shrink { padding:.5rem 0; box-shadow:0 2px 20px rgba(0,0,0,0.5); }
.navbar-brand img { max-width:200px; margin-left: 5px; }
.nav-link { position:relative; color:var(--color-white); font-weight:300; margin:0 1rem; transition:all .3s ease; }
.nav-link::after { content:''; position:absolute; bottom:-5px; left:50%; width:0; height:2px; background:var(--color-primary); transform:translateX(-50%); transition:all .3s ease; }
.nav-link:hover { color:var(--color-secondary) !important; }
.nav-link:hover::after { width:100%; }

/* KEYFRAMES */
@keyframes slideInRight { from { opacity:0; transform:translateX(50px); } to { opacity:1; transform:translateX(0); } }
@keyframes fadeInButton { to { opacity:1; transform:translateY(0); } }

/* Header Mobile  */
#mainNav                            { height: 90px; }
.menu-icon                          { font-size: 28px; color: white; }
.mobile-slide-menu                  { position: fixed; top: 0; right: -100%; width: 70%; height: calc(100vh - 90px); background: var(--color-primary); transition: right .3s ease-in-out; z-index: 1050; }
.mobile-slide-menu.open             { right: 0; }
.mobile-slide-menu .nav-link        { width: 100%; display: block; font-size: 18px; color: white; text-decoration: none; padding-left: 0; transition: color 0.3s; }
.mobile-slide-menu .nav-link:hover  { color: var(--color-secondary); text-decoration: none; }
.mobile-slide-menu .close-icon      { cursor: pointer; padding: 16px; }
/* quando aperto */
.mobile-slide-menu.open             { right: 0; }
/* CTA mobile: 80% larghezza e centrata */
.mobile-cta                         { width: 80%; max-width: 300px; display: inline-flex; justify-content: center; }

/* HERO */
#hero-title {font-family: 'Glancyr Neue', sans-serif; font-size: 4rem !important;font-weight: 300;  }
.hero-section {position:relative;}
.btn-hero-cta { max-width: 400px; background: var(--color-secondary); color: var(--color-primary); border: 1px solid var(--color-primary); padding: 0.5rem 1.5rem; font-weight: 400; border-radius: 50px; transition: all 0.3s ease; letter-spacing: 1px; position: relative; overflow: hidden;  gap: 0.5rem; }
.btn-register::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--color-secondary); opacity: 0.25; transition: left .3s ease; }
.btn-hero-cta:hover { color: var(--color-secondary); transform: translateY(-2px); box-shadow: 0 0 8px var(--color-secondary), 0 0 16px var(--color-secondary); }
.btn-hero-cta:hover::before { right: 0; }
.badge-lancio {margin-bottom: 20px; background: var(--color-primary); padding: 8px 2px; text-transform:uppercase; letter-spacing:1px;}
.badge-lancio p { font-size: 12px; color: var(--color-white); text-transform: uppercase; }
@media (max-width: 768px) { .btn-hero-cta { max-width: 80%; } #hero-title {font-size: 2rem !important; }

/* Hero: contenitore relativo */
#hero-image .hero-image { animation: slideInRight 1.5s ease-out both; }
@media (max-width: 768px) { .hero-image { max-width: 80%; } }}

/* PROBLEM SETTINGS */
/* Macchina da scrivere */
#typewriter { font-size: 2.5rem; font-family: 'Glancyr Neue', sans-serif; color: #fff; white-space: pre-wrap; overflow: hidden; }
#typewriter::after { content: "|"; animation: blink-caret .7s step-end infinite; }
@keyframes blink-caret { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
@media (max-width: 768px) { #typewriter { font-size: 32px; font-family: 'Glancyr Neue', sans-serif; color: #fff; white-space: pre-wrap; } }

/* Contenitore cards */
.cards-section { position: relative; background: #000; padding: 40px 0; color: #fff; overflow: visible; }
/* Icone fluttuanti (solo in questa sezione) */
.cards-section .shape { position: relative; pointer-events: none; z-index: 0; height: 0;}
.cards-section .shape--1 { top: 10%; left: 5%;  overflow: hidden;}

/* Testo introduttivo */
.cards-section .problem-text p { font-size: 40px; }

/* Breakpoints */
@media(max-width:768px){.hero-image{max-width:80%;}}

/* Card base */
.problems-cta-section {z-index: 1;}
.problem-card { position: relative; z-index:1; display:flex; margin:0 16px 30px 16px; padding:12px; border-radius:24px; overflow:hidden; opacity:0; transform:translateY(40px) scale(.95); transition:opacity .6s ease-out,transform .6s cubic-bezier(.22,1,.36,1), box-shadow:0 4px 14px rgba(0,0,0,0.08);}

/* Varianti */
.problem-card.type-large { flex-direction:column; background:#807E6B; max-height:400px; }
.problem-card.type-small { flex-direction:row; align-items:center; background:#807E6B; max-height:275px; }

/* Allineamento */
.new-card--left .new-card--left .new-card__content, .new-card--right .new-card__content {flex: 1;display: flex;flex-direction: column;gap: 16px;justify-content: center;}
.problem-card.left-align { margin-right:auto; }
.problem-card.right-align { margin-left:auto; }
.new-card--right { flex-direction: row-reverse; }
.new-card--right .new-card__content { align-items: flex-end; text-align: right; }
.new-card__icon { width: 60px;}
.new-card-mobile img {display: none;}

/* Immagine e contenuto */
.card-image { object-fit:cover; border-radius:16px; }
.type-large .card-image { width:100%; height:200px; margin-bottom:20px; }
.type-small .card-image { width:40%; margin-right:20px; flex-shrink:0; }
.card-content { display:flex; flex-direction:column; justify-content:center; flex-grow:1; text-align:left; }
.card-title { font-size:24px; font-weight:600; margin-bottom:12px; color:#fff; line-height:1.3; }
.card-description { font-size:16px; line-height:1.4; color:#fff; margin:0; }


@media (max-width: 768px) {
    .new-card-desktop img {display: none;}

    .new-card--left .new-card__content, .new-card--right .new-card__content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: center !important;
    }
}


/* Entrata con animazione */
@keyframes cardEnter {0%{opacity:0;transform:translateY(40px) scale(.95);}100%{opacity:1;transform:translateY(0) scale(1);}}
.problem-card.animate { animation:cardEnter .8s ease-out forwards; }
.cards-section .col-lg-6:first-child .problem-card:nth-of-type(1).animate { animation-delay:.2s; }
.cards-section .col-lg-6:first-child .problem-card:nth-of-type(2).animate { animation-delay:.4s; }
.cards-section .col-lg-6:first-child .problem-card:nth-of-type(3).animate { animation-delay:.6s; }
.cards-section .col-lg-6:last-child .problem-card:nth-of-type(1).animate { animation-delay:.8s; }
.cards-section .col-lg-6:last-child .problem-card:nth-of-type(2).animate { animation-delay:1s; }
.cards-section .col-lg-6:last-child .problem-card:nth-of-type(3).animate { animation-delay:1.2s; }

/* Hover */
.problem-card { transition: transform .3s ease; }
.problem-card:hover { transform: scale(1.03); }

/* Spaziatura griglia */
.cards-section .row { margin:0; gap:0; }
.cards-section .col-lg-6 { padding:0 10px; }
.cards-section .col-lg-6:first-child { padding-left:0; }
.cards-section .col-lg-6:last-child { padding-right:0; }

/* Numeri dinamici */
.metric-value span { display: inline-block; min-width: 2ch; text-align: right; }

/* Se ti riconosci... */
.change-text { font-size: 2rem; font-weight: 400; color: white; z-index: 1; text-align: center;}
.eventami-can-do { font-family: 'Glancyr Neue', sans-serif; font-weight: 300; font-size: 40px; color: white; text-align: left; z-index: 1; }
.metric-card, .mini-card { background-color: #272411; border-radius: 16px; padding: 20px; z-index: 1;}
.metric-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; z-index: 1; min-height:180px}
.metric-value { font-family: 'Glancyr Neue', sans-serif; font-size: 3rem; font-weight: 300; color: var(--color-secondary); margin: 0; z-index: 1;}
.metric-text { font-family: 'Napzer', sans-serif; font-size: 16px; color: white; margin: 0; z-index: 1; }
.text-secondary { color: #FFED00 !important; }
.metric-card:hover, .mini-card:hover    { transform: translateY(-8px); box-shadow: 0 8px 16px rgba(255,217,0,0.3); transition: transform .3s ease, box-shadow .3s ease; }
.problems-cta-buttons                   { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.problems-cta-buttons .btn-register, .problems-cta-buttons .badge-lancio { display: block; max-width: 400px; width: 100%; text-align: center; }
@media(max-width:768px) {
    .row.mt-4>.col-6{flex:0 0 100%; max-width:100%; padding:0; align-content: center; text-align: center; --bs-gutter-x: 0;}
    .change-text {font-size: 2rem; text-align: center;}
    .metric-value { font-size: 3rem; }}
    .eventami-can-do {text-align: center;}
    .metric-card    { display: flex; flex-direction: column; align-items: center; text-align: center; z-index: 1; min-height: 180px; justify-content: center; }
}

/* base sezione */
.how-it-works-section { background:#fafafa; padding:4rem 0; }
.section-title { font-family:'Glancyr Neue',sans-serif; font-size:2.5rem; margin-bottom:1rem; color: #222222;}
.section-subtitle { font-family:'Napzer',sans-serif; font-size:1rem; margin-bottom:3rem; color: #222222; }
.step-number-card { font-family:'Napzer',sans-serif; font-size:7rem; color:#666; }
.step-number-card > span {width:70px;display:block;text-align:center;}
/* sfondo scuro + forme gialle */
.how-works-bg { position:relative; margin:0 auto; padding:24px; max-width:1200px; background:#272411; border-radius:16px; overflow:hidden; }
@media(max-width:768px) {
    .how-it-works-section { padding:3rem 0; }
    .section-title { font-size: 2rem;}
}

/* scope: solo all’interno di .how-works-bg */
.how-works-bg .shape {
    position: absolute;
    will-change: transform;
    opacity: 0.25;
}

/* dimensioni e posizionamento già definiti in precedenza */
.shape--1 { top: -100px; left: -100px; width: 300px; height: 300px; animation: floatA 25s ease-in-out infinite; }
.shape--2 { top: 50px; right: -100px; width: 200px; height: 200px; animation: floatB 20s ease-in-out infinite; animation-delay: 5s; }
.shape--3 { bottom: -150px; left: 20%; width: 350px; height: 350px; animation: floatC 30s ease-in-out infinite; animation-delay: 2s; }
.shape--4 { bottom: -100px; right: 10%; width: 250px; height: 250px; animation: floatB 22s ease-in-out infinite; animation-delay: 8s; }

/* keyframes per tre diverse traiettorie */
@keyframes floatA {
    0%   { transform: translate(  0,   0) rotate(  0deg); }
    25%  { transform: translate( 40px,-30px) rotate( 45deg); }
    50%  { transform: translate(  0,  60px) rotate( 90deg); }
    75%  { transform: translate(-40px,-30px) rotate(135deg); }
    100% { transform: translate(  0,   0) rotate(360deg); }
}

@keyframes floatB {
    0%   { transform: translate(  0,   0) rotate(  0deg); }
    20%  { transform: translate(-50px, 20px) rotate(-30deg); }
    40%  { transform: translate( 30px, 50px) rotate( 60deg); }
    60%  { transform: translate(-30px,-50px) rotate(-120deg); }
    80%  { transform: translate( 50px,-20px) rotate(180deg); }
    100% { transform: translate(  0,   0) rotate(360deg); }
}

@keyframes floatC {
    0%   { transform: translate(  0,   0) rotate(  0deg); }
    33%  { transform: translate( 20px, 40px) rotate( 90deg); }
    66%  { transform: translate(-20px,-40px) rotate(180deg); }
    100% { transform: translate(  0,   0) rotate(360deg); }
}

/* grid dei passi */
.how-works-grid { display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:min-content; gap:3rem; position:relative; z-index:1; }
.how-works-bg { overflow: visible; }

/* singolo passo */
.how-step { position:relative; background:#F6F6F3; border-radius:16px; padding:2rem; display:flex;align-items: center; }
.step-number { position:absolute; top:1rem; left:-1.5rem; font-family:'Glancyr Neue',sans-serif; font-size:5rem; color:#AFAD9C; line-height:1; }
.step-content { margin-left:1rem; }
.step-title-card { font-family:'Glancyr Neue',sans-serif; font-size:1.25rem; margin-bottom:0.5rem; color: #222222 }
.step-desc { font-family:'Napzer',sans-serif; font-size:0.875rem; color:#444; }

/* Contenitore sezione: mobile default (colonna) */
/* sub‑cards */
.sub-cards-container { position: relative; margin-top: -60px !important; width: 100%; overflow: visible; }
.sub-cards-wrapper { position: relative; display: flex; justify-content: space-between; gap: 16px; padding: 0 8px; max-width: 1150px;margin:0 auto;}
.sub-card { flex: 1; min-width: 180px; height: 160px; background-color: #514E37; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; justify-content:center; align-items: center; text-align: center; z-index: 10; background-position: center -90px;background-size: cover; background-repeat: no-repeat; }
.sub-card:hover { background-color: #333333;}
.sub-icon-card { width: 64px; height: 64px; }
.sub-text { font-family: 'Napzer', sans-serif; font-size: 14px; line-height: 1.4; color: #fff; margin: 0;padding:30px 10px 0 10px; }

/* responsive mobile */
@media(max-width:768px){
    .how-works-grid { grid-template-columns:1fr; gap:2rem; }
    .step-number { left:1rem; top:-1rem; }
    .step-content { margin-left:2.5rem; }
    .sub-cards-wrapper { top: 8rem; flex-wrap:wrap; gap:1rem; }
}

/* prima e dopo */
.before-after-section { background-color:#ffffff; margin:120px auto; padding:3rem; border-radius:24px; width: 80%; overflow: visible; }
.before-card { background-color:#EBEAE5; padding:24px; border-radius:16px; min-height:560px; display:grid; }
.after-card { background-color:#272411; padding:24px; border-radius:16px; min-height:560px; display:grid; margin-left:-40px; }
.before-after-list { display:flex; gap:20px; }
.before-after-list .col-md-6 { flex:1; }
.before-after-list ul { list-style:none; margin:0; padding:0; }
.before-list li, .after-list li { position:relative; padding-left:24px; margin-bottom:12px; font-family:'Napzer',sans-serif; font-size:16px; }
.before-list li { color:var(--color-primary); }
.after-list li { color:#ffffff; }
.before-title { font-family: 'Napzer', sans-serif; font-size:2rem; font-weight:300; padding-left: 2px; color:var(--color-primary);}
.after-title { font-family: 'Napzer', sans-serif; font-size:2rem; font-weight:300; padding-left: 2px; color:var(--color-white);}
.section-subtitle { font-family:'Napzer',sans-serif; font-size:16px; color:var(--color-primary); margin-bottom:40px; text-align:center; }
.before-after-title {font-family:'Napzer',sans-serif; font-size:2.5rem; color:var(--color-primary); margin-bottom:40px; text-align:center; }
@media (max-width:768px) {
    .before-after-section { width: 100%; margin-top: 200px; padding: 3rem 1rem; }
    .before-after-list { flex-direction:column; }
    .before-card, .after-card { flex:0 0 100%; max-width:100%; margin:12px 0; } }

/* carosello */
.advantages-section-slider { margin:120px 1rem; padding:0 16px; }
.advantages-title { font-family:'Glancyr Neue',sans-serif; font-size:3rem; color:#fff; text-align:center; margin-bottom:16px; }
.advantages-desc { font-family:'Napzer',sans-serif; font-size:16px; color:rgba(255,255,255,0.8); text-align:center; margin-bottom:8px; }
.advantages-highlight { font-family:'Glancyr Neue',sans-serif; font-size:1.2rem; color:var(--color-secondary); text-align:center; margin-bottom:32px; }
.advantages-slider-wrapper { position:relative; padding:0 60px; }
.advantages-slider { display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; align-items:stretch; }
.advantages-slider::-webkit-scrollbar { display:none; }
.adv-card, .adv-card-extra { flex:0 0 calc((100% - 3 * 24px)/4); border-radius:12px; padding:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; scroll-snap-align:start; transition:transform .3s ease, background-color .3s ease; min-height:270px; position:relative; }
.adv-card { background-color:#272411; color:#fff; }
.adv-card-extra { background-color:var(--color-secondary); color: #000; }
.adv-card img, .adv-card svg, .adv-card-extra img, .adv-card-extra svg { width:60px; height:60px; margin-bottom:16px; flex-shrink:0; }
.adv-card svg { fill:var(--color-secondary); transition:fill .3s ease; }
.adv-card-extra svg { fill:#000; transition:fill .3s ease; }
.adv-card:hover, .adv-card-extra:hover { transform:scale(1.04); }
.slider-arrow { background:transparent; border:none; cursor:pointer; position:absolute; top:50%; transform:translateY(-50%); font-size:1.5rem; display:flex; align-items:center; justify-content:center; }
.prev-arrow { left: 0; }
.next-arrow { right: 0; }
.slider-arrow { color: var(--color-secondary); }
.slider-dots { position:absolute; bottom:-30px; left:50%; transform:translateX(-50%); display:flex; gap:8px; }
.dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.5); transition:background .3s ease; }
.dot.active { background:var(--color-secondary); }
.dot.onlymobile {display:none;}
.phone-mockup-mobile.onlymobile {display:none;}

@media (max-width:768px) {
    .adv-card, .adv-card-extra { flex:0 0 60%; }
    .advantages-title {font-size: 2rem;}
    .advantages-slider-wrapper { padding:0 30px; }
    .dot.onlymobile{display:block;}
}

/* impegno concreto */
.section-impegno {margin: 120px auto;}
.impegno-title {font-size: 3rem;}

/* 3 large cards vantaggi */
.three-cards-section {background-color: #000; }
.problems-cta-section .mini-card      { display: flex; flex-direction: row; align-items: center; text-align: center; z-index: 1; height: 140px; justify-content: space-between; }
.three-cards-section .container { max-width: 80%; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.new-card { justify-content: space-between; position: relative; display: flex; align-items: center; background: #5C5658; border-radius: 16px; overflow: hidden; padding: 24px; }
.new-card--left .new-card__content, .new-card--right .new-card__content { flex: 1; display: flex; flex-direction: column; justify-content: space-between }
.new-card--left .new-card__media, .new-card--right .new-card__media { width: 30%; }
.new-card__content-right { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; }
.new-card__content-left { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.new-card__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; }
.new-card-mobile {display: none;}
.new-card--right { display: flex ; align-items: center; align-content: center; justify-content: space-between; }
.new-card__content { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.new-card__icon { max-width: 48px; height: 48px; fill: var(--color-secondary); order: 2; margin-top: 12px; }
.new-card__title { font-family: 'Glancyr Neue', sans-serif; font-size: 40px; font-weight: 400; color: #fff; margin: 0; order: 1; }
.new-card__bubble { position: absolute; background: #cccccc; color: #333; padding: 16px 24px; border-radius: 12px; max-width: 280px; font-family: 'Napzer', sans-serif; font-size: 16px; line-height: 1.4; }
.new-card__bubble--1 { top: 50%; right: 10%; transform: translate(-40%,-50%); }
.new-card__bubble--2 { background: #FFED00 !important; top: 50%; left: 10%; transform: translate(90%,80%); max-width: 130px; }
.new-card__bubble--3 { top: 50%; right: 10%; transform: translate(-60%,0%); }
@media (max-width: 768px) {
    .problems-cta-section .mini-card      { display: flex; flex-direction: column; align-items: center; text-align: center; z-index: 1; min-height: 180px; justify-content: center; }
    .three-cards-section .container { gap: 20px; }
    .new-card { flex-direction: column; max-height: 680px; }
    .new-card__title {text-align: center; font-size: 32px; margin-top: 1rem;}
    .new-card--right  {width: 100%; align-items: center; display: flex; flex-direction: column; gap: 16px; }
    .new-card__bubble { position: static; transform: none; margin: -40px auto 0; text-align: center; }
    .new-card__media {width: 100%; align-items: center; display: flex; flex-direction: column; gap: 16px; }
    .new-card-img {max-width: 280px; min-width: 240px;}
    .new-card--left .new-card__content, .new-card--right .new-card__content { flex: 1; display: flex ; flex-direction: column; gap: 0; align-items: center !important; }
    .new-card__content-right .new-card__content-left { flex: 1; display: flex; flex-direction: column; gap: 0; align-items: center !important;}

}


.features-section { background-color: #f8f8f8; padding: 80px 0 0 0; }
.section-header { background-color: #000; border-radius: 16px; padding: 40px; text-align: center; margin-bottom: 60px; }
.section-header h2 { color: #FFD700; font-family: 'Glancyr Neue', sans-serif; font-size: 32px; margin: 0 0 16px; }
.section-header p { color: #fff; font-family: 'Napzer', sans-serif; font-size: 16px; margin: 0; }
.top-features .feature-item { margin-bottom: 40px; }
.feature-item h4 { font-size: 1.25rem; font-weight:500 !important; margin-bottom: 12px; color: var(--color-primary); }
.feature-item p { font-size: 0.9rem; color: #333; }
.main-row { margin-bottom: 60px; }
.side-features .side-feature { margin-bottom: 40px; }
.side-feature h4 { font-size: 1.25rem; font-weight:500; margin-bottom: 12px; color: var(--color-primary); }
.side-feature p { font-size: 14px; color: #333;}
.phone-mockup-desktop { max-height: 600px; margin-bottom: -115px; z-index: -1; }

@media (max-width: 768px) {
    .section-header { padding: 24px; margin-top:90px;}
    .top-features, .main-row { flex-direction: column; }
    .phone-mockup-desktop { display: none; }
    .phone-mockup-mobile {margin-bottom: -114px;}
}

.features-dev-section { background-color: #000; padding: 80px 0; }
.features-dev-section .container { max-width: 75%; margin: 0 auto; text-align: center; }
.fd-title { font-family: 'Glancyr Neue', sans-serif; font-size: 40px; color: #fff; margin-bottom: 16px; }
.fd-highlight { color: var(--color-secondary); }
.fd-desc { font-family: 'Napzer', sans-serif; font-size: 16px; color: #fff; margin-bottom: 32px; }
.fd-pills { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.pill { display: inline-block; padding: 8px 24px; border: 1px solid rgba(255,255,255,0.3); border-radius: 50px; font-family: 'Napzer', sans-serif; font-size: 14px; color: #fff; }
.pill { transition: background-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease; }


/* TUTORIAL + VANTAGGI */
.founder-badge-tutorial { margin: 5rem auto; padding: 4rem 0; background-color: #e6e6e6; border-radius: 24px; }
.left-panel { display: flex; flex-direction: column; justify-content: center; text-align: center; align-content: center; }
@media (min-width: 992px) { .left-panel { text-align: left; }  .founder-badge-tutorial {padding: 0;}  }
.card-body {align-content: center; display: flex; flex-direction: column;   }
.right-panel, .steps-card .card-body { display: flex; flex-direction: column; align-items: center !important; }
.tutorial-wrapper { display: flex; gap: 2rem; flex-wrap: nowrap; align-items: stretch; max-width: 1200px; margin: 0 auto; }
.left-panel, .right-panel { flex: 1 1 50%; }
.steps-card { background: #ffffff; border-radius: 24px; overflow: hidden; position: relative; width: 100%; }
.stepper { display: flex; gap: 5rem; justify-content: center; margin-bottom: 1rem; flex-wrap: wrap; }
.step { position: relative; display: flex; flex-direction: column; align-items: center; padding: 1rem; cursor: pointer; flex: 1; border-radius: 100%; }
@media (max-width: 768px) {
    .founder-badge-tutorial {margin: 0 1rem;padding: 0 1rem;}
    .stepper { flex-direction: column; } }
    .step-icon { font-size: 60px; border-radius: 50%; transform: scale(1.05); color: var(--color-olive-grey); }
    .step.current {transform: scale(1.1); transition: transform .3s ease; }
    .step.current .step-icon { color: var(--color-primary); }
    .step.current .stepper-number-badge { color: var(--color-primary); }
    .step.completed .step-icon { opacity: .8; color: var(--color-olive-grey); }
    .step .step-icon { font-size: 1.75rem; margin-bottom: 8px; transition: filter .3s ease, transform .3s ease; }
    .step .step-label { font-size: 1rem; font-weight: 600; margin-bottom: 4px; text-align: center; }
    .stepper-number-badge { font-size: .5rem; color: #666; }
    .step-actions { display: flex; gap: 0.75rem; flex-wrap: nowrap; width: 100%; margin-top: auto; }
    .step-actions button, .step-actions .btn-next-registrati { flex: 0 0 auto; }
    .step-actions.justify-content-between { justify-content: space-between; }
    .step-actions.justify-content-end { justify-content: flex-end; }
    .steps-container { position: relative; min-height: 300px; height: auto; }
    .step-item { justify-content: flex-start; align-items: center; opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 300px; height: auto; transition: opacity .4s ease, transform .3s ease; transform: translateY(10px); pointer-events: none; padding: 1rem; display: flex; flex-direction: column; }
    .step-item.active { opacity: 1; transform: translateY(0); pointer-events: auto; position: static; }
    .step-item:not(.active) { display: none; }
    .step-text { flex: 1; }
    .step-title-section { font-size: 1.5rem; text-align: center; }
    .step-title { font-size: 1.5rem; margin: 24px 0 .25rem; font-weight: 600; }
    .step-desc { margin: 0; font-size: 1rem; color: #555; }
    .progress { height: 6px; background: #e6e6e6; border-radius: 3px; overflow: hidden; margin-bottom: 1rem; }
    .progress-bar { background: var(--color-secondary); height: 100%; width: 33%; transition: width .4s ease; }
    .form-control { display: block; width: 100%; padding: 0.5rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--color-primary); background-color: var(--color-white); margin: 4px; background-clip: padding-box; border: var(--bs-border-width) solid var(--bs-border-color); -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 8px; }
    .form-control:hover { background-color: var(--color-secondary);}
    .next-reg-step { color: var(--color-olive-grey); font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; text-align: center; }

    @media (max-width: 992px) {
        .founder-badge-tutorial { margin: 0 auto; padding: 0; }
        .step-item .d-flex { flex-direction: column; text-align: center; }
        .steps-card { width: 100%; }
        .stepper {flex-direction: row;gap: 2rem;text-align: center;}
        .benefit-icon { text-align: center !important; }
        .tutorial-wrapper { flex-direction: column; }
        .left-panel, .right-panel { flex: none; width: 100%; }
        .left-panel { align-items: center; text-align: center; }
        .left-panel .tutorial-title { text-align: center; }
        .left-panel .benefit-item { flex-direction: column; align-items: center; gap: 8px; }
        .left-panel .benefit-item i { margin-right: 0; margin-bottom: 6px; font-size: 1.5rem; }
        .left-panel .benefit-item div { text-align: center; }
        .left-panel .btn-cta { margin-top: 16px; max-width: 100%; }
        .step-desc { text-align: left;}
    }

/* TUTORIAL + VANTAGGI
.tutorial-wrapper { display: flex; gap: 2rem; flex-wrap: nowrap; align-items: stretch; max-width: 1200px; margin: 0 auto; }
.left-panel, .right-panel { flex: 1 1 50%; display: flex; flex-direction: column; justify-content: center; }
.steps-card { background: #ffffff; border-radius: 24px; overflow: hidden; position: relative; width: 100%; }
.stepper { display: flex; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.step-actions { display: flex; gap: 0.75rem; flex-wrap: nowrap; width: 100%; }
.step-actions button,
.step-actions .btn-next-registrati { flex: 0 0 auto; }
.step-actions.justify-content-between { justify-content: space-between; }
.step-actions.justify-content-end { justify-content: flex-end; }
.step-item { justify-content: center; align-items: center; }
.step { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 24px; border-radius: 100%; cursor: pointer; position: relative; }
.step .step-icon { font-size: 1.75rem; margin-bottom: 8px; transition: filter .3s ease, transform .3s ease; }
.step .step-label { font-family: 'Glancyr Neue', sans-serif; font-size: 1rem; font-weight: 600; margin-bottom: 4px; text-align: center; }
.stepper-number-badge { font-size: .75rem; color: #666; }
.step.current .step-icon { filter: brightness(1.3); transform: scale(1.05); color: var(--color-primary); }
.step.completed .step-icon { opacity: .8; color: #807E6B;}
.progress { height: 6px; background: #e6e6e6; border-radius: 3px; overflow: hidden; margin-bottom: 1rem; }
.progress-bar { background: var(--color-secondary); height: 100%; width: 0; transition: width .4s ease; }
.steps-container { position: relative; min-height: 200px; }
.step-item { opacity: 0; position: absolute; inset: 0; transition: opacity .4s ease, transform .3s ease; transform: translateY(10px); pointer-events: none; }
.step-item.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.step-icon {font-size: 60px;}
.step-text { flex: 1; }
.step-title-section {font-size: 1.5rem; text-align: center;}
.step-title { font-size: 2rem; margin: 24px 0 .25rem; font-weight: 600; }
.step-desc { margin: 0; font-size: 1rem; color: #555; }

@media (max-width: 992px) {
    .tutorial-wrapper { flex-direction: column !important; }
    .left-panel, .right-panel { width: 100%; }
    .tutorial-wrapper { flex-wrap: wrap; }
}  */


/* Footer text */
.footer-text { font-family: 'Napzer', sans-serif; font-size: 16px; color: #fff; }
.footer-highlight { color: var(--color-secondary); font-family: 'Glancyr Neue', sans-serif; }

@keyframes floatEllipse1 { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(120px, -80px) rotate(90deg); } 50% { transform: translate(200px, 0) rotate(180deg); } 75% { transform: translate(120px, 80px) rotate(270deg); } 100% { transform: translate(0, 0) rotate(360deg); } }
@keyframes floatEllipse2 { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(-150px, -60px) rotate(90deg); } 50% { transform: translate(-250px, 0) rotate(180deg); } 75% { transform: translate(-150px, 60px) rotate(270deg); } 100% { transform: translate(0, 0) rotate(360deg); } }
@keyframes floatEllipse3 { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(100px, -100px) rotate(90deg); } 50% { transform: translate(180px, 0) rotate(180deg); } 75% { transform: translate(100px, 100px) rotate(270deg); } 100% { transform: translate(0, 0) rotate(360deg); } }
@keyframes floatEllipseMobile1 { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(60px, -40px) rotate(90deg); } 50% { transform: translate(100px, 0) rotate(180deg); } 75% { transform: translate(60px, 40px) rotate(270deg); } 100% { transform: translate(0, 0) rotate(360deg); } }
@keyframes floatEllipseMobile2 { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(-80px, -30px) rotate(90deg); } 50% { transform: translate(-120px, 0) rotate(180deg); } 75% { transform: translate(-80px, 30px) rotate(270deg); } 100% { transform: translate(0, 0) rotate(360deg); } }
@keyframes floatEllipseMobile3 { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(50px, -50px) rotate(90deg); } 50% { transform: translate(90px, 0) rotate(180deg); } 75% { transform: translate(50px, 50px) rotate(270deg); } 100% { transform: translate(0, 0) rotate(360deg); } }

/* Animazioni Slide-in */
@keyframes slideInRight { 0% { opacity: 0; transform: translateX(80px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes slideInLeft { 0% { opacity: 0; transform: translateX(-80px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes slideInTop { 0% { opacity: 0; transform: translateY(-80px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes slideInBottom { 0% { opacity: 0; transform: translateY(80px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } }

/* Responsive */
@media (max-width: 768px) {
    .hero-section { display: block; margin: 0 auto 30px; text-align: center; padding: 40px 0; }
    .hero-section .hero-title { font-size: 40px; margin-bottom: 20px; }
    .hero-section p { font-size: 16px; }
    .hero-image { display: block; margin: 20px auto; }
    .problems-section .problem-text { text-align: center; font-size: 18px; }
    .cards-section .row { flex-direction: column; }
    .cards-section .col-lg-6 { width: 100%; padding: 0 !important; }
    .card-image { width: 40%; margin-right: 20px; height: 256px; }
    .problem-card { margin: 15px auto; max-width: 90%; font-size: 20px; }
    .problem-card .card-description { text-align: left; font-size: 16px; }
    .problem-card.type-large.left-align, .problem-card.type-small.left-align, .problem-card.type-large.right-align, .problem-card.type-small.right-align { margin: 15px auto; }
    .btn-hero-cta, .btn-nav-cta { font-size: 16px; display: block; margin: 0 auto 30px; text-align: center; }
    .badge-lancio { display: block; margin: 0 auto 20px; text-align: center; }
}