/* ══════════════════════════════════════════════════════════════════════
   Ippocrate — base: token, reset, tipografia
   Palette allineata a docs.ippocrate.cloud (colori del logo: azzurro, non indaco)
   ══════════════════════════════════════════════════════════════════════ */

:root {
    /* Brand */
    --cyan:        #29ABE2;
    --cyan-light:  #7fd0f2;
    --cyan-soft:   #e8f6fd;
    --blue:        #1080C0;
    --blue-deep:   #0061B0;
    --mid:         #1565B8;
    --dark:        #1B2080;
    --darker:      #131764;
    --night:       #0b0e3d;

    /* Neutri */
    --ink:         #0f172a;
    --text:        #334155;
    --muted:       #64748b;
    --light:       #94a3b8;
    --line:        #e2e8f0;
    --line-soft:   #f1f5f9;
    --bg:          #f8fafc;
    --white:       #ffffff;

    /* Semantici */
    --ok:          #10b981;
    --warn:        #f59e0b;
    --alert:       #ef4444;

    /* Gradienti firma */
    --grad:        linear-gradient(135deg, var(--cyan) 0%, var(--dark) 100%);
    --grad-soft:   linear-gradient(135deg, var(--cyan) 0%, var(--blue-deep) 100%);
    --grad-night:  linear-gradient(160deg, #0b0e3d 0%, #1B2080 45%, #14559e 100%);

    /* Raggi */
    --r-sm:  10px;
    --r:     14px;
    --r-md:  18px;
    --r-lg:  24px;
    --r-xl:  32px;
    --r-pill: 999px;

    /* Ombre, tutte tinte di blu */
    --sh-xs: 0 1px 2px rgba(15, 23, 42, .06);
    --sh-sm: 0 2px 8px rgba(27, 32, 128, .06);
    --sh:    0 6px 24px rgba(27, 32, 128, .08);
    --sh-md: 0 14px 40px rgba(27, 32, 128, .10);
    --sh-lg: 0 28px 64px rgba(27, 32, 128, .14);
    --sh-cyan: 0 12px 32px rgba(41, 171, 226, .28);

    /* Ritmo */
    --nav-h:  72px;
    --gutter: clamp(1.25rem, 4vw, 2rem);
    --wrap:   1200px;
    --wrap-narrow: 860px;
    --pad-y:  clamp(4.5rem, 9vw, 8rem);

    /* Movimento */
    --ease:      cubic-bezier(.22, .61, .36, 1);
    --ease-out:  cubic-bezier(.16, 1, .3, 1);
    --t-fast:    .18s var(--ease);
    --t:         .32s var(--ease);
    --t-slow:    .6s var(--ease-out);

    --font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 1.5rem);
}

body {
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
    outline: 3px solid var(--cyan);
    outline-offset: 3px;
    border-radius: 4px;
}

::selection { background: rgba(41, 171, 226, .22); color: var(--ink); }

/* ── Tipografia ────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
    color: var(--ink);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.028em;
    text-wrap: balance;
}

.display {
    font-size: clamp(2.4rem, 6.2vw, 4.4rem);
    line-height: 1.04;
    letter-spacing: -.038em;
}
.h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); }
.h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }
.h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.25; }
.h4 { font-size: 1.125rem; line-height: 1.35; }

p { text-wrap: pretty; }

.lead {
    font-size: clamp(1.06rem, 1.7vw, 1.28rem);
    line-height: 1.6;
    color: var(--muted);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--blue-deep);
}
.eyebrow .ico { font-size: .95rem; }

.grad-text {
    background: var(--grad-soft);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ── Icone (registry Lucide inline) ────────────────────────────────── */
.ico {
    width: 1em;
    height: 1em;
    flex: none;
    vertical-align: -.125em;
}
.ico--sm { font-size: .875rem; }
.ico--md { font-size: 1.25rem; }
.ico--lg { font-size: 1.5rem; }
.ico--xl { font-size: 2rem; }

/* ── Utility minime ────────────────────────────────────────────────── */
.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.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;
}

.center { text-align: center; }
.stack > * + * { margin-top: var(--gap, 1rem); }

/* ── Rispetto delle preferenze di movimento ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}