body { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 24px 32px 40px; }

.land { width: 100%; display: flex; flex-direction: column; align-items: center; flex: 1; }

.hero { max-width: 900px; text-align: center; padding: 56px 0 64px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.hero h1 { margin: 0; font-size: 88px; line-height: .98; font-weight: 800; letter-spacing: -.045em; }
.hero .accent { color: #22d3ee; }
.marchio { margin-bottom: 12px; color: #f4f4f6; font-family: var(--display); font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.hero p { margin: 0; max-width: 560px; font-size: 19px; line-height: 1.5; color: #b4b5bd; }

.vetrina { width: 100%; max-width: 1240px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 220px; gap: 16px; }
.tile { --c: #22d3ee; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 26px;
  color: #f4f4f6; background: color-mix(in srgb, var(--c) 18%, #15161b); border: 1px solid color-mix(in srgb, var(--c) 40%, #15161b); transition: transform .2s; }
.tile:hover, .tile:focus-visible { transform: translateY(-4px); }
.tile--grande { grid-column: span 2; grid-row: span 2; }
.tile--largo { grid-column: span 2; }
.tile-sigla { position: absolute; right: -10px; bottom: -48px; font-family: var(--display); font-size: 200px; font-weight: 800; line-height: 1;
  letter-spacing: -.06em; color: var(--c); opacity: .22; pointer-events: none; }
.tile--largo .tile-sigla { font-size: 240px; }
.tile--grande .tile-sigla { font-size: 360px; }
.tile-dom { align-self: flex-start; max-width: 100%; padding: 5px 11px; border-radius: 999px; background: var(--c); color: #0e0f13;
  font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-nome { margin-top: auto; font-family: var(--display); font-size: 32px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.tile--largo .tile-nome { font-size: 40px; }
.tile--grande .tile-nome { font-size: 64px; }
.tile-descr { position: relative; max-width: 440px; color: #d4d5db; font-size: 15px; line-height: 1.45; }

.riservata { width: 100%; max-width: 1240px; margin-top: 40px; scroll-margin-top: 90px; }
.ris-testa { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ris-testa h2 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.ris-conta { padding: 4px 10px; border-radius: 999px; background: #1a1b21; border: 1px solid #2a2c34; font-size: 12.5px; color: #b4b5bd; }
.ris-griglia { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.mini { --c: #22d3ee; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; min-height: 180px; padding: 20px; border-radius: 22px;
  color: #f4f4f6; background: color-mix(in srgb, var(--c) 18%, #15161b); border: 1px solid color-mix(in srgb, var(--c) 40%, #15161b); transition: transform .2s; }
.mini:hover, .mini:focus-visible { transform: translateY(-4px); }
.mini-sigla { position: absolute; right: -8px; bottom: -40px; font-family: var(--display); font-size: 160px; font-weight: 800; line-height: 1;
  letter-spacing: -.06em; color: var(--c); opacity: .22; pointer-events: none; }
.mini-dom { align-self: flex-start; max-width: 100%; padding: 4px 10px; border-radius: 999px; background: var(--c); color: #0e0f13;
  font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-nome { position: relative; margin-top: auto; font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.mini-descr { position: relative; color: #d4d5db; font-size: 13px; line-height: 1.4; }

.land-foot { width: 100%; max-width: 1240px; margin-top: auto; padding-top: 48px; display: flex; justify-content: space-between; gap: 12px;
  color: #8e8f98; font-size: 13.5px; }
.land-foot a { color: #b4b5bd; }
.land-foot a:hover { color: #f4f4f6; }

@media (max-width: 1000px) {
  .vetrina { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ris-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero h1 { font-size: 64px; }
}
@media (max-width: 640px) {
  body { padding: 12px 16px 32px; }
  .hero { padding: 40px 0 40px; }
  .hero h1 { font-size: 46px; }
  .hero p { font-size: 17px; }
  .vetrina { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 12px; }
  .tile, .tile--grande, .tile--largo { grid-column: auto; grid-row: auto; min-height: 190px; padding: 22px; }
  .tile--grande { min-height: 300px; }
  .tile--grande .tile-nome { font-size: 48px; }
  .tile--grande .tile-sigla { font-size: 260px; }
  .ris-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .land-foot { flex-direction: column; align-items: center; padding-top: 36px; }
}