/* Shared styles for every page: base, shared patterns, header and footer.
   Page-specific styles stay in the page. Colors and fonts come from tokens.css. */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 88px
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden
}

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

[hidden] {
    display: none !important
}

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

.wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding-inline: 24px
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap
}

.skip-link {
    position: absolute;
    top: 12px;
    left: 16px;
    z-index: 100;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--bg);
    font-weight: 500;
    text-decoration: none;
    transform: translateY(-200%)
}

.skip-link:focus {
    transform: none
}

/* shared patterns */
.eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 10px
}

.eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--accent)
}

.accent {
    color: var(--accent)
}

.tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--accent);
    border: 1px solid var(--accent-line);
    border-radius: 999px;
    padding: 5px 12px
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--body);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .2s
}

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

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

.btn--ghost {
    background: none;
    border-color: var(--accent-line);
    color: var(--accent)
}

.link-button {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer
}

/* page hero with the animated flow lines */
.hero {
    position: relative;
    padding: 120px 0 128px;
    overflow: hidden
}

/* the lines fade in once, then their dashes flow along the curves (22s / 30s / 38s per line).
   The one animation that isn't transform/opacity (owner's choice): it's contained to the SVG
   and site.js pauses it while the hero is off screen. */
.flow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .75;
    contain: strict;
    animation: flow-in 1.2s ease-out both
}

.flow path {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.4;
    stroke-dasharray: 6 10;
    animation: drift 22s linear infinite
}

.flow path:nth-child(2) {
    stroke-opacity: .5;
    animation-duration: 30s
}

.flow path:nth-child(3) {
    stroke-opacity: .25;
    animation-duration: 38s
}

.flow.is-paused path {
    animation-play-state: paused
}

@keyframes flow-in {
    from {
        opacity: 0
    }
}

@keyframes drift {
    to {
        stroke-dashoffset: -640
    }
}

.hero__inner {
    position: relative
}

.hero h1 {
    max-width: 920px;
    margin: 22px 0 28px;
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(38px, 6vw, 72px);
    line-height: 1.04;
    letter-spacing: -.03em
}

.hero h1 em {
    font-style: normal;
    color: var(--accent)
}

.hero__sub {
    max-width: 660px;
    color: var(--muted);
    font-size: clamp(17px, 1.6vw, 20px)
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 40px
}

.hero__actions .btn {
    padding: 14px 24px;
    font-size: 16px
}

@media (max-width: 560px) {
    .hero {
        padding: 72px 0 88px
    }

    .hero__actions .btn {
        width: 100%
    }
}

/* text pages: blog posts, legal pages, 404 */
.wrap--narrow {
    max-width: 768px
}

.page-header {
    padding: 88px 0 48px
}

.page-header h1 {
    margin: 18px 0 18px;
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(32px, 4.6vw, 52px);
    line-height: 1.08;
    letter-spacing: -.025em
}

.page-header__lede {
    max-width: 680px;
    color: var(--muted);
    font-size: clamp(17px, 1.5vw, 19px)
}

.page-meta {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--muted)
}

.back-link {
    display: block;
    width: fit-content;
    margin-bottom: 28px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    transition: color .2s
}

.back-link:hover {
    color: var(--accent)
}

.prose {
    padding-bottom: 80px;
    font-size: 18px;
    line-height: 1.75
}

.prose > * + * {
    margin-top: 1.1em
}

.prose h2 {
    margin-top: 2.2em;
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(24px, 2.6vw, 30px);
    line-height: 1.2;
    letter-spacing: -.015em
}

.prose h3 {
    margin-top: 1.8em;
    font-family: var(--display);
    font-weight: 600;
    font-size: 21px;
    line-height: 1.3
}

.prose h2 + *,
.prose h3 + * {
    margin-top: .6em
}

.prose strong {
    font-weight: 600
}

.prose a {
    color: var(--accent);
    text-underline-offset: 3px
}

.prose code {
    font-family: var(--mono);
    font-size: .86em;
    color: var(--accent)
}

.prose hr {
    margin: 3em 0;
    border: 0;
    border-top: 1px solid var(--hair)
}

.prose hr ~ p {
    font-size: 16px;
    color: var(--muted)
}

.prose ul,
.prose ol {
    padding-left: 1.3em
}

.prose li + li {
    margin-top: .4em
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.5
}

.prose th,
.prose td {
    padding: 10px 12px 10px 0;
    border-bottom: 1px solid var(--hair);
    text-align: left;
    vertical-align: top
}

.prose th {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted)
}

.table-scroll {
    overflow-x: auto
}

.lang-note {
    margin-top: 40px
}

.lang-note a {
    color: var(--accent)
}

@media (max-width: 560px) {
    .page-header {
        padding: 64px 0 36px
    }

    .prose {
        font-size: 17px
    }
}

/* closing call to action, e.g. at the end of the vision page or a post */
.cta-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px 48px;
    padding: 44px clamp(24px, 5vw, 56px);
    border: 1px solid var(--hair);
    border-radius: 20px;
    background: var(--surface)
}

.cta-band > div {
    flex: 1 1 480px
}

.cta-band .section-title {
    margin-bottom: 12px
}

.cta-band p {
    max-width: 600px;
    color: var(--muted)
}

.cta-band .btn {
    padding: 14px 24px;
    font-size: 16px
}

/* sections and cards */
.section {
    padding: 96px 0;
    border-top: 1px solid var(--hair)
}

.section-title {
    margin: 18px 0 20px;
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.1;
    letter-spacing: -.02em
}

.lede {
    max-width: 560px;
    color: var(--muted)
}

.split {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 64px;
    align-items: start
}

.card {
    background: var(--surface);
    border: 1px solid var(--hair);
    border-radius: 16px;
    padding: 28px
}

.icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--accent-soft)
}

.icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

/* interactive cards (offers, pillars, post cards): on hover they lift 8px and fill with a
   soft gradient from the card colour to green, with a green border and glow. The gradient
   and the glow live in pseudo-elements and only their opacity animates, so it stays smooth.
   Only on devices that really hover; keyboard focus inside the card highlights it too. */
.card--hover {
    position: relative;
    isolation: isolate;
    transition: transform .5s cubic-bezier(.2, .7, .2, 1), border-color .5s ease
}

.card--hover::before,
.card--hover::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease
}

.card--hover::before {
    background: linear-gradient(160deg, transparent 12%, var(--accent-wash) 100%)
}

.card--hover::after {
    box-shadow: var(--shadow-accent)
}

.card--hover .icon {
    transition: transform .5s cubic-bezier(.2, .7, .2, 1)
}

.card--hover:focus-within {
    border-color: var(--accent-line)
}

.card--hover:focus-within::before {
    opacity: 1
}

@media (hover: hover) {
    .card--hover:hover {
        border-color: var(--accent-line);
        transform: translateY(-8px)
    }

    .card--hover:hover::before,
    .card--hover:hover::after {
        opacity: 1
    }

    .card--hover:hover .icon {
        transform: scale(1.08)
    }
}

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

@media (max-width: 560px) {
    .section {
        padding: 72px 0
    }
}

/* forms */
.form {
    display: grid;
    gap: 20px
}

.form-note {
    font-size: 14px;
    color: var(--muted)
}

.field {
    display: grid;
    gap: 8px
}

.field label {
    font-size: 14px;
    font-weight: 500
}

.field input,
.field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--hair);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 16px;
    transition: border-color .2s
}

.field textarea {
    min-height: 140px;
    resize: vertical
}

.field input::placeholder,
.field textarea::placeholder {
    color: var(--muted)
}

.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--accent)
}

.field [aria-invalid="true"],
.field [aria-invalid="true"]:focus {
    border-color: var(--danger)
}

.field-error {
    font-size: 13.5px;
    color: var(--danger)
}

.field-error:empty {
    display: none
}

.consent {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    font-size: 14px;
    color: var(--muted)
}

.consent input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--accent)
}

.consent a {
    color: var(--accent)
}

.consent .field-error {
    grid-column: 2
}

.honeypot {
    position: absolute;
    left: -9999px
}

.form-error {
    padding: 12px 14px;
    border: 1px solid var(--danger);
    border-radius: 10px;
    font-size: 14px;
    color: var(--danger)
}

.form .btn {
    justify-self: start
}

.form .btn[aria-busy="true"] {
    opacity: .7;
    cursor: progress
}

.form-success {
    padding: 28px;
    border: 1px solid var(--accent-line);
    border-radius: 16px;
    background: var(--accent-soft)
}

.form-success:focus {
    outline: none
}

.form-success strong {
    display: block;
    margin-bottom: 6px;
    font-family: var(--display);
    font-size: 22px;
    font-weight: 600
}

/* logo (text wordmark) */
.logo {
    font-family: var(--display);
    font-weight: 800;
    font-size: 24px;
    letter-spacing: -.02em;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap
}

.logo span {
    color: var(--accent)
}

.logo small {
    margin-left: 12px;
    font-family: var(--mono);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--muted)
}

/* header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg-glass);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--hair)
}

.site-header__bar {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 68px
}

.site-menu {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-left: auto
}

.site-nav {
    display: flex;
    gap: 28px
}

.site-nav a {
    color: var(--muted);
    font-size: 15px;
    text-decoration: none;
    transition: color .2s
}

.site-nav a:hover {
    color: var(--text)
}

.site-nav a[aria-current="page"] {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 8px
}

.lang-switch {
    display: flex;
    padding: 3px;
    border: 1px solid var(--hair);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1
}

.lang-switch a,
.lang-switch span {
    padding: 6px 12px;
    border-radius: 999px;
    text-decoration: none
}

.lang-switch a {
    color: var(--muted);
    transition: color .2s
}

.lang-switch a:hover {
    color: var(--text)
}

.lang-switch [aria-current] {
    background: var(--accent);
    color: var(--bg);
    font-weight: 500
}

.menu-toggle {
    display: none
}

@media (max-width: 1024px) {
    .site-header .logo small {
        display: none
    }
}

/* mobile: the nav and CTA move into a panel behind the menu button */
@media (max-width: 860px) {
    .site-header__bar {
        gap: 12px
    }

    .lang-switch {
        margin-left: auto
    }

    .js .menu-toggle {
        display: inline-grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border: 1px solid var(--hair);
        border-radius: 999px;
        background: none;
        color: var(--text);
        cursor: pointer
    }

    .menu-toggle__icon {
        position: relative;
        width: 16px;
        height: 10px
    }

    .menu-toggle__icon::before,
    .menu-toggle__icon::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 1.5px;
        border-radius: 2px;
        background: currentColor;
        transition: transform .2s
    }

    .menu-toggle__icon::before {
        top: 0
    }

    .menu-toggle__icon::after {
        bottom: 0
    }

    .is-open .menu-toggle__icon::before {
        transform: translateY(4.25px) rotate(45deg)
    }

    .is-open .menu-toggle__icon::after {
        transform: translateY(-4.25px) rotate(-45deg)
    }

    .js .site-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 4px 24px 24px;
        background: var(--bg);
        border-bottom: 1px solid var(--hair)
    }

    .js .is-open .site-menu {
        display: flex
    }

    .js .site-nav {
        flex-direction: column;
        gap: 0
    }

    .js .site-nav a {
        padding: 14px 0;
        border-bottom: 1px solid var(--hair);
        font-size: 17px
    }

    .js .site-nav a[aria-current="page"] {
        text-decoration: none;
        color: var(--accent)
    }

    .js .site-menu .btn {
        margin-top: 20px;
        padding: 14px 20px
    }

    /* without JavaScript the nav simply wraps onto a second row */
    html:not(.js) .site-header__bar {
        flex-wrap: wrap;
        height: auto;
        padding: 14px 24px
    }

    html:not(.js) .site-menu {
        order: 3;
        width: 100%;
        flex-wrap: wrap;
        gap: 16px;
        margin: 0
    }
}

/* footer */
.site-footer {
    border-top: 1px solid var(--hair);
    color: var(--muted);
    font-size: 15px
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px;
    padding-top: 64px;
    padding-bottom: 48px
}

.site-footer__brand p {
    margin: 10px 0 18px
}

.site-footer h2 {
    margin-bottom: 16px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text)
}

.site-footer ul {
    display: grid;
    gap: 10px;
    list-style: none
}

.site-footer ul a,
.site-footer .link-button {
    color: var(--muted);
    text-decoration: none;
    transition: color .2s
}

.site-footer ul a:hover,
.site-footer .link-button:hover {
    color: var(--accent)
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    padding-top: 24px;
    padding-bottom: 40px;
    border-top: 1px solid var(--hair);
    font-family: var(--mono);
    font-size: 12px
}

@media (max-width: 860px) {
    .site-footer__grid {
        grid-template-columns: 1fr 1fr
    }

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

@media (max-width: 560px) {
    .wrap {
        padding-inline: 16px
    }

    .js .site-menu {
        padding: 4px 16px 20px
    }

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

/* motion (docs/brand/guidelines.md → Motion) */

/* page transitions, CSS only (View Transitions API): the old page fades out, the new one
   fades in while rising 16px. Browsers without it simply navigate. The header is its own
   group, so it stays put. */
@view-transition {
    navigation: auto
}

.site-header {
    view-transition-name: site-header
}

@keyframes page-out {
    to {
        opacity: 0
    }
}

@keyframes page-in {
    from {
        opacity: 0;
        translate: 0 16px
    }
}

::view-transition-old(root) {
    animation: page-out .2s ease-in both
}

::view-transition-new(root) {
    animation: page-in .4s cubic-bezier(.2, .7, .2, 1) .05s both
}

/* scroll reveal (site.js): blocks marked data-reveal that start below the fold rise and
   fade in once as they enter the viewport. Blocks already on screen never move, and nothing
   is hidden unless the script has run (it adds .reveal and data-reveal="pending"). */
@keyframes reveal {
    from {
        opacity: 0;
        translate: 0 40px
    }

    to {
        opacity: 1;
        translate: 0 0
    }
}

.reveal [data-reveal="pending"]:not(.is-revealed) {
    opacity: 0
}

.reveal [data-reveal="pending"].is-revealed {
    animation: reveal .9s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms) both
}

@media print {
    .reveal [data-reveal="pending"] {
        opacity: 1 !important;
        animation: none !important
    }
}

/* cookie banner (consent.js); both choices look the same, as the Garante requires */
.consent-banner {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 60;
    width: min(520px, calc(100% - 32px));
    padding: 22px 52px 22px 22px;
    border: 1px solid var(--accent-line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--muted);
    font-size: 14.5px
}

.consent-banner a {
    color: var(--accent)
}

.consent-banner__actions {
    display: flex;
    gap: 10px;
    margin-top: 16px
}

.consent-banner__actions .btn {
    flex: 1 1 0;
    padding: 10px 16px
}

.consent-banner__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer
}

.consent-banner__close:hover {
    color: var(--text)
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none
    }

    html {
        scroll-behavior: auto
    }

    .flow,
    .flow path {
        animation: none
    }

    /* cards still turn green on hover, but don't move */
    .card--hover:hover,
    .card--hover:hover .icon {
        transform: none
    }

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important
    }
}