*{box-sizing:border-box}
:root{--red:#e31b23;--red-dark:#b90f16;--black:#111113;--muted:#77777d;--line:#e9e9eb;--soft:#f6f6f7}
html{scroll-behavior:smooth}
body{margin:0;font-family:'DM Sans',sans-serif;color:var(--black);background:#fff}
h1,h2,h3,.brand-name,.footer-brand{font-family:'Manrope',sans-serif}
.site-navbar{height:82px;background:rgba(255,255,255,.9);backdrop-filter:blur(18px);border-bottom:1px solid rgba(0,0,0,.06);z-index:1000}
.navbar-brand{color:var(--black);text-decoration:none}
.brand-mark{width:38px;height:38px;background:var(--red);color:white;display:grid;place-items:center;border-radius:11px;font-family:Manrope;font-size:23px;font-weight:800;transform:skew(-4deg)}
.brand-name{font-size:10px;line-height:1.05;letter-spacing:1.2px}
.brand-name strong{font-size:11px}
.nav-link{font-weight:600;color:#555!important;padding:9px 14px!important}
.nav-link:hover,.nav-link.active{color:var(--red)!important}
.nav-cta{background:var(--black);color:#fff;text-decoration:none;padding:11px 17px;border-radius:9px;font-weight:700;font-size:14px;display:inline-flex;gap:9px;align-items:center;transition:.2s}
.nav-cta:hover{background:var(--red);color:#fff}
.hero-section{min-height:760px;position:relative;display:flex;align-items:center;overflow:hidden;background:#fff}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.035) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(to bottom,#000,transparent 90%)}
.hero-grid:after{content:"";position:absolute;width:650px;height:650px;border-radius:50%;background:rgba(227,27,35,.09);filter:blur(10px);right:-240px;top:-170px}
.hero-content{max-width:900px;padding:120px 0 90px}
.eyebrow,.section-kicker{font-size:11px;letter-spacing:2.3px;font-weight:800;color:var(--red);text-transform:uppercase}
.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.eyebrow span{width:25px;height:2px;background:var(--red)}
.hero-title{font-size:clamp(56px,8vw,112px);line-height:.92;letter-spacing:-5px;margin:0;font-weight:800}
.hero-title-red{color:var(--red)}
.hero-title-black{color:var(--black)}
.hero-subtitle{font-family:Manrope;font-size:clamp(22px,3vw,38px);font-weight:600;line-height:1.15;max-width:720px;margin:30px 0 18px}
.hero-description{font-size:17px;line-height:1.7;color:var(--muted);max-width:600px}
.hero-actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.btn-main,.btn-ghost{padding:14px 20px;border-radius:10px;text-decoration:none;font-weight:700;display:inline-flex;gap:12px;align-items:center;transition:.25s}
.btn-main{background:var(--red);color:#fff;box-shadow:0 12px 30px rgba(227,27,35,.18)}
.btn-main:hover{background:var(--red-dark);color:#fff;transform:translateY(-2px)}
.btn-ghost{border:1px solid #ddd;color:var(--black);background:#fff}
.btn-ghost:hover{border-color:var(--red);color:var(--red)}
.hero-bottom{position:absolute;bottom:25px;left:0;right:0;color:#999;font-size:9px;letter-spacing:2px;font-weight:700}
.thanks-section{padding:80px 0;background:#f7f7f8}
.thanks-card{text-align:center;padding:90px 20px;border-radius:25px;background:#fff;border:1px solid var(--line);position:relative;overflow:hidden}
.thanks-card:before{content:"";position:absolute;inset:auto -10% -70% -10%;height:80%;background:radial-gradient(circle,rgba(227,27,35,.11),transparent 65%)}
.thanks-label{font-size:10px;letter-spacing:2.5px;color:#999;font-weight:800;position:relative}
.thanks-section {
    padding: 70px 20px;
}

.thanks-card {
    width: 100%;
    padding: 70px 50px;
    border-radius: 28px;
    background: #fff;
}

.thanks-label {
    text-align: center;
    margin-bottom: 60px;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #777;
}

.thanks-counters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    align-items: start;
}

.thanks-counter-item {
    text-align: center;
    min-width: 0;
}

.counter-line {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
}

.thanksCounter {
    font-size: clamp(70px, 7vw, 120px);
    line-height: .85;
    font-weight: 800;
    letter-spacing: -5px;
    color: #000;
}

.heart {
    color: #ed1c24;
    font-size: 35px;
    line-height: 1;
    margin-top: 5px;
}

.thanks-counter-item h2 {
    margin: 25px 0 8px;
    font-size: 24px;
    font-weight: 400;
    color: #000;
}

.thanks-counter-item p {
    margin: 0 auto;
    max-width: 220px;
    font-size: 15px;
    line-height: 1.5;
    color: #777;
}


/* MOBILE */
@media (max-width: 768px) {

    .thanks-card {
        padding: 50px 20px;
    }

    .thanks-counters {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .thanks-label {
        margin-bottom: 45px;
    }

    .thanksCounter {
        font-size: 80px;
    }
}


.counter-line{position:relative;font-family:Manrope;font-size:clamp(70px,13vw,170px);font-weight:800;letter-spacing:-9px;line-height:1;margin:15px 0 5px}
.heart{color:var(--red);letter-spacing:0;vertical-align:top;position:relative;top:-3px}
.thanks-card h2{position:relative;font-size:24px;margin:0}
.thanks-card p{position:relative;color:var(--muted);margin:12px auto 0;max-width:520px}
.section-space{padding:110px 0}
.story-section{background:#fff}
.section-title{font-size:clamp(42px,5vw,70px);letter-spacing:-3px;line-height:1}
.section-text{font-size:17px;color:var(--muted);line-height:1.8;margin:0}
.info-card{height:100%;padding:38px;border:1px solid var(--line);border-radius:20px;position:relative;transition:.3s}
.info-card:hover{transform:translateY(-5px);box-shadow:0 20px 45px rgba(0,0,0,.07)}
.info-card.dark-card{background:var(--black);color:#fff;border-color:var(--black)}
.card-number{position:absolute;right:30px;top:25px;font-family:Manrope;font-weight:800;color:#ccc;font-size:12px}
.dark-card .card-number{color:#555}
.icon-circle{width:48px;height:48px;border-radius:14px;background:#fff0f0;color:var(--red);display:grid;place-items:center;margin-bottom:55px}
.dark-card .icon-circle{background:#29292b}
.info-card h3{font-size:27px;letter-spacing:-1px}
.info-card p{color:#777;line-height:1.7}
.dark-card p{color:#aaa}
.card-link{color:#fff;text-decoration:none;font-weight:700;font-size:14px;display:inline-flex;gap:10px;margin-top:10px}
.logo-section{padding:0 0 110px}
.logo-panel{background:var(--black);border-radius:25px;color:#fff;padding:75px;overflow:hidden;position:relative}
.logo-panel:after{content:"";position:absolute;width:450px;height:450px;border:1px solid rgba(255,255,255,.08);border-radius:50%;right:-100px;top:-170px}
.logo-panel h2{font-size:clamp(38px,5vw,62px);letter-spacing:-2px;margin:12px 0 20px}
.logo-panel p{color:#aaa;line-height:1.8;max-width:650px}
.white-kicker{color:#fff;opacity:.55}
.logo-placeholder{width:250px;height:250px;margin:auto;border-radius:45px;background:#fff;display:grid;place-items:center;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.logo-a{font-family:Manrope;font-weight:800;font-size:175px;color:var(--red);line-height:1;position:absolute;left:47px;top:23px}
.elephant-mini{font-size:72px;color:var(--red);position:absolute;right:31px;bottom:38px;transform:rotate(-18deg)}
.logo-placeholder+small{display:block;color:#666;letter-spacing:1.6px;font-size:9px;margin-top:18px}
.big-hashtag{font-family:Manrope;font-weight:800;color:#fff;font-size:clamp(28px,4vw,50px);margin-top:35px;letter-spacing:-2px}
.hashtag-desc{margin-bottom:0}
.closing-section{padding:130px 0;background:#f7f7f8}
.closing-kicker{font-size:10px;letter-spacing:3px;color:#999;font-weight:800}
.closing-section h2{font-size:clamp(48px,8vw,100px);line-height:.95;letter-spacing:-5px;margin:18px 0 38px}
.closing-section h2 span{color:var(--red)}
.inner-hero{padding:190px 0 100px;background:#f7f7f8;border-bottom:1px solid var(--line)}
.inner-hero h1{font-size:clamp(60px,9vw,120px);line-height:.9;letter-spacing:-6px;margin:18px 0 25px}
.inner-hero h1 span{color:var(--red)}
.inner-hero p{max-width:620px;color:var(--muted);font-size:18px;line-height:1.7}
.section-heading-row{display:flex;justify-content:space-between;align-items:end;gap:20px}
.section-heading-row h2{font-size:42px;letter-spacing:-2px;margin:10px 0 0}
.people-count{font-size:10px;letter-spacing:2px;color:#999;font-weight:800}
.person-card{display:flex;align-items:center;gap:16px;padding:20px;text-decoration:none;color:var(--black);border:1px solid var(--line);border-radius:16px;transition:.25s;background:#fff}
.person-card:hover{border-color:#f2b0b3;transform:translateY(-3px);box-shadow:0 15px 35px rgba(0,0,0,.06);color:var(--black)}
/* .person-avatar{width:48px;height:48px;border-radius:13px;background:#fff0f0;color:var(--red);display:grid;place-items:center;font-family:Manrope;font-weight:800;font-size:20px} */
.person-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff0f2;
    color: #ed1b3b;
    font-weight: 700;
    font-size: 20px;
}

.person-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.person-info{flex:1}
.person-info h3{font-size:16px;margin:0 0 4px}
.person-info span{font-size:12px;color:#999;font-weight:700}
.person-instagram{color:#d62976;font-size:20px}
.empty-state{padding:60px;text-align:center;border:1px dashed #ddd;border-radius:20px;color:#999}
.projects-section{background:#fff}
.project-slider{display:grid;grid-template-columns:1.1fr .9fr;min-height:620px;background:#f7f7f8;border-radius:25px;overflow:hidden}
.project-image-wrap{position:relative;min-height:620px;background:#e9e9eb}
.project-image{position:absolute;inset:0;opacity:0;transition:opacity .45s}
.project-image.active{opacity:1}
.project-image img{width:100%;height:100%;object-fit:cover}
.project-image-placeholder{width:100%;height:100%;display:grid;place-items:center;color:#bbb;font-size:70px}
.project-index{position:absolute;left:30px;bottom:28px;color:#fff;background:rgba(0,0,0,.6);padding:9px 12px;border-radius:8px;font-size:10px;letter-spacing:2px}
.project-copy{padding:70px 60px;display:flex;flex-direction:column;justify-content:center}
.project-text{display:none}
.project-text.active{display:block;animation:fadeUp .4s}
.project-text h2{font-size:clamp(38px,4vw,62px);letter-spacing:-3px;line-height:1;margin:15px 0 20px}
.project-text p{color:#777;line-height:1.8;font-size:16px}
.slider-controls{display:flex;align-items:center;gap:20px;margin-top:50px}
.slider-controls>button{width:46px;height:46px;border-radius:50%;border:1px solid #ddd;background:#fff;display:grid;place-items:center;transition:.2s}
.slider-controls>button:hover{background:var(--red);color:#fff;border-color:var(--red)}
.slider-dots{display:flex;gap:7px}
.slider-dots button{width:8px;height:8px;border-radius:50%;border:0;background:#d5d5d5;padding:0}
.slider-dots button.active{background:var(--red);width:25px;border-radius:5px}
.site-footer{background:#111113;color:#fff;padding:70px 0 25px}
.footer-top{display:flex;justify-content:space-between;gap:30px;padding-bottom:60px}
.footer-brand{font-weight:800;font-size:22px;line-height:.95;letter-spacing:-1px}
.footer-brand span{color:var(--red)}
.footer-top p{color:#777;margin-top:14px;font-size:13px}
.footer-hashtag{font-family:Manrope;font-weight:800;font-size:25px;align-self:center}
.footer-hashtag i{color:var(--red)}
.footer-bottom{border-top:1px solid #29292b;padding-top:22px;color:#666;font-size:10px;letter-spacing:1px;display:flex;justify-content:space-between}
.reveal{animation:fadeUp .8s both}
.delay-1{animation-delay:.08s}.delay-2{animation-delay:.16s}.delay-3{animation-delay:.24s}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:991px){.site-navbar{height:70px}.navbar-collapse{background:#fff;padding:15px;border:1px solid #eee;border-radius:14px;margin-top:8px}.hero-section{min-height:720px}.hero-title{letter-spacing:-3px}.logo-panel{padding:45px 30px}.project-slider{grid-template-columns:1fr}.project-image-wrap{min-height:400px}.project-copy{min-height:450px;padding:45px 30px}}
@media(max-width:575px){.hero-content{padding-top:120px}.hero-title{font-size:56px}.hero-subtitle{font-size:23px}.hero-bottom{display:none}.section-space{padding:75px 0}.thanks-card{padding:65px 15px}.counter-line{font-size:90px}.logo-placeholder{width:200px;height:200px}.logo-a{font-size:140px;left:37px;top:20px}.elephant-mini{font-size:55px;right:24px;bottom:28px}.footer-top,.footer-bottom{flex-direction:column}.footer-hashtag{align-self:flex-start}.inner-hero{padding:140px 0 70px}.inner-hero h1{letter-spacing:-4px}.section-heading-row{align-items:start;flex-direction:column}.project-image-wrap{min-height:300px}}
.navbar-logo {
    height: 82px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    display: block;
}

@media (max-width: 576px) {
    .navbar-logo {
        height: 54px;
        max-width: 150px;
    }
}

.logo-image-wrapper {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.monogramma-image {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    object-fit: contain;
}

@media (max-width: 991px) {
    .logo-image-wrapper {
        max-width: 300px;
        padding: 10px;
    }

    .monogramma-image {
        max-width: 250px;
    }
}

@media (max-width: 576px) {
    .logo-image-wrapper {
        max-width: 240px;
    }

    .monogramma-image {
        max-width: 210px;
    }
}






/* =========================================================
   APPARTENENZA CARD — COMPLETE STYLE
   ========================================================= */

/* ---------- HERO CARD ---------- */

.card-hero {
    min-height: 760px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #fff;
}

.card-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px);
    background-size: 70px 70px;
}

.card-hero-grid::after {
    content: "";
    position: absolute;
    width: 650px;
    height: 650px;
    border-radius: 50%;
    right: -220px;
    top: -170px;
    background: rgba(227,27,35,.09);
    filter: blur(15px);
}

.card-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 140px 0 100px;
}

.card-hero h1 {
    margin: 0;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(60px, 8vw, 115px);
    line-height: .9;
    letter-spacing: -6px;
    font-weight: 800;
}

.card-hero h1 span {
    color: #e31b23;
}

.card-hero-subtitle {
    max-width: 730px;
    margin: 30px 0 18px;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(23px, 3vw, 38px);
    line-height: 1.15;
    font-weight: 600;
}

.card-hero-description {
    max-width: 620px;
    color: #77777d;
    font-size: 17px;
    line-height: 1.75;
}


/* ---------- GENERAL ---------- */

.section-title span,
.card-cta h2 span {
    color: #e31b23;
}

.card-explanation {
    background: #f7f7f8;
}


/* ---------- INFO BOXES ---------- */

.card-info-box {
    height: 100%;
    padding: 35px;
    background: #fff;
    border: 1px solid #e9e9eb;
    border-radius: 20px;
    transition: .3s ease;
}

.card-info-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(0,0,0,.07);
}

.card-info-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 45px;
    border-radius: 15px;
    background: #fff0f0;
    color: #e31b23;
    display: grid;
    place-items: center;
    font-size: 20px;
}

.card-info-box h3 {
    margin-bottom: 12px;
    font-size: 24px;
}

.card-info-box p {
    margin: 0;
    color: #77777d;
    line-height: 1.75;
}


/* ---------- ESERCENTI ---------- */

.merchants-section {
    background: #fff;
}

.section-heading-row h2 {
    margin: 10px 0 0;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(38px, 5vw, 58px);
    line-height: 1;
    letter-spacing: -3px;
}

.section-heading-row h2 span {
    color: #e31b23;
}

.merchant-card {
    height: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e9e9eb;
    border-radius: 20px;
    transition: .3s ease;
}

.merchant-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 22px 50px rgba(0,0,0,.08);
}

.merchant-logo {
    width: 100%;
    height: 190px;
    background: #f5f5f6;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.merchant-logo img {
    max-width: 70%;
    max-height: 125px;
    object-fit: contain;
}

.merchant-logo i {
    color: #c9c9cc;
    font-size: 55px;
}

.merchant-content {
    padding: 28px;
}

.merchant-label {
    margin-bottom: 9px;
    color: #aaa;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}

.merchant-content h3 {
    margin: 0 0 13px;
    font-family: 'Manrope', sans-serif;
    font-size: 25px;
    letter-spacing: -.7px;
}

.merchant-address {
    margin: 0;
    color: #888;
    font-size: 13px;
    line-height: 1.5;
}

.merchant-address i {
    margin-right: 6px;
    color: #e31b23;
}

.merchant-discount {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #e9e9eb;
}

.merchant-discount span {
    display: block;
    margin-bottom: 7px;
    color: #aaa;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.merchant-discount span i {
    color: #e31b23;
}

.merchant-discount strong {
    display: block;
    font-size: 14px;
    line-height: 1.5;
}


/* ---------- CTA ---------- */

.card-cta-section {
    padding: 0 0 110px;
    background: #fff;
}

.card-cta {
    min-height: 250px;
    padding: 55px 65px;
    background: #111113;
    border-radius: 25px;
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;

    position: relative;
    overflow: hidden;
}

.card-cta::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    right: -150px;
    top: -160px;
    border: 1px solid rgba(255,255,255,.06);
}

.card-cta h2 {
    margin: 10px 0;
    font-family: 'Manrope', sans-serif;
    font-size: 42px;
    letter-spacing: -2px;
}

.card-cta p {
    margin: 0;
    color: #888;
}

.btn-white {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 14px 20px;

    background: #fff;
    color: #111113;

    border-radius: 10px;
    text-decoration: none;

    font-weight: 700;
    white-space: nowrap;

    transition: .25s ease;
}

.btn-white:hover {
    background: #e31b23;
    color: #fff;
    transform: translateY(-2px);
}


/* =========================================================
   ATTIVAZIONE CARD
   ========================================================= */

.activation-page {
    min-height: calc(100vh - 82px);
    padding: 170px 0 110px;
    background: #f7f7f8;
}

.activation-wrapper {
    max-width: 800px;
    margin: auto;
}

.activation-wrapper h1 {
    margin: 15px 0 25px;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(55px, 8vw, 90px);
    line-height: .92;
    letter-spacing: -5px;
}

.activation-wrapper h1 span {
    color: #e31b23;
}

.activation-intro {
    max-width: 650px;
    margin-bottom: 45px;
    color: #77777d;
    font-size: 17px;
    line-height: 1.75;
}

.activation-form {
    padding: 40px;
    background: #fff;
    border: 1px solid #e9e9eb;
    border-radius: 22px;
    box-shadow: 0 15px 50px rgba(0,0,0,.035);
}

.activation-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.activation-form input {
    width: 100%;
    padding: 14px 15px;

    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;

    outline: none;

    font-family: 'DM Sans', sans-serif;
    font-size: 14px;

    transition: .2s;
}

.activation-form input:focus {
    border-color: #e31b23;
    box-shadow: 0 0 0 4px rgba(227,27,35,.07);
}

.activation-check {
    margin-top: 28px;
    padding: 18px;

    background: #f7f7f8;
    border-radius: 13px;

    display: flex;
    gap: 15px;
}

.activation-check > i {
    margin-top: 2px;
    color: #e31b23;
    font-size: 20px;
}

.activation-check strong {
    font-size: 14px;
}

.activation-check p {
    margin: 4px 0 0;
    color: #888;
    font-size: 12px;
    line-height: 1.5;
}

.activation-submit {
    margin-top: 25px;
    border: 0;
    cursor: pointer;
}

.activation-error {
    margin-bottom: 20px;
    padding: 15px;

    background: #fff0f0;
    border: 1px solid #ffd0d2;
    border-radius: 10px;

    color: #e31b23;
    font-size: 14px;
}


/* =========================================================
   SERVIZIO CARD
   ========================================================= */

.service-page {
    min-height: calc(100vh - 82px);
    padding: 130px 0;

    background: #f7f7f8;

    display: flex;
    align-items: center;
}

.service-empty {
    max-width: 750px;
    margin: auto;
    text-align: center;
}

.service-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;

    background: #fff0f0;
    color: #e31b23;

    border-radius: 24px;

    display: grid;
    place-items: center;

    font-size: 30px;
}

.service-icon.pending {
    background: #fff8e7;
    color: #b97900;
}

.service-empty h1 {
    margin: 15px 0 25px;

    font-family: 'Manrope', sans-serif;
    font-size: clamp(48px, 7vw, 80px);
    line-height: .95;
    letter-spacing: -4px;
}

.service-empty h1 span {
    color: #e31b23;
}

.service-empty p {
    max-width: 600px;
    margin: 0 auto 30px;

    color: #777;
    line-height: 1.8;
}


/* SERVICE HEADER */

.service-header {
    padding: 170px 0 90px;
    background: #f7f7f8;
}

.service-header h1 {
    margin: 15px 0 25px;

    font-family: 'Manrope', sans-serif;
    font-size: clamp(60px, 8vw, 105px);
    line-height: .9;
    letter-spacing: -5px;
}

.service-header h1 span {
    color: #e31b23;
}

.service-header p {
    max-width: 600px;
    color: #777;
    font-size: 17px;
    line-height: 1.75;
}


/* SERVICE MERCHANT */

.service-merchant-card {
    height: 100%;
    padding: 30px;

    background: #fff;

    border: 1px solid #e9e9eb;
    border-radius: 20px;

    transition: .3s ease;
}

.service-merchant-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(0,0,0,.07);
}

.service-merchant-card .merchant-logo {
    width: 70px;
    height: 70px;
    margin-bottom: 25px;
    border-radius: 18px;
}

.service-merchant-card .merchant-logo img {
    max-width: 75%;
    max-height: 75%;
}

.service-merchant-card h3 {
    margin: 10px 0;

    font-family: 'Manrope', sans-serif;
    font-size: 25px;
}

.service-merchant-card .merchant-address {
    min-height: 42px;
}

.service-discount {
    margin: 20px 0;
    padding: 14px;

    background: #fff0f0;
    border-radius: 10px;

    color: #e31b23;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}

.service-btn {
    width: 100%;
    justify-content: center;
    border: 0;
}


/* =========================================================
   CARTA DIGITALE
   ========================================================= */

.digital-card-page {
    min-height: 100vh;
    padding: 145px 0 100px;
    background: #f7f7f8;
}

.digital-card-header {
    max-width: 700px;
    margin: 0 auto 45px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 35px;

    color: #777;
    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    transition: .2s;
}

.back-link:hover {
    color: #e31b23;
}

.digital-card-header h1 {
    margin: 15px 0 20px;

    font-family: 'Manrope', sans-serif;
    font-size: clamp(55px, 7vw, 90px);
    line-height: .9;
    letter-spacing: -5px;
}

.digital-card-header h1 span {
    color: #e31b23;
}

.digital-card-header p {
    color: #777;
    line-height: 1.7;
}


/* ---------- DIGITAL CARD ---------- */

.digital-card {
    max-width: 700px;
    margin: 0 auto;

    overflow: hidden;

    background: #111113;
    color: #fff;

    border-radius: 30px;

    box-shadow:
        0 35px 90px rgba(0,0,0,.18);
}

.digital-card-top {
    padding: 30px 35px;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.digital-brand {
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}

.digital-brand strong {
    display: block;
    color: #e31b23;
}

.digital-card-type {
    color: #666;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}


/* ---------- QR ---------- */

.qr-area {
    padding: 30px 30px 40px;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.qr-blur {
    width: 230px;
    height: 230px;

    overflow: hidden;

    background: #fff;

    border-radius: 18px;

    display: grid;
    place-items: center;

    filter: blur(9px);
    opacity: .35;

    transition: .4s;
}

.qr-blur .qr-placeholder {
    color: #111;
    font-size: 90px;
}

.qr-blur:not(.qr-hidden) {
    filter: none;
    opacity: 1;
}

.qr-image {
    width: 230px;
    height: 230px;
    display: block;
    object-fit: contain;
}

.generate-qr {
    position: relative;
    z-index: 5;

    margin-top: -25px;

    padding: 13px 18px;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    background: #e31b23;
    color: #fff;

    border: 0;
    border-radius: 10px;

    box-shadow: 0 10px 25px rgba(227,27,35,.3);

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition: .2s;
}

.generate-qr:hover {
    background: #b90f16;
    transform: translateY(-2px);
}

.generate-qr:disabled {
    opacity: .6;
    cursor: wait;
}

.qr-timer {
    margin-top: 18px;

    color: #777;

    font-size: 11px;
    letter-spacing: .5px;
}

.qr-timer strong {
    color: #fff;
}


/* ---------- DIGITAL CARD BODY ---------- */

.digital-card-body {
    padding: 10px 35px 35px;
}

.digital-label {
    color: #666;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}

.digital-card-body h2 {
    margin: 7px 0 30px;

    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    letter-spacing: -1px;
}

.digital-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;

    padding-top: 25px;

    border-top: 1px solid #29292b;
}

.digital-card-grid span {
    display: block;

    margin-bottom: 6px;

    color: #666;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.digital-card-grid strong {
    display: block;

    font-size: 12px;
    line-height: 1.5;
}

.active-status {
    color: #5dd37a;
}

.active-status i {
    font-size: 6px;
    vertical-align: middle;
}


/* ---------- DIGITAL FOOTER ---------- */

.digital-card-footer {
    padding: 18px 35px;

    border-top: 1px solid #29292b;

    display: flex;
    justify-content: space-between;
    gap: 20px;

    color: #555;

    font-size: 9px;
    letter-spacing: .8px;
}

.digital-card-footer span:first-child {
    color: #e31b23;
    font-weight: 800;
}


/* ---------- QR INFO ---------- */

.qr-information {
    max-width: 700px;
    margin: 25px auto 0;

    padding: 20px;

    background: #fff;

    border: 1px solid #e9e9eb;
    border-radius: 15px;

    display: flex;
    gap: 15px;
}

.qr-information > i {
    color: #e31b23;
    font-size: 20px;
}

.qr-information strong {
    font-size: 13px;
}

.qr-information p {
    margin: 4px 0 0;

    color: #888;

    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 991px) {

    .card-hero {
        min-height: 700px;
    }

    .card-hero-content {
        padding-top: 120px;
    }

    .card-cta {
        padding: 45px 35px;
    }

}


@media (max-width: 767px) {

    .card-hero h1 {
        letter-spacing: -4px;
    }

    .card-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 40px 30px;
    }

    .card-cta h2 {
        font-size: 34px;
    }

    .activation-form {
        padding: 25px;
    }

    .digital-card {
        border-radius: 22px;
    }

    .digital-card-top {
        padding: 25px;
    }

    .digital-card-body {
        padding: 10px 25px 30px;
    }

    .digital-card-footer {
        padding: 18px 25px;
        flex-direction: column;
    }

    .digital-card-grid {
        grid-template-columns: 1fr;
    }

    .qr-information {
        flex-direction: column;
    }

}


@media (max-width: 575px) {

    .card-hero {
        min-height: 680px;
    }

    .card-hero-content {
        padding-top: 110px;
    }

    .card-hero h1 {
        font-size: 57px;
    }

    .card-hero-subtitle {
        font-size: 23px;
    }

    .card-info-box {
        padding: 28px;
    }

    .merchant-content {
        padding: 25px;
    }

    .activation-wrapper h1,
    .digital-card-header h1 {
        letter-spacing: -4px;
    }

}















/* =========================================================
   QR VERIFICATION
========================================================= */

.qr-verification-page{
    min-height:calc(100vh - 82px);

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(227,27,35,.08),
            transparent 500px
        ),
        #f7f7f8;

    padding:150px 0 100px;

    display:flex;
    align-items:center;
}


.verification-card{
    max-width:650px;
    margin:auto;

    background:#fff;

    border-radius:28px;

    padding:50px;

    border:1px solid var(--line);

    box-shadow:0 30px 80px rgba(0,0,0,.08);

    text-align:center;
}


/* ICONA */

.verification-icon{
    width:82px;
    height:82px;

    border-radius:25px;

    margin:0 auto 25px;

    display:grid;
    place-items:center;

    font-size:34px;
}


.verification-card.valid .verification-icon{
    background:#eaf9ef;
    color:#20a653;
}


.verification-card.invalid .verification-icon{
    background:#fff0f0;
    color:var(--red);
}


/* STATUS */

.verification-status{
    font-size:9px;
    letter-spacing:2.5px;

    font-weight:800;

    color:#999;
}


.verification-card h1{
    font-family:Manrope;

    font-size:clamp(43px,6vw,70px);

    line-height:.95;

    letter-spacing:-4px;

    margin:15px 0 22px;
}


.verification-card.valid h1 span{
    color:#20a653;
}


.verification-card.invalid h1 span{
    color:var(--red);
}


.verification-intro{
    color:#777;

    line-height:1.7;

    max-width:500px;

    margin:0 auto 35px;
}


/* DATI */

.verification-data{
    border-top:1px solid var(--line);

    border-bottom:1px solid var(--line);

    text-align:left;
}


.verification-row{
    display:flex;

    justify-content:space-between;

    gap:20px;

    padding:18px 0;

    border-bottom:1px solid var(--line);
}


.verification-row:last-child{
    border-bottom:0;
}


.verification-row span{
    color:#aaa;

    font-size:9px;

    letter-spacing:1.7px;

    font-weight:800;
}


.verification-row strong{
    font-size:13px;

    text-align:right;
}


.verification-row.discount strong{
    color:var(--red);
}


/* SUCCESS */

.verification-success,
.verification-warning{
    margin-top:25px;

    border-radius:14px;

    padding:17px;

    display:flex;

    text-align:left;

    gap:13px;
}


.verification-success{
    background:#eaf9ef;
    color:#16853e;
}


.verification-warning{
    background:#fff0f0;
    color:var(--red);
}


.verification-success i,
.verification-warning i{
    font-size:20px;
}


.verification-success strong,
.verification-warning strong{
    font-size:13px;
}


.verification-success p,
.verification-warning p{
    margin:3px 0 0;

    font-size:11px;

    line-height:1.6;

    opacity:.75;
}


/* FOOTER */

.verification-footer{
    margin-top:30px;

    padding-top:20px;

    border-top:1px solid var(--line);

    display:flex;

    justify-content:space-between;

    font-size:9px;

    letter-spacing:1.3px;

    color:#aaa;

    font-weight:800;
}


.verification-footer span:first-child{
    color:var(--red);
}


/* MOBILE */

@media(max-width:600px){

    .qr-verification-page{
        padding:120px 15px 70px;
    }

    .verification-card{
        padding:35px 23px;
        border-radius:22px;
    }

    .verification-card h1{
        letter-spacing:-3px;
    }

    .verification-row{
        flex-direction:column;
        gap:6px;
    }

    .verification-row strong{
        text-align:left;
    }

    .verification-footer{
        flex-direction:column;
        gap:8px;
    }

}

.merchant-address {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.merchant-address:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

/* =========================================================
   MAINTENANCE PAGE
========================================================= */

.maintenance-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 80px 20px;
    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(190, 0, 0, 0.08),
            transparent 35%
        ),
        #ffffff;
}

.maintenance-card {
    max-width: 850px;
    margin: auto;
    padding: 70px 50px;
    border: 1px solid rgba(0,0,0,.07);
    border-radius: 32px;
    background: rgba(255,255,255,.92);
    box-shadow:
        0 30px 80px rgba(0,0,0,.08);
    backdrop-filter: blur(15px);
}

.maintenance-card .service-icon.maintenance {
    width: 90px;
    height: 90px;

    margin: 0 auto 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 28px;

    background: rgba(190,0,0,.08);

    color: #c40000;

    font-size: 32px;

    box-shadow:
        0 15px 35px rgba(190,0,0,.12);
}

.maintenance-card h1 {
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1.02;
    letter-spacing: -2px;
    font-weight: 800;
    margin: 15px 0 25px;
}

.maintenance-card h1 span {
    display: block;
    color: #c40000;
}

.maintenance-card p {
    max-width: 650px;
    margin: 0 auto 30px;

    font-size: 18px;
    line-height: 1.7;

    color: #666;
}

.maintenance-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 10px 16px;

    margin-bottom: 30px;

    border-radius: 999px;

    background: #f7f7f7;

    font-size: 14px;
    font-weight: 600;
}

.status-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #d00000;

    box-shadow:
        0 0 0 5px rgba(208,0,0,.10);

    animation: maintenancePulse 1.8s infinite;
}

@keyframes maintenancePulse {

    0% {
        box-shadow:
            0 0 0 0 rgba(208,0,0,.25);
    }

    70% {
        box-shadow:
            0 0 0 8px rgba(208,0,0,0);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(208,0,0,0);
    }

}

@media (max-width: 700px) {

    .maintenance-card {
        padding: 45px 25px;
        border-radius: 24px;
    }

    .maintenance-card h1 {
        font-size: 42px;
    }

    .maintenance-card p {
        font-size: 16px;
    }

}

.terms {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin: 8px 0 22px;

    color: #888;

    font-size: 11px;
    line-height: 1.55;
}

.terms-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    cursor: pointer;
}

.terms-item input {
    flex: 0 0 auto;

    width: 15px;
    height: 15px;

    margin-top: 1px;

    accent-color: var(--red);

    cursor: pointer;
}

.terms-item span {
    flex: 1;
}

.terms a {
    color: var(--black);
    font-weight: 800;
    text-decoration: none;

    transition: .2s;
}

.terms a:hover {
    color: var(--red);
    text-decoration: underline;
}