/* Terme di Levico — landing "Sito in rigenerazione"
   Business + Gen Z glassmorphism, medical/thermal palette
*/

:root{
  --bg0:#07161a;
  --bg1:#061217;
  --ink:#eaf7f6;
  --muted:rgba(234,247,246,.74);

  --aqua:#3ee3d2;
  --mint:#8cf2c0;
  --teal:#2bb0c8;
  --blue:#4aa3ff;

  --glass: rgba(255,255,255,.07);
  --glass-2: rgba(255,255,255,.10);
  --stroke: rgba(255,255,255,.14);
  --shadow: 0 18px 60px rgba(0,0,0,.45);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 800px at 20% 15%, rgba(62,227,210,.16), transparent 55%),
    radial-gradient(900px 700px at 85% 20%, rgba(74,163,255,.14), transparent 52%),
    radial-gradient(1000px 900px at 50% 95%, rgba(140,242,192,.14), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }

/* background */
.bg{ position:fixed; inset:0; pointer-events:none; }
.grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity:.25;
  mask-image: radial-gradient(closest-side at 50% 35%, rgba(0,0,0,.9), transparent 75%);
}

.orb{
  position:absolute;
  width: 520px; height: 520px;
  border-radius: 999px;
  filter: blur(22px);
  opacity: .55;
  transform: translate3d(0,0,0);
  animation: float 10s ease-in-out infinite;
}
.orb--a{
  left:-120px; top:-140px;
  background: radial-gradient(circle at 30% 35%, rgba(62,227,210,.9), rgba(62,227,210,0));
}
.orb--b{
  right:-180px; top:40px;
  width: 620px; height: 620px;
  background: radial-gradient(circle at 35% 30%, rgba(74,163,255,.75), rgba(74,163,255,0));
  animation-duration: 12s;
}
.orb--c{
  left: 18%; bottom: -240px;
  width: 720px; height: 720px;
  background: radial-gradient(circle at 50% 40%, rgba(140,242,192,.75), rgba(140,242,192,0));
  animation-duration: 14s;
}
@keyframes float{
  0%,100%{ transform: translateY(0px); }
  50%{ transform: translateY(18px); }
}

.wrap{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: clamp(20px, 4vw, 56px);
}

/* glass */
.glass{
  background: linear-gradient(180deg, var(--glass-2), var(--glass));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hero{
  width:min(1040px, 100%);
  padding: clamp(18px, 3.2vw, 34px);
  border-radius: 28px;
  text-align:center;
  position:relative;
  overflow:hidden;
}

/* Subtle water shimmer (breeze) */
.water{
  position:absolute;
  left:-20%;
  right:-20%;
  bottom:-42px;
  height: 240px;
  pointer-events:none;
  opacity:.72;
  filter: blur(0.5px);
  background:
    radial-gradient(140px 70px at 10% 65%, rgba(62,227,210,.35), transparent 70%),
    radial-gradient(180px 80px at 25% 55%, rgba(74,163,255,.28), transparent 72%),
    radial-gradient(220px 90px at 45% 70%, rgba(140,242,192,.30), transparent 74%),
    radial-gradient(260px 110px at 70% 60%, rgba(43,176,200,.26), transparent 75%),
    radial-gradient(220px 90px at 88% 68%, rgba(62,227,210,.26), transparent 75%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  mask-image: radial-gradient(closest-side at 50% 15%, rgba(0,0,0,.85), transparent 78%);
}
.water::before{
  content:"";
  position:absolute; inset:-60px -80px;
  background:
    repeating-radial-gradient(circle at 40% 40%,
      rgba(255,255,255,.11) 0 2px,
      rgba(255,255,255,0) 6px 14px);
  opacity:.22;
  filter: blur(1px);
  transform: translate3d(0,0,0);
  animation: ripples 10s ease-in-out infinite;
}
.water::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(62,227,210,.0), rgba(62,227,210,.10), rgba(74,163,255,.0));
  opacity:.35;
  mix-blend-mode: screen;
  transform: translate3d(0,0,0);
  animation: drift 9s ease-in-out infinite;
}

@keyframes ripples{
  0%,100%{ transform: translateX(-12px) translateY(2px) scale(1.02); }
  50%{ transform: translateX(14px) translateY(-4px) scale(1.05); }
}
@keyframes drift{
  0%,100%{ transform: translateX(-30px); }
  50%{ transform: translateX(30px); }
}

.logo{
  display:block;
  margin: 4px auto 12px;
  width: min(520px, 92%);
  height:auto;
  user-select:none;
  position:relative;
  z-index:2;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  color: rgba(234,247,246,.78);
  margin: 8px auto 14px;
  font-weight: 600;
  letter-spacing: .2px;
  position:relative;
  z-index:2;
}
.badge::before{
  content:"";
  width:10px; height:10px;
  border-radius:999px;
  background: linear-gradient(135deg, var(--aqua), var(--blue));
  box-shadow: 0 0 0 6px rgba(62,227,210,.12);
}

.center-copy{
  margin: 0 auto 18px;
  max-width: 820px;
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.65;
  color: var(--muted);
  position:relative;
  z-index:2;
}
.center-copy strong{ color: var(--ink); }

.cards{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 12px;
  position:relative;
  z-index:2;
}
@media (min-width: 860px){
  .cards{ grid-template-columns: 1fr 1fr; gap: 16px; }
}

.card{
  border-radius: 22px;
  padding: 14px;
  text-align:left;
  display:flex;
  gap: 14px;
  align-items:stretch;
  transition: transform .22s ease, border-color .22s ease;
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
}

.photo-wrap{
  flex: 0 0 170px;
  border-radius: 18px;
  position:relative;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.14);
  min-height: 118px;
  background: rgba(0,0,0,.18);
}
.photo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  filter: saturate(1.02) contrast(1.02);
}
.photo-wrap::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35));
  pointer-events:none;
}
.photo__label{
  position:absolute;
  left: 10px; bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 12px;
  color: rgba(234,247,246,.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.card__content h2{
  margin: 4px 0 6px;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.card__content p{
  margin: 0;
  color: rgba(234,247,246,.74);
  font-size: 14px;
  line-height: 1.35;
}

.contact{
  margin-top: 16px;
  border-radius: 20px;
  padding: 10px 14px;
  text-align:left;
  position:relative;
  z-index:2;

  /* Higher contrast for mobile readability */
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.18);
}
.contact::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  /* subtle dark veil to keep text readable over glass */
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.22));
  pointer-events:none;
}
.contact > *{ position:relative; z-index:1; }

.contact__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.contact__row:last-of-type{ border-bottom: none; }

.contact__k{
  color: rgba(234,247,246,.78);
  font-weight: 700;
}

.contact__v{
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--ink);
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
  overflow-wrap: anywhere; /* lets long emails wrap nicely */
}

/* Mobile: slightly smaller value text so it doesn't fade/clip */
@media (max-width: 420px){
  .contact__v{ font-size: 15px; }
}

.mini{
  margin: 16px 0 0;
  color: rgba(234,247,246,.55);
  font-size: 12px;
  text-align:center;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .orb, .water::before, .water::after{ animation: none !important; }
  .card{ transition:none; }
}