/* ============================================================
   Global Theme Variables : Neomorphism + Neo-Brutalism
   ============================================================ */
:root{
    /* Primary & Complementary Palette */
    --primary:#FF5A5F;             /* vivace accento rosso-corallo   */
    --primary-dark:#CC494C;
    --complementary:#1E88E5;       /* blu complementare brillante    */
    --complementary-dark:#166FCC;
    --neutral-100:#F5F7FA;         /* quasi-bianco                   */
    --neutral-200:#E4E7EB;
    --neutral-300:#CFD8DC;
    --neutral-500:#64707B;
    --neutral-900:#222222;

    /* Gradients & Shadows */
    --gradient-main:linear-gradient(145deg,var(--primary),var(--complementary));
    --shadow-soft:8px 8px 16px var(--neutral-300), -8px -8px 16px #ffffff;
    --shadow-inset:inset 8px 8px 16px var(--neutral-300), inset -8px -8px 16px #ffffff;
    --transition:all .3s ease-in-out;

    /* Typography */
    --font-display:'Oswald',sans-serif;
    --font-body:'Nunito',sans-serif;
}

/* ============================================================
   Base Reset & Utilities
   ============================================================ */
html{scroll-behavior:smooth;}
body{
    font-family:var(--font-body);
    color:var(--neutral-900);
    background:var(--neutral-100);
    line-height:1.6;
}

/* Readability helpers */
.is-dark-text{color:var(--neutral-900);}
.is-light-text{color:#FFFFFF;text-shadow:1px 1px 3px rgba(0,0,0,.5);}
.text-center{text-align:center;}
.mt-6{margin-top:3rem;}
.mb-6{margin-bottom:3rem;}

/* ============================================================
   Global Buttons (apply everywhere)
   ============================================================ */
.btn,
button,
input[type='submit']{
    display:inline-block;
    font-weight:600;
    border:none;
    padding:.75rem 2.25rem;
    border-radius:50px;
    background:var(--primary);
    color:#fff;
    cursor:pointer;
    box-shadow:var(--shadow-soft);
    transition:var(--transition);
}
.btn:hover,
button:hover,
input[type='submit']:hover{
    background:var(--primary-dark);
    transform:translateY(-2px);
}
.btn:active{box-shadow:var(--shadow-inset);transform:translateY(1px);}

/* Text links & 'Leggi di più' */
a{color:var(--complementary-dark);transition:var(--transition);}
a:hover{text-decoration:underline;color:var(--complementary);}

/* 'Leggi di più' specific */
.read-more{font-weight:700;position:relative;}
.read-more::after{
    content:' →';
    transition:var(--transition);
}
.read-more:hover::after{transform:translateX(4px);}

/* ============================================================
   Layout Helpers
   ============================================================ */
.section{padding:4rem 1.5rem;}
.parallax{
    background-attachment:fixed;
    background-size:cover;
    background-repeat:no-repeat;
}
.glass{
    background:rgba(255,255,255,.25);
    backdrop-filter:blur(8px);
    border-radius:15px;
}

/* ============================================================
   Header / Navbar
   ============================================================ */
.navbar{
    backdrop-filter:blur(6px);
    background:rgba(255,255,255,.6);
    border-bottom:3px solid var(--primary);
}
.navbar-item,
.navbar-burger span{font-family:var(--font-display);font-weight:600;}
.navbar-item:hover{color:var(--primary);}

/* Burger */
.navbar-burger{color:var(--neutral-900);}
.navbar-burger.is-active span{background:var(--primary);}

/* ============================================================
   Hero Section
   ============================================================ */
#hero .hero-body{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#FFFFFF;
}
#hero h1{font-family:var(--font-display);font-size:3rem;letter-spacing:1px;}
#hero h2{max-width:680px;margin:1rem auto;}

/* ============================================================
   Cards (unified style)
   ============================================================ */
.card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    border-radius:20px;
    overflow:hidden;
    box-shadow:var(--shadow-soft);
    transition:var(--transition);
    background:var(--neutral-100);
}
.card:hover{transform:translateY(-4px);}
.card-content{padding:2rem;}
.card-image,
.image-container{
    width:100%;
    height:220px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}
.card-image img,
.image-container img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:0;
    margin:0 auto;
}

/* ============================================================
   Statistics Widgets
   ============================================================ */
.box{
    box-shadow:var(--shadow-soft)!important;
    border-radius:25px;
}
.box .title{font-family:var(--font-display);}

/* ============================================================
   Switchers & Toggles
   ============================================================ */
.switch input:checked + span::after{background:var(--primary);}
.switch span::before{background:var(--neutral-200);}
.switch span::after{transition:var(--transition);}

/* ============================================================
   Pricing Toggle Animation
   ============================================================ */
@keyframes pricePulse{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.05);}
}
#togglePricing:checked + label{animation:pricePulse 1s ease infinite alternate;}

/* ============================================================
   Modal overrides (Bulma)
   ============================================================ */
.modal-content>.box{border-radius:25px;box-shadow:var(--shadow-soft);}

/* ============================================================
   Neo-Brutal Decorative Borders
   ============================================================ */
.brutal-border{
    border:4px solid var(--neutral-900);
    box-shadow:4px 4px 0 var(--neutral-900);
}
.card.brutal-border:hover{box-shadow:8px 8px 0 var(--neutral-900);}

/* ============================================================
   Hand-drawn (sketch) Animations
   ============================================================ */
@keyframes sketchIn{
    0%{stroke-dashoffset:400;}
    100%{stroke-dashoffset:0;}
}
.drawn{
    position:relative;
}
.drawn::after{
    content:'';
    position:absolute;
    left:-10px;top:-10px;right:-10px;bottom:-10px;
    border:3px solid var(--primary);
    border-radius:25px;
    z-index:-1;
    animation:sketchIn 2s ease forwards;
    stroke-dasharray:400;
    stroke-dashoffset:400;
}

/* ============================================================
   Forms & Inputs
   ============================================================ */
input[type="text"],
input[type="email"],
textarea{
    border:none;
    border-radius:15px;
    padding:1rem 1.25rem;
    background:var(--neutral-100);
    box-shadow:var(--shadow-inset);
    transition:var(--transition);
}
input:focus,textarea:focus{outline:none;box-shadow:var(--shadow-soft);}

/* ============================================================
   Footer
   ============================================================ */
footer.footer{
    background:var(--neutral-200);
    color:var(--neutral-900);
}
footer a{font-weight:600;color:var(--primary-dark);}
footer a:hover{color:var(--primary);text-decoration:underline;}
footer .content{max-width:960px;margin:auto;}

/* Social text links styling */
footer p:last-child a{
    position:relative;
    padding:0 .25rem;
}
footer p:last-child a::after{
    content:'';
    position:absolute;
    left:0;bottom:-2px;right:0;
    height:2px;background:var(--primary);
    transform:scaleX(0);
    transition:transform .25s ease;
}
footer p:last-child a:hover::after{transform:scaleX(1);}

/* ============================================================
   Pages: success, privacy & terms
   ============================================================ */
body.page-success{
    display:flex;align-items:center;justify-content:center;
    min-height:100vh;
}
body.page-legal{
    padding-top:100px;
}

/* ============================================================
   Parallax placeholder class
   ============================================================ */
.parallax::before{
    content:'';
    position:absolute;
    left:0;top:0;width:100%;height:100%;
    background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4));
    z-index:0;
}
.parallax>*{position:relative;z-index:1;}

/* ============================================================
   Media Queries
   ============================================================ */
@media (max-width:768px){
    #hero h1{font-size:2.2rem;}
    .section{padding:2.5rem 1rem;}
    .card-image,.image-container{height:180px;}
    .navbar-menu{background:rgba(255,255,255,.9);}
}

/* ============================================================
   End of file
   ============================================================ */

   img{
    object-fit: cover;
    max-width: 400px;
   }