@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    /* Core palette */
    --color-background: #06080b;
    --color-background-alt: #0e141b;
    --color-surface: rgba(20, 28, 41, 0.92);
    --color-surface-strong: rgba(15, 21, 32, 0.98);
    --color-surface-soft: rgba(255, 255, 255, 0.045);
    --color-text-primary: #f3f6fb;
    --color-text-secondary: #b5c0d0;
    --color-text-muted: #8b98aa;
    --color-accent: #6ea8ff;
    --color-accent-strong: #2d6cdf;
    --color-accent-soft: rgba(110, 168, 255, 0.18);
    --color-border: rgba(162, 200, 255, 0.18);
    --color-border-strong: rgba(162, 200, 255, 0.3);
    --color-shadow: rgba(0, 0, 0, 0.34);

    /* Typography */
    --font-family-display: 'Cormorant Garamond', serif;
    --font-family-body: 'Manrope', sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.7;

    /* Layout */
    --container-width: 1180px;
    --container-padding: 2rem;
    --section-padding: 7rem 0;
    --section-anchor-offset: 7rem;
    --radius-lg: 28px;
    --radius-md: 20px;
    --radius-sm: 14px;

    /* Motion */
    --transition-speed: 0.35s;
    --transition-slow: 0.6s;
}

/* Base reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: var(--font-size-base);
    background-color: var(--color-background);
    scrollbar-gutter: stable;
    overscroll-behavior-y: none;
    /* Safari can include decorative off-canvas layers in the root scroll width on mobile. */
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    font-family: var(--font-family-body);
    color: var(--color-text-primary);
    background-color: var(--color-background);
    background:
        radial-gradient(circle at top, rgba(24, 74, 170, 0.16), transparent 32%),
        radial-gradient(circle at 20% 15%, rgba(79, 145, 255, 0.1), transparent 22%),
        linear-gradient(180deg, #05070a 0%, #070b10 38%, #06080b 100%);
    line-height: var(--line-height-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    overflow-x: clip;
}

/* Keep the scrollbar visually aligned with the dark template instead of browser defaults. */
html {
    scrollbar-color: rgba(130, 162, 214, 0.42) rgba(7, 11, 16, 0.96);
}

html::-webkit-scrollbar {
    width: 0.9rem;
}

html::-webkit-scrollbar-track {
    background: rgba(7, 11, 16, 0.96);
}

html::-webkit-scrollbar-thumb {
    border: 3px solid rgba(7, 11, 16, 0.96);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(106, 148, 221, 0.54), rgba(77, 111, 178, 0.46));
}

html::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(122, 167, 247, 0.62), rgba(93, 130, 205, 0.58));
}

/* Atmospheric layers keep the page from feeling flat while preserving composure. */
body::before,
body::after {
    content: '';
    position: fixed;
    inset: auto;
    pointer-events: none;
    z-index: -1;
    filter: blur(80px);
}

body::before {
    top: 10%;
    left: -8%;
    width: 26rem;
    height: 26rem;
    background: rgba(62, 120, 255, 0.12);
}

body::after {
    right: -10%;
    bottom: 12%;
    width: 24rem;
    height: 24rem;
    background: rgba(26, 64, 140, 0.16);
}

main {
    position: relative;
    overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-primary);
    line-height: 1.1;
    margin-bottom: 1.25rem;
}

h1 {
    font-size: 5.05rem;
    font-weight: 600;
    letter-spacing: 0;
}

h2 {
    font-size: 3.25rem;
    font-weight: 600;
    letter-spacing: 0;
}

h3 {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0;
}

p {
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

img,
object {
    display: block;
    max-width: 100%;
}

object {
    background-color: transparent;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

section {
    position: relative;
    padding: var(--section-padding);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    scroll-margin-top: var(--section-anchor-offset);
    /* Decorative glows must not increase the document width on narrow screens. */
    overflow-x: clip;
}

section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 0%, rgba(110, 168, 255, 0.02) 20%, transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 35%);
    pointer-events: none;
}

section:nth-of-type(even) {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 26%);
}

/* Alternating section bands improve scanning while preserving the dark professional tone. */
#quando-utile {
    padding-top: 5rem;
    background:
        radial-gradient(circle at 16% 8%, rgba(68, 125, 222, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(15, 27, 43, 0.9), rgba(8, 13, 20, 0.96));
}

#profilo {
    background:
        radial-gradient(circle at 16% 8%, rgba(68, 125, 222, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(15, 27, 43, 0.9), rgba(8, 13, 20, 0.96));
}

#ai-controllata {
    background:
        radial-gradient(circle at 72% 14%, rgba(72, 136, 255, 0.085), transparent 30%),
        linear-gradient(180deg, rgba(8, 13, 20, 0.98), rgba(6, 10, 15, 0.98));
}

/* Keep the AI lead paragraph visually connected to the opening copy. */
#ai-controllata .section-heading {
    margin-bottom: 1.25rem;
}

#interventi {
    background:
        radial-gradient(circle at 18% 18%, rgba(55, 101, 186, 0.07), transparent 30%),
        linear-gradient(180deg, rgba(6, 10, 15, 0.98), rgba(9, 14, 20, 0.98));
}

#esperienza {
    background:
        radial-gradient(circle at 70% 12%, rgba(92, 132, 212, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(10, 16, 23, 0.96), rgba(6, 10, 15, 0.98));
}

#ecosistema,
#contatti {
    background:
        linear-gradient(180deg, rgba(7, 11, 16, 0.98), rgba(11, 16, 22, 0.96));
}

#assistente {
    background:
        radial-gradient(circle at 50% 8%, rgba(86, 142, 255, 0.075), transparent 28%),
        linear-gradient(180deg, rgba(8, 13, 19, 0.98), rgba(6, 10, 15, 0.98));
}

.section-heading {
    max-width: 760px;
    margin-bottom: 3.5rem;
}

.section-heading-centered {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Give the assistant section a touch more width so the heading stays on one line on desktop. */
#assistente .section-heading {
    max-width: 54rem;
}

.section-subtitle {
    max-width: 46rem;
    margin-top: -0.55rem;
    margin-bottom: 0;
    color: #c4cede;
    font-size: 1.05rem;
    line-height: 1.72;
}

.section-heading-centered .section-subtitle {
    margin-right: auto;
    margin-left: auto;
}

.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1rem;
    color: var(--color-accent);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.section-kicker::before {
    content: '';
    width: 2.8rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(110, 168, 255, 0.2), var(--color-accent));
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0.5rem 0;
    background: transparent;
    backdrop-filter: none;
    border-bottom: none;
    z-index: 100;
    transition:
        padding var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease;
}

header.scrolled {
    padding: 0.5rem 0;
}

header .container {
    max-width: var(--container-width);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    background: rgba(7, 10, 15, 0.6);
    backdrop-filter: blur(24px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

header .logo a {
    display: inline-flex;
    align-items: center;
    gap: 0.95rem;
    padding: 0 0.2rem 0 0;
    color: var(--color-text-primary);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
}

.logo-svg {
    width: auto;
    height: 32px;
    flex: 0 0 auto;
}

.logo-copy {
    display: grid;
    gap: 0.08rem;
}

.logo-copy strong {
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: 0;
}

.logo-copy span {
    color: var(--color-text-muted);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

header nav ul {
    display: flex;
    align-items: center;
    gap: 0.18rem;
    list-style: none;
    position: relative;
    padding: 0;
}

/* The desktop and mobile glass lens both anchor to the nav container. */
header nav {
    --site-nav-glass-x: 0px;
    --site-nav-glass-width: 0px;
    --site-nav-glass-opacity: 0;
    --site-nav-mobile-item-width: 7.2rem;
    --site-nav-mobile-side-padding: 0.35rem;
    --site-nav-mobile-step: 0px;
    --site-nav-list-shift: 0px;
    position: relative;
}

.site-nav-item-home-mobile {
    display: none;
}

.site-nav-glass {
    position: absolute;
    top: 50%;
    left: 0;
    width: var(--site-nav-glass-width);
    height: calc(100% + 0.28rem);
    border: 1px solid rgba(220, 236, 255, 0.14);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)),
        rgba(113, 153, 224, 0.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05),
        0 16px 36px rgba(2, 8, 18, 0.22);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    transform: translate3d(var(--site-nav-glass-x), -50%, 0);
    opacity: var(--site-nav-glass-opacity);
    pointer-events: none;
    transition:
        transform 0.46s cubic-bezier(0.2, 0.8, 0.2, 1),
        width 0.46s cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 0.3s ease;
    z-index: 0;
}

/* A tiny highlight helps the glass lens feel separate from the header shell. */
.site-nav-glass::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 48%);
    opacity: 0.9;
}

header nav a {
    color: var(--color-text-secondary);
    display: inline-flex;
    align-items: center;
    min-height: 2.4rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
    transition:
        color var(--transition-speed) ease,
        background-color var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease;
}

header nav a.is-active {
    color: var(--color-text-primary);
}

header nav a:hover,
header nav a:focus-visible {
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

#hero {
    /* Share the artwork alignment between the base hero image and the moving reveal mask. */
    --hero-accent-position: 58% 20%;
    --hero-brand-position: 74% center;
    --hero-brand-size: cover;
    --hero-mask-width: clamp(26rem, 39vw, 36rem);
    --hero-mask-height: clamp(17rem, 27vw, 24rem);
    --hero-mask-x: 76%;
    --hero-mask-y: 48%;
    --hero-mask-scale: 1;
    --hero-mask-opacity: 0.78;
    --hero-mask-duration: 0s;
    --hero-mask-timing: cubic-bezier(0.34, 0.08, 0.22, 1);
    padding: 8rem 0 5.5rem;
    min-height: clamp(44rem, 88vh, 54rem);
    display: flex;
    align-items: center;
    overflow: hidden;
    background-image:
        linear-gradient(90deg, rgba(3, 5, 8, 0.992) 0%, rgba(3, 5, 8, 0.965) 36%, rgba(4, 7, 11, 0.88) 58%, rgba(4, 7, 11, 0.74) 100%),
        radial-gradient(circle at 60% 18%, rgba(73, 130, 255, 0.08), transparent 26%),
        url(../images/hero-background.jpg);
    background-repeat: no-repeat;
    background-position: center, var(--hero-accent-position), var(--hero-brand-position);
    background-size: auto, auto, var(--hero-brand-size);
}

/* The base overlay darkens the hero and keeps the photo behind the copy. */
#hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(4, 7, 11, 0.68) 0%, rgba(4, 7, 11, 0.44) 44%, rgba(4, 7, 11, 0.28) 100%),
        radial-gradient(circle at 18% 30%, rgba(4, 7, 11, 0.86), transparent 42%),
        radial-gradient(circle at 78% 18%, rgba(84, 140, 255, 0.09), transparent 24%);
    opacity: 1;
    pointer-events: none;
    z-index: 0;
}

/* A dedicated mesh plane makes the right-side artwork feel intentional instead of noisy. */
#hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url(../images/mesh-overlay.svg);
    background-position: var(--hero-texture-grid-x) var(--hero-texture-grid-y);
    background-size: 200px 200px;
    opacity: 0.2;
    pointer-events: none;
    will-change: background-position;
    z-index: 2;
}

/* A soft opening in a dark veil reveals the original artwork without tinting or brightening it. */
.hero-brand-mask {
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.04) 38%, rgba(0, 0, 0, 0.48) 54%, rgba(0, 0, 0, 0.82) 68%, #000000 82%, #000000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.04) 38%, rgba(0, 0, 0, 0.48) 54%, rgba(0, 0, 0, 0.82) 68%, #000000 82%, #000000 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
}

/* The main opening is wide and organic so the reveal reads like a drifting exposure, not a spotlight. */
.hero-brand-mask::before,
.hero-brand-mask::after {
    content: '';
    position: absolute;
    pointer-events: none;
    will-change: top, left, transform;
    transition:
        top var(--hero-mask-duration) var(--hero-mask-timing),
        left var(--hero-mask-duration) var(--hero-mask-timing),
        transform var(--hero-mask-duration) var(--hero-mask-timing),
        opacity var(--hero-mask-duration) var(--hero-mask-timing);
}

.hero-brand-mask::before {
    top: var(--hero-mask-y);
    left: var(--hero-mask-x);
    width: var(--hero-mask-width);
    height: var(--hero-mask-height);
    border-radius: 52% 48% 58% 42% / 40% 56% 44% 60%;
    transform: translate3d(-50%, -50%, 0) scale(var(--hero-mask-scale)) rotate(-6deg);
    box-shadow: 0 0 54px 200vmax rgba(4, 7, 11, 1);
    opacity: var(--hero-mask-opacity);
    filter: blur(18px);
}

/* A secondary softer lobe breaks the symmetry so the reveal does not look like a moving circle. */
.hero-brand-mask::after {
    top: calc(var(--hero-mask-y) - 4%);
    left: calc(var(--hero-mask-x) + 8%);
    width: calc(var(--hero-mask-width) * 0.56);
    height: calc(var(--hero-mask-height) * 0.5);
    border-radius: 60% 40% 46% 54% / 44% 62% 38% 56%;
    transform: translate3d(-50%, -50%, 0) scale(calc(var(--hero-mask-scale) * 1.02)) rotate(8deg);
    box-shadow: 0 0 42px 200vmax rgba(4, 7, 11, 1);
    opacity: calc(var(--hero-mask-opacity) * 0.84);
    filter: blur(22px);
}

#hero .container {
    position: relative;
    z-index: 3;
    max-width: var(--container-width);
}

/* A localized reading plate gives the type a calmer field without becoming a visible box. */
#hero .container::before {
    content: '';
    position: absolute;
    top: 2%;
    left: -6%;
    width: min(56rem, 78vw);
    height: 82%;
    border-radius: 3rem;
    background:
        radial-gradient(circle at 26% 34%, rgba(5, 9, 14, 0.8), rgba(5, 9, 14, 0.58) 44%, transparent 72%),
        linear-gradient(90deg, rgba(4, 7, 11, 0.88) 0%, rgba(4, 7, 11, 0.7) 42%, rgba(4, 7, 11, 0.2) 76%, transparent 100%);
    filter: blur(16px);
    pointer-events: none;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: end;
}

.hero-copy {
    max-width: 70rem;
    position: relative;
    z-index: 1;
}

.hero-copy h1 {
    font-family: var(--font-family-display);
    font-size: clamp(4.25rem, 5.8vw, 5.1rem);
    margin-bottom: 1.5rem;
    max-width: 27ch;
    line-height: 1.06;
    text-wrap: balance;
    text-shadow: 0 12px 36px rgba(0, 0, 0, 0.36);
}

.hero-lead {
    max-width: 42rem;
    margin-bottom: 2rem;
    font-size: 1.16rem;
    color: #d3dbea;
    text-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0;
}

.cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.4rem;
    padding: 0.95rem 1.8rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: linear-gradient(135deg, #2b62bc, #173f8f);
    color: #f8fbff;
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: 0 16px 32px rgba(27, 69, 153, 0.3);
    transition:
        transform var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease,
        border-color var(--transition-speed) ease,
        background-color var(--transition-speed) ease;
}

.cta:hover,
.cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 22px 40px rgba(30, 77, 170, 0.34);
}

.cta-secondary {
    background: transparent;
    color: var(--color-text-secondary);
    border-color: rgba(150, 190, 255, 0.2);
    box-shadow: none;
}

.cta-secondary:hover,
.cta-secondary:focus-visible {
    border-color: var(--color-border-strong);
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text-primary);
    box-shadow: none;
}

/* The opening diagnostic uses an editorial split to avoid repeating the service card grid. */
.quando-utile-layout {
    display: grid;
    grid-template-columns: minmax(18rem, 0.78fr) minmax(0, 1.22fr);
    gap: clamp(3rem, 7vw, 7rem);
    align-items: start;
}

.quando-utile-intro {
    position: sticky;
    top: var(--section-anchor-offset);
}

.quando-utile-intro .section-heading {
    margin-bottom: 0;
}

.quando-utile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.quando-utile-card {
    display: grid;
    grid-template-columns: minmax(11rem, 0.8fr) minmax(0, 1.2fr);
    gap: 2rem;
    align-items: start;
    padding: 1.8rem 0;
    border-bottom: 1px solid var(--color-border);
}

.quando-utile-card:last-child {
    border-bottom: 0;
}

.quando-utile-card h3 {
    margin-bottom: 0.75rem;
}

.quando-utile-card p {
    margin-bottom: 0;
    color: #c2ccda;
    font-size: 0.96rem;
    line-height: 1.68;
}

.quando-utile-note {
    max-width: 36rem;
    margin: 1.5rem 0 0;
    color: #d5dfed;
    font-size: 1.02rem;
}

#profilo::after,
#esperienza::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: min(74rem, 100%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(110, 168, 255, 0.28), transparent);
}

.profilo-grid {
    display: grid;
    grid-template-columns: minmax(240px, 0.6fr) minmax(0, 1.1fr) minmax(260px, 0.8fr);
    gap: 2.2rem;
    align-items: start;
}

.profilo-photo {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

.profilo-photo::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 32%, rgba(110, 168, 255, 0.1));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

.profilo-photo img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
}

.profilo-copy p {
    max-width: 46rem;
    font-size: 1.02rem;
}

.credential-card,
.competenze-panel {
    position: relative;
    padding: 2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent),
        var(--color-surface);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

/* Let a faint cyan glow wander only on alternating sections, starting from Profilo. */
.profilo-grid,
.esperienza-grid,
#assistente > .container {
    position: relative;
    isolation: isolate;
    --section-glow-a-x: 18%;
    --section-glow-a-y: 18%;
    --section-glow-a-scale: 0.96;
    --section-glow-a-opacity: 1;
    --section-glow-a-duration: 0s;
    --section-glow-a-timing: cubic-bezier(0.34, 0.08, 0.22, 1);
    --section-glow-b-x: 74%;
    --section-glow-b-y: 24%;
    --section-glow-b-scale: 0.92;
    --section-glow-b-opacity: 0.82;
    --section-glow-b-duration: 0s;
    --section-glow-b-timing: cubic-bezier(0.34, 0.08, 0.22, 1);
}

/* Keep card content above the ambient section glow. */
.profilo-grid > *,
.esperienza-grid > *,
#assistente > .container > * {
    position: relative;
    z-index: 1;
}

.profilo-grid::before,
.profilo-grid::after,
.esperienza-grid::before,
.esperienza-grid::after,
#assistente > .container::before,
#assistente > .container::after {
    content: '';
    position: absolute;
    top: var(--section-glow-a-y);
    left: var(--section-glow-a-x);
    width: min(100%, clamp(32rem, 50vw, 46rem));
    aspect-ratio: 1;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(96, 235, 255, 0.12) 0%, rgba(54, 198, 255, 0.068) 30%, rgba(54, 198, 255, 0.024) 62%, transparent 84%);
    filter: blur(90px);
    mix-blend-mode: screen;
    opacity: var(--section-glow-a-opacity);
    pointer-events: none;
    transform: translate3d(-50%, -50%, 0) scale(var(--section-glow-a-scale));
    transition:
        top var(--section-glow-a-duration) var(--section-glow-a-timing),
        left var(--section-glow-a-duration) var(--section-glow-a-timing),
        transform var(--section-glow-a-duration) var(--section-glow-a-timing),
        opacity var(--section-glow-a-duration) var(--section-glow-a-timing);
    z-index: 0;
}

.profilo-grid::before {
    top: var(--section-glow-a-y);
    left: var(--section-glow-a-x);
}

.profilo-grid::after {
    top: var(--section-glow-b-y);
    left: var(--section-glow-b-x);
    width: min(100%, clamp(26rem, 38vw, 35rem));
    opacity: var(--section-glow-b-opacity);
    transform: translate3d(-50%, -50%, 0) scale(var(--section-glow-b-scale));
    transition:
        top var(--section-glow-b-duration) var(--section-glow-b-timing),
        left var(--section-glow-b-duration) var(--section-glow-b-timing),
        transform var(--section-glow-b-duration) var(--section-glow-b-timing),
        opacity var(--section-glow-b-duration) var(--section-glow-b-timing);
}

.esperienza-grid::before {
    top: var(--section-glow-a-y);
    left: var(--section-glow-a-x);
}

.esperienza-grid::after {
    top: var(--section-glow-b-y);
    left: var(--section-glow-b-x);
    width: min(100%, clamp(24rem, 36vw, 33rem));
    opacity: var(--section-glow-b-opacity);
    transform: translate3d(-50%, -50%, 0) scale(var(--section-glow-b-scale));
    transition:
        top var(--section-glow-b-duration) var(--section-glow-b-timing),
        left var(--section-glow-b-duration) var(--section-glow-b-timing),
        transform var(--section-glow-b-duration) var(--section-glow-b-timing),
        opacity var(--section-glow-b-duration) var(--section-glow-b-timing);
}

#assistente > .container::before {
    top: var(--section-glow-a-y);
    left: var(--section-glow-a-x);
}

#assistente > .container::after {
    top: var(--section-glow-b-y);
    left: var(--section-glow-b-x);
    width: min(100%, clamp(24rem, 36vw, 33rem));
    opacity: var(--section-glow-b-opacity);
    transform: translate3d(-50%, -50%, 0) scale(var(--section-glow-b-scale));
    transition:
        top var(--section-glow-b-duration) var(--section-glow-b-timing),
        left var(--section-glow-b-duration) var(--section-glow-b-timing),
        transform var(--section-glow-b-duration) var(--section-glow-b-timing),
        opacity var(--section-glow-b-duration) var(--section-glow-b-timing);
}

.credential-card::before,
.competenze-panel::before,
.assistente-ui::before,
.contact-form::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 32%, rgba(110, 168, 255, 0.1));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

.credential-label,
.panel-kicker {
    margin-bottom: 1rem;
    color: var(--color-accent);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Credentials stay as one panel with lightweight bullets, avoiding nested card treatments. */
.credential-list {
    display: grid;
    gap: 1rem;
    list-style: none;
}

.credential-list li {
    position: relative;
    min-height: 0;
    padding-left: 2rem;
    color: #d4dded;
    font-size: 0.95rem;
    line-height: 1.56;
}

.credential-list li::before {
    content: '';
    position: absolute;
    top: 0.52rem;
    left: 0.15rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--color-accent), rgba(255, 255, 255, 0.8));
    box-shadow: 0 0 0 6px rgba(110, 168, 255, 0.08);
}

.ai-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
    grid-template-areas: "copy principles";
    gap: 1.8rem 2rem;
    align-items: start;
}

.ai-copy {
    grid-area: copy;
}

.ai-copy p {
    max-width: 43rem;
    font-size: 1.02rem;
}

.ai-principles {
    grid-area: principles;
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding-left: 2rem;
}

/* The neutral track and its reveal communicate the governance sequence from inputs to supervision. */
.ai-principles::before,
.ai-principles::after {
    content: '';
    position: absolute;
    top: 0.25rem;
    bottom: 0.25rem;
    left: 0;
    width: 2px;
    transform-origin: top;
}

.ai-principles::before {
    background: rgba(150, 190, 255, 0.12);
}

.ai-principles::after {
    background: linear-gradient(180deg, var(--color-accent), #2b62bc);
    transform: scaleY(0);
    transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-animate.visible .ai-principles::after {
    transform: scaleY(1);
}

.governance-panel {
    position: relative;
    border: 1px solid var(--color-border);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent),
        rgba(15, 22, 33, 0.92);
    box-shadow: 0 18px 50px var(--color-shadow);
}

.ai-principle-card {
    padding: 0 0 1.35rem;
    margin-bottom: 1.35rem;
    border-bottom: 1px solid rgba(150, 190, 255, 0.12);
}

.ai-principle-card:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.ai-principle-card h3 {
    margin-bottom: 0.7rem;
    line-height: 1.14;
}

.ai-principle-card p {
    margin-bottom: 0;
    color: #c2ccda;
    font-size: 0.95rem;
    line-height: 1.68;
}

/* The governance block keeps legal/compliance boundaries clear while staying inside the technical offer. */
.governance-panel {
    grid-area: governance;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
    gap: 1.8rem;
    align-items: start;
    margin-top: 0.15rem;
    padding: 1.8rem;
    border-radius: var(--radius-lg);
}

.governance-panel h3 {
    margin-bottom: 0.9rem;
}

.governance-panel p:last-child {
    margin-bottom: 0;
}

.governance-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
    list-style: none;
}

.governance-list li {
    position: relative;
    min-height: 2.5rem;
    padding-left: 1.15rem;
    color: #d6e0ef;
    font-size: 0.94rem;
    line-height: 1.5;
}

.governance-list li::before {
    content: '';
    position: absolute;
    top: 0.58rem;
    left: 0;
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 999px;
    background: var(--color-accent);
    box-shadow: 0 0 0 5px rgba(110, 168, 255, 0.08);
}

.ambiti-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.35rem;
}

.ambito-item,
.ecosistema-item {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent),
        rgba(15, 22, 33, 0.96);
    box-shadow: 0 18px 50px var(--color-shadow);
    transition:
        transform var(--transition-speed) ease,
        border-color var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease,
        background-color var(--transition-speed) ease;
}

.ambito-item {
    grid-column: span 4;
    min-height: 100%;
    display: grid;
    align-content: start;
    padding: 1.35rem;
}

.ambito-item-featured {
    grid-column: span 8;
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
    gap: 1.4rem;
    align-items: center;
}

.ambito-item::before,
.ecosistema-item::before {
    content: '';
    position: absolute;
    inset: auto -30% -30% auto;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(110, 168, 255, 0.18) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-speed) ease;
}

.ambito-item:hover,
.ambito-item:focus-within,
.ecosistema-item:hover,
.ecosistema-item:focus-within {
    transform: translateY(-6px);
    border-color: var(--color-border-strong);
    box-shadow: 0 28px 55px rgba(0, 0, 0, 0.24);
}

.ambito-item:hover::before,
.ecosistema-item:hover::before {
    opacity: 1;
}

.ambito-image,
.ecosistema-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 13rem;
    padding: 1.55rem;
    border-radius: calc(var(--radius-md) - 6px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(110, 168, 255, 0.06));
}

.ambito-item-featured .ambito-image {
    min-height: 17.5rem;
}

.ambito-image object,
.ecosistema-image object {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ambito-item h3,
.ambito-item p,
.ecosistema-item h3,
.ecosistema-item p {
    position: relative;
    z-index: 1;
}

.ambito-item h3 {
    margin-top: 1.35rem;
    margin-bottom: 0.7rem;
    line-height: 1.14;
}

.ambito-item-featured .ambito-copy {
    align-self: center;
    max-width: 32rem;
}

.ambito-item-featured .ambito-copy h3 {
    margin-top: 0;
    margin-bottom: 0.95rem;
    font-size: 2.25rem;
}

.ambito-item p {
    font-size: 0.96rem;
    margin-bottom: 0;
    color: #c2ccda;
    line-height: 1.68;
}

/* Tighten the featured card copy so the large tile feels intentional rather than sparse. */
.ambito-item-featured .ambito-copy p {
    max-width: 28rem;
    font-size: 1rem;
}

.intervento-card {
    gap: 0;
    min-height: 100%;
}

.intervento-card h3 {
    margin-top: 0;
}

.intervento-card p + p {
    margin-top: 1rem;
}

/* Capabilities remain scannable inside each of the three higher-level paths. */
.intervento-capacita {
    display: grid;
    gap: 0.65rem;
    margin: 1.15rem 0 0;
    padding: 1rem 0 0;
    border-top: 1px solid rgba(150, 190, 255, 0.12);
    list-style: none;
}

.intervento-capacita li {
    position: relative;
    padding-left: 1.1rem;
    color: #cbd6e5;
    font-size: 0.92rem;
    line-height: 1.55;
}

.intervento-capacita li::before {
    content: '';
    position: absolute;
    top: 0.58rem;
    left: 0;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: var(--color-accent);
}

.intervento-output {
    padding-top: 1rem;
    border-top: 1px solid rgba(150, 190, 255, 0.12);
    color: #d4deec;
}

.intervento-output strong {
    color: var(--color-text-primary);
}

.section-cta-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 1.6rem;
    padding: 1.45rem 1.6rem;
    border: 1px solid rgba(150, 190, 255, 0.14);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.025);
}

.section-cta-panel h3 {
    margin-bottom: 0.35rem;
    font-size: 1.15rem;
}

.section-cta-panel p {
    margin-bottom: 0;
    color: #becadb;
    font-size: 0.94rem;
}

.section-cta-panel .cta {
    flex: 0 0 auto;
}

.section-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.section-actions-centered {
    justify-content: center;
}

#esperienza {
    overflow: hidden;
}

#esperienza::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url(../images/esperienza-bg.svg);
    background-repeat: repeat;
    background-size: 320px;
    opacity: 0.08;
    pointer-events: none;
}

.esperienza-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 2rem;
    align-items: start;
}

.experience-track {
    display: grid;
    gap: 1.5rem;
}

.experience-step {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.2rem;
    align-items: start;
    padding: 1.7rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    background: rgba(9, 13, 20, 0.66);
    backdrop-filter: blur(10px);
}

.experience-year {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: var(--color-accent-soft);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    font-weight: 800;
}

.experience-step h3 {
    margin-bottom: 0.7rem;
}

.experience-step p {
    margin-bottom: 0;
}

.competenze-panel h3 {
    margin-bottom: 0.8rem;
}

/* The technical foundation is expressed as evidence, not as a tag cloud. */
.base-tecnica-list {
    display: grid;
    gap: 0.8rem;
    margin-top: 1.35rem;
    list-style: none;
}

.base-tecnica-list li {
    padding: 1rem;
    border: 1px solid rgba(150, 190, 255, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.025);
}

.base-tecnica-list strong {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--color-text-primary);
    font-weight: 800;
}

.base-tecnica-list span {
    display: block;
    color: #c1ccdb;
    font-size: 0.93rem;
    line-height: 1.6;
}

/* Add a concise lead paragraph so the skills panel feels curated instead of just enumerated. */
.competenze-intro {
    margin-bottom: 1.4rem;
    color: #b9c5d6;
    font-size: 0.96rem;
    line-height: 1.65;
}

/* A fixed grid keeps technical skills aligned and prevents the tag-cloud effect. */
.skills-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: flex-start;
}

.skills-list span {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 3.15rem;
    padding: 0.78rem 1rem;
    border: 1px solid rgba(150, 190, 255, 0.1);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(110, 168, 255, 0.04)),
        rgba(255, 255, 255, 0.03);
    color: #dbe5f2;
    font-size: 0.9rem;
    line-height: 1.42;
    text-align: left;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition:
        border-color var(--transition-speed) ease,
        background-color var(--transition-speed) ease,
        transform var(--transition-speed) ease,
        color var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease;
}

.skills-list span:hover {
    transform: translateY(-2px);
    border-color: rgba(150, 190, 255, 0.26);
    background:
        linear-gradient(180deg, rgba(110, 168, 255, 0.16), rgba(110, 168, 255, 0.09)),
        rgba(255, 255, 255, 0.04);
    color: var(--color-text-primary);
    box-shadow: 0 12px 24px rgba(13, 22, 40, 0.18);
}

.assistente-intro,
.contatti-intro {
    max-width: 48rem;
    margin: -1.1rem auto 3rem;
    text-align: center;
    font-size: 1.02rem;
}

.contatti-intro {
    margin-bottom: 2.15rem;
}

/* Keep the institutional email visible and distinguishable inside the contact introduction. */
.contatti-intro a {
    color: var(--color-text-primary);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(110, 168, 255, 0.42);
    text-underline-offset: 0.22rem;
}

#assistente .assistente-intro {
    max-width: 54rem;
    margin-bottom: 1.25rem;
}

.assistente-suggestions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    max-width: 56rem;
    margin: 0 auto 1rem;
}

.assistente-suggestion {
    min-height: 3rem;
    padding: 0.72rem 0.9rem;
    border: 1px solid rgba(150, 190, 255, 0.14);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.035);
    color: #d5dfed;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.35;
    cursor: pointer;
    transition: transform var(--transition-speed) ease, border-color var(--transition-speed) ease, background-color var(--transition-speed) ease;
}

.assistente-suggestion:hover,
.assistente-suggestion:focus-visible {
    transform: translateY(-2px);
    border-color: var(--color-border-strong);
    background: rgba(110, 168, 255, 0.1);
}

.assistente-suggestion:disabled {
    cursor: wait;
    opacity: 0.65;
    transform: none;
}

/* Keep the first contact path focused on one short, reassuring form. */
.contact-layout {
    max-width: 800px;
    margin: 0 auto;
}

.contact-form-column {
    min-width: 0;
}

.ecosistema-items {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--color-border);
}

.ecosistema-item {
    display: grid;
    grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.2fr);
    grid-template-rows: auto 1fr;
    gap: 0.5rem clamp(2rem, 6vw, 6rem);
    align-items: center;
    padding: 2.5rem 0;
    overflow: visible;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background: none;
    box-shadow: none;
    transition: none;
}

.ecosistema-item:nth-child(even) {
    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
}

.ecosistema-item::before {
    display: none;
}

.ecosistema-item:hover,
.ecosistema-item:focus-within {
    transform: none;
    border-color: var(--color-border);
    box-shadow: none;
}

.ecosistema-item:nth-child(odd) .ecosistema-image {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.ecosistema-item:nth-child(even) .ecosistema-image {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.ecosistema-item:nth-child(odd) .ecosistema-item-header,
.ecosistema-item:nth-child(odd) > p {
    grid-column: 2;
}

.ecosistema-item:nth-child(even) .ecosistema-item-header,
.ecosistema-item:nth-child(even) > p {
    grid-column: 1;
}

.ecosistema-image {
    min-height: 14rem;
    margin-bottom: 0;
}

.ecosistema-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.1rem;
    margin-bottom: 0.95rem;
}

.ecosistema-item-header h3 {
    margin-bottom: 0;
    line-height: 1.08;
}

.ecosistema-note {
    max-width: 48rem;
    margin: 2rem 0 0;
    color: #c2ccda;
    font-size: 1rem;
    line-height: 1.7;
}

.ecosistema-quicklinks {
    display: flex;
    align-items: center;
    gap: 0.72rem;
    flex: 0 0 auto;
}

/* The quick links use standalone SVG assets so the icons can animate without page-level SVG rules. */
.ecosistema-icon-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(150, 190, 255, 0.14);
    border-radius: 999px;
    background:
        radial-gradient(circle at 30% 24%, rgba(110, 168, 255, 0.1), transparent 44%),
        rgba(255, 255, 255, 0.03);
    color: #8dc0ff;
    transition:
        transform var(--transition-speed) ease,
        border-color var(--transition-speed) ease,
        background-color var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease,
        color var(--transition-speed) ease;
}

/* Size the standalone icon assets and keep hover feedback on the wrapper only. */
.ecosistema-icon-asset {
    display: block;
    width: 1.45rem;
    height: 1.45rem;
    opacity: 0.94;
    transition:
        filter var(--transition-speed) ease,
        opacity var(--transition-speed) ease;
}

.ecosistema-icon-link:hover,
.ecosistema-icon-link:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(150, 190, 255, 0.28);
    background:
        radial-gradient(circle at 30% 24%, rgba(110, 168, 255, 0.16), transparent 46%),
        rgba(110, 168, 255, 0.08);
    color: #dcecff;
    box-shadow: 0 12px 24px rgba(20, 44, 88, 0.24);
}

.ecosistema-icon-link:hover .ecosistema-icon-asset,
.ecosistema-icon-link:focus-visible .ecosistema-icon-asset {
    opacity: 1;
    filter: brightness(1.24);
}

.assistente-ui,
.contact-form {
    position: relative;
    max-width: 860px;
    margin: 0 auto;
    padding: 2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent),
        var(--color-surface-strong);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(16px);
}

/* Keep the assistant panel visually aligned with the wider heading without changing form widths elsewhere. */
#assistente .assistente-ui {
    max-width: 56rem;
}

.assistente-output {
    height: 320px;
    overflow-y: auto;
    margin-bottom: 1.5rem;
    padding-right: 0.5rem;
}

.message {
    margin-bottom: 1rem;
    max-width: 88%;
}

.message > div {
    margin-bottom: 0;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 18px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    /* Let rendered Markdown blocks manage spacing without showing source newlines as extra blank rows. */
    white-space: normal;
}

.message-bot > div {
    background: rgba(255, 255, 255, 0.04);
    color: #d8e0ed;
}

/* Keep the temporary typing bubble aligned with standard assistant responses. */
.message-bot-typing > div {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.6rem;
    min-height: 3.35rem;
    padding: 0.7rem 0.95rem;
}

.message-bot .typing-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.message-user {
    margin-left: auto;
    text-align: right;
}

.message-user > div {
    display: inline-block;
    background: linear-gradient(135deg, rgba(110, 168, 255, 0.26), rgba(45, 108, 223, 0.28));
    border-color: rgba(110, 168, 255, 0.18);
    color: #f7faff;
    text-align: left;
}

/* Reset paragraph styles while preserving visible spacing between Markdown blocks. */
.message > div p {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    line-height: inherit;
    color: inherit;
}

/* Restore spacing between consecutive paragraphs generated from Markdown. */
.message > div p + p {
    margin-top: 0.85rem;
}

/* Keep Markdown lists readable inside chatbot messages. */
.message > div ul,
.message > div ol {
    margin: 0.85rem 0 0;
    padding-left: 1.25rem;
}

/* Keep list items compact without collapsing them into plain text. */
.message > div li + li {
    margin-top: 0.35rem;
}


.assistente-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.85rem;
}

.assistente-input input,
.assistente-input button,
.form-group input,
.form-group textarea {
    /* Safari applies a different native form typography unless the full font shorthand is normalized. */
    font: inherit;
    letter-spacing: inherit;
}

.assistente-input input {
    min-height: 3.4rem;
    padding: 0 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-primary);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--transition-speed) ease, background-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.assistente-input input:focus,
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: rgba(110, 168, 255, 0.36);
    box-shadow: 0 0 0 4px rgba(110, 168, 255, 0.08);
}

.assistente-input button {
    min-height: 3.4rem;
    padding: 0 1.35rem;
    min-width: 8rem;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, #2b62bc, #173f8f);
    color: #f8fbff;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.assistente-input button:hover,
.assistente-input button:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(30, 77, 170, 0.28);
}

.assistente-input input:disabled,
.assistente-input button:disabled {
    cursor: wait;
    opacity: 0.72;
}

.contact-form {
    max-width: none;
    margin: 0;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
}

.form-group {
    position: relative;
    margin-bottom: 1.65rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    /* Safari renders the typed value slightly compressed in floating-label fields,
       so the controls need more vertical room and an explicit text rhythm. */
    padding: 1.95rem 1rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-text-primary);
    font-size: 1.08rem;
    line-height: 1.45;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--transition-speed) ease, background-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.form-group input {
    min-height: 4.8rem;
}

.form-group textarea {
    min-height: 8.5rem;
    padding-top: 2.15rem;
    resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: transparent;
}

.form-group label {
    position: absolute;
    left: 1rem;
    font-size: 1rem;
    line-height: 1.2;
    color: var(--color-text-muted);
    transition:
        top var(--transition-speed) ease,
        transform var(--transition-speed) ease,
        color var(--transition-speed) ease,
        font-size var(--transition-speed) ease;
    pointer-events: none;
}

.form-group:not(.form-group-textarea) label {
    top: 50%;
    transform: translateY(-50%);
}

.form-group:not(.form-group-textarea) input:focus + label,
.form-group:not(.form-group-textarea) input:not(:placeholder-shown) + label {
    top: 0.65rem;
    transform: none;
    color: var(--color-accent);
    font-size: 0.82rem;
}

.form-group-textarea label {
    top: 0.85rem;
}

.form-group-textarea textarea:focus + label,
.form-group-textarea textarea:not(:placeholder-shown) + label {
    transform: translateY(-0.5rem);
    color: var(--color-accent);
    font-size: 0.82rem;
}

/* Normalize Safari/WebKit autofill so saved addresses do not break the form palette. */
.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus,
.form-group textarea:-webkit-autofill,
.form-group textarea:-webkit-autofill:hover,
.form-group textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-text-primary);
    -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.03) inset;
    box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.03) inset;
    transition: background-color 9999s ease-out 0s;
}

.form-group-checkbox {
    display: block;
    margin-bottom: 1.25rem;
}

/* The privacy consent keeps native checkbox semantics but renders as a modern switch. */
.toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    min-height: 2.75rem;
    padding: 0;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition:
        color var(--transition-speed) ease;
}

.toggle-switch {
    position: relative;
    flex: 0 0 auto;
    width: 3.45rem;
    height: 2rem;
    margin-top: -0.05rem;
    font-size: 0;
    line-height: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.22);
    transition:
        background-color var(--transition-speed) ease,
        border-color var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease;
}

.toggle-switch::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0.2rem;
    width: 1.42rem;
    height: 1.42rem;
    border-radius: 50%;
    background: linear-gradient(180deg, #f9fbff, #c7d5ec);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.24);
    transition:
        transform var(--transition-speed) ease,
        background-color var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease;
    transform: translateY(-50%);
}

.toggle-text {
    color: inherit;
    display: block;
    font-size: 1rem;
    line-height: 1.45;
}

.toggle-text a {
    white-space: nowrap;
}

.toggle-input:focus-visible + .toggle-label {
    color: #dce7f7;
}

.toggle-input:focus-visible + .toggle-label .toggle-switch {
    outline: 3px solid rgba(145, 190, 255, 0.82);
    outline-offset: 3px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.22), 0 0 0 5px rgba(110, 168, 255, 0.12);
}

.toggle-input:checked + .toggle-label {
    color: #dce7f7;
}

.toggle-input:checked + .toggle-label .toggle-switch {
    border-color: rgba(110, 168, 255, 0.34);
    background: linear-gradient(135deg, rgba(114, 169, 255, 0.92), rgba(53, 108, 223, 0.92));
    box-shadow: inset 0 2px 8px rgba(8, 24, 58, 0.24), 0 8px 20px rgba(39, 92, 194, 0.22);
}

.toggle-input:checked + .toggle-label .toggle-switch::before {
    transform: translate(1.42rem, -50%);
    background: linear-gradient(180deg, #ffffff, #e6eefc);
    box-shadow: 0 10px 18px rgba(13, 32, 72, 0.28);
}

.toggle-label:hover {
    color: var(--color-text-primary);
}

.form-group-checkbox a {
    color: var(--color-text-primary);
    text-decoration: underline;
    text-decoration-color: rgba(110, 168, 255, 0.34);
    text-underline-offset: 0.22rem;
}

.contact-form .cta {
    width: 100%;
}

/* Present the external anti-spam check as an intentional part of the contact form. */
.contact-security {
    margin-bottom: 1rem;
    padding: 0.85rem;
    border: 1px solid rgba(150, 190, 255, 0.12);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(110, 168, 255, 0.055), transparent),
        rgba(255, 255, 255, 0.025);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.contact-security-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
}

.contact-security-title {
    color: #dce7f7;
    font-size: 0.9rem;
    font-weight: 750;
    letter-spacing: 0.015em;
}

.contact-security-note {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    line-height: 1.4;
    text-align: right;
}

/* The flexible widget uses the same full-width rhythm as the form controls. */
.contact-turnstile {
    width: 100%;
    min-height: 0;
    line-height: 0;
}

.contact-turnstile:not(:empty) {
    margin-top: 0.7rem;
}

.contact-turnstile iframe {
    width: 100% !important;
    max-width: 100%;
    border-radius: 11px;
}

.form-security-message {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.contact-form .cta:disabled {
    cursor: wait;
    opacity: 0.62;
}

.form-status {
    max-width: 900px;
    margin: 0 auto 1.5rem;
    padding: 1rem 1.2rem;
    border-radius: 16px;
    text-align: center;
    color: #f5f8ff;
}

.contact-form-column .form-status {
    max-width: none;
}

.form-success {
    background: rgba(18, 118, 63, 0.9);
}

.form-error {
    background: rgba(171, 43, 61, 0.9);
}

/* Align SweetAlert2 with the existing dark-glass interface instead of the default theme. */
.swal2-container.swal2-backdrop-show {
    backdrop-filter: blur(16px);
}

/* Restore SweetAlert2 icon metrics after the global reset switches everything to border-box. */
.swal2-icon,
.swal2-icon *,
.swal2-icon *::before,
.swal2-icon *::after {
    box-sizing: content-box;
}

.vm-swal-popup {
    width: min(34rem, calc(100vw - 2rem));
    padding: 2.65rem 2.5rem 2rem;
    border: 1px solid rgba(150, 190, 255, 0.18);
    border-radius: 28px;
    background:
        radial-gradient(circle at top, rgba(60, 111, 226, 0.18), transparent 38%),
        linear-gradient(180deg, rgba(14, 20, 31, 0.98), rgba(9, 13, 20, 0.98));
    box-shadow:
        0 32px 64px rgba(2, 8, 20, 0.52),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: var(--color-text-primary);
}

.vm-swal-popup-success {
    border-color: rgba(94, 184, 134, 0.24);
}

.vm-swal-popup-error {
    border-color: rgba(226, 103, 122, 0.24);
}

.vm-swal-title {
    margin-top: 0.2rem;
    margin-bottom: 0.85rem;
    font-family: var(--font-family-display);
    font-size: 2.35rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--color-text-primary);
}

.vm-swal-copy {
    margin: 0 auto;
    max-width: 25rem;
    padding: 0;
    font-size: 1rem;
    line-height: 1.75;
    color: rgba(224, 233, 247, 0.82);
}

.vm-swal-icon {
    margin-top: 0.1rem;
    margin-bottom: 1.3rem;
    border-width: 0.18rem;
    background: transparent !important;
    box-shadow: none;
}

/* Use the custom success SVG instead of the library-generated lines. */
.vm-swal-popup-success .swal2-icon.swal2-success {
    width: 7rem;
    height: 7rem;
    border: none !important;
    color: inherit !important;
}

.vm-swal-popup-success .swal2-icon-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.vm-swal-success-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.vm-swal-success-circle {
    fill: none;
    stroke: rgba(84, 176, 131, 0.92);
    stroke-width: 4;
}

.vm-swal-success-check {
    fill: none;
    stroke: rgba(84, 176, 131, 0.96);
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vm-swal-popup-success .swal2-success-ring {
    border-color: rgba(90, 184, 138, 0.24) !important;
}

.vm-swal-popup-success .swal2-success-line-tip,
.vm-swal-popup-success .swal2-success-line-long,
.vm-swal-popup-success .swal2-success-fix {
    background: rgba(84, 176, 131, 0.96) !important;
}

.vm-swal-popup-success .swal2-success-circular-line-left,
.vm-swal-popup-success .swal2-success-circular-line-right {
    background: transparent !important;
}

.vm-swal-popup-success .swal2-icon.swal2-success {
    border-color: rgba(84, 176, 131, 0.88) !important;
    color: rgba(84, 176, 131, 0.96) !important;
    background: transparent !important;
}

.vm-swal-popup-error .swal2-icon.swal2-error {
    border-color: rgba(224, 106, 124, 0.9) !important;
    color: rgba(224, 106, 124, 0.98) !important;
}

.vm-swal-popup-error [class^='swal2-x-mark-line'] {
    background: rgba(224, 106, 124, 0.98) !important;
}

.vm-swal-actions {
    margin-top: 1.55rem;
}

.vm-swal-confirm {
    min-width: 10rem;
    min-height: 3.25rem;
    padding: 0.9rem 1.8rem;
    border: 1px solid rgba(143, 184, 255, 0.22);
    border-radius: 999px;
    background: linear-gradient(135deg, #2b62bc, #173f8f);
    color: #f8fbff;
    font-size: 0.96rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: 0 18px 34px rgba(24, 72, 161, 0.3);
    transition:
        transform var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease,
        filter var(--transition-speed) ease;
}

.vm-swal-confirm:hover,
.vm-swal-confirm:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 22px 38px rgba(24, 72, 161, 0.34);
    filter: brightness(1.03);
}

.vm-swal-show {
    animation: vmSwalPopupIn 0.24s ease-out;
}

.vm-swal-hide {
    animation: vmSwalPopupOut 0.18s ease-in forwards;
}

@keyframes vmSwalPopupIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes vmSwalPopupOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
}

.typing-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.9rem;
    min-height: 1rem;
}

.typing-indicator-dots {
    width: 2.9rem;
    height: 1rem;
    overflow: visible;
    flex: 0 0 auto;
    filter: drop-shadow(0 0 10px rgba(110, 168, 255, 0.16));
}

.typing-indicator-dot {
    fill: #edf4ff;
    opacity: 0.38;
    transform-box: fill-box;
    transform-origin: center;
    animation: typingDotBounce 1.05s infinite ease-in-out;
}

.typing-indicator-dot-2 {
    animation-delay: 0.14s;
}

.typing-indicator-dot-3 {
    animation-delay: 0.28s;
}

/* Extend the contact section with trust links before the site drops into legal-only information. */
.contact-profiles {
    max-width: 900px;
    margin: 2.6rem auto 0;
    padding: 1.55rem 1.7rem;
    border: 1px solid rgba(150, 190, 255, 0.14);
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 70%),
        rgba(9, 13, 20, 0.72);
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.16);
}

.contact-profiles-heading {
    display: grid;
    gap: 0.6rem;
    justify-items: center;
    text-align: center;
    margin-bottom: 1.15rem;
}

.contact-profiles-label {
    color: #dce7f6;
    font-size: 0.96rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.contact-profiles-intro {
    max-width: 42rem;
    margin-bottom: 0;
    color: var(--color-text-secondary);
    font-size: 0.97rem;
}

.contact-profiles-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
}

.profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.95rem;
    min-height: 4rem;
    padding: 0.92rem 1.2rem;
    border: 1px solid rgba(150, 190, 255, 0.16);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
        rgba(255, 255, 255, 0.02);
    color: var(--color-text-primary);
    text-decoration: none;
    transition:
        border-color var(--transition-speed) ease,
        background-color var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease,
        transform var(--transition-speed) ease;
}

.profile-badge:hover,
.profile-badge:focus-visible {
    border-color: rgba(150, 190, 255, 0.34);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
        rgba(110, 168, 255, 0.09);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
    transform: translateY(-1px);
}

.profile-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    color: #f5f8ff;
    font-size: 1.18rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    flex: 0 0 auto;
}

.profile-badge-icon svg {
    width: 1.2rem;
    height: 1.2rem;
    display: block;
    fill: currentColor;
}

.profile-badge-copy {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
}

.profile-badge-platform {
    color: var(--color-text-primary);
    font-size: 0.96rem;
    font-weight: 700;
    letter-spacing: 0;
}

.profile-badge-handle {
    color: var(--color-text-secondary);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* A restrained accent keeps the two cards distinct without breaking the site palette. */
.profile-badge-linkedin .profile-badge-icon {
    background: linear-gradient(135deg, rgba(10, 102, 194, 0.26), rgba(9, 83, 155, 0.16));
    color: #8ec2ff;
}

.profile-badge-github .profile-badge-icon {
    background: linear-gradient(135deg, rgba(64, 74, 85, 0.28), rgba(17, 22, 28, 0.18));
    color: #d7dee8;
}

footer {
    padding: 2.6rem 0 3rem;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.92rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 50%);
}

footer .container {
    max-width: 860px;
    display: grid;
    justify-items: center;
    gap: 0.85rem;
}

/* Break legal information into wrapped inline chunks to avoid a visually heavy single line. */
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.45rem 0.75rem;
    max-width: 52rem;
    line-height: 1.85;
}

.footer-legal-item {
    display: inline-flex;
    align-items: center;
}

.footer-legal-separator,
.footer-links-separator {
    color: rgba(142, 167, 207, 0.42);
}

footer .pairui-credit {
    margin-top: 0.1rem;
    max-width: 38rem;
    color: rgba(154, 166, 184, 0.78);
    font-size: 0.88rem;
    line-height: 1.7;
}

.footer-links {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 0.7rem;
    margin-top: 0.15rem;
    padding-top: 0.95rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

footer p {
    margin-bottom: 0;
}

footer a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

footer a:hover,
footer a:focus-visible {
    color: var(--color-text-primary);
}

@media (max-width: 640px) {
    /* Remove decorative separators on small screens so stacked items read more cleanly. */
    .footer-legal-separator,
    .footer-links-separator {
        display: none;
    }

    .footer-links {
        gap: 0.35rem 1rem;
    }
}

/* Shared reveal states keep the motion subtle and consistent across section types. */
.scroll-animate {
    opacity: 1;
    transform: none;
    transition: transform 0.9s ease;
}

.scroll-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

.scroll-animate.visible .ambito-item,
.scroll-animate.visible .quando-utile-card,
.scroll-animate.visible .experience-step,
.scroll-animate.visible .competenze-panel,
.scroll-animate.visible .ecosistema-item,
.scroll-animate.visible .credential-card,
.scroll-animate.visible .ai-principle-card,
.scroll-animate.visible .governance-panel {
    animation: fadeInUp 0.8s ease forwards;
}

.scroll-animate.visible .quando-utile-card:nth-child(1) { animation-delay: 0.08s; }
.scroll-animate.visible .quando-utile-card:nth-child(2) { animation-delay: 0.16s; }
.scroll-animate.visible .quando-utile-card:nth-child(3) { animation-delay: 0.24s; }
.scroll-animate.visible .ambito-item:nth-child(1) { animation-delay: 0.08s; }
.scroll-animate.visible .ambito-item:nth-child(2) { animation-delay: 0.16s; }
.scroll-animate.visible .ambito-item:nth-child(3) { animation-delay: 0.24s; }
.scroll-animate.visible .ambito-item:nth-child(4) { animation-delay: 0.32s; }
.scroll-animate.visible .ambito-item:nth-child(5) { animation-delay: 0.4s; }
.scroll-animate.visible .experience-step:nth-child(1) { animation-delay: 0.12s; }
.scroll-animate.visible .experience-step:nth-child(2) { animation-delay: 0.22s; }
.scroll-animate.visible .experience-step:nth-child(3) { animation-delay: 0.32s; }
.scroll-animate.visible .competenze-panel { animation-delay: 0.3s; }
.scroll-animate.visible .ecosistema-item:nth-child(1) { animation-delay: 0.14s; }
.scroll-animate.visible .ecosistema-item:nth-child(2) { animation-delay: 0.24s; }
.scroll-animate.visible .credential-card { animation-delay: 0.18s; }
.scroll-animate.visible .ai-principle-card:nth-child(1) { animation-delay: 0.08s; }
.scroll-animate.visible .ai-principle-card:nth-child(2) { animation-delay: 0.16s; }
.scroll-animate.visible .ai-principle-card:nth-child(3) { animation-delay: 0.24s; }
.scroll-animate.visible .ai-principle-card:nth-child(4) { animation-delay: 0.32s; }
.scroll-animate.visible .governance-panel { animation-delay: 0.18s; }

@keyframes fadeInUp {
    from {
        transform: translateY(18px);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes typingDotBounce {
    0%, 80%, 100% {
        transform: translateY(1px) scale(0.72);
        opacity: 0.34;
    }

    40% {
        transform: translateY(-2px) scale(1);
        opacity: 1;
    }
}

@keyframes heroTextureGlow {
    0%, 100% {
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.03),
            0 0 112px rgba(41, 88, 190, 0.16);
    }

    50% {
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.04),
            0 0 142px rgba(61, 112, 225, 0.22);
    }
}

@media (max-width: 1080px) {
    .logo-copy span {
        display: none;
    }

    .profilo-grid,
    .ai-layout,
    .governance-panel,
    .esperienza-grid {
        grid-template-columns: 1fr;
    }

    .ai-layout {
        grid-template-areas:
            "copy"
            "principles";
    }

    #hero {
        padding: 8rem 0 5rem;
        --hero-accent-position: 60% 20%;
        --hero-brand-position: 78% center;
    }

    #hero::after {
        right: 1.5rem;
        width: min(35rem, 42vw);
        height: 68%;
    }

    #hero .container::before {
        width: min(46rem, 84vw);
        left: 0;
    }

    .hero-copy {
        max-width: 46rem;
    }

    .ai-copy p {
        max-width: 48rem;
    }

    .hero-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 34rem;
    }

    .ambito-item,
    .ambito-item-featured {
        grid-column: span 6;
        display: block;
    }

    .ambito-item-featured .ambito-image {
        min-height: 13rem;
    }

    /* The three primary paths stay on one row until the single-column breakpoint. */
    .ambiti-grid-percorsi .ambito-item {
        grid-column: span 4;
    }
}

@media (max-width: 960px) {
    header .container {
        flex-direction: row;
        align-items: center;
        gap: 0.65rem;
        border-radius: 999px;
    }

    header nav {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        overflow: hidden;
    }

    header .logo {
        flex: 0 0 auto;
    }

    .logo-copy strong,
    header nav a {
        white-space: nowrap;
    }

    header nav ul {
        width: 100%;
        flex-wrap: nowrap;
        gap: 0.2rem;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    header nav ul::-webkit-scrollbar {
        display: none;
    }

}

@media (max-width: 840px) {
    :root {
        --container-padding: 1.25rem;
        --section-padding: 5.5rem 0;
    }

    h1 {
        font-size: 3.4rem;
    }

    h2 {
        font-size: 2.35rem;
    }

    .hero-copy h1 {
        font-size: 3.5rem;
    }

    #hero {
        min-height: auto;
        padding: 8.2rem 0 3.8rem;
        --hero-accent-position: 62% 18%;
        --hero-brand-position: 68% center;
        --hero-mask-width: clamp(22rem, 42vw, 30rem);
        --hero-mask-height: clamp(15rem, 30vw, 20rem);
        --hero-texture-rotate-x: 1deg;
        --hero-texture-rotate-y: -14deg;
        --hero-texture-opacity: 0.48;
    }

    #hero::after {
        top: 7rem;
        right: -2.5rem;
        width: min(28rem, 58vw);
        height: 56%;
    }

    #hero .container::before {
        top: 5%;
        left: 0;
        width: 100%;
        height: 68%;
    }

    .hero-actions,
    .hero-metrics,
    .ai-principles,
    .governance-list,
    .skills-list,
    .form-row {
        grid-template-columns: 1fr;
    }

    .quando-utile-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .quando-utile-intro {
        position: static;
    }

    .hero-actions {
        display: grid;
        max-width: 18rem;
    }

    .hero-copy,
    .hero-metrics {
        max-width: none;
    }

    .ambiti-grid {
        grid-template-columns: 1fr;
    }

    .ambito-item,
    .ambito-item-featured {
        grid-column: auto;
    }

    .ambiti-grid-percorsi .ambito-item {
        grid-column: auto;
    }

    .section-cta-panel {
        align-items: flex-start;
        flex-direction: column;
    }

    .ecosistema-item,
    .ecosistema-item:nth-child(even) {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 1.25rem;
    }

    .ecosistema-item:nth-child(odd) .ecosistema-image,
    .ecosistema-item:nth-child(even) .ecosistema-image,
    .ecosistema-item:nth-child(odd) .ecosistema-item-header,
    .ecosistema-item:nth-child(even) .ecosistema-item-header,
    .ecosistema-item:nth-child(odd) > p,
    .ecosistema-item:nth-child(even) > p {
        grid-column: 1;
        grid-row: auto;
    }

    .assistente-suggestions {
        grid-template-columns: 1fr;
    }

    .assistente-ui,
    .contact-form,
    .credential-card,
    .competenze-panel,
    .governance-panel {
        padding: 1.5rem;
    }

    .assistente-input {
        grid-template-columns: 1fr;
    }

    .toggle-label {
        align-items: flex-start;
    }

    .vm-swal-popup {
        padding: 2.15rem 1.7rem 1.55rem;
        border-radius: 24px;
    }

    .vm-swal-title {
        font-size: 2.08rem;
    }
}

@media (max-width: 640px) {
    header {
        padding: 0.72rem 0;
    }

    header .container {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.55rem;
        border-radius: 999px;
    }

    header .logo {
        min-width: 0;
        flex: 0 0 auto;
    }

    header .logo a {
        gap: 0.75rem;
        padding: 0;
    }

    .logo-svg {
        height: 28px;
    }

    .logo-copy {
        display: none;
    }

    header nav {
        --site-nav-mobile-gap: 0.35rem;
        position: relative;
        flex: 1 1 auto;
        width: auto;
        max-width: calc(100% - 3rem);
        min-width: 0;
        overflow: hidden;
        border-radius: 999px;
        isolation: isolate;
    }

    /* Keep a faint edge fade on mobile without laying a dark veil over the active label. */
    header nav::before,
    header nav::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: clamp(0.55rem, 5vw, 0.9rem);
        pointer-events: none;
        z-index: 1;
    }

    header nav::before {
        left: 0;
        background: linear-gradient(90deg, rgba(7, 10, 15, 0.68), rgba(7, 10, 15, 0));
    }

    header nav::after {
        right: 0;
        background: linear-gradient(270deg, rgba(7, 10, 15, 0.68), rgba(7, 10, 15, 0));
    }

    header nav ul {
        width: max-content;
        max-width: 100%;
        flex-wrap: nowrap;
        gap: var(--site-nav-mobile-gap);
        padding-top: 0;
        padding-right: var(--site-nav-mobile-side-padding);
        padding-bottom: 0.1rem;
        padding-left: var(--site-nav-mobile-side-padding);
        position: relative;
        z-index: 3;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        scroll-padding-left: var(--site-nav-mobile-side-padding);
        scroll-padding-right: var(--site-nav-mobile-side-padding);
    }

    /* Only the track should scroll, otherwise the fixed lens gets dragged with the content. */
    header nav ul::-webkit-scrollbar {
        display: none; /* Safari and Chrome */
    }

    /* Natural-width slots expose more than one destination while preserving horizontal scrolling. */
    header nav ul > li {
        flex: 0 0 auto;
        display: flex;
        justify-content: center;
    }

    .site-nav-item-home-mobile {
        display: flex;
    }

    header nav a {
        color: rgba(233, 240, 250, 0.82);
        min-height: 2.75rem;
        padding: 0.52rem 0.78rem;
        font-size: 0.88rem;
        white-space: nowrap;
    }

    header nav a:hover,
    header nav a:focus-visible {
        background: transparent;
        box-shadow: none;
    }

    .site-nav-glass {
        position: absolute;
        top: 50%;
        left: 0;
        display: block;
        width: var(--site-nav-glass-width);
        height: calc(100% - 0.08rem);
        transform: translate3d(var(--site-nav-glass-x), -50%, 0);
        opacity: 1;
        overflow: hidden;
        border: 1px solid rgba(228, 238, 255, 0.26);
        background:
            radial-gradient(140% 128% at 18% 18%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 28%, rgba(255, 255, 255, 0) 58%),
            radial-gradient(125% 118% at 50% 55%, rgba(110, 147, 214, 0.2) 0%, rgba(35, 49, 77, 0.14) 48%, rgba(9, 13, 21, 0.08) 100%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 24%, rgba(15, 20, 30, 0.08) 58%, rgba(9, 12, 20, 0.2) 100%),
            rgba(18, 25, 38, 0.16);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.22),
            inset 0 -1px 0 rgba(5, 8, 14, 0.24),
            inset 10px 0 14px rgba(5, 8, 13, 0.1),
            inset -10px 0 14px rgba(5, 8, 13, 0.1),
            0 10px 22px rgba(2, 8, 18, 0.2);
        backdrop-filter: blur(16px) saturate(145%) brightness(1.08);
        -webkit-backdrop-filter: blur(16px) saturate(145%) brightness(1.08);
        z-index: 2;
        pointer-events: none;
    }

    /* Shift the glare toward the upper-right edge so the active copy stays readable. */
    .site-nav-glass::before {
        content: '';
        position: absolute;
        inset: 1px;
        border-radius: inherit;
        background:
            linear-gradient(112deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0.24) 69%, rgba(255, 255, 255, 0.08) 74%, rgba(255, 255, 255, 0) 82%, rgba(255, 255, 255, 0) 100%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 22%, transparent 52%);
        opacity: 0.82;
    }

    /* The mobile active label sits inside the glass, so it needs a firmer contrast floor. */
    header nav a.is-active {
        color: #ffffff;
        text-shadow:
            0 1px 1px rgba(3, 8, 14, 0.92),
            0 2px 12px rgba(4, 10, 18, 0.32);
    }

    #hero {
        padding: 6.7rem 0 3.2rem;
        background-image:
            linear-gradient(180deg, rgba(4, 7, 11, 0.97) 0%, rgba(4, 7, 11, 0.9) 48%, rgba(4, 7, 11, 0.82) 100%),
            radial-gradient(circle at 52% 14%, rgba(73, 130, 255, 0.1), transparent 28%),
            url(../images/hero-background.jpg);
        --hero-accent-position: 58% 14%;
        --hero-brand-position: 76% center;
        --hero-brand-size: 240%;
        --hero-mask-width: clamp(19rem, 50vw, 25rem);
        --hero-mask-height: clamp(12.5rem, 34vw, 17rem);
        --hero-texture-rotate-y: -12deg;
        --hero-texture-opacity: 0.36;
    }

    #hero::before {
        opacity: 1;
    }

    #hero::after {
        top: 8.2rem;
        right: -4.5rem;
        width: 22rem;
        height: 18rem;
        background-size: auto, auto, 72px 72px, 72px 72px, 24px 24px, 38px 38px;
    }

    #hero .container::before {
        top: 4%;
        left: 0;
        width: 100%;
        height: 60%;
        filter: blur(14px);
    }

    .section-kicker {
        gap: 0.5rem;
        font-size: 0.72rem;
        letter-spacing: 0.12em;
    }

    .section-kicker::before {
        width: 2rem;
    }

    .hero-copy h1 {
        max-width: 100%;
        margin-bottom: 1rem;
        font-size: clamp(2.25rem, 10.2vw, 2.6rem);
        line-height: 1.08;
    }

    .hero-lead {
        max-width: 21rem;
        margin-bottom: 1.4rem;
        font-size: 0.98rem;
        line-height: 1.65;
    }

    .hero-actions {
        width: 100%;
        max-width: 20rem;
        margin-bottom: 0;
    }

    .hero-actions .cta {
        width: 100%;
        padding-right: 1rem;
        padding-left: 1rem;
    }

    #quando-utile {
        padding-top: 2.75rem;
    }

    #assistente,
    #contatti {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .section-subtitle {
        font-size: 0.98rem;
        line-height: 1.7;
    }

    .ai-layout,
    .ai-principles {
        gap: 0.9rem;
    }

    .quando-utile-card {
        grid-template-columns: 1fr;
        gap: 0.65rem;
        padding: 1.45rem 0;
    }

    .cta {
        min-height: 3.2rem;
        padding: 0.9rem 1.25rem;
    }

    .hero-metrics {
        gap: 0.85rem;
    }

    .ecosistema-item-header {
        gap: 0.8rem;
    }

    .ecosistema-quicklinks {
        gap: 0.55rem;
    }

    .ecosistema-icon-link {
        width: 2.8rem;
        height: 2.8rem;
    }

    .hero-metric {
        border-radius: 18px;
    }

    .assistente-intro,
    .contatti-intro,
    .ecosistema-content > p {
        max-width: 22rem;
        margin: -0.4rem auto 2rem;
        font-size: 0.95rem;
        line-height: 1.75;
    }

    .assistente-suggestions {
        display: flex;
        max-width: 100%;
        margin-right: auto;
        margin-left: auto;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .assistente-suggestions::-webkit-scrollbar {
        display: none;
    }

    .assistente-suggestion {
        flex: 0 0 min(18rem, 82vw);
        scroll-snap-align: start;
    }

    .section-cta-panel .cta {
        width: 100%;
    }

    .assistente-ui,
    .contact-form {
        padding: 1.2rem;
        border-radius: 24px;
    }

    .contact-form .form-group {
        margin-bottom: 1rem;
    }

    .contact-form .form-group input,
    .contact-form .form-group textarea {
        padding: 1.7rem 0.9rem 0.6rem;
    }

    .contact-form .form-group input {
        min-height: 4.2rem;
    }

    .contact-form .form-group textarea {
        height: 8rem;
        min-height: 7rem;
        padding-top: 1.9rem;
    }

    .contact-form .form-group label {
        left: 0.9rem;
    }

    .contact-form .form-group:not(.form-group-textarea) input:focus + label,
    .contact-form .form-group:not(.form-group-textarea) input:not(:placeholder-shown) + label {
        top: 0.5rem;
    }

    .contact-form .form-group-textarea label {
        top: 0.7rem;
    }

    .contact-form .form-group-checkbox {
        margin-bottom: 1rem;
    }

    .contact-security {
        padding: 0.75rem;
    }

    .contact-security-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.18rem;
    }

    .contact-security-note {
        text-align: left;
    }

    .contact-profiles {
        margin-top: 1.5rem;
        padding: 1.2rem;
        border-radius: 22px;
    }

    .contact-profiles-heading {
        margin-bottom: 1rem;
    }

    .contact-profiles-intro {
        font-size: 0.93rem;
        line-height: 1.68;
    }

    .contact-profiles-links {
        display: grid;
        gap: 0.7rem;
    }

    .profile-badge {
        width: min(100%, 22rem);
        justify-content: flex-start;
        padding: 0.88rem 1rem;
    }

    .profile-badge-icon {
        width: 2.7rem;
        height: 2.7rem;
        border-radius: 16px;
        font-size: 1.05rem;
    }

    .assistente-output {
        height: 220px;
        margin-bottom: 1rem;
    }

    .assistente-input input {
        min-height: 3.1rem;
        /* Safari iOS evita l'auto-zoom sui campi testo quando il font e' almeno 16px. */
        font-size: 16px;
        border-radius: 14px;
    }

    .assistente-input button {
        min-width: 0;
        min-height: 3.1rem;
        border-radius: 999px;
    }

    .toggle-label {
        gap: 0.85rem;
        padding: 0.9rem 1rem;
    }

    .vm-swal-popup {
        width: calc(100vw - 1.2rem);
        padding: 1.85rem 1.2rem 1.35rem;
    }

    .vm-swal-copy {
        font-size: 0.95rem;
        line-height: 1.68;
    }

    .vm-swal-confirm {
        width: 100%;
    }

    .toggle-switch {
        width: 3.2rem;
        height: 1.86rem;
    }

    .toggle-switch::before {
        width: 1.28rem;
        height: 1.28rem;
    }

    .toggle-input:checked + .toggle-label .toggle-switch::before {
        transform: translate(1.32rem, -50%);
    }
}

@media (max-width: 560px) {
    h1 {
        font-size: 2.85rem;
    }

    h2 {
        font-size: 2rem;
    }

    .hero-copy h1 {
        font-size: clamp(2.18rem, 10vw, 2.45rem);
    }

    .hero-copy h1 br {
        display: none;
    }

    #hero {
        --hero-accent-position: 56% 10%;
        --hero-brand-position: 74% center;
        --hero-brand-size: 285%;
        --hero-mask-width: clamp(17rem, 56vw, 22rem);
        --hero-mask-height: clamp(10.5rem, 38vw, 15rem);
        --hero-texture-opacity: 0.28;
    }

    #hero::after {
        top: 9.4rem;
        right: -6rem;
        width: 18rem;
        height: 15rem;
    }

    #hero .container::before {
        top: 5%;
        left: 0;
        width: 100%;
        height: 54%;
    }

    .section-kicker {
        display: block;
        line-height: 1.55;
    }

    .section-kicker::before {
        display: none;
    }

    .hero-copy h1 {
        max-width: 100%;
    }

    .hero-lead {
        max-width: 18rem;
        font-size: 0.94rem;
    }

    .hero-metric {
        padding: 0.95rem;
    }

    .assistente-intro,
    .contatti-intro,
    .ecosistema-content > p {
        max-width: 19rem;
        font-size: 0.92rem;
    }

    .assistente-suggestions {
        max-width: 100%;
    }

    .assistente-output {
        height: 190px;
    }

    .experience-step {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) and (orientation: portrait) {
    /* Keep the first assistant exchange visible without turning the widget into a second full-screen section. */
    .assistente-ui {
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .assistente-output {
        flex: 0 1 auto;
        min-height: 15rem;
        height: min(21rem, 42dvh);
    }

    .assistente-input {
        margin-top: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }

    .scroll-animate,
    .scroll-animate.visible {
        opacity: 1;
        transform: none;
    }
}