body{
  margin:0;
  background:#000;
  color:#fff;
  font-family:Helvetica,Arial,sans-serif;
  text-align:center
}

.hero{padding:60px}

.logo{
  font-size:54px;
  font-weight:300
}

.heart{color:#ff7aa2}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px;
  max-width:1200px;
  margin:0 auto
}


button{
  background:#111;
  border:1px solid #555;
  color:#fff;
  padding:14px;
  transition: all 0.3s ease;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}

/* ✨ LUCE CHE SCORRE */
button::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,122,162,0.4),
    transparent
  );
  transition:all 0.5s ease;
}

/* 💋 HOVER LUCE */
button:hover::before{
  left:100%;
}

/* 💥 HOVER GLOW PREMIUM */
button:hover{
  border-color:#ff7aa2;
  box-shadow:
    0 0 12px rgba(255,122,162,0.6),
    0 0 30px rgba(255,122,162,0.3);
  transform:scale(1.05);
}

/* ✅ CLICK (già avevi ma migliorato) */
button:active{
  transform:scale(0.95);
  box-shadow:0 0 8px rgba(255,122,162,0.4);
}

button.gold{
  border-color:#c9a24d;
  color:#c9a24d
}

button.active{
  border-color:#ff7aa2;
  color:#ff7aa2;
  box-shadow:0 0 10px rgba(255,122,162,0.6),
             0 0 20px rgba(255,122,162,0.3);
  transform:scale(1.05);
}

button:hover{
  transform:scale(1.05);
  border-color:#ff7aa2;
}

button:active{
  transform:scale(0.95);
}

/* ✅ SIGILLO BASE */

.sigillo{
  width:120px;
  height:120px;
  border:2px solid #ff7aa2;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:16px auto;
  font-size:42px;

  /* ✅ STEP 31 - RESPIRO */
  animation: respiro 3s ease-in-out infinite;
}

/* ✅ APERTURA */
.sigillo.open{
  transform:scale(1.3);
  box-shadow:0 0 20px #ff7aa2,
             0 0 40px #ff7aa2;
  transition:0.6s;
}

/* ✅ ANIMAZIONE RESPIRO */
@keyframes respiro{
  0%{transform:scale(1);}
  50%{transform:scale(1.06);}
  100%{transform:scale(1);}
}

.composer{padding:30px}

input,textarea{
  width:90%;
  max-width:520px;
  background:#111;
  color:#fff;
  border:1px solid #555;
  padding:12px;
  margin:6px
}

.btn{
  display:inline-block;
  padding:12px 18px;
  border:1px solid #555;
  margin:6px;
  color:#fff;
  text-decoration:none
}

/* ✅ CORREZIONE ERRORE */
.price{
  opacity:0.7;
}

/* ✅ CONTENUTO SIGILLO */
#contenuto.hidden{
  opacity:0;
  transform:translateY(20px);
}

#contenuto.show{
  opacity:1;
  transform:translateY(0);
  transition:all 0.6s ease;
}

/* ✅ BANNER CENTRALE */
.banner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:100vh;
}

/* ✅ COUNTDOWN */
.count{
  font-size:60px;
  color:#ff7aa2;
  margin-bottom:20px;
  animation:pulse 1s infinite;
}

@keyframes pulse{
  0%{transform:scale(1);}
  50%{transform:scale(1.2);}
  100%{transform:scale(1);}
}

/* ✅ UX MIGLIORE MOBILE */
*{
  -webkit-tap-highlight-color:transparent;
}

.sigillo{
  will-change: transform;
  backface-visibility: hidden;
}

/* ✅ ATTIVO PER I BOTTONI DEL COMPOSER */
.btn.active{
  border-color: #fff !important;
  color: #fff !important;
  box-shadow:
    0 0 12px currentColor,
    0 0 30px currentColor;
  transform: scale(1.05);
}


/* ✅ PORTA EFFETTO BUTTON SUI .btn */

.btn {
  display:inline-block;
  background:#111;
  border:1px solid #555;
  color:#fff;
  padding:14px;
  margin:6px;
  transition: all 0.3s ease;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  text-decoration:none;
}

/* ✨ LUCE CHE SCORRE */
.btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,122,162,0.4),
    transparent
  );
  transition:all 0.5s ease;
}

/* 💥 HOVER IDENTICO A INDEX */
.btn:hover::before{
  left:100%;
}

.btn:hover{
  border-color:#ff7aa2;
  box-shadow:
    0 0 12px rgba(255,122,162,0.6),
    0 0 30px rgba(255,122,162,0.3);
  transform:scale(1.05);
}

.btn:active{
  transform:scale(0.95);
  box-shadow:0 0 8px rgba(255,122,162,0.4);
}


.prezzo-box {
    text-align: center;
    font-size: 20px;
    margin: 15px 0;
    color: #ffd700;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

.copyright {  
  text-align: center;  
  font-size: 10px;  
  color: rgba(255, 255, 255, 0.35);  
  margin-top: 100px;  
  margin-bottom: 15px;  
  letter-spacing: 0.5px;  
}


body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.grid {
  flex: 1;
}

/* ✅ RESET BASE */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ✅ BODY MOBILE */
body {
    font-family: Arial, sans-serif;
    background: #000;
    color: #fff;
    overflow-x: hidden;
}

/* ✅ CONTAINER */
.app-container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
}

/* ✅ GRIGLIA BOTTONI */
.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

/* ✅ BOTTONI */
button {
    padding: 14px;
    font-size: 16px;
    border-radius: 12px;
    border: none;
    background: #111;
    color: #fff;
    min-height: 50px;
    cursor: pointer;
}

/* ✅ EFFETTO TAP (stile app) */
button:active {
    transform: scale(0.96);
}

/* ✅ COMPOSER */
#composer {
    margin-top: 20px;
    display: none;
}

/* ✅ INPUT */
input {
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    border-radius: 10px;
    border: none;
    font-size: 16px;
}

/* ✅ PREZZO */
#prezzo {
    margin-top: 10px;
    font-size: 14px;
    color: #ff2e88;
}

/* ✅ FOOTER */
footer {
    margin-top: 20px;
    font-size: 12px;
    text-align: center;
    opacity: 0.7;
}