/* ClinicSoul — premium clinic operations brand */

:root {
  /* Brand */
  --ink: #1A0B3D;          /* deep purple, primary text + dark surfaces */
  --ink-2: #2A1A5E;
  --ink-soft: #3D2D6B;
  --violet: #7C3AED;
  --violet-soft: #A78BFA;
  --pink: #EC4899;
  --magenta: #C026D3;

  /* Surfaces */
  --bg: #FFFFFF;           /* clean white */
  --bg-2: #F5F1FC;         /* lavender wash for alt sections */
  --surface: #FFFFFF;
  --surface-warm: #FAF7FE; /* very light lavender for alt sections */
  --border: #E8E2F2;
  --border-soft: #EFEAF7;
  --muted: #6B6080;
  --muted-2: #8A7FA0;

  /* Accents */
  --success: #1F8A5B;
  --warning: #C97A1F;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(26,11,61,0.06), 0 1px 1px rgba(26,11,61,0.04);
  --shadow-md: 0 4px 16px -2px rgba(26,11,61,0.08), 0 2px 6px -1px rgba(26,11,61,0.05);
  --shadow-lg: 0 24px 48px -12px rgba(26,11,61,0.18), 0 8px 16px -8px rgba(26,11,61,0.08);
  --shadow-hero: 0 40px 80px -20px rgba(26,11,61,0.25), 0 16px 32px -12px rgba(26,11,61,0.12);

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  --gradient-brand: linear-gradient(120deg, #7C3AED 0%, #C026D3 50%, #EC4899 100%);
  --gradient-brand-light: linear-gradient(120deg, #A78BFA 0%, #E879F9 50%, #F9A8D4 100%);
  --gradient-soft: linear-gradient(180deg, #FFFFFF 0%, #F5F1FC 100%);
  --gradient-ink: linear-gradient(135deg, #1A0B3D 0%, #2A1A5E 60%, #4A2B8C 100%);

  --container: 1240px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* Typography */
.serif { font-family: 'Instrument Serif', 'Times New Roman', serif; font-weight: 400; font-style: italic; }
.mono  { font-family: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace; }

h1, h2, h3, h4 {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  color: var(--ink);
}
h1 { font-size: clamp(2.5rem, 5.5vw, 4.75rem); letter-spacing: -0.035em; font-weight: 600; }
h2 { font-size: clamp(2rem, 3.8vw, 3.25rem); letter-spacing: -0.03em; }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); letter-spacing: -0.02em; font-weight: 600; }
p  { margin: 0; }

/* Gradient highlight — keep the headline font, swap color for brand gradient */
h1 em, h2 em, h3 em, h4 em {
  font-family: inherit;
  font-style: normal;
  font-weight: 700;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* On dark surfaces, use a lighter gradient so it pops */
.on-dark h1 em, .on-dark h2 em, .on-dark h3 em, .on-dark h4 em,
.cta-strip h2 em, .ai-demo-grid h2 em, .story-side em {
  background: var(--gradient-brand-light);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

/* Layout */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 640px) { .container { padding: 0 20px; } }

.section { padding: 120px 0; }
.section-sm { padding: 80px 0; }
@media (max-width: 760px) {
  .section { padding: 72px 0; }
  .section-sm { padding: 48px 0; }
}

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(232, 226, 242, 0.6);
}
.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.nav-logo img { display: block; height: 28px; width: auto; }
.footer .nav-logo img,
.am-side-brand img { filter: brightness(10); }
.nav-logo-mark {
  width: 26px; height: 26px;
  background: var(--gradient-brand);
  border-radius: 50%;
  position: relative;
  mask: radial-gradient(circle at 70% 50%, transparent 6px, black 6.5px);
  -webkit-mask: radial-gradient(circle at 70% 50%, transparent 6px, black 6.5px);
}
.nav-links {
  display: flex; align-items: center; gap: 32px;
  flex: 1;
}
.nav-link {
  color: var(--ink); opacity: 0.78;
  font-size: 15px; font-weight: 500;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.nav-link:hover { opacity: 1; }
.nav-link.active {
  opacity: 1;
  color: var(--violet);
  font-weight: 600;
  position: relative;
}
.nav-link.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient-brand);
}
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-lang {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px; font-weight: 500;
  background: transparent;
}

/* Language-specific visibility — paired with i18n.js setting <html lang>.
   Mark Italy-only sections (SDI, Tessera Sanitaria, etc.) with .it-only so
   they vanish for UK / English-speaking visitors. .en-only is reserved for
   any UK-specific blocks we may want to add later. */
html[lang="en"] .it-only { display: none !important; }
html[lang="it"] .en-only { display: none !important; }

/* Language toggle (IT / EN pill in the top nav) */
.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
  background: transparent;
}
.lang-toggle-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.lang-toggle-btn:hover { color: var(--ink); }
.lang-toggle-btn.active {
  background: var(--ink);
  color: #fff;
}
@media (max-width: 760px) {
  .lang-toggle-btn { padding: 5px 10px; font-size: 11px; }
}
.nav-login {
  font-size: 15px; font-weight: 500;
  color: var(--ink); opacity: 0.85;
  padding: 10px 4px;
}
.nav-login:hover { opacity: 1; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  font-size: 15px; font-weight: 500;
  border-radius: 999px;
  border: none;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 6px 14px -4px rgba(26,11,61,0.4);
}
.btn-primary:hover { background: var(--ink-2); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 10px 20px -4px rgba(26,11,61,0.45); }
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
}
.btn-secondary:hover { border-color: var(--ink); }
.btn-gradient {
  background: var(--gradient-brand);
  color: #fff;
}
.btn-gradient:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn-lg { padding: 17px 28px; font-size: 16px; }

/* Pill / tag */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(124,58,237,0.08);
  color: var(--violet);
  font-size: 13px; font-weight: 500;
  border: 1px solid rgba(124,58,237,0.18);
}
.pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--violet);
}

/* Card */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: border-color 0.2s, transform 0.2s;
}

.divider { height: 1px; background: var(--border); border: 0; margin: 0; }

/* Footer */
.footer {
  background: var(--ink);
  color: #fff;
  padding: 80px 0 32px;
}
.footer a { color: rgba(255,255,255,0.65); transition: color 0.15s; font-size: 15px; }
.footer a:hover { color: #fff; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 60px;
}
.footer h4 {
  color: rgba(255,255,255,0.5);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-family: 'Geist Mono', monospace;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-bottom {
  display: flex; justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* Utility */
.text-muted { color: var(--muted); }
.text-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.text-center { text-align: center; }
.flex { display: flex; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.mt-2 { margin-top: 12px; } .mt-4 { margin-top: 24px; } .mt-6 { margin-top: 36px; } .mt-8 { margin-top: 48px; }

/* Mobile nav helper */
@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav-inner { padding: 14px 20px; gap: 16px; }
  .nav-right { margin-left: auto; }
  .nav-right .btn { padding: 10px 16px; font-size: 14px; }
  .nav-lang { display: none; }
  .nav-login { display: none; }
}

/* Mobile hamburger menu (uses native <details>/<summary> — no JS framework) */
.nav-mobile { display: none; position: relative; }
.nav-mobile > summary {
  list-style: none;
  cursor: pointer;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  color: var(--ink);
  border: 1px solid var(--border);
  background: #fff;
  transition: background 0.15s, border-color 0.15s;
}
.nav-mobile > summary::-webkit-details-marker { display: none; }
.nav-mobile > summary::marker { display: none; }
.nav-mobile > summary:hover { background: var(--surface-warm); }
.nav-mobile > summary svg { width: 20px; height: 20px; }
.nav-mobile[open] > summary { background: var(--ink); color: #fff; border-color: var(--ink); }
.nav-mobile-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: flex; flex-direction: column;
  min-width: 220px;
  z-index: 60;
}
.nav-mobile-panel .nav-link {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 15px;
  opacity: 1;
}
.nav-mobile-panel .nav-link:hover { background: var(--surface-warm); }
.nav-mobile-panel .nav-link.active {
  background: var(--surface-warm);
  color: var(--violet);
  font-weight: 600;
}
.nav-mobile-panel .nav-link.active::after { display: none; }

@media (max-width: 880px) {
  .nav-mobile { display: block; }
}

/* Language toggle in nav */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--surface-warm);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.lang-toggle [data-lang] {
  background: transparent;
  border: 0;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
.lang-toggle [data-lang].active {
  background: var(--ink);
  color: #fff;
}
.lang-toggle [data-lang]:hover:not(.active) {
  color: var(--ink);
}

/* Selection */
::selection { background: rgba(124,58,237,0.25); color: var(--ink); }

/* ============================================================================
   Responsive polish — tablet + mobile
   Each rule below addresses a specific desktop-first assumption that broke on
   narrow viewports. Anything that already had a sensible @media query has been
   left alone.
   ============================================================================ */

/* Tablet (<= 1024px) */
@media (max-width: 1024px) {
  .nav-inner { padding: 16px 24px; gap: 24px; }
  .nav-links { gap: 20px; }
  .nav-link { font-size: 14px; }
  .section { padding: 96px 0; }
}

/* Mid-tablet (<= 880px) — hide main nav links + tighten chrome */
@media (max-width: 880px) {
  .footer { padding: 56px 0 24px; }
  .footer-grid { margin-bottom: 40px; gap: 32px; }
  .footer h4 { margin-bottom: 14px; }
}

/* Phone (<= 600px) — major reflow */
@media (max-width: 600px) {
  .nav-inner { padding: 12px 16px; gap: 12px; }
  .nav-logo img { height: 24px; }
  .nav-right { gap: 6px; }
  .nav-right .btn { padding: 8px 12px; font-size: 13px; }
  .btn-lg { padding: 13px 22px; font-size: 15px; }
  .section { padding: 56px 0; }
  .section-sm { padding: 40px 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer-bottom > div { font-size: 12px; }
}

/* Extra-small (<= 380px) — squeeze nav to logo + single CTA */
@media (max-width: 380px) {
  .nav-inner { gap: 8px; }
  .nav-right .btn-secondary { display: none; }
}

/* Hero shot wrapper — make sure the wireframe never overflows the viewport.
   On mobile the embedded app-mock is hard to read; allow horizontal scroll
   so users can pan instead of getting clipped content. */
.hero .shot {
  max-width: 100%;
  overflow: hidden;
}
@media (max-width: 760px) {
  .hero .shot-wide { margin-top: 40px; }
}

/* Wireframe scaling on mobile — the complex demo-shell mocks (calendar grid,
   invoices, odontogram, etc.) have many fixed pixel widths. Rather than pan
   horizontally (annoying) or rewrite every inner grid, scale the whole shell
   down via CSS zoom so the layout actually adapts and fits the viewport.

   `zoom` is now baseline-supported (Chrome, Safari, Edge, Firefox 126+) and
   affects layout AND paint, unlike transform: scale which would leave the
   surrounding column empty. */
@media (max-width: 880px) {
  .feat-demo .demo-shell { zoom: 0.85; }
}
@media (max-width: 700px) {
  .feat-demo .demo-shell { zoom: 0.7; }
}
@media (max-width: 540px) {
  .feat-demo .demo-shell { zoom: 0.55; }
}
@media (max-width: 420px) {
  .feat-demo .demo-shell { zoom: 0.45; }
}

/* Hero overview shot — same trick for the index hero card */
@media (max-width: 760px) {
  .hero .shot .gallery-mock-wrap { zoom: 0.85; }
}
@media (max-width: 540px) {
  .hero .shot .gallery-mock-wrap { zoom: 0.65; }
}
@media (max-width: 420px) {
  .hero .shot .gallery-mock-wrap { zoom: 0.5; }
}

/* Trust strip — wrap nicely on narrow screens */
@media (max-width: 700px) {
  .trust { padding: 36px 0; }
  .trust-row { gap: 18px 24px; flex-wrap: wrap; justify-content: center; }
  .trust-logo { font-size: 15px; }
  .trust-logo svg { width: 18px; height: 18px; }
}

/* Legal pages (privacy / termini) — tighter spacing + body type on mobile */
@media (max-width: 600px) {
  .legal-hero { padding: 64px 0 32px !important; }
  .legal-body { padding: 40px 0 64px !important; }
  .legal-body h2 { font-size: 18px; margin-top: 36px; }
  .legal-body p, .legal-body ul li, .legal-body .definition { font-size: 15px; line-height: 1.7; }
}