/* ==========================================================================
   NUVORA — Ecards®
   Stylesheet generated from Figma design system
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS (from Figma variables)
   -------------------------------------------------------------------------- */
:root {
    /* ---- Colors ---- */
    --color-bg: #f5fbff;
    --color-text: #090f0e;
    --color-accent: #66cccc; /* Color Scheme/Accent */
    --color-green-dark: #45adaa; /* Color/Green Dark   - Primary btn bg */
    --color-green-darkest: #1d4144; /* Color/Green Darkest */
    --color-green-deep: #25757c; /* Button Secondary/Text */
    --color-green-tagline: #1d4144;
    --color-neutral-darker: #212a2d;
    --color-white: #ffffff;
    --color-white-60: rgba(255, 255, 255, 0.6);
    --color-white-20: rgba(255, 255, 255, 0.2);
    /* ---- Buttons ---- */
    --btn-primary-bg: var(--color-green-dark);
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #ffffff;
    --btn-secondary-text: var(--color-green-deep);
    --btn-secondary-accent: var(--color-accent);
    /* ---- Radius ---- */
    --radius-sm: 0px 8px 0px 8px;
    --radius-md: 0px 24px 0px 24px;
    --radius-lg: 0px 40px 0px 40px;
    --radius-pill: 0px 15px 0px 15px;
    --radius-pill-toggle: 15px 15px 15px 15px;
    /* ---- Typography ---- */
    --font-display: "Satoshi", "Inter", system-ui, -apple-system, sans-serif;
    --font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
    /* Type scale (desktop) */
    --fs-h1: 56px;
    --lh-h1: 1;
    --ls-h1: -2px;
    --fs-h2: 44px;
    --lh-h2: 1.1;
    --ls-h2: -3px;
    --fs-h3: 32px;
    --lh-h3: 1.2;
    --ls-h3: -3px;
    --fs-h4: 26px;
    --lh-h4: 1.3;
    --ls-h4: -2px;
    --fs-tagline: 14px;
    --lh-tagline: 1.5;
    --ls-tagline: 5px;
    --fs-body: 16px;
    --lh-body: 1.5;
    --fs-btn-lg: 16px;
    --fs-btn-md: 14px;
    /* ---- Layout ---- */
    --container-max: 1160px; /* contenuto: 1160px su frame 1440 con padding 140px laterali */
    --container-pad-x: 140px;
    --section-pad-y: 80px;
    /* ---- Motion ---- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 160ms;
    --dur-base: 240ms;
    --dur-slow: 480ms;
}


/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-display);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img, svg, video {
    display: block;
    max-width: 100%;
    height: auto;
}

button {
    font: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

input, textarea, select {
    font: inherit;
}

site-footer {
    display: block;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY HELPERS
   -------------------------------------------------------------------------- */
.h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
}

.h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
}

.h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: var(--ls-h3);
}

.h4 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
}

.tagline {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--fs-tagline);
    line-height: var(--lh-tagline);
    letter-spacing: var(--ls-tagline);
    text-transform: uppercase;
    color: var(--color-green-tagline);
}

.lead {
    font-size: 18px;
    line-height: 1.6;
    color: var(--color-neutral-darker);
}


/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: 24px;
}

.section {
    padding-block: var(--section-pad-y);
}


/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-btn-lg);
    line-height: 0.9;
    white-space: nowrap;
    transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

    .btn:hover {
        transform: translateY(-1px);
    }

    .btn:active {
        transform: translateY(0);
    }

.btn--primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

    .btn--primary:hover {
        background-color: var(--color-green-deep);
        box-shadow: 0 8px 24px -8px rgba(69, 173, 170, 0.5);
    }

.btn--secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    box-shadow: 0 1px 0 rgba(9, 15, 14, 0.04), inset 0 0 0 1px rgba(9, 15, 14, 0.04);
}

    .btn--secondary:hover {
        background-color: var(--btn-secondary-accent);
        color: #ffffff;
    }

.btn--md {
    padding: 11px 18px;
    font-size: var(--fs-btn-md);
}


/* --------------------------------------------------------------------------
   6. RESPONSIVE BREAKPOINTS — global type & spacing scale-down
   -------------------------------------------------------------------------- */

/* Tablet */
@media (max-width: 1024px) {
    :root {
        --fs-h1: 44px;
        --ls-h1: -1.5px;
        --fs-h2: 36px;
        --ls-h2: -2px;
        --fs-h3: 26px;
        --ls-h3: -2px;
        --fs-h4: 22px;
        --ls-h4: -1.5px;
        --section-pad-y: 64px;
    }

    .container {
        padding-inline: 32px;
    }
}

/* Mobile */
@media (max-width: 640px) {
    :root {
        --fs-h1: 36px;
        --ls-h1: -1px;
        --fs-h2: 30px;
        --ls-h2: -1.5px;
        --fs-h3: 22px;
        --ls-h3: -1px;
        --fs-h4: 20px;
        --ls-h4: -1px;
        --fs-tagline: 12px;
        --ls-tagline: 3px;
        --section-pad-y: 48px;
    }

    .container {
        padding-inline: 20px;
    }
}


/* --------------------------------------------------------------------------
   7. SECTION STYLES — added incrementally
   -------------------------------------------------------------------------- */

/* ========== NAV ========== */
.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    padding-block: 12px;
}

.nav__inner {
    /* container wrapper only — layout lives in .nav__card */
}

.nav__card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 13px 25px;
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 0 16px 0 16px;
}

/* ---- Logo ---- */
.nav__logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.nav__logo-mark {
    display: inline-flex;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
}

.nav__logo-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.5px;
    color: var(--color-text);
    line-height: 1;
}

/* ---- Menu (desktop) ---- */
.nav__menu {
    display: block;
}

.nav__list {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav__link {
    display: inline-block;
    padding: 8px 12px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    color: var(--color-text);
    border-radius: var(--radius-sm);
    transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

    .nav__link:hover {
        color: var(--color-green-deep);
    }

.nav__link--active {
    color: var(--color-green-deep);
}

/* ---- CTA ---- */
.nav__cta {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* ---- Burger (hidden on desktop) ---- */
.nav__burger {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    background: transparent;
}

    .nav__burger span {
        display: block;
        width: 20px;
        height: 2px;
        background-color: var(--color-text);
        border-radius: 2px;
        transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
    }

    .nav__burger[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .nav__burger[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .nav__burger[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

/* ---- Mobile menu panel ---- */
.nav__mobile {
    display: none;
}

    .nav__mobile[hidden] {
        display: none;
    }

@media (max-width: 900px) {
    .nav__menu,
    .nav__cta {
        display: none;
    }

    .nav__burger {
        display: inline-flex;
    }

    .nav__mobile {
        display: block;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(32px);
        -webkit-backdrop-filter: blur(32px);
        padding: 16px 0 24px;
    }

        .nav__mobile[hidden] {
            display: none;
        }

        .nav__mobile ul {
            display: flex;
            flex-direction: column;
            gap: 4px;
            padding-inline: 20px;
            max-width: var(--container-max);
            margin-inline: auto;
        }

        .nav__mobile .nav__link {
            display: block;
            padding: 12px 16px;
            font-size: 16px;
        }

        .nav__mobile .btn {
            width: 100%;
            margin-top: 12px;
        }

    body.nav-open {
        overflow: hidden;
    }
}

@media (max-width: 640px) {
    .nav__logo-text {
        font-size: 20px;
    }
}


/* ========== HERO ========== */
.hero {
    position: relative;
    padding-block: 80px 0;
    overflow: hidden;
    background: radial-gradient(ellipse 200% 100% at 50% 100%, #b5e8e6 0%, #81C4Ca 38%, #f5fbff 70%);
}

.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 10%;
    pointer-events: none;
    z-index: 0;
}

.hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* ---- Title ---- */
.hero__title {
    max-width: 920px;
    margin-inline: auto;
}

.hero__title-accent,
.hero__title-main {
    display: block;
}

.hero__title-accent {
    color: var(--color-accent);
    margin-bottom: 0.05em;
}

.hero__title-main {
    color: var(--color-text);
}

/* ---- Lead ---- */
.hero__lead {
    max-width: 640px;
    margin-top: 28px;
    font-size: 16px;
    line-height: 1.6;
    color: #45556c;
}

/* ---- CTAs ---- */
.hero__cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 40px;
}

/* ---- Mockup container ---- */
.hero__mockup {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin-top: 30px;
    /* Il mockup esce leggermente in basso oltre la hero per agganciarsi
     alla sezione successiva (come in Figma) */
    margin-bottom: -40px;
}

.hero__mockup-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-md);
    box-shadow: 0 24px 60px -20px rgba(29, 65, 68, 0.18), 0 8px 24px -8px rgba(29, 65, 68, 0.08);
}

/* ---- Composizione HTML del mockup hero ---- */
.hero__mockup-compose {
    position: relative;
    width: 100%;
}

.hero__mockup-dashboard {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-md);
    box-shadow: 0 24px 60px -20px rgba(29, 65, 68, 0.18), 0 8px 24px -8px rgba(29, 65, 68, 0.08);
}

.hero__mockup-glass {
    position: absolute;
    bottom: 6%;
    left: 2%;
    width: 30%;
    height: auto;
    filter: drop-shadow(0 8px 28px rgba(29, 65, 68, 0.20));
    z-index: 1;
    border-radius: var(--radius-md);
}

/* ---- Floating "completezza" badge ---- */
.hero__badge {
    position: absolute;
    top: 8%;
    right: -3%;
    width: 240px;
    padding: 18px 20px;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 24px 50px -16px rgba(29, 65, 68, 0.20), 0 4px 14px -4px rgba(29, 65, 68, 0.08);
    z-index: 2;
}

.hero__badge-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-green-deep);
    display: block;
    margin-bottom: 8px;
}

.hero__badge-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
}

.hero__badge-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 40px;
    line-height: 1;
    letter-spacing: -1.5px;
    color: var(--color-text);
}

.hero__badge-percent {
    font-size: 28px;
    font-weight: 700;
    margin-left: 2px;
}

.hero__badge-delta {
    font-family: var(--font-display);
    font-size: 11px;
    line-height: 1.3;
    color: var(--color-green-dark);
    text-align: right;
    font-weight: 500;
    padding-top: 6px;
}

.hero__badge-bar {
    position: relative;
    height: 6px;
    border-radius: var(--radius-pill);
    background-color: #e6f4f4;
    overflow: hidden;
}

    .hero__badge-bar span {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, var(--color-green-dark), var(--color-accent));
        border-radius: var(--radius-pill);
        /* animazione di riempimento al caricamento */
        animation: heroBarFill 1.4s var(--ease-out) 0.4s both;
    }

@keyframes heroBarFill {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .hero {
        padding-block-start: 56px;
    }

    .hero__badge {
        width: 200px;
        right: 0;
        top: -20px;
    }

    .hero__badge-value {
        font-size: 34px;
    }

    .hero__badge-percent {
        font-size: 24px;
    }
}

@media (max-width: 640px) {
    .hero {
        padding-block-start: 32px;
    }

    .hero__lead {
        margin-top: 20px;
        font-size: 15px;
    }

    .hero__cta {
        flex-direction: column;
        width: 100%;
        margin-top: 28px;
    }

        .hero__cta .btn {
            width: 100%;
        }

    .hero__mockup {
        margin-top: 40px;
        margin-bottom: -20px;
    }

    .hero__badge {
        width: 160px;
        padding: 14px 16px;
        top: -28px;
        right: 8px;
    }

    .hero__badge-value {
        font-size: 28px;
    }

    .hero__badge-percent {
        font-size: 20px;
    }

    .hero__badge-delta {
        font-size: 10px;
    }

    .hero__visual {
        margin-bottom: -20px;
    }
}

/* Variante "plain": titolo semplice senza accent+main */
.hero__title--plain {
    color: var(--color-text);
    margin-bottom: 24px;
}

/* Variante visual (al posto del vecchio .product-hero__visual) */
.hero__visual {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    margin-top: 32px;
    margin-bottom: -40px;
}

/* Fix per il web component <site-hero-bg> */
site-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    display: block;
}

    site-hero-bg .hero__bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }


/* ========================================================================
   HERO DASHBOARD — HTML mockup (built from Figma ProductCardsDashboard)
   Coordinate base: outer glass 1050 × 738px, inner dashboard 1024 × 724px
   ======================================================================== */

/* Responsive wrapper — JS sets height via scaleHeroDashboard() */
.hd-wrap {
    position: relative;
    width: 100%;
    /* height managed by JS */
}

/* Absolute scaler — receives transform: scale(n) from JS */
.hd-scaler {
    position: absolute;
    top: 20px; /* offset to reveal floating Completezza badge above glass */
    left: 0;
    width: 1050px;
    transform-origin: top left;
    will-change: transform;
}

/* ---- Outer glass panel ---- */
.hd-glass {
    position: relative;
    width: 1050px;
    padding: 13px 13px 1px;
    background: rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(17px);
    -webkit-backdrop-filter: blur(17px);
    border: 1px solid rgba(255, 255, 255, 0.50);
    border-radius: 0 24px 0 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    overflow: visible; /* allow floating badge above */
}

/* ---- Inner dashboard ---- */
.hd {
    position: relative;
    width: 1024px;
    height: 502px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 0 16px 16px 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

/* ---- Top bar ---- */
.hd-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 49px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 0 16px;
    background: rgba(255, 255, 255, 0.52);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    z-index: 3;
    gap: 12px;
}

.hd-top__left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.hd-logo-mark {
    flex-shrink: 0;
    display: block;
}

.hd-breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-display);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    color: #7a9ba0;
}

.hd-breadcrumb__current {
    font-weight: 700;
    color: #1d4144;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hd-top__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.hd-pub-badge {
    display: inline-flex;
    align-items: center;
    height: 23px;
    padding: 0 10px;
    background: rgba(13, 148, 136, 0.08);
    color: #0d9488;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 500;
    gap: 4px;
}

.hd-sku {
    font-family: var(--font-mono);
    font-size: 10px;
    color: #9bacb0;
}

/* ---- Left sidebar ---- */
.hd-nav {
    position: absolute;
    top: 49px;
    left: 13px;
    width: 129px;
    padding-top: 8px;
}

.hd-nav__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.hd-nav__item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border-radius: 8px;
    font-family: var(--font-display);
    font-size: 10px;
    color: #6b8e92;
    cursor: default;
    overflow: hidden;
}

    .hd-nav__item span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hd-nav__item svg {
        flex-shrink: 0;
        opacity: 0.6;
    }

.hd-nav__item--active {
    background: rgba(102, 204, 204, 0.14);
    color: #1d4144;
    font-weight: 700;
}

    .hd-nav__item--active svg {
        opacity: 1;
        stroke: #45adaa;
    }

/* ---- Glass cards — shared ---- */
.hd-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.70);
    border-radius: 0 16px 0 16px; /* Nuvora asymmetric: tr+bl only */
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
}

.hd-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px 6px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
}

.hd-card__label {
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #7a9ba0;
}

.hd-card__count {
    font-family: var(--font-mono);
    font-size: 9px;
    color: #a0b8bc;
}

/* Card: Immagine principale — left=161, top=68.5, w=233, h=396 */
.hd-card--img-main {
    left: 161px;
    top: 69px;
    width: 233px;
    height: 396px;
    background: rgba(255, 255, 255, 0.80); /* più opaca nel Figma */
}

.hd-card__media-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    overflow: hidden;
    min-height: 0;
}

.hd-card__media-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

/* Filename + dimensions at bottom of image card */
.hd-img-meta {
    padding: 0 20px 12px;
    flex-shrink: 0;
}

.hd-img-meta__name {
    font-family: var(--font-display);
    font-size: 11px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin-bottom: 2px;
}

.hd-img-meta__size {
    font-family: var(--font-display);
    font-size: 10px;
    color: #94a3b8;
    white-space: nowrap;
    display: block;
}

/* Card: Informazioni prodotto — left=434, top=69.75, w=304, h=182 */
.hd-card--info {
    left: 434px;
    top: 70px;
    width: 304px;
    height: 182px;
}

.hd-card__body {
    padding: 10px 12px;
    flex: 1;
    overflow: hidden;
}

.hd-product-name {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    color: #1d4144;
    margin-bottom: 6px;
    line-height: 1.2;
}

.hd-product-desc {
    font-family: var(--font-display);
    font-size: 10px;
    color: #6b8e92;
    line-height: 1.5;
    margin-bottom: 10px;
}

.hd-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.hd-tag {
    display: inline-block;
    padding: 2px 7px;
    background: rgba(102, 204, 204, 0.12);
    border: 1px solid rgba(102, 204, 204, 0.30);
    border-radius: 4px;
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 600;
    color: #25757c;
    letter-spacing: 0.2px;
}

/* Card: Galleria media — left=434, top=267.75, w=304, h=208 */
.hd-card--gallery {
    left: 434px;
    top: 268px;
    width: 304px;
    height: 208px;
    overflow: hidden;
}

.hd-gallery {
    display: flex;
    gap: 12px;
    padding: 8px 20px 10px;
    flex: 1;
    overflow: hidden;
}

.hd-gallery__thumb {
    border-radius: 14px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.04);
    flex: 1;
    height: 150px;
    flex-shrink: 0;
}

    .hd-gallery__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* "8 immagini · 3 documenti" meta below thumbnails */
.hd-gallery__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 20px 10px;
    flex-shrink: 0;
}

.hd-gallery__meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-display);
    font-size: 10px;
    color: #94a3b8;
    white-space: nowrap;
}

    .hd-gallery__meta-item svg {
        flex-shrink: 0;
        opacity: 0.7;
    }

/* Card: Traduzioni — left=758, top=131.25, w=233, h=183 */
.hd-card--langs {
    left: 758px;
    top: 131px;
    width: 233px;
    height: 183px;
}

.hd-langs {
    list-style: none;
    padding: 10px 21px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    overflow: hidden;
}

.hd-lang {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hd-lang__flag {
    font-size: 13px;
    line-height: 1;
    flex-shrink: 0;
    width: 14px;
}

.hd-lang__code {
    width: 22px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 500;
    color: #0f172a;
    flex-shrink: 0;
}

.hd-lang__track {
    flex: 1;
    height: 6px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 999px;
    overflow: hidden;
}

/* IT / EN — teal */
.hd-lang__fill {
    height: 100%;
    background: #0d9488;
    border-radius: 999px;
}

/* DE — cyan */
.hd-lang__fill--de {
    background: #06b6d4;
}

/* FR — amber */
.hd-lang__fill--fr {
    background: #f59e0b;
}

.hd-lang__pct {
    width: 28px;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 500;
    color: #64748b;
    text-align: right;
    flex-shrink: 0;
}

/* Card: Specifiche tecniche — left=758, top=330.5, w=233, h=145 */
.hd-card--specs {
    left: 758px;
    top: 331px;
    width: 233px;
    height: 145px;
}

.hd-specs {
    list-style: none;
    padding: 8px 21px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    overflow: hidden;
}

.hd-spec {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hd-spec__key {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 11px;
    color: #64748b;
}

    .hd-spec__key svg {
        flex-shrink: 0;
        opacity: 0.7;
    }

.hd-spec__val {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 500;
    color: #0f172a;
}

/* ---- Bottom stats bar — top=680, h=44 ---- */
.hd-bottom {
    position: absolute;
    top: 680px;
    left: 0;
    right: 0;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: transparent;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    z-index: 3;
}

.hd-stats {
    list-style: none;
    display: flex;
    gap: 16px;
    align-items: center;
}

.hd-stat {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hd-stat__lbl {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 500;
    color: #94a3b8;
}

/* Number pill badge */
.hd-stat__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 19px;
    padding: 0 6px;
    background: rgba(13, 148, 136, 0.06);
    border-radius: 4px;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    color: #0d9488;
}

.hd-bottom__ts {
    font-family: var(--font-display);
    font-size: 10px;
    color: #94a3b8;
    white-space: nowrap;
}

/* ---- Completezza scheda — floats above the glass panel ---- */
/* Figma: left=842, top=-33 rel. to dashboard → left=855, top=-20 rel. to .hd-glass */
.hd-completeness {
    position: absolute;
    top: -33px;
    left: 842px;
    width: 233px;
    height: 123px;
    padding: 20px 20px 0;
    background: rgba(255, 255, 255, 0.50);
    backdrop-filter: blur(17px);
    -webkit-backdrop-filter: blur(17px);
    border: 1px solid rgba(255, 255, 255, 0.70);
    border-radius: 0 16px 0 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    z-index: 10;
}

.hd-completeness__label {
    display: block;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 9px;
}

.hd-completeness__row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.hd-completeness__value {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1.08px;
    color: #0f172a;
}

.hd-completeness__delta {
    font-family: var(--font-display);
    font-size: 11px;
    color: #0d9488;
    font-weight: 500;
    line-height: 1.5;
    padding-bottom: 4px;
}

.hd-completeness__bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

    .hd-completeness__bar span {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, #0d9488, #06b6d4);
        border-radius: 999px;
        animation: heroBarFill 1.4s var(--ease-out) 0.6s both;
    }

/* ---- Responsive: hide dashboard on small screens, show placeholder ---- */
@media (max-width: 640px) {
    .hd-wrap {
        display: none;
    }

    .hero__mockup-img-fallback {
        display: block !important;
    }
}


/* ========== SECTION HEADER (riusabile) ========== */
.section-header {
    margin-bottom: 48px;
}

    .section-header.section-header--center {
        text-align: center;
    }

.section-header--center {
    text-align: left;
    /*max-width: 760px;*/
    margin-inline: auto;
}

.section-header__tagline {
    display: block;
    margin-bottom: 18px;
}

.section-header__title {
    color: var(--color-text);
    margin-bottom: 18px;
}

.section-header__lead {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-neutral-darker);
    opacity: 0.75;
}


/* ========== PROBLEMS ========== */
.problems {
    background-color: var(--color-bg);
}

.problems__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1080px;
    margin-inline: auto;
}

.problem-card {
    position: relative;
    padding: 32px;
    background-color: #ffffff;
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 0 rgba(9, 15, 14, 0.02), 0 12px 32px -16px rgba(29, 65, 68, 0.12), 0 2px 6px -2px rgba(29, 65, 68, 0.04);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

    .problem-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 1px 0 rgba(9, 15, 14, 0.02), 0 18px 40px -16px rgba(29, 65, 68, 0.18), 0 4px 10px -2px rgba(29, 65, 68, 0.06);
    }

.problem-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 24px;
    background-color: #e6f5f5;
    color: var(--color-green-dark);
    border-radius: 12px;
}

.problem-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: -0.5px;
    color: var(--color-text);
    margin-bottom: 12px;
}

.problem-card__text {
    font-size: 14px;
    line-height: 1.65;
    color: var(--color-neutral-darker);
    opacity: 0.7;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .problems__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .problem-card {
        padding: 28px 24px;
    }

    .problem-card__icon {
        width: 44px;
        height: 44px;
        margin-bottom: 20px;
    }

    .problem-card__title {
        font-size: 20px;
    }
}


/* ========== SOLUTION ========== */
.solution {
    background-color: var(--color-bg);
}

.solution__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: center;
}

/* ---- Visual (left) ---- */
.solution__visual {
    position: relative;
    aspect-ratio: 570 / 615;
    border-radius: 0 var(--radius-lg) 0 var(--radius-lg);
    overflow: hidden;
    /*background: linear-gradient(158.56deg, rgb(212, 245, 239) 8.49%, rgb(224, 247, 245) 50%, rgb(204, 238, 230) 91.51%);*/
}

.solution__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-lg);
}


/* ---- Content (right) ---- */
.solution__content {
    padding-inline: 40px;
}

    .solution__content .section-header {
        margin-bottom: 20px;
        text-align: left;
        max-width: none;
    }

    .solution__content .section-header__lead {
        font-size: 16.8px;
        line-height: 27.72px;
        color: #62748e;
        opacity: 1;
    }

.solution__features {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 470px;
}

.solution-feature {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.solution-feature__icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    color: var(--color-green-dark);
    border-radius: 0 var(--radius-sm) 0 var(--radius-sm);
    margin-top: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.solution-feature p {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14.5px;
    line-height: 23.2px;
    color: #45556c;
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
    .solution__inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .solution__visual {
        max-width: 540px;
        margin-inline: auto;
    }

    .solution__content {
        padding-inline: 0;
    }

        .solution__content .section-header {
            text-align: center;
        }

    .solution__features {
        margin-inline: auto;
    }
}

@media (max-width: 640px) {
    .solution-feature {
        gap: 14px;
    }

    .solution-feature__icon {
        width: 34px;
        height: 34px;
    }
}


/* ========== METRICS ========== */
.metrics {
    background-color: var(--color-bg);
    padding-block: 40px;
}

.metrics__band {
    position: relative;
    background: linear-gradient(173.88deg, var(--color-green-darkest) 8.49%, #090f0e 91.51%);
    border-radius: var(--radius-md);
    padding: 80px 60px 60px;
    overflow: hidden;
    isolation: isolate;
}

.metrics__curves {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.metrics__list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 48px;
}

.metric {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* label sopra, value sotto */
    gap: 16px;
    /*min-height: 180px;*/ /* altezza coerente per allineare i valori */
    padding-left: 24px;
    border-left: 2px solid var(--color-accent);
}


.metric__label {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-bg);
    opacity: 0.9;
}

.metric__value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(56px, 6vw, 88px); /* ridotto da 72-120 a 56-88 */
    line-height: 1;
    letter-spacing: -3px;
    color: #ccfbf1;
    white-space: nowrap;
}

.metric__percent {
    font-size: 0.85em;
    letter-spacing: -2px;
    margin-left: 2px;
}

.metrics__note {
    position: relative;
    z-index: 1;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1px;
    color: rgba(168, 230, 227, 0.4);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .metrics__band {
        padding: 60px 40px 50px;
    }

    .metrics__list {
        gap: 32px;
    }

    .metric__value {
        font-size: clamp(48px, 5.5vw, 72px);
        letter-spacing: -2.5px;
    }

    .metric {
        min-height: 150px;
    }
}

@media (max-width: 640px) {
    .metrics {
        padding-block: 24px;
    }

    .metrics__band {
        padding: 40px 28px 32px;
        border-radius: var(--radius-md);
    }

    .metrics__list {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-bottom: 24px;
    }

    .metric {
        min-height: auto; /* su mobile in colonna singola non serve */
    }

    .metric__value {
        font-size: 52px;
        letter-spacing: -2px;
    }
}


/* ========== LIFECYCLE ========== */
.lifecycle {
    background-color: var(--color-bg);
}

    .lifecycle.section {
        background-image: linear-gradient(to bottom, #F5FBFF 0%, #F5FBFF 50%, rgba(245, 251, 255, 0) 100%), url("../../Assets/Images/LifeCycleSection_Background.png");
        background-repeat: no-repeat;
        background-size: cover;
        /*background-position: center;*/
    }

/* Titolo bicolore: prima riga teal, seconda riga nera */
.lifecycle__title-accent {
    display: block;
    color: var(--color-accent);
}

/* Container card */
.lifecycle__card {
    position: relative;
    background-color: #ffffff;
    border-radius: var(--radius-lg);
    padding: 32px 40px 40px;
    box-shadow: 0 1px 0 rgba(9, 15, 14, 0.02), 0 16px 48px -24px rgba(29, 65, 68, 0.14), 0 4px 12px -4px rgba(29, 65, 68, 0.04);
}

/* ---- Tabs ---- */
.lifecycle__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 32px;
    border-bottom: 1px solid rgba(9, 15, 14, 0.06);
    padding-bottom: 8px;
}

.lifecycle__tab {
    padding: 10px 18px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    color: rgba(9, 15, 14, 0.5);
    background: transparent;
    border-radius: var(--radius-pill);
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

    .lifecycle__tab:hover {
        color: var(--color-green-deep);
    }

    .lifecycle__tab.is-active {
        background-color: #d3f1f0;
        color: var(--color-green-deep);
    }

/* ---- Panel ---- */
.lifecycle__panel {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    min-height: 360px;
}

    .lifecycle__panel.is-active {
        display: grid;
    }

.lifecycle__content {
    padding-left: 18px;
}

.lifecycle__heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -1px;
    color: var(--color-text);
    margin-bottom: 16px;
}

.lifecycle__text {
    font-size: 14px;
    line-height: 1.65;
    color: var(--color-neutral-darker);
    opacity: 0.75;
    max-width: 440px;
}

/* ---- Visual: orbit ---- */
.lifecycle__visual {
    position: relative;
    background: linear-gradient(135deg, #b9e4e1 0%, #5fb8b3 50%, #2d8d8a 100%);
    border-radius: var(--radius-md);
    /*aspect-ratio: 1 / 0.78;*/
    overflow: hidden;
}

.lifecycle__orbit {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Anelli orbitali tratteggiati */
.orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.orbit-ring--outer {
    width: 72%;
    aspect-ratio: 1;
}

.orbit-ring--inner {
    width: 44%;
    aspect-ratio: 1;
}

/* Icona centrale */
.orbit-center {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    background-color: #ffffff;
    border-radius: 18px;
    box-shadow: 0 12px 32px -8px rgba(29, 65, 68, 0.25);
}

/* Nodi orbitali */
.orbit-node {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #ffffff;
}

.orbit-node__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background-color: var(--color-white-20);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-white-20);
    border-radius: 14px;
    color: #ffffff;
}

.orbit-node__label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
}

/* Posizionamento 4 nodi (TL, TR, BL, BR) sull'anello esterno */
.orbit-node--tl {
    top: 22%;
    left: 22%;
}

.orbit-node--tr {
    top: 22%;
    right: 22%;
}

.orbit-node--bl {
    bottom: 18%;
    left: 22%;
}

.orbit-node--br {
    bottom: 18%;
    right: 22%;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .lifecycle__card {
        padding: 24px 24px 32px;
    }

    .lifecycle__tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 12px;
    }

    .lifecycle__tab {
        white-space: nowrap;
    }

    .lifecycle__panel {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .lifecycle__content {
        padding-left: 0;
    }

    .lifecycle__visual {
        max-width: 480px;
        margin-inline: auto;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .lifecycle__card {
        padding: 20px 18px 24px;
        border-radius: 28px;
    }

    .lifecycle__heading {
        font-size: 22px;
    }

    .orbit-center {
        width: 72px;
        height: 72px;
        border-radius: 14px;
    }

    .orbit-node__icon {
        width: 44px;
        height: 44px;
    }

    .orbit-node--tl {
        top: 18%;
        left: 14%;
    }

    .orbit-node--tr {
        top: 18%;
        right: 14%;
    }

    .orbit-node--bl {
        bottom: 14%;
        left: 14%;
    }

    .orbit-node--br {
        bottom: 14%;
        right: 14%;
    }
}


/* ========== WHY ECARDS ========== */
.why {
    background-color: var(--color-bg);
}

.why__inner {
    display: grid;
    /* sx: header fisso, dx: griglia features — proporzioni da Figma */
    grid-template-columns: 353px 1fr;
    gap: 50px;
    align-items: start;
}

/* ---- Header (left) ---- */
.why__header {
    position: sticky;
    top: 110px; /* sotto la nav */
    align-self: start;
}

    .why__header .tagline {
        display: block;
        margin-bottom: 20px;
    }

.why__title {
    color: var(--color-text);
    margin-bottom: 20px;
}

.why__lead {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-neutral-darker);
    opacity: 0.75;
    max-width: 280px;
}

/* ---- Grid (right) ---- */
.why__grid {
    display: grid;
    grid-template-columns: repeat(2, 320px);
    column-gap: 74px;
    row-gap: 56px;
}

.why-feature {
    display: flex;
    flex-direction: column;
}

.why-feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-green-deep);
    margin-bottom: 18px;
}

.why-feature__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.35;
    letter-spacing: -0.3px;
    color: var(--color-text);
    margin-bottom: 12px;
}

.why-feature__text {
    font-size: 14px;
    line-height: 1.65;
    color: var(--color-neutral-darker);
    opacity: 0.7;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .why__inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .why__header {
        position: static;
    }

    .why__lead {
        max-width: 460px;
    }

    /* su schermi medi le colonne fisse 320px diventano flessibili */
    .why__grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 40px;
    }
}

@media (max-width: 640px) {
    .why__grid {
        grid-template-columns: 1fr;
        row-gap: 40px;
        column-gap: 0;
    }

    .why-feature__icon {
        margin-bottom: 14px;
    }

    .why-feature__title {
        font-size: 17px;
    }
}


/* ========== INTEGRATIONS ========== */
.integrations {
    background-color: var(--color-bg);
}

    .integrations .section-header {
        margin-bottom: 40px;
    }

/* ---- Scroller edge-to-edge ---- */
.integrations__scroller {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* fade laterali per suggerire continuità del flusso */
    -webkit-mask-image: linear-gradient( to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100% );
    mask-image: linear-gradient( to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100% );
    margin-bottom: 48px;
}

    .integrations__scroller .integrations__track {
        animation: integrationsScroll 38s linear infinite !important;
    }

.integrations__track {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 8px 24px;
    width: max-content;
    will-change: transform;
    animation: integrationsScroll 38s linear infinite;
}

    .integrations__track:hover {
        animation-play-state: paused;
    }

@keyframes integrationsScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .integrations__track {
        animation: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }
}

/* Se preferisci scroller manuale touch invece dell'autoplay,
   sostituisci le 2 regole sopra con:
   .integrations__track { overflow-x: auto; scroll-snap-type: x mandatory; }
*/

.integration-card {
    flex-shrink: 0;
    width: 200px;
    height: 72px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 16px 0 16px 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    scroll-snap-align: start;
}

    .integration-card img {
        max-width: 100%;
        max-height: 48px;
        object-fit: contain;
        display: block;
        user-select: none;
    }

/* ---- CTA bottom ---- */
.integrations__cta {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.integrations__cta-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -1px;
    color: var(--color-text);
}

.integrations__cta-pill {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px 12px 22px;
    background-color: #ffffff;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 13px;
    color: var(--color-neutral-darker);
    box-shadow: 0 1px 0 rgba(9, 15, 14, 0.02), 0 6px 18px -8px rgba(29, 65, 68, 0.10);
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

    .integrations__cta-pill:hover {
        transform: translateY(-1px);
        box-shadow: 0 1px 0 rgba(9, 15, 14, 0.02), 0 10px 28px -8px rgba(29, 65, 68, 0.18);
    }

    .integrations__cta-pill svg {
        flex-shrink: 0;
        color: var(--color-green-dark);
        background-color: #e6f5f5;
        border-radius: 50%;
        padding: 6px;
        width: 28px;
        height: 28px;
    }

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .integration-card {
        width: 150px;
        height: 60px;
        padding: 8px 12px;
    }

    .integrations__cta-title {
        font-size: 22px;
    }

    .integrations__cta-pill {
        font-size: 12px;
        padding: 10px 14px 10px 18px;
        gap: 10px;
    }

        .integrations__cta-pill svg {
            width: 24px;
            height: 24px;
            padding: 5px;
        }
}


/* ========== TARGET CARDS ========== */
.targets {
    background-color: var(--color-bg);
}

/* ---- Header ---- */
.targets__header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 32px;
    margin-bottom: 48px;
}

.targets__title {
    color: var(--color-text);
    max-width: 640px;
}

.targets__lead {
    max-width: 260px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-neutral-darker);
    opacity: 0.65;
    text-align: right;
}

/* ---- Grid ---- */
.targets__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* ---- Card ---- */
.target-card {
    position: relative;
    aspect-ratio: 215 / 380;
    border-radius: var(--radius-md);
    overflow: hidden;
    isolation: isolate;
    background-color: var(--color-green-darkest);
    cursor: default;
    transition: transform var(--dur-base) var(--ease-out);
}

    .target-card:hover {
        transform: translateY(-4px);
    }

.target-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Gradient overlay per leggibilità testo bianco in basso */
.target-card__overlay {
    position: absolute;
    inset: 0;
    background:
    /* curva decorativa in alto (sottile linea bianca semitrasparente) */
    radial-gradient( circle at 100% 0%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.18) 50%, transparent 50.5% ),
    /* gradient scuro dal basso */
    linear-gradient( 180deg, rgba(9, 15, 14, 0.15) 0%, rgba(9, 15, 14, 0.25) 35%, rgba(9, 15, 14, 0.78) 75%, rgba(9, 15, 14, 0.92) 100% );
    background-size: 200% 200%, 100% 100%;
    background-position: 100% 0%, 0 0;
    z-index: 1;
    pointer-events: none;
}

/* Badge numerico */
.target-card__number {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.5px;
}

/* Body in basso */
.target-card__body {
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 24px;
    z-index: 2;
    color: #ffffff;
}

.target-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.6px;
    margin-bottom: 12px;
}

.target-card__text {
    font-size: 12px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.75);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .targets__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .target-card {
        aspect-ratio: 280 / 360;
    }
}

@media (max-width: 640px) {
    .targets__header {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 32px;
    }

    .targets__lead {
        text-align: left;
        max-width: 100%;
    }

    .targets__grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .target-card {
        aspect-ratio: 320 / 280;
    }

    .target-card__title {
        font-size: 20px;
    }
}


/* ========== FAQ ========== */
.faq {
    background-color: var(--color-bg);
}

/* ---- Header (stessa struttura bipartita di Targets) ---- */
.faq__header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 32px;
    margin-bottom: 56px;
}

.faq__title {
    color: var(--color-text);
}

.faq__lead {
    max-width: 280px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-neutral-darker);
    opacity: 0.65;
    text-align: right;
}

/* ---- List ---- */
.faq__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---- Item ---- */
.faq-item {
    background-color: #ffffff;
    border: 1px solid rgba(9, 15, 14, 0.06);
    border-radius: var(--radius-pill); /* pill shape closed */
    overflow: hidden;
    transition: border-radius var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

    .faq-item[open] {
        border-radius: 28px; /* angoli più morbidi quando aperto */
        box-shadow: 0 12px 32px -16px rgba(29, 65, 68, 0.12);
    }

    /* nascondi il marker di default del <details> */
    .faq-item summary::-webkit-details-marker {
        display: none;
    }

    .faq-item summary {
        list-style: none;
    }

.faq-item__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 12px 18px 28px;
    cursor: pointer;
    user-select: none;
}

.faq-item__q {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
    color: var(--color-text);
}

.faq-item__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #d3f1f0;
    color: var(--color-green-deep);
    border-radius: 50%;
    transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.faq-item[open] .faq-item__icon {
    transform: rotate(180deg);
}

.faq-item__body {
    padding: 0 28px 22px;
    animation: faqOpen var(--dur-slow) var(--ease-out);
}

    .faq-item__body p {
        font-size: 14px;
        line-height: 1.7;
        color: var(--color-neutral-darker);
        opacity: 0.75;
        max-width: 760px;
    }

@keyframes faqOpen {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

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

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .faq__header {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 32px;
    }

    .faq__lead {
        text-align: left;
        max-width: 100%;
    }

    .faq-item__head {
        padding: 16px 10px 16px 20px;
        gap: 12px;
    }

    .faq-item__q {
        font-size: 14px;
    }

    .faq-item__icon {
        width: 32px;
        height: 32px;
    }

    .faq-item__body {
        padding: 0 20px 18px;
    }
}


/* ========== FOOTER ========== */
.footer {
    margin-top: 80px;
    padding: 12px;
    background: transparent; /* o il colore della pagina */
}

.footer__card {
    background: radial-gradient(ellipse 60% 80% at 95% -10%, #c8dff0 0%, transparent 50%), radial-gradient(ellipse 80% 70% at 60% 30%, #3aabaa 0%, transparent 60%), #2a6b6b; /* base teal scuro, non grigio */
    border-radius: var(--radius-lg);
    overflow: hidden;
    color: #f5fbff;
}

.footer__inner {
    padding-block: 80px 12px;
}

/* ---- Grid 3 colonne ---- */
.footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 48px;
    align-items: start;
    padding-bottom: 64px;
}

/* ---- Brand ---- */
.footer__brand {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.footer__logo-svg {
    width: 206px;
    height: auto;
}

.footer__logo-mark {
    display: inline-flex;
    width: 44px;
    height: 44px;
}

.footer__logo-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 36px;
    line-height: 1;
    letter-spacing: -1px;
    color: #b4d3ef;
}

.footer__tagline {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(245, 251, 255, 0.6);
    padding-left: 58px; /* allineato sotto la wordmark, oltre il mark */
}

/* ---- Menu / Contatti ---- */
.footer__menu ul,
.footer__contacts {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer__col-label {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 14px;
    color: rgba(245, 251, 255, 0.55);
    margin-bottom: 4px;
}

.footer__link {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 14px;
    color: #f5fbff;
    transition: color var(--dur-fast) var(--ease-out);
}

    .footer__link:hover {
        color: var(--color-accent);
    }

.footer__contacts {
    font-style: normal; /* reset address default italic */
}

.footer__address {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(245, 251, 255, 0.85);
}

/* ---- Bottom row ---- */
.footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 24px;
    border-top: 1px solid #b4d3ef;
}

.footer__copy {
    font-family: var(--font-display);
    font-size: 11px;
    color: rgba(245, 251, 255, 0.55);
}

.footer__legal {
    display: flex;
    gap: 20px;
}

    .footer__legal .footer__link {
        font-size: 11.5px;
        color: rgba(245, 251, 255, 0.75);
    }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .footer {
        padding: 8px;
    }

    .footer__card {
        border-radius: 0 28px 0 28px;
    }

    .footer__inner {
        padding-block: 56px 16px;
    }

    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        padding-bottom: 48px;
    }

    .footer__brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .footer {
        margin-top: 56px;
        padding: 6px;
    }

    .footer__card {
        border-radius: 0 20px 0 20px;
    }

    .footer__inner {
        padding-block: 40px 12px;
    }

    .footer__grid {
        grid-template-columns: 1fr;
        gap: 32px;
        padding-bottom: 32px;
    }

    .footer__tagline {
        padding-left: 50px;
        font-size: 10px;
    }

    .footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .footer__copy {
        line-height: 1.5;
    }

    .footer__legal {
        gap: 16px;
    }
}


/* ==========================================================================
   PRODUCT PAGE
   ========================================================================== */



/* ========== PRODUCT HERO ========== */


site-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    display: block;
}

    site-hero-bg .hero__bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }



/* ---------- Product-Hero Visual Scaler (ph-*) ----------
   Base frame: 1024 × 446 px (Figma).
   Cards extend ~8 px above frame → scaler offset-top: 8 px → BASE_H = 454.
   JS sets transform:scale() + wrap height.
   ------------------------------------------------------- */
.ph-wrap {
    position: relative;
    width: 100%;
    /* height set by JS */
}

.ph-scaler {
    position: absolute;
    top: 8px; /* room for cards extending above the frame */
    left: 0;
    width: 1024px;
    transform-origin: top left;
    will-change: transform;
}

/* Clipped container: 1024 × 446 */
.ph-inner {
    position: relative;
    width: 1024px;
    height: 446px;
    border-radius: 16px;
    overflow: visible;
    isolation: isolate;
}

/* ---- Background gradient + ellipse overlays ---- */
.ph-bg {
    /*position: absolute;*/
    inset: 0;
    background: radial-gradient(ellipse 110% 90% at 50% 20%, #d4f0f0 0%, #b2e2e3 40%, #8fcacb 100%);
    z-index: 0;
}

.ph-bg__img {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.ph-bg__img--1 {
    left: -342px;
    top: 164px;
    width: 1654px;
    opacity: 0.7;
}

.ph-bg__img--2 {
    left: -315px;
    top: 163px;
    width: 1654px;
    opacity: 0.45;
    transform: scaleY(-1);
}

/* ---- Large central glass panel (710 × 454, mostly below fold) ---- */
.ph-panel {
    position: absolute;
    left: 157px;
    top: 195px;
    width: 710px;
    height: 454px;
    background: rgba(255, 255, 255, 0.40); /* prima era 0.60 */
    backdrop-filter: blur(27px);
    -webkit-backdrop-filter: blur(27px);
    border: 1px solid rgba(255, 255, 255, 0.50); /* opzionale: anche il bordo */
    border-radius: 0 40px 0 40px;
    box-shadow: 0 44px 43px rgba(3, 3, 13, 0.30);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 20px;
    overflow: hidden;
    z-index: 10;
}

.ph-panel__icon {
    width: 278px;
    height: 289px;
    opacity: 0.10;
    transform: rotate(180deg);
    flex-shrink: 0;
}

/* ---- Product cards (fanned, 4 items) ---- */
.ph-card {
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(15px) saturate(80%) brightness(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(80%) brightness(1.1);
    border: 1px solid rgba(255, 255, 255, 0.90);
    border-radius: 0 40px 0 40px;
    box-shadow: 0 12px 40px rgba(3, 3, 13, 0.10), 0 1px 0 rgba(255, 255, 255, 1.0) inset;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: hidden;
    isolation: isolate;
}

/* Card 1 — AirPods: contain per vederlo intero, scala al 100% del padding */
.ph-card--1 img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

/* Card 2 — TV: orizzontale, cover centrato */
.ph-card--2 img {
    object-fit: cover;
    width: 120%;
    height: 120%;
    margin: -10%;
}

/* Card 3 — Frigo: verticale, contain */
.ph-card--3 img {
    object-fit: contain;
    width: 90%;
    height: 90%;
}

/* Card 4 — Camera: cover centrato */
.ph-card--4 img {
    object-fit: cover;
    width: 115%;
    height: 115%;
    margin: -7.5%;
}

/* Figma positions: left / top adjusted +8 so top-0 of ph-inner = top-8 of Figma */
.ph-card--1 {
    left: 193px;
    top: 0px;
    transform: rotate(-3.48deg) skewX( 1.12deg);
    z-index: 9;
}

.ph-card--2 {
    left: 339px;
    top: 20px;
    transform: rotate(-1.74deg) skewX( 0.56deg);
    z-index: 8;
    padding: 0px;
}

.ph-card--3 {
    left: 477px;
    top: 50px;
    transform: rotate( 1.74deg) skewX(-0.56deg);
    z-index: 7;
    padding: 5px;
}

.ph-card--4 {
    left: 615px;
    top: 90px;
    transform: rotate( 3.48deg) skewX(-1.12deg);
    z-index: 6;
    padding: 0px;
}

/* ---- Channel publication cards (stacked diagonally, left side) ---- */
.ph-channel {
    position: absolute;
    width: 251px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.92); /* era 0.75 */
    border-radius: 0 24px 0 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); /* ombra leggermente più marcata */
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 3;
}

/* +8 px vertical offset applied */
.ph-channel--1 {
    left: 56px;
    top: 177px;
    z-index: 13;
}

.ph-channel--2 {
    left: 89px;
    top: 223px;
    z-index: 14;
}

.ph-channel--3 {
    left: 121px;
    top: 268px;
    z-index: 15;
}

.ph-channel__logo {
    width: 16px;
    height: 16px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f5fbff;
}

    .ph-channel__logo img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* cover → contain */
        display: block;
    }

.ph-channel__name {
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: #4c5556;
    flex: 1;
}

.ph-channel__badge {
    background: rgba(13, 148, 136, 0.10);
    font-family: var(--font-mono);
    font-size: 10px;
    color: #4c5556;
    padding: 4px 10px;
    border-radius: 10px;
    white-space: nowrap;
}

/* ---- Size card (right side) ---- */
.ph-size {
    position: absolute;
    left: 742px;
    top: 270px;
    width: 217px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 0 24px 0 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    z-index: 15;
}

.ph-size__label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.45px;
    text-transform: uppercase;
    color: #4c5556;
    line-height: 1.4;
}

.ph-size__row {
    display: flex;
    align-items: center;
    gap: 18px;
}

.ph-size__dims {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #4c5556;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* ---- Responsive ---- */



/* ========== PRODUCT POINT 1 (variante .solution senza overlay verde) ========== */
/* Riutilizza tutta la struttura .solution__* della home.
   Variante --plain: il visual è solo un contenitore neutro per un'immagine
   composita che ha già il proprio sfondo e style. */
.solution__visual--plain {
    background-color: transparent;
    aspect-ratio: auto;
    border-radius: 0;
    overflow: visible;
    /* Se l'immagine manca il wrapper non lascia un buco enorme */
    min-height: 0;
}

    .solution__visual--plain .solution__image {
        position: static;
        width: 100%;
        height: auto;
        object-fit: contain;
        border-radius: var(--radius-lg);
    }


/* ========== PRODUCT POINT 2 (variante .solution invertita) ========== */
/* Stessa struttura ma colonne invertite via CSS, ordine HTML naturale per a11y.
   .solution__content sta prima nel DOM, lo posiziono a sinistra (col 1)
   .solution__visual sta dopo nel DOM, lo posiziono a destra (col 2). */
.solution--reversed .solution__content {
    order: 1;
}

.solution--reversed .solution__visual {
    order: 2;
}

.solution.solution--reversed.section {
    padding-top: 0px !important;
}

/* Su mobile manteniamo ordine "immagine prima del testo" come in Point 1?
   No, qui il contenuto viene prima nel DOM, quindi su mobile viene prima nel
   layout, che è coerente: leggi il titolo, poi vedi l'immagine illustrativa. */
@media (max-width: 960px) {
    .solution--reversed .solution__content,
    .solution--reversed .solution__visual {
        order: initial;
    }
}


/* ========== PRODUCT TOGGLE SECTION ========== */
.product-toggle {
    position: relative;
    background-color: var(--color-bg);
    overflow: hidden;
}

    .product-toggle.section {
        background-color: var(--color-bg);
    }

        .product-toggle.section::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: url("../../Assets/Images/ToggleProblemsSection.png");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 1;
            transition: opacity 0.4s ease;
            z-index: 0;
            pointer-events: none;
        }

.product-toggle--off.section::before {
    opacity: 0;
}

/* Aura teal sfocata di sfondo, centro-leggermente-sx */
.product-toggle__aura {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 720px;
    height: 720px;
    background: radial-gradient( circle at center, rgba(102, 204, 204, 0.45) 0%, rgba(102, 204, 204, 0.20) 30%, rgba(102, 204, 204, 0) 60% );
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}

/* ---- Header con toggle inline ---- */
.product-toggle__header {
    position: relative;
    z-index: 1;
    margin-bottom: 40px;
}

    .product-toggle__header .tagline {
        display: block;
        margin-bottom: 18px;
    }

.product-toggle__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    color: var(--color-text);
    /* L'® piccolo in alto */
    line-height: 1.1;
}

    .product-toggle__title sup {
        font-size: 0.4em;
        vertical-align: super;
        font-weight: 400;
    }

/* ---- Toggle switch inline nel titolo ---- */
.toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 62px;
    height: 34px;
    padding: 0;
    border-radius: var(--radius-pill-toggle);
    background-color: var(--color-green-dark);
    cursor: pointer;
    transition: background-color var(--dur-base) var(--ease-out);
    /* Allineamento ottico alle lettere maiuscole del titolo */
    vertical-align: middle;
    margin-block: 4px;
}

.toggle-switch__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 28px;
    height: 28px;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
    transition: transform var(--dur-base) var(--ease-out);
}

.toggle-switch[aria-checked="true"] .toggle-switch__thumb {
    transform: translateX(28px);
}

.toggle-switch[aria-checked="false"] {
    background-color: rgba(9, 15, 14, 0.18);
}

.toggle-switch:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* ---- Toggle states: testi e icone ---- */
.text--off,
.icon--off {
    display: none;
}

.product-toggle--off .text--on,
.product-toggle--off .icon--on {
    display: none;
}

.product-toggle--off .text--off,
.product-toggle--off .icon--off {
    display: inline;
}

/* ---- Stato OFF: cards desaturate ---- */
.product-toggle--off .glass-card {
    background: var(--color-surface, #f5f6f8);
    border-color: rgba(0, 0, 0, 0.06);
    transition: background 0.35s ease, border-color 0.35s ease;
}

.product-toggle--off .glass-card__icon {
    color: #9aa0a6;
    background: #ebebeb;
}

.product-toggle--off .glass-card__text {
    color: var(--color-text-muted, #6b7280);
}

/* ---- Glass cards grid ---- */
.glass-cards {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.glass-card {
    position: relative;
    padding: 36px 32px;
    background-color: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 24px 60px -28px rgba(29, 65, 68, 0.20), 0 4px 16px -6px rgba(29, 65, 68, 0.06);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

    .glass-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 32px 70px -28px rgba(29, 65, 68, 0.28), 0 6px 20px -6px rgba(29, 65, 68, 0.08);
    }

.glass-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 22px;
    background-color: #ffffff;
    color: var(--color-green-dark);
    border-radius: 10px;
    box-shadow: 0 4px 12px -4px rgba(29, 65, 68, 0.10);
}

.glass-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
    color: var(--color-text);
    margin-bottom: 14px;
}

.glass-card__text {
    font-size: 14px;
    line-height: 1.65;
    color: var(--color-neutral-darker);
    opacity: 0.75;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .product-toggle__aura {
        width: 480px;
        height: 480px;
    }

    .glass-cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .glass-card {
        padding: 28px 24px;
    }

    .glass-card__icon {
        width: 36px;
        height: 36px;
        margin-bottom: 18px;
    }

    .toggle-switch {
        width: 52px;
        height: 28px;
    }

    .toggle-switch__thumb {
        width: 22px;
        height: 22px;
    }

    .toggle-switch[aria-checked="true"] .toggle-switch__thumb {
        transform: translateX(24px);
    }
}

@media (max-width: 480px) {
    .product-toggle__title {
        gap: 10px;
    }
}


/* ========== PRODUCT RESULTS (variante .metrics con titolo H1 sopra) ========== */
.metrics__title {
    color: var(--color-text);
    margin-bottom: 32px;
}

/* I numeri "Risultati" sono più lunghi/strutturati (+400.000, "6 collegati",
   +20) — i value Satoshi 88px diventano troppo larghi su tablet/mobile. Ridimensiono. */
.metrics--with-title .metric__value {
    /* fluid: scala fra 48px e 80px in base alla larghezza */
    font-size: clamp(48px, 7.5vw, 80px);
    letter-spacing: -3px;
}

    .metrics--with-title .metric__value .metric__percent {
        /* non usato qui, ma se servisse riallineamento */
        font-size: 0.72em;
        letter-spacing: -1.5px;
    }

@media (max-width: 900px) {
    .metrics--with-title .metric__value {
        letter-spacing: -2px;
    }
}

@media (max-width: 640px) {
    .metrics__title {
        margin-bottom: 20px;
    }

    .metrics--with-title .metric__value {
        font-size: clamp(40px, 11vw, 56px);
        letter-spacing: -1.5px;
    }
}


/* ========== TESTIMONIAL / CASE STUDY ========== */
.testimonial {
    background-color: var(--color-bg);
}

/* ---- Header bipartito (stessa struttura di FAQ/Targets) ---- */
.testimonial__header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 32px;
    margin-bottom: 40px;
}

.testimonial__title {
    color: var(--color-text);
}

.testimonial__lead {
    max-width: 280px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-neutral-darker);
    opacity: 0.65;
    text-align: right;
}

/* ---- Case card ---- */
.case-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: #0f2a2c; /* fallback se l'immagine non carica */
    color: #ffffff;
}

/* Foto sfondo sfocata — leggermente più grande per evitare bordi blur */
.case-card__bg {
    position: absolute;
    inset: -16px -22px;
    z-index: 0;
    pointer-events: none;
}

    .case-card__bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        filter: blur(5px);
    }

/* Overlay gradient + contenitore relativo */
.case-card__inner {
    position: relative;
    z-index: 1;
    border-radius: 0 var(--radius-md) 0 var(--radius-md);
    overflow: hidden;
    background: linear-gradient(111.73deg, rgba(29,65,68,0.10) 0%, rgba(29,65,68,0.60) 49.5%, rgba(29,65,68,0.70) 100%);
}

/* Cerchi decorativi */
.case-card__curves {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Wrapper contenuto con padding */
.case-card__content {
    position: relative;
    z-index: 1;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ---- Riga superiore: logo + badge ---- */
.case-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.case-card__brand {
    flex-shrink: 0;
    max-width: 145px;
}

    .case-card__brand img {
        max-width: 100%;
        max-height: 100px;
        width: auto;
        height: auto;
        display: block;
    }

/* ---- Badge "Caso studio" ---- */
.case-card__badge {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 16px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-radius: var(--radius-pill);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---- Body split ---- */
.case-card__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

/* Colonna sinistra: glass panel */
.case-card__col--left {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border-radius: 0 var(--radius-md) 0 var(--radius-md);
    align-self: stretch;
}

.case-card__headline {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -0.96px;
    color: #fcfcfc;
}

.case-card__intro {
    font-size: 19.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.90);
}

/* Colonna destra: testo libero */
.case-card__col--right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.case-card__text {
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.90);
}

/* ---- Chip list ---- */
.case-card__chips {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .case-card__chips li {
        display: inline-flex;
        align-items: center;
        align-self: flex-start;
        height: 23px;
        padding: 0 12px;
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: #f5fbff;
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        border-radius: 10px;
        white-space: nowrap;
    }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .case-card__body {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .case-card__col--left {
        padding: 24px;
    }

    .case-card__headline {
        font-size: 26px;
    }

    .case-card__intro {
        font-size: 16px;
    }
}

@media (max-width: 640px) {
    .testimonial__header {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 32px;
    }

    .testimonial__lead {
        text-align: left;
        max-width: 100%;
    }

    .case-card__content {
        padding: 24px;
        gap: 24px;
    }

    .case-card__brand {
        max-width: 110px;
    }

    .case-card__headline {
        font-size: 22px;
    }

    .case-card__chips li {
        font-size: 9px;
        white-space: normal;
        padding: 7px 12px;
    }
}


/* ==========================================================================
   FALLBACK PER IMMAGINI MANCANTI (gestito via JS in Content/JS/img-fallback.js)
   Quando un asset non è stato ancora esportato dal designer, lo sostituiamo
   con un placeholder grazioso così la pagina resta leggibile.
   ========================================================================== */
.img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-height: 220px;
    padding: 40px 32px;
    background: repeating-linear-gradient( 135deg, #e8f4f4 0, #e8f4f4 12px, #d8ecec 12px, #d8ecec 24px );
    border: 1px dashed rgba(37, 117, 124, 0.4);
    border-radius: var(--radius-lg);
    color: var(--color-green-deep);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: center;
    box-sizing: border-box;
}

.img-placeholder__icon {
    width: 36px;
    height: 36px;
    opacity: 0.6;
}

.img-placeholder__label {
    opacity: 0.7;
}

.img-placeholder__filename {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: var(--color-text);
    text-transform: none;
    font-family: var(--font-display);
    opacity: 0.85;
}


/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */


/* ========== ABOUT HERO ========== */
.about-hero {
    position: relative;
    padding-block: 80px 32px;
    overflow: hidden;
    background: radial-gradient(ellipse 200% 100% at 50% 100%, #b5e8e6 0%, #97D1D2 25%, #f5fbff 66%);
    /*background-image: url("../../Assets/Images/CompanySectionBackground.png");*/
    background-repeat: no-repeat;
    background-size: cover;
}

/* Background: texture photo + teal blend overlay + radial fade */
.about-hero__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

    .about-hero__bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.06;
        display: block;
    }

/* Glow blob teal bottom-right */
.about-hero__glow {
    position: absolute;
    width: 700px;
    height: 700px;
    right: -208px;
    bottom: -100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(102, 204, 204, 1) 0%, rgba(77, 153, 153, 0.75) 17.5%, rgba(51, 102, 102, 0.5) 35%, rgba(26, 51, 51, 0.25) 52.5%, transparent 70%);
    filter: blur(80px);
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
}

/* Decorative rounded-rect outline shape, top-right */
.about-hero__decor {
    position: absolute;
    right: 0;
    top: 0;
    width: 651px;
    height: 651px;
    pointer-events: none;
    z-index: 0;
    background: transparent;
    border-radius: 0 0 0 var(--radius-lg);
    border: 1.5px solid rgba(180, 211, 239, 0.35);
    transform: translate(30%, -20%);
}

.about-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.about-hero__text {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.about-hero__title {
    color: var(--color-text);
    font-size: 52px;
    line-height: 1.08;
    letter-spacing: -1.56px;
    max-width: 750px;
}

.about-hero__lead {
    font-size: 18.4px;
    line-height: 1.7;
    color: #62748e;
    max-width: 825px;
}

    .about-hero__lead strong {
        font-weight: 700;
        color: var(--color-text);
    }

.about-hero__photo {
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: #d6ecec;
    height: 384px;
    position: relative; /* aggiunto */
    z-index: 1; /* aggiunto */
}

    .about-hero__photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        /* z-index: 1; rimosso, inutile senza position */
    }


/* Container immagine destra: foto Nuvora con overlay teal */
.about-origins__media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    /*height: 615px;*/
    max-width: 100%;
}

    .about-origins__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        /*z-index: 0;*/
        z-index: 1;
    }


/* ========== ABOUT ORIGINS (split text + Nuvora brand image) ========== */
.about-origins {
    background-color: var(--color-bg);
    padding-block: 64px 32px;
}

.about-origins__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
}

.about-origins__text {
    padding-inline: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
}

.about-origins__title {
    color: var(--color-text);
    max-width: 460px;
}

.about-origins__lead {
    font-size: 16.8px;
    line-height: 1.65;
    color: #62748e;
    max-width: 432px;
}

.about-hero__logo-decor {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    padding: 24px;
}

    .about-hero__logo-decor img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center right;
        display: block;
        mix-blend-mode: multiply;
        filter: invert(1);
        opacity: 0.25;
        z-index: 0;
    }

/* ========== ABOUT STORY (Origini Ecards + Mission + Vision) ========== */
.about-story {
    background-color: var(--color-bg);
    background-image: url("../../Assets/Images/ProductsSectionBackground.png");
    background-repeat: no-repeat;
    background-size: cover;
}

/* Card dark principale: gradiente teal scuro */
.origins-card {
    display: grid;
    grid-template-columns: 1fr 538px;
    gap: 20px;
    background: linear-gradient(113.06deg, rgba(29, 65, 68, 0.7) 0%, #66cccc 100%);
    border-radius: var(--radius-md);
    overflow: hidden;
    padding: 32px;
    margin-bottom: 32px;
    min-height: unset; /* lascia che sia il contenuto a determinare l'altezza */
    align-items: stretch;
}

/* Glass panel sinistro: testo + titolo */
.origins-card__glass {
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    background: rgba(255, 255, 255, 0.10);
    border-radius: 0 var(--radius-md) 0 var(--radius-md);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-self: stretch;
    justify-content: center;
}

.origins-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -1.32px;
    color: #fcfcfc;
}

.origins-card__body {
    font-size: 19px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.90);
}

/* Visual destro: glow + due logo-card flottanti */
.origins-card__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: unset; /* rimuove il forzamento */
}

    .origins-card__visual img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        max-height: 450px;
    }

/* Glow blob al centro del visual */
.origins-card__glow {
    position: absolute;
    width: 227px;
    height: 227px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(102, 204, 204, 0.6) 0%, rgba(102, 204, 204, 0.3) 40%, transparent 70%);
    filter: blur(24px);
    pointer-events: none;
    z-index: 0;
}

.origins-logo {
    position: absolute;
    width: 207px;
    height: 207px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-shadow: 0 4px 43px rgba(3, 3, 13, 0.25);
    margin: 0;
}

.origins-logo--top {
    background: #ffffff;
    top: 5%;
    left: 5%;
    z-index: 2;
}

.origins-logo--bottom {
    background: #ffffff;
    bottom: 5%;
    right: 5%;
    z-index: 1;
}

.origins-logo img {
    max-width: 80%;
    max-height: 70%;
    object-fit: contain;
    display: block;
}

/* Wordmark Ecat® — aspect ratio 169:56, non va stirato */
.origins-logo--bottom img {
    width: 140px;
    height: auto;
    max-width: none;
    max-height: none;
}

/* Ghost card sfondo sfocato top-right */
.origins-card__bg-ghost {
    position: absolute;
    width: 207px;
    height: 207px;
    background: #ffffff;
    border-radius: var(--radius-lg);
    filter: blur(10px);
    opacity: 0.35;
    top: -18%;
    right: -12%;
    transform: rotate(8deg);
    pointer-events: none;
    z-index: 0;
}

/* Mission + Vision cards */
.mission-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.mission-card {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.50);
    border: 1px solid rgba(255, 255, 255, 0.70);
    border-radius: var(--radius-lg);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    box-shadow: 0 4px 43px rgba(3, 3, 13, 0.05);
}

.mission-card__icon {
    background: #ffffff;
    border-radius: 0 8px 0 8px;
    padding: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: flex-start;
}

    .mission-card__icon img {
        width: 22px;
        height: 22px;
        display: block;
    }

.mission-card__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mission-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.3;
    letter-spacing: -0.52px;
    color: var(--color-text);
}

.mission-card__text {
    font-size: 14px;
    line-height: 1.65;
    color: var(--color-neutral-darker);
}

.mission-card__tagline {
    margin-bottom: 4px;
}


/* ========== ABOUT VALUES (2x2 grid) ========== */
.about-values {
    background-color: var(--color-bg);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding-inline: 80px;
}

.value-card {
    position: relative;
    padding: 32px 33px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.70);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

    .value-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 32px rgba(0, 0, 0, 0.08);
    }

.value-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 16px;
    background: #ffffff;
    border-radius: 0 8px 0 8px;
}

    .value-card__icon img {
        width: 22px;
        height: 22px;
        display: block;
    }

.value-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: -0.2px;
    color: var(--color-text);
    margin-bottom: 12px;
}

.value-card__text {
    font-size: 14px;
    line-height: 1.65;
    color: #62748e;
}


/* ========== ABOUT CAREERS ========== */
.about-careers {
    background-color: var(--color-bg);
    border-top: 1px solid rgba(3, 3, 13, 0.10);
}

.about-careers__cta {
    text-align: center;
    margin-top: 8px;
}


/* ==========================================================================
   ABOUT — RESPONSIVE
   ========================================================================== */

@media (max-width: 960px) {
    .about-origins__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-origins__text {
        padding-inline: 0;
    }

    .about-origins__title,
    .about-origins__lead {
        max-width: 100%;
    }

    .about-origins__media {
        height: 400px;
        max-width: 100%;
    }

    .origins-card {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 28px;
    }

    .origins-card__title {
        font-size: 32px;
    }

    .origins-card__body {
        font-size: 16px;
    }

    .origins-card__visual {
        min-height: 300px;
    }

    .origins-logo {
        width: 160px;
        height: 160px;
    }

    .mission-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .values-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding-inline: 0;
    }

    .value-card {
        padding: 28px 24px;
    }

    .value-card__icon {
        width: 44px;
        height: 44px;
        margin-bottom: 16px;
    }

    .value-card__title {
        font-size: 18px;
    }
}

@media (max-width: 640px) {
    .about-hero {
        padding-block: 100px 24px;
    }

    .about-hero__inner {
        gap: 24px;
    }

    .about-hero__title {
        font-size: 36px;
        letter-spacing: -1px;
    }

    .about-hero__lead {
        font-size: 16px;
    }

    .about-hero__photo {
        height: 260px;
        border-radius: 0 28px 0 28px;
    }

    .about-origins__media {
        height: 300px;
        border-radius: 0 28px 0 28px;
    }

    .origins-card {
        padding: 20px;
        border-radius: 0 20px 0 20px;
    }

    .origins-card__glass {
        padding: 20px;
    }

    .origins-card__title {
        font-size: 26px;
    }

    .origins-card__body {
        font-size: 14px;
    }

    .origins-logo {
        width: 120px;
        height: 120px;
        padding: 16px;
        border-radius: 20px;
    }

    .mission-card {
        border-radius: 0 28px 0 28px;
    }

    .value-card {
        border-radius: 0 28px 0 28px;
    }
}



/* ==========================================================================
   PRICING PAGE
   ========================================================================== */


/* ========== PRICING HERO ========== */
.pricing-hero {
    background: radial-gradient(ellipse 200% 100% at 50% 100%, #b5e8e6 0%, #d4f5f3 38%, #f5fbff 66%);
    padding-block: 80px 40px;
}

    .pricing-hero .section-header {
        margin-bottom: 56px;
        max-width: 820px;
    }

/* Highlight pill list sotto il titolo */
.pricing-hero__highlights {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    margin-top: 18px;
}

    .pricing-hero__highlights li {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-display);
        font-weight: 500;
        font-size: 14px;
        color: var(--color-neutral-darker);
    }

    .pricing-hero__highlights svg {
        color: var(--color-green-dark);
        flex-shrink: 0;
    }

.pricing-hero__note {
    text-align: center;
    margin-top: 32px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--color-neutral-darker);
    opacity: 0.55;
}


/* ========== PLANS GRID ========== */
.plans-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}




/* ========== PLAN CARD ========== */
.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 26px;
    background-color: #ffffff;
    border: 1px solid rgba(9, 15, 14, 0.06);
    border-radius: var(--radius-lg);
    transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

    /* ---- Hover state: card scura ---- */
    .plan-card:hover {
        background-color: #0d2e2c;
        border-color: #0d2e2c;
        box-shadow: 0 24px 60px -20px rgba(13, 46, 44, 0.35);
    }

        .plan-card:hover .plan-card__name {
            color: #ffffff;
        }

        .plan-card:hover .plan-card__desc {
            color: #ffffff;
            opacity: 0.7;
        }

        .plan-card:hover .plan-card__features {
            border-top-color: rgba(255, 255, 255, 0.1);
        }

            .plan-card:hover .plan-card__features li {
                color: rgba(255, 255, 255, 0.85);
            }

                .plan-card:hover .plan-card__features li::before {
                    background-color: var(--color-accent);
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
                }

        /* Hover sulla card: anche il CTA si accende */
        .plan-card:hover .plan-card__cta {
            background-color: var(--color-accent);
            color: #ffffff;
            border-color: var(--color-accent);
        }

        /* Hover sulla card: tile verde acqua attorno all'icona */
        .plan-card:hover .plan-card__dot {
            background-color: var(--color-accent);
        }




/* ---- Card head ---- */
.plan-card__head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

/* ---- Icona del piano: contenitore base ---- */
.plan-card__dot {
    position: relative;
    width: 22px;
    height: 22px;
    padding: 8px;
    margin-bottom: 8px;
    background-color: transparent;
    border-radius: var(--radius-sm);
    box-sizing: content-box;
    transition: background-color var(--dur-base) var(--ease-out);
}

    .plan-card__dot::before {
        content: "";
        position: absolute;
        inset: 8px; /* corrisponde al padding del padre */
        background-image: var(--icon-url);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        transition: filter var(--dur-base) var(--ease-out);
    }

.plan-card:hover .plan-card__dot {
    background-color: var(--color-accent);
}

    .plan-card:hover .plan-card__dot::before {
        filter: brightness(0) invert(1);
    }

.plan-card__dot--start {
    --icon-url: url("../../Assets/Images/WebsiteAssets/PNG/Icon/health1x.png");
}

.plan-card__dot--growth {
    --icon-url: url("../../Assets/Images/WebsiteAssets/PNG/Icon/trending-up1x.png");
}

.plan-card__dot--scale {
    --icon-url: url("../../Assets/Images/WebsiteAssets/PNG/Icon/rocket1x.png");
}

.plan-card__dot--enterprise {
    --icon-url: url("../../Assets/Images/WebsiteAssets/PNG/Icon/buildings1x.png");
}


/* ---- Card name & desc ---- */
.plan-card__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.8px;
    color: var(--color-text);
}

.plan-card__desc {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--color-neutral-darker);
    opacity: 0.7;
    min-height: calc(1.55em * 4); /* allinea il CTA su tutte le card (4 righe max) */
}


/* ---- CTA ---- */
.plan-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: stretch;
    padding: 14px 20px;
    background-color: #ffffff;
    color: var(--color-green-deep);
    border: 1px solid rgba(9, 15, 14, 0.06);
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 24px;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

    .plan-card__cta:hover {
        background-color: var(--color-accent);
        color: #ffffff;
        border-color: var(--color-accent);
    }


/* ---- Features list ---- */
.plan-card__features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid rgba(9, 15, 14, 0.06);
}

    .plan-card__features li {
        position: relative;
        padding-left: 22px;
        font-size: 13px;
        line-height: 1.5;
        color: var(--color-neutral-darker);
    }

        .plan-card__features li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 5px;
            width: 14px;
            height: 14px;
            background-color: #e6f5f5;
            border-radius: 50%;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345adaa' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 9px;
        }



/* ========== MID CTA STRIP ========== */
.pricing-cta {
    padding-block: 40px;
}

.pricing-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}

.pricing-cta__title {
    color: var(--color-text);
    max-width: 600px;
}


/* ========== ASSISTANCE / TICKETS ========== */
.pricing-assistance {
    background-color: var(--color-bg);
}

.ticket-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.ticket-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px 28px;
    background-color: #ffffff;
    border: 1px solid rgba(9, 15, 14, 0.06);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 0 rgba(9, 15, 14, 0.02), 0 12px 32px -20px rgba(29, 65, 68, 0.12);
    transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

    /* Overlay verde scuro, invisibile di default */
    .ticket-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background-color: rgba(13, 46, 44, 0.92);
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        transition: opacity var(--dur-base) var(--ease-out);
        z-index: 1;
    }

    /* I contenuti stanno sempre sopra l'overlay */
    .ticket-card > * {
        position: relative;
        z-index: 2;
    }

    /* Hover: si accende l'overlay */
    .ticket-card:hover {
        border-color: transparent;
        box-shadow: 0 28px 70px -20px rgba(13, 46, 44, 0.45);
    }

        .ticket-card:hover::before {
            opacity: 1;
        }

        /* Cambio colori del contenuto in hover */
        .ticket-card:hover .ticket-card__name {
            color: #ffffff;
        }

        .ticket-card:hover .ticket-card__value {
            color: #ffffff;
        }

        .ticket-card:hover .ticket-card__unit {
            color: rgba(255, 255, 255, 0.7);
        }

        .ticket-card:hover .ticket-card__extra {
            color: rgba(255, 255, 255, 0.75);
            opacity: 1;
        }

/* ---- Typography (invariata) ---- */
.ticket-card__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--color-text);
    letter-spacing: -0.4px;
    transition: color var(--dur-base) var(--ease-out);
}

.ticket-card__value {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: var(--color-accent);
    transition: color var(--dur-base) var(--ease-out);
}

.ticket-card__unit {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--color-green-deep);
    opacity: 0.85;
    transition: color var(--dur-base) var(--ease-out);
}

.ticket-card__extra {
    margin: 4px 0 0;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-neutral-darker);
    opacity: 0.75;
    transition: color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}

/* ========== FEATURE COMPARISON TABLE ========== */
.pricing-table {
    background-color: var(--color-bg);
}

.pricing-table__title {
    text-align: center;
    color: var(--color-text);
    margin-bottom: 40px;
}

.pricing-table__wrap {
    /* Su mobile la tabella scrolla orizzontalmente invece di rompersi */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
    background-color: #ffffff;
    border: 1px solid rgba(9, 15, 14, 0.06);
    box-shadow: 0 1px 0 rgba(9, 15, 14, 0.02), 0 12px 32px -16px rgba(29, 65, 68, 0.08);
}

.feature-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-display);
    min-width: 760px;
}

.feature-table__head {
    padding: 22px 12px;
    background-color: #ffffff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.3px;
    color: var(--color-text);
    text-align: center;
    border-bottom: 1px solid rgba(9, 15, 14, 0.08);
    position: sticky;
    top: 0;
    z-index: 1;
}

.feature-table__head--feature {
    text-align: left;
    padding-left: 28px;
    width: 44%;
}

.feature-table__head--highlight {
    color: var(--color-green-dark);
}

/* Section row (group header) */
.feature-table__section th {
    padding: 40px 28px 16px;
    text-align: left;
    font-family: var(--font-mono); /* mono come le altre tagline del sito */
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-accent);
    background-color: transparent; /* niente più sfondo grigino */
    border-top: none;
}

.feature-table tbody .feature-table__section:first-child th {
    padding-top: 24px;
}

/* Regular row */
.feature-table tbody tr:not(.feature-table__section) th {
    padding: 16px 28px;
    text-align: left;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--color-neutral-darker);
    border-bottom: 1px solid rgba(9, 15, 14, 0.04);
    vertical-align: middle;
}

.feature-table tbody tr:not(.feature-table__section) td {
    padding: 16px 12px;
    text-align: center;
    border-bottom: 1px solid rgba(9, 15, 14, 0.04);
    vertical-align: middle;
}

/* Feature dot (incluso / non incluso) */
.feat {
    display: inline-flex;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}

.feat--ok {
    background-color: #d3f1f0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345adaa' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px;
}

.feat--no {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8b5b5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
}

.pricing-table__note {
    margin-top: 20px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--color-neutral-darker);
    opacity: 0.55;
}


/* ==========================================================================
   PRICING — RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    .plans-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ticket-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
}

@media (max-width: 640px) {
    .pricing-hero {
        padding-block: 48px 32px;
    }

    .pricing-hero__highlights {
        gap: 16px 20px;
    }

        .pricing-hero__highlights li {
            font-size: 13px;
        }

    .plans-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .plan-card {
        border-radius: 28px;
        padding: 24px 22px;
    }

    .plan-card__desc {
        min-height: 0; /* in colonna singola l'allineamento orizzontale non serve */
    }

    .pricing-cta__title {
        font-size: 22px;
    }

    .ticket-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px 16px;
    }

    .ticket-card__value {
        font-size: 28px;
    }

    .ticket-card__unit {
        font-size: 13px;
    }

    .pricing-table__title {
        font-size: 26px;
        letter-spacing: -1px;
    }

    .feature-table__head {
        font-size: 13px;
        padding: 14px 8px;
    }

    .feature-table__head--feature {
        padding-left: 18px;
    }

    .feature-table tbody tr:not(.feature-table__section) th {
        padding: 12px 16px;
        font-size: 12.5px;
    }
}




/* ==========================================================================
   DEMO REQUEST FORM PAGE
   ========================================================================== */
.demo {
    background: radial-gradient(ellipse 200% 100% at 50% 100%, #b5e8e6 0%, #d4f5f3 38%, #f5fbff 66%);
    padding-block: 80px 96px;
}

    .demo .section-header {
        max-width: 520px;
        margin-bottom: 40px;
    }

/* ---- Form card ---- */
.form-card {
    max-width: 480px;
    margin-inline: auto;
    padding: 40px;
    background-color: #ffffff;
    border-radius: var(--radius-md);
    box-shadow: 0 1px 0 rgba(9, 15, 14, 0.02), 0 16px 40px -20px rgba(29, 65, 68, 0.10), 0 4px 12px -4px rgba(29, 65, 68, 0.04);
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* ---- Single field ---- */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-field__label {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 13px;
    color: var(--color-text);
}

.form-field__input {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--font-display);
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text);
    background-color: #ffffff;
    border: 1px solid rgba(3, 3, 13, 0.1);
    border-radius: var(--radius-pill);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

    .form-field__input::placeholder {
        color: var(--color-text);
        opacity: 0.35;
    }

    .form-field__input:hover {
        border-color: rgba(3, 3, 13, 0.18);
    }

    .form-field__input:focus {
        outline: none;
        border-color: var(--color-accent);
        box-shadow: 0 0 0 3px rgba(102, 204, 204, 0.15);
    }

/* Textarea: angoli più morbidi (pill non funziona per multilinea) */
.form-field__input--textarea {
    border-radius: 20px;
    resize: vertical;
    min-height: 100px;
    padding: 14px 16px;
    line-height: 1.55;
}

/* ---- Submit button (full width dentro il form) ---- */
.form-card__submit {
    width: 100%;
    margin-top: 8px;
    padding: 16px 24px;
    box-shadow: 0 12px 28px -10px rgba(69, 173, 170, 0.5), 0 4px 12px -4px rgba(69, 173, 170, 0.25);
}

    .form-card__submit:disabled {
        opacity: 0.7;
        cursor: default;
        transform: none;
    }

/* ---- Privacy note ---- */
.form-card__note {
    text-align: center;
    font-family: var(--font-display);
    font-size: 12px;
    color: var(--color-neutral-darker);
    opacity: 0.55;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .demo {
        padding-block: 48px 64px;
    }

    .form-card {
        padding: 28px 22px;
        border-radius: 28px;
    }

    .form-field__input {
        font-size: 16px; /* evita zoom su iOS */
    }
}


/* ========== FILE UPLOADER (riusabile dentro .form-card) ========== */
/* Nasconde l'input nativo, mostra una "drop area" stilizzata.
   Lo stato di "file selezionato" è gestito via JS che aggiorna data-filename. */
.form-field__upload {
    position: relative;
}

.form-field__upload-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.form-field__upload-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background-color: #ffffff;
    border: 1.5px dashed var(--color-accent);
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--color-text);
    opacity: 0.7;
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
    cursor: pointer;
}

.form-field__upload:hover .form-field__upload-label,
.form-field__upload-input:focus + .form-field__upload-label {
    background-color: #f0f9f9;
    opacity: 1;
}

.form-field__upload-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: #d3f1f0;
    color: var(--color-green-deep);
    border-radius: 8px;
    flex-shrink: 0;
}

.form-field__upload-text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Stato: file caricato */
.form-field__upload.has-file .form-field__upload-label {
    opacity: 1;
    border-style: solid;
    border-color: var(--color-green-dark);
    background-color: #f0f9f9;
}

/* Label "required" indicator */
.form-field__label .required {
    color: var(--color-green-dark);
}

/* ========== SPAM PROTECTION ========== */

/* ---- Honeypot: invisibile agli utenti, compilabile dai bot ---- */
.form-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    tab-size: 0; /* non raggiungibile con Tab */
}

/* ---- reCAPTCHA v2 container ---- */
.form-captcha {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    /* Centra il widget nel form */
    .form-captcha > div:first-child {
        display: flex;
        justify-content: flex-start;
    }

/* Stato di errore su qualsiasi input */
.form-field__input--error {
    border-color: #e53e3e !important;
    background-color: rgba(229, 62, 62, 0.04);
}

/* Messaggio di errore inline (reCAPTCHA non completato, risposta errata…) */
.form-field__error {
    display: block;
    min-height: 1.2em;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 500;
    color: #e53e3e;
    line-height: 1.4;
}


/* ========== LOGO SVG (lockup completo) ========== */

/* Nav: altezza fissa, larghezza proporzionale */
.nav__logo {
    gap: 0; /* il lockup è un'unità, nessun gap tra mark e testo */
}

.nav__logo-svg {
    display: block;
    height: 35px;
    width: auto;
    flex-shrink: 0;
}

/* Footer: logo leggermente più grande */
.footer__logo {
    gap: 0;
}

.footer__logo-svg {
    display: block;
    height: 34px;
    width: auto;
    flex-shrink: 0;
}

/* Tagline allineata a sinistra sotto il logo (non più offset dal vecchio mark) */
.footer__tagline {
    padding-left: 0;
}

@media (max-width: 640px) {
    .nav__logo-svg {
        height: 30px;
    }

    .footer__logo-svg {
        height: 28px;
    }
}