/* ───────────────────────────────────────────────────────────
   H-Flow — Sito vetrina
   Token di brand + componenti non coperti dalle utility Tailwind.
   Palette derivata dal logo: teal #1A8B8E, grafite #2E2E34.
   ─────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap');

:root {
  --brand-50:  #eef8f8;
  --brand-100: #d4eeef;
  --brand-200: #aed4d6;
  --brand-300: #84c4c5;
  --brand-400: #4aa9ac;
  --brand-500: #259396;
  --brand-600: #1a8b8e;
  --brand-700: #166c6e;
  --brand-800: #155557;
  --brand-900: #123f40;
  --brand-950: #0a2627;

  --ink-900: #1c1c20;
  --ink-800: #2e2e34;
  --ink-950: #09090b;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Offset per ancore sotto la navbar sticky */
:target { scroll-margin-top: 6rem; }

/* ── Tipografia di servizio ── */
.font-display { font-feature-settings: "ss01"; letter-spacing: -0.02em; }
.text-balance { text-wrap: balance; }

/* ── Bottoni ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; line-height: 1; border-radius: .75rem;
  padding: .85rem 1.4rem; cursor: pointer;
  transition: transform .15s ease, background-color .2s ease, box-shadow .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.btn-primary { background: var(--brand-600); color: #fff; box-shadow: 0 6px 20px -8px rgba(26,139,142,.7); }
.btn-primary:hover { background: var(--brand-700); transform: translateY(-1px); }
.btn-outline { background: #fff; color: var(--ink-800); border: 1px solid #e2e8f0; }
.btn-outline:hover { border-color: var(--brand-400); color: var(--brand-700); }
.btn-ghost-light { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.28); }
.btn-ghost-light:hover { background: rgba(255,255,255,.2); }

/* ── Mesh / gradienti ── */
.hero-aurora {
  background:
    radial-gradient(60% 80% at 15% 10%, rgba(26,139,142,.16), transparent 60%),
    radial-gradient(55% 70% at 90% 0%, rgba(174,212,214,.40), transparent 55%),
    radial-gradient(40% 60% at 70% 90%, rgba(26,139,142,.10), transparent 60%);
}
.grid-faint {
  background-image:
    linear-gradient(to right, rgba(46,46,52,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(46,46,52,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle at 50% 35%, #000 30%, transparent 78%);
          mask-image: radial-gradient(circle at 50% 35%, #000 30%, transparent 78%);
}

/* ── Glass leggero (accento, non full-glass) ── */
.glass {
  background: rgba(255,255,255,.7);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}

/* ── Scroll reveal (progressive enhancement) ──
   Il nascondiglio iniziale si applica SOLO con JS attivo (html.js):
   senza JS il contenuto resta pienamente visibile. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }

/* ── "Respiro" del brand — stesso concetto del logo che respira nell'app ──
   Wordmark con gradiente grafite→teal che fluisce avanti e indietro (8s). */
.brand-breathe,
.brand-breathe-light,
.wordmark-breathe {
  background-size: 300% 300%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: brand-breathe 6s ease-in-out infinite;
}
/* hero "flusso": teal che pulsa in luminosità */
.brand-breathe       { background-image: linear-gradient(135deg, #15868d, #3fcdd6, #15868d); }
/* footer (su scuro): chiaro ↔ teal */
.brand-breathe-light { background-image: linear-gradient(135deg, #eaf0f0, #5fc6c8, #eaf0f0); }
/* wordmark del logo: grafite con banda teal che scorre (come nell'app) */
.wordmark-breathe    { background-image: linear-gradient(120deg, #3f4044, #3f4044 28%, #1aa7b2 50%, #3f4044 72%, #3f4044); }
@keyframes brand-breathe {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Il marchio "respira" con una scala lieve, in fase col colore del wordmark. */
.logo-breathe { animation: logo-breathe 6s ease-in-out infinite; transform-origin: center; will-change: transform; }
@keyframes logo-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* Richiamo "flow": onda che scorre (stroke animato). */
.flow-line { stroke-dasharray: 220; stroke-dashoffset: 220; animation: flow-dash 6s ease-in-out infinite; }
@keyframes flow-dash { 0% { stroke-dashoffset: 220; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -220; } }

/* Showcase: tavolo "occupato" che pulsa + card che fluttua */
.t-occupied { animation: t-pulse 2.6s ease-in-out infinite; }
@keyframes t-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(26,139,142,.5); } 50% { box-shadow: 0 0 0 7px rgba(26,139,142,0); } }
.float-soft { animation: float-soft 5s ease-in-out infinite; }
@keyframes float-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ──────────────────  Profondità, transizioni e "tocco flow" su box e card  ────────────────── */
.rounded-2xl.bg-white,
.rounded-xl.bg-white {
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease;
}
.rounded-2xl.bg-white {
  position: relative;
  box-shadow: 0 1px 2px rgba(16,24,24,.04), 0 10px 30px -18px rgba(16,24,24,.22);
}
/* accento "flow" teal che compare in alto all'hover */
.rounded-2xl.bg-white::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  border-radius: 1rem 1rem 0 0;
  background: linear-gradient(90deg, transparent, var(--brand-500), transparent);
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.rounded-2xl.bg-white:hover,
.rounded-xl.bg-white:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -16px rgba(26,139,142,.30);
  border-color: rgba(26,139,142,.40);
}
.rounded-2xl.bg-white:hover::before { opacity: 1; }
/* la tendina del mega-menu non deve sollevarsi né mostrare l'accento */
header .rounded-2xl.bg-white { box-shadow: 0 18px 50px -12px rgba(16,24,24,.22); }
header .rounded-2xl.bg-white::before { display: none; }
header .rounded-2xl.bg-white:hover { transform: none; }

/* termini importanti in grassetto nelle voci delle card */
.hf-rich strong { font-weight: 700; color: #2e2e34; }

/* ──────────────────  DARK MODE  ────────────────── */
.dark body { background-color: #0c1112; color: #c2caca; }

/* superfici */
.dark .bg-white { background-color: #141b1c; }
.dark .bg-white\/85 { background-color: rgba(14,19,20,.82); }
.dark .bg-white\/70 { background-color: rgba(255,255,255,.06); }
.dark .glass { background-color: rgba(14,19,20,.72); }
.dark .bg-ink-50, .dark .bg-ink-50\/70, .dark .bg-ink-50\/60 { background-color: #10171a; }
.dark .bg-brand-50, .dark .bg-brand-50\/60 { background-color: rgba(26,139,142,.10); }
.dark .bg-brand-100 { background-color: rgba(26,139,142,.18); }
.dark .bg-ink-950 { background-color: #07090a; }
.dark .bg-ink-900 { background-color: #0a0e0f; }
.dark .bg-ink-200, .dark .bg-ink-200\/70 { background-color: rgba(255,255,255,.13); }
/* gradiente header delle card-gruppo */
.dark .from-brand-50 { --tw-gradient-from: rgba(26,139,142,.14) var(--tw-gradient-from-position); }
.dark .to-white { --tw-gradient-to: #141b1c var(--tw-gradient-to-position); }

/* testo */
.dark .text-ink-900 { color: #eef3f3; }
.dark .text-ink-800 { color: #e2e8e8; }
.dark .text-ink-700 { color: #cdd5d5; }
.dark .text-ink-600 { color: #b0baba; }
.dark .text-ink-500 { color: #939d9d; }
.dark .text-ink-400 { color: #828c8c; }
.dark .text-ink-300 { color: #aab4b4; }
.dark .text-brand-600, .dark .text-brand-700 { color: #57bdc0; }
.dark .text-brand-800 { color: #6fc9cb; }

/* bordi */
.dark .border-ink-100 { border-color: rgba(255,255,255,.09); }
.dark .border-ink-200 { border-color: rgba(255,255,255,.14); }
.dark .border-brand-100 { border-color: rgba(26,139,142,.30); }
.dark .border-brand-200 { border-color: rgba(26,139,142,.45); }
.dark .border-brand-500 { border-color: rgba(26,139,142,.60); }

/* stati hover */
.dark .hover\:bg-brand-50:hover { background-color: rgba(26,139,142,.14); }
.dark .hover\:bg-ink-50:hover { background-color: rgba(255,255,255,.05); }
.dark .hover\:bg-ink-100:hover { background-color: rgba(255,255,255,.08); }
.dark .hover\:text-brand-700:hover, .dark .hover\:text-brand-800:hover { color: #7fd0d2; }
.dark .hover\:border-brand-300:hover { border-color: rgba(26,139,142,.55); }

/* profondità card in dark */
.dark .rounded-2xl.bg-white { box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 12px 32px -18px rgba(0,0,0,.8); }
.dark .rounded-2xl.bg-white:hover, .dark .rounded-xl.bg-white:hover { box-shadow: 0 20px 46px -16px rgba(26,139,142,.45); border-color: rgba(26,139,142,.55); }
.dark header .rounded-2xl.bg-white { box-shadow: 0 24px 60px -12px rgba(0,0,0,.7); }

/* bottoni */
.dark .btn-outline { background-color: #141b1c; color: #e2e8e8; border-color: rgba(255,255,255,.16); }
.dark .btn-outline:hover { border-color: var(--brand-400); color: #7fd0d2; }

/* respiro colore su sfondo scuro */
.dark .brand-breathe { background-image: linear-gradient(135deg, #2bb4bd, #7fe6ec, #2bb4bd); }
.dark .wordmark-breathe { background-image: linear-gradient(120deg, #eef3f3, #eef3f3 28%, #5fd0d6 50%, #eef3f3 72%, #eef3f3); }

/* aurora + griglia in dark */
.dark .hero-aurora {
  background:
    radial-gradient(60% 80% at 15% 10%, rgba(26,139,142,.18), transparent 60%),
    radial-gradient(55% 70% at 90% 0%, rgba(26,139,142,.12), transparent 55%),
    radial-gradient(40% 60% at 70% 90%, rgba(26,139,142,.10), transparent 60%);
}
.dark .grid-faint {
  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);
}

.dark .hf-rich strong { color: #eef3f3; }

/* form in dark */
.dark input, .dark textarea, .dark select { background-color: #10171a; color: #e2e8e8; border-color: rgba(255,255,255,.14); }
.dark input::placeholder, .dark textarea::placeholder { color: #7a8484; }
.dark select option { background-color: #10171a; color: #e2e8e8; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover { transform: none; }
  .brand-breathe, .brand-breathe-light, .logo-breathe, .flow-line, .t-occupied, .float-soft { animation: none; }
  .brand-breathe       { background-position: 25% 50%; }
  .brand-breathe-light { background-position: 50% 50%; }
  .rounded-2xl.bg-white:hover, .rounded-xl.bg-white:hover { transform: none; }
  .rounded-2xl.bg-white::before { display: none; }
}

/* ── Mega-menu / dropdown ── */
[x-cloak] { display: none !important; }