:root{
  --sky1:#e4f7ff;
  --sky2:#c9ebf8;
  --sky3:#a9dbf0;
  --blue:#3ca5d8;
  --deep:#0b3267;
  --paper:#fffdf7;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:Montserrat,Arial,sans-serif;
  color:var(--deep);
  background:linear-gradient(180deg,var(--sky1),var(--sky2) 58%,var(--sky3));
  overflow-x:hidden;
}
.page{
  position:relative;
  width:100%;
  min-height:100svh;
  padding:22px 32px 26px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
}
.texture{
  position:absolute;inset:0;pointer-events:none;opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}
.header,.hero,.actions,footer{position:relative;z-index:2}
.header{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700}
.location{color:var(--deep);text-decoration:none}
.mini-title{opacity:.72}
.hero{text-align:center;margin-top:0}
.logo{display:block;width:min(620px,46vw);max-height:245px;object-fit:contain;margin:-10px auto -10px}
.category{font-size:17px;letter-spacing:.34em;font-weight:700}
.since{display:flex;align-items:center;justify-content:center;gap:18px;margin:14px 0 7px;color:var(--blue);font-family:"Cormorant Garamond",serif;font-size:24px;letter-spacing:.2em}
.since span{width:125px;height:1px;background:var(--blue)}
.hero h1{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:600;font-size:40px;line-height:1.05;margin:4px 0 6px}
.hero p{margin:0;font-size:14px;color:#275f84}
.actions{
  width:min(1320px,100%);
  margin:16px auto 0;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:18px;
}
.card{
  min-height:160px;
  display:grid;
  grid-template-columns:78px 1fr 38px;
  align-items:center;
  gap:16px;
  padding:22px;
  color:var(--deep);
  text-decoration:none;
  background:rgba(255,253,247,.96);
  border:1px solid rgba(49,152,204,.17);
  border-radius:26px;
  box-shadow:0 16px 36px rgba(24,86,122,.15);
  transition:transform .24s ease,box-shadow .24s ease;
}
.card:hover{transform:translateY(-7px) scale(1.018);box-shadow:0 24px 52px rgba(24,86,122,.24)}
.card:active{transform:scale(.975)}
.card:focus-visible{outline:4px solid rgba(30,141,195,.45);outline-offset:4px}
.phone,.menu,.maps{grid-column:span 2}
.instagram{grid-column:2/span 2}
.review{grid-column:4/span 2}
.icon{
  width:70px;height:70px;
  display:grid;place-items:center;
  color:var(--blue);
  transition:transform .24s ease;
}
.icon svg{width:66px;height:66px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.phone .icon{border-radius:50%;background:linear-gradient(145deg,#59b9e4,#2d9bd2);color:white}
.phone .icon svg{width:45px;height:45px;fill:white;stroke:white}
.card:hover .icon{transform:scale(1.18) rotate(-2deg)}
.content strong{display:block;font-family:"Cormorant Garamond",serif;font-size:27px;line-height:.95}
.content small{display:block;margin-top:13px;font-size:14px;line-height:1.35;color:#176b99}
.phone .content small{font-size:20px;font-weight:600;white-space:nowrap}
.arrow{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--blue);color:white;font-size:22px;transition:transform .24s ease}
.card:hover .arrow{transform:translateX(5px) scale(1.08)}
footer{text-align:center;padding-top:18px}
.rule{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--blue)}
.rule span{width:min(280px,26vw);height:1px;background:var(--blue)}
.rule b{font-size:20px}
footer p{font-size:12px;margin:8px 0 3px}
footer em{font-family:"Cormorant Garamond",serif;font-size:27px;color:#239bd2}

/* Illustrazioni riconoscibili */
.food-art{position:absolute;z-index:1;color:#319fd2;opacity:.42;pointer-events:none}
.food-art svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.art-pizza{width:210px;height:170px;left:2%;top:10%}
.art-cheese{width:180px;height:150px;left:2%;bottom:19%}
.art-salami{width:215px;height:160px;right:1%;top:35%}
.art-tomato{width:145px;height:145px;left:17%;top:38%}
.art-basil{width:175px;height:150px;right:12%;bottom:8%}
.art-mushroom{width:125px;height:125px;right:18%;top:9%}

@media(max-width:1100px){
  .page{padding:18px 20px 24px}
  .logo{width:min(560px,58vw)}
  .hero h1{font-size:36px}
  .card{grid-template-columns:66px 1fr 34px;min-height:150px;padding:19px}
  .icon{width:60px;height:60px}.icon svg{width:56px;height:56px}
  .content strong{font-size:24px}
  .art-pizza{left:-3%}.art-salami{right:-4%}.art-cheese{left:-5%}
}
@media(max-width:780px){
  .page{
    min-height:100svh;
    padding:calc(14px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom));
    overflow:visible;
  }
  .header{font-size:12px}.mini-title{display:none}
  .logo{width:min(430px,96vw);max-height:190px;margin:-2px auto -4px}
  .category{font-size:12px;letter-spacing:.27em}
  .since{font-size:19px;gap:9px;margin-top:10px}.since span{width:52px}
  .hero h1{font-size:31px;margin-top:4px}
  .hero p{font-size:12.5px;padding:0 8px}
  .actions{grid-template-columns:1fr;gap:13px;margin-top:16px}
  .card,.phone,.menu,.maps,.instagram,.review{
    grid-column:auto;
    min-height:108px;
    grid-template-columns:62px 1fr 34px;
    padding:16px 13px;
    border-radius:23px;
  }
  .icon{width:56px;height:56px}.icon svg{width:52px;height:52px}
  .phone .icon svg{width:37px;height:37px}
  .content strong{font-size:23px}
  .content small{font-size:12.5px;margin-top:8px}
  .phone .content small{font-size:16px}
  .arrow{width:34px;height:34px;font-size:20px}
  footer{padding-top:20px}
  footer p{font-size:10.5px}
  footer em{font-size:24px}
  .food-art{opacity:.16}
  .art-pizza{width:160px;left:-72px;top:160px}
  .art-tomato{width:105px;left:auto;right:-38px;top:220px}
  .art-cheese{display:none}
  .art-salami{width:145px;right:-68px;top:52%}
  .art-basil{width:130px;right:auto;left:-60px;bottom:4%}
  .art-mushroom{display:none}
}
@media(max-width:390px){
  .card{grid-template-columns:54px 1fr 31px;padding:14px 11px}
  .icon{width:49px;height:49px}.icon svg{width:46px;height:46px}
  .content strong{font-size:21px}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important}
}


/* SEZIONI STORIA E ORARI */
.story-section,
.hours-section{
  position:relative;
  z-index:2;
  width:min(1320px,100%);
  margin:46px auto 0;
}

.story-section{
  display:grid;
  grid-template-columns:minmax(390px,.95fr) minmax(470px,1.05fr);
  gap:48px;
  align-items:center;
  padding:48px;
  border-radius:38px;
  background:rgba(255,253,247,.9);
  border:1px solid rgba(49,152,204,.16);
  box-shadow:0 22px 58px rgba(24,86,122,.15);
  backdrop-filter:blur(10px);
}

.story-picture{
  position:relative;
  overflow:hidden;
  border-radius:30px;
  min-height:430px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg,#e5f6fd,#c2e8f7);
  box-shadow:inset 0 0 0 1px rgba(49,152,204,.15);
}
.story-picture:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 62%,rgba(11,50,103,.11));
  pointer-events:none;
}
.story-picture img{
  width:100%;
  height:100%;
  min-height:430px;
  object-fit:cover;
  object-position:center;
  mix-blend-mode:multiply;
  filter:contrast(.94) saturate(.82);
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.story-section:hover .story-picture img{transform:scale(1.025)}
.story-picture span{
  position:absolute;
  z-index:2;
  left:24px;
  bottom:20px;
  padding:9px 17px;
  border-radius:999px;
  background:rgba(255,253,247,.9);
  font-family:"Cormorant Garamond",serif;
  font-size:21px;
  font-style:italic;
  box-shadow:0 8px 20px rgba(24,86,122,.14);
}

.eyebrow{
  color:#219bd4;
  font-size:13px;
  font-weight:700;
  letter-spacing:.24em;
  margin-bottom:12px;
}
.story-copy h2,
.hours-heading h2{
  margin:0;
  font-family:"Cormorant Garamond",serif;
  font-size:48px;
  line-height:.98;
  font-weight:700;
}
.story-copy p{
  font-size:15px;
  line-height:1.72;
  color:#285f84;
  margin:18px 0 0;
}
.story-copy blockquote{
  margin:25px 0 0;
  padding:18px 22px;
  border-left:3px solid #3ca5d8;
  background:rgba(192,232,248,.43);
  font-family:"Cormorant Garamond",serif;
  font-size:22px;
  line-height:1.35;
  font-style:italic;
}

.hours-section{padding-top:10px}
.hours-heading{text-align:center;max-width:760px;margin:0 auto 30px}
.hours-heading p{color:#285f84;font-size:14px}
.hours-layout{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:24px;
}
.hours-card,
.contact-panel{
  background:rgba(255,253,247,.95);
  border:1px solid rgba(49,152,204,.16);
  box-shadow:0 18px 42px rgba(24,86,122,.14);
  border-radius:30px;
}
.hours-card{padding:18px 28px}
.hours-row{
  display:flex;
  justify-content:space-between;
  gap:22px;
  align-items:center;
  padding:17px 6px;
  border-bottom:1px solid rgba(49,152,204,.14);
  font-size:14px;
}
.hours-row:last-child{border-bottom:0}
.hours-row strong{
  font-family:"Cormorant Garamond",serif;
  font-size:23px;
}
.hours-row span{text-align:right;color:#176b99;font-weight:600}
.hours-row.closed span{color:#9b7070}

.contact-panel{
  padding:34px 30px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}
.contact-icon{font-size:39px;margin-bottom:7px}
.contact-panel h3{
  font-family:"Cormorant Garamond",serif;
  font-size:32px;
  line-height:1;
  margin:3px 0 10px;
}
.contact-panel p{font-size:14px;line-height:1.6;color:#285f84}
.contact-actions{
  width:100%;
  display:grid;
  gap:11px;
  margin-top:14px;
}
.contact-button{
  min-height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border-radius:999px;
  text-decoration:none;
  color:white;
  background:linear-gradient(145deg,#49abe0,#2e98d1);
  font-size:12px;
  font-weight:700;
  letter-spacing:.09em;
  box-shadow:0 10px 22px rgba(39,142,194,.22);
  transition:transform .22s ease,box-shadow .22s ease;
}
.contact-button.secondary{
  color:#176b99;
  background:rgba(255,253,247,.84);
  border:1px solid #3ca5d8;
  box-shadow:none;
}
.contact-button:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 14px 30px rgba(39,142,194,.28);
}
.contact-phone{
  margin-top:17px;
  color:#0b3267;
  text-decoration:none;
  font-size:21px;
  font-weight:700;
}

/* EFFETTI LEGGERI */
.reveal{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1);
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}
.card{
  position:relative;
  overflow:hidden;
}
.card:after{
  content:"";
  position:absolute;
  inset:-45% -70%;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.5) 50%,transparent 58%);
  transform:translateX(-40%);
  transition:transform .7s ease;
  pointer-events:none;
}
.card:hover:after{transform:translateX(38%)}

@media(max-width:950px){
  .story-section{grid-template-columns:1fr;padding:30px}
  .story-picture{min-height:360px}
  .story-picture img{min-height:360px}
  .hours-layout{grid-template-columns:1fr}
}
@media(max-width:780px){
  .story-section,.hours-section{margin-top:30px}
  .story-section{padding:17px;border-radius:28px;gap:25px}
  .story-picture{min-height:260px;border-radius:23px}
  .story-picture img{min-height:260px}
  .story-picture span{left:15px;bottom:14px;font-size:18px}
  .story-copy h2,.hours-heading h2{font-size:38px}
  .story-copy p{font-size:14px;line-height:1.62}
  .story-copy blockquote{font-size:20px}
  .hours-card{padding:10px 16px}
  .hours-row{align-items:flex-start;padding:15px 2px;gap:10px}
  .hours-row strong{font-size:20px}
  .hours-row span{font-size:12px;max-width:190px}
  .contact-panel{padding:27px 19px}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  .story-picture img,.contact-button,.card:after{transition:none!important}
}