@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --tortora:      #E4DED2;
  --tortora-alt:  #D8D0C0;
  --greige:       #B7AE9C;
  --moro:         #4A4238;
  --moro-deep:    #5C5548;
  --nero:         #4F4A3F;
  --carta:        #F7F4EC;
  --moro-60:      rgba(74,66,56,0.62);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  background:var(--tortora);
  font-family:'Inter',sans-serif;
  color:var(--moro);
  min-height:100vh;
}

.page{ max-width:520px; margin:0 auto; position:relative; }

/* ---- topbar ---- */
.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px 12px;
  background:linear-gradient(180deg, var(--tortora) 78%, transparent);
}
.brand{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--moro-60);
}
.langpill{
  display:flex; background:var(--carta);
  border:1px solid rgba(74,66,56,0.15);
  border-radius:999px; padding:3px;
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.02em;
}
.langpill button{
  all:unset; padding:5px 8px; border-radius:999px; cursor:pointer;
  color:var(--moro-60);
}
.langpill button.active{ background:var(--moro); color:var(--carta); }

/* ---- hero ---- */
.hero{
  position:relative; padding:18px 22px 30px;
  text-align:center; overflow:hidden;
  background:var(--moro-deep);
  color:var(--tortora);
}
.ripple-field{ position:absolute; inset:0; pointer-events:none; opacity:.5; }
.ripple-field svg{ width:100%; height:100%; }
.ripple-field circle{ fill:none; stroke:var(--greige); stroke-width:.6; }
.ripple-field circle.r1{ animation:ripple 7s ease-in-out infinite; }
.ripple-field circle.r2{ animation:ripple 7s ease-in-out 1.6s infinite; }
.ripple-field circle.r3{ animation:ripple 7s ease-in-out 3.2s infinite; }
@keyframes ripple{
  0%{ opacity:0; transform:scale(0.6); }
  35%{ opacity:.5; }
  100%{ opacity:0; transform:scale(1.25); }
}
@media (prefers-reduced-motion: reduce){
  .ripple-field circle{ animation:none !important; opacity:.25; }
}

.eyebrow{
  position:relative; z-index:2;
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--greige); margin-bottom:16px;
}
.logo-mark{ position:relative; z-index:2; width:198px; margin:0 auto 20px; }
.logo-mark img{ width:100%; height:auto; display:block; }

.location-label{
  position:relative; z-index:2; font-family:'Fraunces',serif; font-style:italic;
  font-weight:500; font-size:15px; letter-spacing:.03em; color:var(--greige); margin-bottom:4px;
}
.hero p{
  position:relative; z-index:2;
  margin:16px auto 0; max-width:300px;
  font-size:14.5px; line-height:1.6; color:rgba(228,222,210,0.75);
}

/* ---- icon grid nav ---- */
.icon-nav{ padding:26px 20px 6px; }
.icon-nav h3{
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--moro-60); margin-bottom:16px; padding:0 2px;
}
.icon-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px 10px; }
.icon-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; text-align:center; background:none; border:none; font:inherit; cursor:pointer;
  color:inherit; padding:0;
}
.icon-circle{
  width:100px; height:100px; border-radius:26px;
  background:rgba(255,255,255,0.74);
  border:1px solid rgba(74,66,56,0.20);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:10px 6px; margin:0 auto;
}
.icon-circle svg{ width:34px; height:34px; stroke:var(--moro); fill:none; stroke-width:1.3; }
.icon-label{ font-size:12px; line-height:1.2; color:var(--moro); font-weight:600; max-width:80px; }

/* ---- divider ---- */
.divider{
  height:22px; margin:8px 22px 0;
  background-image:radial-gradient(circle at 0 50%, transparent 0 3px, var(--greige) 3px 4px, transparent 4px);
  background-size:14px 100%; background-repeat:repeat-x; opacity:.6;
}

/* ---- section detail card ---- */
.section{ padding:28px 22px 8px; position:relative; scroll-margin-top:70px; }
.section.alt{ background:var(--tortora-alt); }

.sec-head{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.sec-icon{
  width:48px; height:48px; border-radius:12px; flex-shrink:0;
  background:var(--moro); display:flex; align-items:center; justify-content:center;
}
.sec-icon svg{ width:24px; height:24px; stroke:var(--tortora); fill:none; stroke-width:1.4; }
.sec-title{ font-family:'Fraunces',serif; font-weight:600; font-size:19px; color:var(--nero); }

.sec-body{ font-size:16px; line-height:1.68; color:var(--moro); margin-left:58px; max-width:340px; }
.sec-meta{ margin-left:58px; margin-top:12px; display:flex; gap:16px; flex-wrap:wrap; }
.meta-chip{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--moro); display:flex; gap:6px; align-items:center; }
.meta-chip .dot{ width:5px;height:5px;border-radius:50%;background:var(--greige); }

.ask-link{
  margin-left:58px; margin-top:14px; margin-bottom:14px;
  display:inline-flex; align-items:center; gap:6px;
  font-weight:600; font-size:15px; color:var(--moro);
  text-decoration:none; border-bottom:1.5px solid rgba(74,66,56,0.4); padding-bottom:3px;
  background:none; border-top:none; border-left:none; border-right:none;
  font-family:inherit; cursor:pointer;
}

.photo-block{
  margin-left:58px; margin-top:2px; margin-bottom:6px; height:130px; max-width:340px; border-radius:14px;
  background:var(--greige); position:relative; overflow:hidden;
}
.photo-block img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-block::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(26,23,20,0.55) 100%);
}
.photo-label{ position:absolute; z-index:2; bottom:8px; left:12px; font-family:'IBM Plex Mono',monospace; font-size:9px; color:var(--carta); letter-spacing:.06em; opacity:.9; }

/* ---- footer ---- */
.footer{ padding:30px 22px 120px; background:var(--nero); color:var(--tortora); }
.footer .eyebrow{ color:var(--greige); margin-bottom:14px; }
.footer h2{ font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:21px; max-width:340px; line-height:1.32; margin-bottom:18px; }
.footer .row{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid rgba(228,222,210,0.12); font-size:12.5px; gap:16px; }
.footer .row span:first-child{ color:rgba(228,222,210,0.5); }

/* ---- floating DesBi launcher ---- */
.desbi-fab{
  position:fixed; right:18px; bottom:22px; z-index:40;
  display:flex; align-items:center; gap:9px;
  background:var(--moro); color:var(--carta);
  padding:13px 16px 13px 13px; border-radius:999px;
  box-shadow:0 10px 24px -8px rgba(26,23,20,0.55);
  font-weight:600; font-size:12px;
  border:none; font-family:inherit; cursor:pointer;
  max-width:calc(520px - 36px);
}
.desbi-dot{
  width:29px;height:29px;border-radius:50%; background:var(--carta);
  display:flex; align-items:center; justify-content:center;
  padding:4px; overflow:hidden;
}
.desbi-dot img{ width:100%; height:100%; object-fit:contain; display:block; }

@media (min-width:521px){
  .desbi-fab{ right:calc(50% - 260px + 18px); }
}

/* Il widget DesBi porta con sé una propria bollicina nera e un nudge;
   li nascondiamo perché usiamo il nostro pulsante brandizzato (.desbi-fab)
   come unico punto d'ingresso alla chat. Il pannello (#desbi-panel) resta
   visibile e funzionante, viene solo aperto/chiuso dal nostro bottone. */
#desbi-bubble, #desbi-nudge{ display:none !important; }