/* ==========================================================================
   meshar.io — base theme
   Fondo scuro bluastro, tipografia chiara, accento arancio "overlay AR".
   Le tre classi di contenuto hanno un colore ciascuna, usato in modo coerente
   su tutto il sito (card, pill, tabella, diagramma):
     Classe A → viola · Classe B → verde acqua · Classe C → giallo
   ========================================================================== */

:root {
    --ma-bg: #0b0c10;
    --ma-bg-2: #101219;
    --ma-surface: #14161d;
    --ma-surface-2: #1a1d26;
    --ma-border: #262a36;
    --ma-border-strong: #343949;

    --ma-fg: #e8eaf0;
    --ma-fg-dim: #b0b5c2;
    --ma-muted: #7d8394;

    --ma-accent: #098afb;
    --ma-accent-hi: #3aa4ff;
    --ma-accent-ink: #04121f;

    --ma-a: #b39bff;
    --ma-b: #4fd1c5;
    --ma-c: #f2c14e;

    --ma-radius: 12px;
    --ma-radius-sm: 7px;
    --ma-maxw: 1140px;
    --ma-maxw-narrow: 760px;

    --ma-font-sans: 'Jura', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ma-font-mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", "Cascadia Code", Consolas, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
    margin: 0;
    /* Nessun elemento deve poter forzare uno scroll orizzontale della pagina: i blocchi larghi
       (diagramma, tabella) scrollano dentro il proprio contenitore, non nel body. */
    overflow-x: hidden;
    background: var(--ma-bg);
    color: var(--ma-fg);
    font-family: var(--ma-font-sans);
    font-size: 17px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* trama a maglia triangolare appena percepibile */
    background-image:
        repeating-linear-gradient(60deg, rgba(255,255,255,0.016) 0 1px, transparent 1px 62px),
        repeating-linear-gradient(-60deg, rgba(255,255,255,0.016) 0 1px, transparent 1px 62px);
}

a { color: var(--ma-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
    line-height: 1.16;
    letter-spacing: -0.015em;
    font-weight: 650;
    margin: 0 0 .5em;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.18rem; }
h4 { font-size: 1.02rem; }

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

p { margin: 0 0 1rem; }

.ma-container {
    width: 100%;
    max-width: var(--ma-maxw);
    margin-inline: auto;
    padding-inline: 24px;
}

.ma-narrow { max-width: var(--ma-maxw-narrow); }

.ma-overline {
    display: block;
    font-family: var(--ma-font-mono);
    font-size: .76rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ma-accent);
    margin-bottom: .9rem;
}

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

/* --- Skip link --- */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--ma-accent);
    color: var(--ma-accent-ink);
    padding: 8px 14px;
    z-index: 100;
    border-radius: 0 0 var(--ma-radius-sm) 0;
}
.skip-link:focus { left: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--ma-accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* --- Buttons --- */
.ma-btn {
    display: inline-flex;
    align-items: center;
    gap: .5ch;
    font-family: var(--ma-font-mono);
    font-size: .92rem;
    font-weight: 600;
    line-height: 1;
    padding: .85em 1.35em;
    border-radius: var(--ma-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
    text-decoration: none;
}
.ma-btn:hover { text-decoration: none; }
.ma-btn:active { transform: translateY(1px); }
.ma-btn[disabled] { opacity: .6; cursor: default; }

.ma-btn-primary {
    background: var(--ma-accent);
    color: var(--ma-accent-ink);
    border-color: var(--ma-accent);
}
.ma-btn-primary:hover { background: var(--ma-accent-hi); border-color: var(--ma-accent-hi); }

.ma-btn-outline {
    background: transparent;
    color: var(--ma-fg);
    border-color: var(--ma-border-strong);
}
.ma-btn-outline:hover { border-color: var(--ma-accent); color: var(--ma-accent); }

/* --- Header --- */
.ma-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(11, 12, 16, 0.84);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--ma-border);
}
.ma-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 66px;
}
.ma-logo {
    display: inline-flex;
    align-items: center;
    gap: .85ch;
}
.ma-logo:hover { text-decoration: none; }
.ma-logo-mark { display: inline-flex; color: var(--ma-accent); }
/* Testo "meshAR": condiviso da header (.ma-logo) e footer (.ma-footer-logo), così
   un cambio di font/peso/spaziatura del brand si applica ovunque da un solo posto. */
.ma-logo-text {
    color: var(--ma-fg);
    font-family: var(--ma-font-mono);
    font-weight: 400;
    font-size: 1.05rem;
    letter-spacing: 0.05em;
}
.ma-logo-ar { color: var(--ma-accent); }

.ma-nav-links {
    display: flex;
    gap: 22px;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
}
.ma-nav-link {
    color: var(--ma-fg-dim);
    font-size: .95rem;
    font-family: var(--ma-font-mono);
}
.ma-nav-link:hover { color: var(--ma-fg); text-decoration: none; }
.ma-nav-link[aria-current="page"] { color: var(--ma-fg); border-bottom: 1px solid var(--ma-accent); }
.ma-nav-cta { flex: 0 0 auto; }

/* --- Footer --- */
.ma-footer {
    margin-top: 96px;
    border-top: 1px solid var(--ma-border);
    background: var(--ma-bg-2);
}
.ma-footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    justify-content: space-between;
    padding-block: 48px 32px;
}
.ma-footer-brand { max-width: 400px; }
.ma-footer-logo { margin: 0 0 .6rem; }
.ma-footer-tagline { color: var(--ma-muted); font-size: .95rem; margin: 0; }
.ma-footer-nav { display: flex; gap: 56px; flex-wrap: wrap; }
.ma-footer-col-title {
    font-family: var(--ma-font-mono);
    font-size: .74rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ma-muted);
    margin: 0 0 .8rem;
}
.ma-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ma-footer-col a { color: var(--ma-fg-dim); font-size: .95rem; }
.ma-footer-col a:hover { color: var(--ma-accent); }

.ma-footer-bottom { border-top: 1px solid var(--ma-border); }
.ma-footer-bottom-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    justify-content: space-between;
    padding-block: 20px;
    color: var(--ma-muted);
    font-size: .84rem;
}
.ma-footer-bottom-inner a { color: var(--ma-fg-dim); }
.ma-footer-legal-group { display: grid; gap: 4px; }
.ma-footer-note { margin: 0; }

/* Selettore lingua: stessa freccia disegnata delle select del form contatti, in scala ridotta. */
.ma-lang-switch {
    appearance: none;
    font-family: inherit;
    font-size: .82rem;
    color: var(--ma-fg-dim);
    background-color: transparent;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ma-fg-dim) 50%),
        linear-gradient(135deg, var(--ma-fg-dim) 50%, transparent 50%);
    background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-radius-sm);
    padding: .4em 28px .4em .8em;
    cursor: pointer;
}
.ma-lang-switch:hover,
.ma-lang-switch:focus-visible { border-color: var(--ma-accent); }
.ma-lang-switch option { background: var(--ma-surface); color: var(--ma-fg); }

/* Sotto 820px il nav va su due righe invece di sparire: con quattro pagine, nascondere le voci
   lascerebbe Platform e Use cases raggiungibili solo dal footer. */
@media (max-width: 820px) {
    .ma-nav { flex-wrap: wrap; gap: 12px 16px; padding-block: 12px; }
    .ma-nav-links {
        order: 3;
        width: 100%;
        margin: 0;
        gap: 18px;
        font-size: .9rem;
    }
    .ma-nav-cta { margin-left: auto; }
    .ma-footer-inner { gap: 32px; }
    .ma-footer-nav { gap: 40px; }
}

@media (max-width: 480px) {
    body { font-size: 16px; }
    .ma-nav { gap: 10px; }
    .ma-nav-cta { padding: .6em .9em; font-size: .8rem; }
}