/* ============================================================
   LORICALY — base + componenti (1/2)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font: var(--type-body-l);
  font-family: var(--font);
  color: var(--md-on-surface);
  background: var(--md-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: var(--lime); color: #16321a; }

:focus-visible {
  outline: 3px solid var(--md-primary);
  outline-offset: 2px;
  border-radius: var(--shape-xs);
}

/* ---------- Tipografia helper ---------- */
.display-l { font: var(--type-display-l); letter-spacing: var(--track-display); }
.display-m { font: var(--type-display-m); letter-spacing: var(--track-display); }
.display-s { font: var(--type-display-s); letter-spacing: var(--track-display); }
.headline-l { font: var(--type-headline-l); letter-spacing: var(--track-tight); }
.headline-m { font: var(--type-headline-m); letter-spacing: var(--track-tight); }
.headline-s { font: var(--type-headline-s); }
.title-l { font: var(--type-title-l); }
.title-m { font: var(--type-title-m); }
.title-s { font: var(--type-title-s); }
.body-l { font: var(--type-body-l); }
.body-m { font: var(--type-body-m); }
.body-s { font: var(--type-body-s); }
.label-l { font: var(--type-label-l); letter-spacing: var(--track-label); }
.label-m { font: var(--type-label-m); letter-spacing: var(--track-label); }
.muted { color: var(--md-on-surface-variant); }
.lime-text { color: var(--lime-deep); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section-tight { padding-block: clamp(2rem, 4vw, 3rem); }
.stack > * + * { margin-top: 1rem; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font: var(--type-label-l); letter-spacing: .08em; text-transform: uppercase;
  color: var(--md-primary);
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: var(--grad-brand);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 1rem; top: -100px; z-index: 200;
  background: var(--md-primary); color: var(--md-on-primary);
  padding: .7rem 1rem; border-radius: var(--shape-m);
  transition: top var(--dur-short);
}
.skip-link:focus { top: 1rem; }

/* ============================================================
   STATE LAYER (MD3) — applicato via ::after su componenti interattivi
   ============================================================ */
.state { position: relative; isolation: isolate; }
.state::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: currentColor; opacity: 0; pointer-events: none;
  transition: opacity var(--dur-short) var(--ease-standard);
}
.state:hover::after { opacity: var(--state-hover); }
.state:active::after { opacity: var(--state-press); }

/* ============================================================
   TOP APP BAR
   ============================================================ */
.appbar {
  position: sticky; top: 0; z-index: 90;
  height: var(--appbar-h);
  background: color-mix(in srgb, var(--md-surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-med), box-shadow var(--dur-med), background var(--dur-med);
}
.appbar.scrolled {
  border-bottom-color: var(--md-outline-variant);
  box-shadow: var(--el-1);
}
.appbar__inner {
  max-width: var(--maxw); margin-inline: auto; height: 100%;
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 1rem;
}
.brand { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.brand__logo { height: 32px; width: auto; display: block; }
.brand__mark { width: 34px; height: 34px; }
.brand__name {
  font: 800 1.5rem/1 var(--font); letter-spacing: -0.02em;
  color: var(--md-primary);
}
.brand__name .dot { color: var(--lime-deep); }
.brand__tag {
  display: block; font: var(--type-label-s); letter-spacing: .06em;
  color: var(--md-on-surface-variant); margin-top: 1px;
}
.nav { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.nav__link {
  padding: .55rem .85rem; border-radius: var(--shape-full);
  font: var(--type-label-l); color: var(--md-on-surface-variant);
  transition: color var(--dur-short);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--md-primary); }
.nav__link[aria-current="page"] { font-weight: 700; }

.appbar__cta { margin-left: .5rem; }
.icon-btn {
  --sz: 44px;
  width: var(--sz); height: var(--sz); display: grid; place-items: center;
  border-radius: var(--shape-full); border: none; background: transparent;
  color: var(--md-on-surface-variant); cursor: pointer;
}
.menu-toggle { display: none; }

/* Hide desktop nav on small screens */
@media (max-width: 900px) {
  .nav, .appbar__cta { display: none; }
  .menu-toggle { display: grid; margin-left: auto; }
}

/* ============================================================
   BOTTOM NAVIGATION (mobile webapp)
   ============================================================ */
.bottom-nav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: color-mix(in srgb, var(--md-surface) 94%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--md-outline-variant);
  justify-content: space-around; align-items: stretch;
}
.bottom-nav__item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; color: var(--md-on-surface-variant);
  background: none; border: none; cursor: pointer; padding-top: 6px;
  font: var(--type-label-s); letter-spacing: 0;
}
.bottom-nav__icon {
  display: grid; place-items: center; width: 56px; height: 30px;
  border-radius: var(--shape-full); transition: background var(--dur-short);
}
.bottom-nav__item[aria-current="page"] { color: var(--md-primary); font-weight: 700; }
.bottom-nav__item[aria-current="page"] .bottom-nav__icon { background: var(--md-secondary-container); }

@media (max-width: 900px) {
  .bottom-nav { display: flex; }
  body { padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   MOBILE MENU SHEET
   ============================================================ */
.scrim {
  position: fixed; inset: 0; background: rgba(8,32,26,.45);
  opacity: 0; visibility: hidden; transition: opacity var(--dur-med);
  z-index: 110; backdrop-filter: blur(2px);
}
.scrim.open { opacity: 1; visibility: visible; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  background: var(--md-surface-container-low);
  border-radius: var(--shape-xl) var(--shape-xl) 0 0;
  padding: .75rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom,0px));
  transform: translateY(100%); transition: transform var(--dur-med) var(--ease-emphasized);
  box-shadow: var(--el-3); max-height: 88vh; overflow-y: auto;
}
.sheet.open { transform: translateY(0); }
.sheet__grip {
  width: 40px; height: 4px; border-radius: 4px; background: var(--md-outline-variant);
  margin: .35rem auto 1.25rem;
}
.sheet__link {
  display: flex; align-items: center; gap: 1rem; padding: 1rem .5rem;
  border-radius: var(--shape-m); font: var(--type-title-m);
  border-bottom: 1px solid var(--md-outline-variant);
}
.sheet__link:last-child { border-bottom: none; }
.sheet__link svg { color: var(--md-primary); width: 22px; height: 22px; flex: none; }
/* footer contact icons */
.footer__list svg { width: 20px; height: 20px; flex: none; }