@view-transition{ navigation:auto; }

:root{
/* Brand palette — dal logo Super Set Shredz */
--blush:#FBF1EC;
--blush-deep:#F3E0D9;
--wine:#3F0F1E;
--wine-soft:#5C1F30;
--rose:#B6828E;
--rose-light:#D8B7BE;
--cream:#FFFBF9;
--line:#E7D3CC;
--ink-muted:#7A5A61;
}

/* ===== Sistema di animazioni condiviso (Fase 1) ===== */
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{
animation-duration:0.001ms !important;
animation-iteration-count:1 !important;
transition-duration:0.001ms !important;
scroll-behavior:auto !important;
}
}
.reveal{
opacity:0;
transform:translateY(24px);
transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{
opacity:0;
transform:translateY(24px);
transition:opacity .6s ease, transform .6s ease;
}
.reveal-stagger.is-visible > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay:0ms; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay:80ms; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay:160ms; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay:240ms; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay:320ms; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay:400ms; }
.reveal-stagger.is-visible > *:nth-child(7){ transition-delay:480ms; }
.reveal-stagger.is-visible > *:nth-child(8){ transition-delay:560ms; }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
margin:0;
background:var(--blush);
color:var(--wine);
font-family:'Jost', system-ui, sans-serif;
line-height:1.6;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
.container{
max-width:1140px;
margin:0 auto;
padding-inline:24px;
}
h1,h2,h3{
font-family:'Marcellus', 'Cormorant Garamond', serif;
font-weight:400;
line-height:1.15;
text-wrap:balance;
margin:0;
}
.script{
font-family:'Cormorant Garamond', serif;
font-style:italic;
font-weight:500;
}
.eyebrow{
font-family:'Jost', sans-serif;
font-size:0.75rem;
letter-spacing:0.18em;
text-transform:uppercase;
color:var(--rose);
margin:0 0 10px;
}
.btn{
position:relative;
overflow:hidden;
display:inline-flex;
align-items:center;
gap:8px;
font-family:'Jost', sans-serif;
font-size:0.85rem;
letter-spacing:0.06em;
text-transform:uppercase;
text-decoration:none;
padding:15px 30px;
border-radius:100px;
border:1px solid transparent;
transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
cursor:pointer;
}
.btn-primary{ background:var(--wine); color:var(--cream); }
.btn-primary:hover{ transform:translateY(-1px); background:var(--wine-soft); }
.btn-primary::after{
content:"";
position:absolute; top:0; left:-60%;
width:35%; height:100%;
background:linear-gradient(120deg, transparent, rgba(255,255,255,0.32), transparent);
transform:skewX(-20deg);
transition:left .55s ease;
pointer-events:none;
}
.btn-primary:hover::after{ left:130%; }
.btn-ghost{ background:transparent; color:var(--wine); border-color:var(--wine); }
.btn-ghost:hover{ background:var(--wine); color:var(--cream); }

/* Header */
header.site{
position:sticky; top:0; z-index:50;
background:rgba(251,241,236,0.92);
backdrop-filter:blur(6px);
border-bottom:1px solid var(--line);
box-shadow:0 0 0 rgba(63,15,30,0);
transition:box-shadow .3s ease;
}
header.site.scrolled{ box-shadow:0 8px 20px -14px rgba(63,15,30,0.45); }
.nav-row{
display:flex; align-items:center; justify-content:space-between;
padding-block:14px;
gap:20px;
transition:padding-block .25s ease;
}
header.site.scrolled .nav-row{ padding-block:9px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img{ height:44px; width:auto; }
nav.links{
display:flex; gap:26px; flex-wrap:wrap;
font-size:0.86rem;
}
nav.links a{ text-decoration:none; color:var(--wine-soft); position:relative; }
nav.links a:hover{ color:var(--wine); }
nav.links a.active{ color:var(--wine); }
nav.links a.active::after{
content:"";
position:absolute; left:0; right:0; bottom:-5px;
height:2px; border-radius:2px;
background:var(--rose);
}
.nav-actions{ display:flex; align-items:center; gap:14px; }
.lang-toggle{
font-family:'Jost', sans-serif;
font-size:0.78rem;
letter-spacing:0.05em;
color:var(--ink-muted);
display:flex; gap:6px; align-items:center;
}
.lang-toggle button, .lang-toggle a{
background:none; border:none; cursor:pointer; font:inherit; color:inherit; padding:0; text-decoration:none;
}
.lang-toggle a:hover{ color:var(--wine); }
.lang-toggle .active{ color:var(--wine); font-weight:600; text-decoration:underline; }
.nav-toggle{
display:none;
flex-direction:column;
align-items:center; justify-content:center;
gap:5px;
width:38px; height:38px;
background:none; border:1px solid var(--line); border-radius:8px;
padding:0; cursor:pointer;
flex-shrink:0;
}
.nav-toggle span{
display:block; width:18px; height:2px; background:var(--wine);
border-radius:2px; transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (max-width:860px){
.nav-row{ flex-wrap:wrap; }
nav.links{
display:flex;
order:3;
width:100%;
flex-direction:column;
gap:0;
margin-top:0;
padding-top:0;
border-top:none;
max-height:0;
opacity:0;
visibility:hidden;
overflow:hidden;
transition:max-height .35s ease, opacity .25s ease, margin-top .35s ease, padding-top .35s ease;
}
nav.links.open{
max-height:480px;
opacity:1;
visibility:visible;
margin-top:14px;
padding-top:6px;
border-top:1px solid var(--line);
}
nav.links a{ padding:12px 4px; border-bottom:1px solid var(--line); }
nav.links a:last-child{ border-bottom:none; }
nav.links a.active::after{ display:none; }
.nav-toggle{ display:inline-flex; }
}
@media (max-width:520px){
.nav-actions .btn-primary{ padding:9px 14px; font-size:0.82rem; }
}

/* Hero */
.hero{
padding-block:72px 84px;
display:grid;
grid-template-columns:1.1fr 0.9fr;
gap:48px;
align-items:center;
}
@media (max-width:860px){ .hero{ grid-template-columns:1fr; padding-block:48px 56px; } }
.hero h1{ font-size:clamp(2.3rem, 4.6vw, 3.6rem); margin-bottom:20px; }
.hero p.lede{ font-size:1.08rem; color:var(--wine-soft); max-width:52ch; margin:0 0 28px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-art{
position:relative;
border-radius:24px;
overflow:hidden;
aspect-ratio:4/5;
background:var(--blush-deep);
}
.hero-art::before{
content:"";
position:absolute; inset:0;
background-image:var(--hero-img);
background-position:top center;
background-size:cover;
background-repeat:no-repeat;
}
@media (prefers-reduced-motion: no-preference){
.hero-art::before{ animation:heroKenBurns 18s ease-in-out infinite alternate; }
}
@keyframes heroKenBurns{
from{ transform:scale(1); }
to{ transform:scale(1.08); }
}
.hero-art::after{
content:"";
position:absolute; inset:0;
background:linear-gradient(180deg, rgba(63,15,30,0) 55%, rgba(63,15,30,0.7) 100%);
}
.hero-art .hero-play{
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
width:60px; height:60px; border-radius:50%;
background:rgba(251,241,236,0.92);
display:flex; align-items:center; justify-content:center;
z-index:1; text-decoration:none;
}
.hero-art .hero-play::after{
content:"";
border-style:solid;
border-width:10px 0 10px 16px;
border-color:transparent transparent transparent var(--wine);
margin-left:4px;
}
.hero-tag{
position:absolute; left:20px; right:20px; bottom:18px; z-index:1;
font-family:'Cormorant Garamond', serif;
font-style:italic;
font-size:1.05rem;
color:var(--cream);
}

section{ padding-block:64px; }
section.alt{ background:var(--cream); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-head{ max-width:640px; margin:0 auto 40px; text-align:center; }
.section-head h2{ font-size:clamp(1.7rem, 3.2vw, 2.3rem); margin-bottom:12px; }
.section-head p{ color:var(--ink-muted); margin:0; }

/* Results — one unified before/after carousel, every photo a different allievo */
.results-carousel{
max-width:420px;
margin:0 auto;
}
.rc-photo{
position:relative;
aspect-ratio:4/5;
border-radius:20px;
overflow:hidden;
background:var(--blush-deep);
}
.rc-photo img{
position:absolute; inset:0;
width:100%; height:100%; object-fit:cover;
opacity:0;
transform:scale(1.05);
transition:opacity .5s ease, transform 3.2s ease;
}
.rc-photo img.is-active{ opacity:1; transform:scale(1); }
.rc-progress{
max-width:420px; margin:14px auto 0;
height:3px; border-radius:3px;
background:var(--line);
overflow:hidden;
}
.rc-progress-bar{
height:100%; width:0%;
background:var(--rose);
border-radius:3px;
}
.rc-progress-bar.animate{ animation:rcProgressFill 3.2s linear; }
@keyframes rcProgressFill{ from{ width:0%; } to{ width:100%; } }
.rc-arrow{
position:absolute; top:50%; transform:translateY(-50%);
width:42px; height:42px; border-radius:50%;
background:rgba(251,241,236,0.92);
border:1px solid var(--line);
color:var(--wine);
font-size:1.3rem; line-height:1;
display:flex; align-items:center; justify-content:center;
cursor:pointer; z-index:2;
}
.rc-arrow:hover{ background:var(--cream); }
.rc-prev{ left:-18px; }
.rc-next{ right:-18px; }
@media (max-width:480px){ .rc-prev{ left:8px; } .rc-next{ right:8px; } }
.rc-caption{
text-align:center;
margin-top:18px;
font-size:1.08rem;
color:var(--wine-soft);
min-height:1.7em;
}
.rc-counter{
text-align:center;
margin-top:4px;
font-size:0.76rem;
letter-spacing:0.06em;
color:var(--ink-muted);
font-variant-numeric:tabular-nums;
}

/* Video thumbnails (metodo + testimonianze) */
.video-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:16px;
}
@media (max-width:920px){ .video-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:480px){ .video-grid{ grid-template-columns:1fr; } }
.video-thumb{
display:block;
text-decoration:none;
background:var(--cream);
border:1px solid var(--line);
border-radius:16px;
overflow:hidden;
}
.video-thumb-img{
position:relative;
aspect-ratio:9/12;
background:var(--blush-deep) center/cover no-repeat;
transition:transform .4s ease;
}
.video-thumb:hover .video-thumb-img{ transform:scale(1.06); }
.video-thumb-img::after{
content:"";
position:absolute; inset:0;
background:linear-gradient(180deg, rgba(63,15,30,0) 45%, rgba(63,15,30,0.75) 100%);
}
.video-thumb-play{
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
width:48px; height:48px; border-radius:50%;
background:rgba(251,241,236,0.92);
display:flex; align-items:center; justify-content:center;
z-index:1;
}
.video-thumb-play::after{
content:"";
border-style:solid;
border-width:8px 0 8px 13px;
border-color:transparent transparent transparent var(--wine);
margin-left:3px;
}
.video-thumb-body{ padding:14px 16px 18px; }
.video-thumb-body .who{ font-weight:600; margin-bottom:2px; }
.video-thumb-body .result{ font-size:0.82rem; color:var(--ink-muted); }
.video-feature{
display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start;
}
@media (max-width:700px){ .video-feature{ grid-template-columns:1fr; } }
.video-feature .video-thumb-img{ aspect-ratio:16/10; }
.video-feature .video-thumb-img.video-thumb-img--vertical{ aspect-ratio:9/16; }
@media (max-width:760px){ #chi-siamo .container{ grid-template-columns:1fr !important; } }

/* Offerings */
.offer-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:18px;
}
@media (max-width:920px){ .offer-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:480px){ .offer-grid{ grid-template-columns:1fr; } }
.offer-card{
background:var(--blush-deep);
border-radius:18px;
padding:26px 22px;
display:flex; flex-direction:column; gap:12px;
}
.offer-card .eyebrow{ margin:0; }
.offer-card h3{ font-size:1.2rem; }
.offer-card p{ margin:0; font-size:0.9rem; color:var(--ink-muted); flex:1; }
.offer-card .price{ font-family:'Marcellus', serif; font-size:1.15rem; color:var(--wine); }
.offer-card a.btn{ align-self:flex-start; padding:10px 20px; font-size:0.75rem; }

/* Newsletter */
.newsletter{
background:var(--wine);
color:var(--blush);
border-radius:24px;
padding:44px 36px;
text-align:center;
display:flex; flex-direction:column; align-items:center; gap:16px;
}
.newsletter h2{ color:var(--blush); font-size:1.7rem; }
.newsletter p{ color:var(--rose-light); max-width:52ch; margin:0; }
form.nl-form{ width:100%; max-width:440px; }
form.nl-form .form-fields{
display:flex; gap:10px; flex-wrap:wrap; justify-content:center; width:100%;
}
form.nl-form .form-success{
margin:0;
font-family:'Cormorant Garamond', serif;
font-style:italic;
font-size:1.1rem;
color:var(--blush);
}
form.nl-form input[type="email"]{
flex:1; min-width:200px;
padding:13px 16px;
border-radius:100px;
border:1px solid var(--rose);
background:var(--blush);
color:var(--wine);
font:inherit;
}
form.nl-form button{
background:var(--rose-light);
color:var(--wine);
border:none;
}
form.nl-form button:hover{ background:var(--blush); }

/* Footer */
footer{
padding-block:48px 32px;
border-top:1px solid var(--line);
}
.footer-grid{
display:grid;
grid-template-columns:1.3fr 1fr 1fr;
gap:32px;
margin-bottom:32px;
}
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{
font-family:'Jost', sans-serif;
font-size:0.78rem;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--rose);
margin:0 0 12px;
}
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.footer-grid a{ text-decoration:none; font-size:0.9rem; color:var(--wine-soft); }
.footer-grid a:hover{ color:var(--wine); }
.footer-bottom{
display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
padding-top:24px; border-top:1px solid var(--line);
font-size:0.8rem; color:var(--ink-muted);
}
.pay-icons{ display:flex; gap:8px; flex-wrap:wrap; font-size:0.72rem; }
.pay-icons span{ border:1px solid var(--line); border-radius:6px; padding:3px 8px; }

.social-icons{ display:flex; gap:10px; margin:2px 0 14px; }
.social-icons a{
display:flex; align-items:center; justify-content:center;
width:36px; height:36px; border-radius:50%;
background:var(--blush-deep);
border:1px solid var(--line);
color:var(--wine);
transition:background .15s ease, color .15s ease, transform .15s ease;
flex-shrink:0;
}
.social-icons a:hover{ background:var(--wine); color:var(--cream); transform:translateY(-2px); }
.social-icons svg{ width:17px; height:17px; display:block; }

/* Shared inner-page elements (FAQ, Missione, ecc.) */
.page-hero{
padding-block:56px 40px;
text-align:center;
border-bottom:1px solid var(--line);
}
.page-hero .eyebrow{ display:block; }
.page-hero h1{ font-size:clamp(2rem, 4.4vw, 2.8rem); margin-bottom:14px; }
.page-hero p{ color:var(--ink-muted); max-width:60ch; margin:0 auto; }

.prose{ max-width:680px; margin:0 auto; }
.prose p{ font-size:1.02rem; color:var(--wine-soft); margin:0 0 20px; }
.prose h3{ font-size:1.25rem; margin:32px 0 12px; }

.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.faq-item{ background:var(--cream); }
.faq-item summary{
list-style:none; cursor:pointer;
display:flex; align-items:center; justify-content:space-between; gap:16px;
padding:18px 22px;
font-family:'Marcellus', serif;
font-size:1.05rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
content:"+";
font-family:'Jost', sans-serif;
font-size:1.3rem;
color:var(--rose);
flex-shrink:0;
transition:transform .2s ease;
}
.faq-item[open] summary::after{ content:"\2212"; }
.faq-item p{
margin:0; padding:0 22px 20px;
color:var(--ink-muted);
font-size:0.95rem;
max-width:65ch;
}

/* Checklists (App features, Academy curriculum/inclusions) */
.checklist{ max-width:640px; margin:0 auto; list-style:none; padding:0; display:flex; flex-direction:column; gap:14px; }
.checklist li{
display:flex; align-items:flex-start; gap:12px;
font-size:1rem; color:var(--wine-soft);
background:var(--cream);
border:1px solid var(--line);
border-radius:14px;
padding:16px 18px;
}
.checklist li::before{ content:"✓"; color:var(--rose); font-weight:600; flex-shrink:0; }

/* Testimonial cards */
.testimonial-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
@media (max-width:920px){ .testimonial-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px){ .testimonial-grid{ grid-template-columns:1fr; } }
.testimonial-card{
background:var(--cream);
border:1px solid var(--line);
border-radius:16px;
padding:22px 20px;
display:flex; flex-direction:column; gap:10px;
}
.testimonial-card .stars{ color:var(--rose); font-size:0.85rem; letter-spacing:2px; }
.testimonial-card p{ margin:0; font-size:0.92rem; color:var(--wine-soft); flex:1; }
.testimonial-card .who{ font-weight:600; font-size:0.85rem; color:var(--wine); }
.testimonial-card .where{ font-size:0.78rem; color:var(--ink-muted); }

/* Pricing / callout banner */
.callout-banner{
max-width:640px; margin:0 auto;
background:var(--blush-deep);
border-radius:18px;
padding:26px 28px;
text-align:center;
}
.callout-banner p{ margin:0; color:var(--wine-soft); }
.callout-banner strong{ color:var(--wine); }

/* Contact / application form (Lavora con Noi) */
.contact-form{ max-width:560px; margin:0 auto; }
.contact-form .form-fields{ display:flex; flex-direction:column; gap:16px; }
.contact-form label{ display:flex; flex-direction:column; gap:6px; font-size:0.85rem; color:var(--wine-soft); }
.contact-form input, .contact-form textarea{
font:inherit; padding:13px 16px;
border-radius:12px; border:1px solid var(--line);
background:var(--cream); color:var(--wine);
}
.contact-form textarea{ min-height:120px; resize:vertical; }
.contact-form button{ align-self:flex-start; border:none; }
.contact-form .form-success{
margin:0;
font-family:'Cormorant Garamond', serif;
font-style:italic;
font-size:1.15rem;
color:var(--wine);
text-align:center;
}
.form-note{ text-align:center; color:var(--ink-muted); font-size:0.88rem; max-width:52ch; margin:0 auto 28px; }

/* Simple page section with centered narrow lede, reused across new pages */
.page-lede{ max-width:640px; margin:0 auto 36px; text-align:center; color:var(--wine-soft); font-size:1.02rem; }

/* Responsive embedded video (16:9) */
.video-embed{
max-width:720px; margin:0 auto;
border-radius:20px; overflow:hidden;
aspect-ratio:16/9;
background:var(--blush-deep);
border:1px solid var(--line);
}
.video-embed iframe{ width:100%; height:100%; border:0; display:block; }
.video-embed.video-embed--vertical{ max-width:405px; aspect-ratio:9/16; }

/* Body scanner tool embedded as its own page (external app, unchanged) */
.scanner-embed{
max-width:900px; margin:0 auto;
width:100%; height:82vh; min-height:640px; max-height:920px;
border-radius:20px; overflow:hidden;
background:var(--blush-deep);
border:1px solid var(--line);
}
.scanner-embed iframe{ width:100%; height:100%; border:0; display:block; }

/* Blog index — post cards */
.blog-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:24px;
}
@media (max-width:920px){ .blog-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px){ .blog-grid{ grid-template-columns:1fr; } }
.blog-card{
display:flex; flex-direction:column;
background:var(--cream);
border:1px solid var(--line);
border-radius:18px;
overflow:hidden;
text-decoration:none;
transition:transform .15s ease;
}
.blog-card:hover{ transform:translateY(-3px); }
.blog-card-img{
aspect-ratio:4/3;
background:var(--blush-deep) center/cover no-repeat;
transition:transform .4s ease;
overflow:hidden;
}
.blog-card:hover .blog-card-img{ transform:scale(1.06); }
.blog-card-body{ padding:20px 20px 24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.blog-card-date{ font-size:0.76rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--rose); }
.blog-card h3{ font-size:1.15rem; margin:0; }
.blog-card p{ margin:0; font-size:0.9rem; color:var(--ink-muted); flex:1; }
.blog-card .read-more{ font-size:0.82rem; color:var(--wine); font-weight:600; margin-top:6px; }

/* Blog post page */
.post-meta{ text-align:center; color:var(--ink-muted); font-size:0.88rem; margin:-6px 0 28px; }
.post-cover{
max-width:820px; margin:0 auto 40px;
border-radius:20px; overflow:hidden;
aspect-ratio:16/9;
background:var(--blush-deep) center/cover no-repeat;
}
.post-nav{ max-width:680px; margin:48px auto 0; text-align:center; }

/* Bottone "torna su" (Fase 4) */
#toTop{
position:fixed; right:20px; bottom:20px; z-index:60;
width:46px; height:46px; border-radius:50%;
background:var(--wine); color:var(--cream);
border:none; cursor:pointer;
display:flex; align-items:center; justify-content:center;
font-size:1.15rem; line-height:1; padding:0;
opacity:0; visibility:hidden; transform:translateY(8px);
transition:opacity .25s ease, transform .25s ease, visibility .25s, background .15s ease;
}
#toTop.visible{ opacity:1; visibility:visible; transform:translateY(0); }
#toTop:hover{ background:var(--wine-soft); }