/* ──────────────────────────────────────────────────────
   Francesco Finelli — Design System v3
   Single-source-of-truth. No stacking layers.
   ────────────────────────────────────────────────────── */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/inter-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/inter-latin-500-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/inter-latin-600-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/inter-latin-700-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("/fonts/inter-latin-800-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("/fonts/inter-latin-900-normal.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2");
}

:root {
    --ff-bg: #070908;
    --ff-panel: rgba(14, 17, 15, 0.88);
    --ff-panel-solid: #0b0c0b;
    --ff-panel-deep: #080908;
    --ff-line: rgba(210, 231, 213, 0.12);
    --ff-text: #eef0ea;
    --ff-soft: #a6b0a7;
    --ff-soft-strong: #d4dcd4;
    --ff-accent: #c8ff5c;
    --ff-accent-strong: #daff82;
    --ff-on-accent: #080a08;
    --ff-cyan: #76f7d0;
    --ff-danger: #ff6b6b;
    --ff-star: #ffd166;
    --ff-focus-ring: rgba(200, 255, 92, 0.45);
    --ff-nav-bg: rgba(8, 10, 9, 0.50);
    --ff-nav-border: rgba(221, 255, 191, 0.16);
    --ff-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --ff-font-sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ff-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* Sistema unificato — raggi, pannelli, titoli di sezione */
    --ff-radius-sm: 10px;
    --ff-radius: 14px;
    --ff-radius-lg: 18px;
    --ff-panel-gradient:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
        var(--ff-panel);
    --ff-section-heading: clamp(2.1rem, 4.4vw, 3.6rem);
    --ff-heading-tracking: -0.03em;
    --ff-kicker: 0.78rem;

    /* Terminal prompts — simboli $, >, //, # dim e il lime pieno */
    --ff-kicker-color: rgba(200, 255, 92, 0.55);
    --ff-kicker-bright: #c8ff5c;
}

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

html {
    scroll-padding-top: 100px;
}

body {
    background:
        radial-gradient(circle at 72% 16%, rgba(200, 255, 92, 0.06), transparent 26rem),
        radial-gradient(circle at 18% 80%, rgba(118, 247, 208, 0.04), transparent 28rem),
        linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px),
        var(--ff-bg);
    background-size: auto, auto, 44px 44px, 44px 44px, auto;
    color: var(--ff-text);
    font-family: var(--ff-font-sans);
    font-feature-settings: "cv11" 1, "cv02" 1, "cv03" 1, "cv04" 1;
    font-variant-ligatures: common-ligatures;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: -24%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 26% 24%, rgba(200, 255, 92, 0.08), transparent 18rem),
        radial-gradient(circle at 74% 58%, rgba(118, 247, 208, 0.07), transparent 22rem),
        radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.035), transparent 28rem);
    filter: blur(2px);
    animation: auraDrift 18s ease-in-out infinite alternate;
}

.bg-animate,
.glow {
    display: none;
}

/* ──────────────────────────────────────────────────────
   QUALITÀ GLOBALE — selezione, scrollbar, focus, tipo
   ────────────────────────────────────────────────────── */

::selection {
    background: var(--ff-accent);
    color: var(--ff-on-accent);
    text-shadow: none;
}

:focus-visible {
    outline: 2px solid var(--ff-focus-ring);
    outline-offset: 3px;
}

:focus:not(:focus-visible) {
    outline: none;
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(200, 255, 92, 0.28) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: rgba(200, 255, 92, 0.20);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(200, 255, 92, 0.40);
    background-clip: content-box;
}

h1,
h2,
h3 {
    font-family: var(--ff-font-mono);
    font-weight: 700;
    letter-spacing: var(--ff-heading-tracking);
    /* Il margin-top di default del browser (0.67/0.83em) gonfiava lo spazio
       kicker→titolo su tutto il sito (39–56px reali contro i ~13 del design):
       la coppia kicker+titolo deve restare unita, lo spazio grande va sopra.
       Dove la prosa ha bisogno di aria il margine è già reintrodotto
       esplicitamente sulla singola regola. */
    margin-top: 0;
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

/* ──────────────────────────────────────────────────────
   NAVBAR — Minimal Top Bar
   ────────────────────────────────────────────────────── */

.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.8rem clamp(1.4rem, 4vw, 3.5rem);
    background: rgba(7, 9, 8, 0.72);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--ff-line);
    z-index: 1000;
    transition: background var(--ff-transition), border-color var(--ff-transition);
}

.site-nav.is-scrolled {
    background: rgba(7, 8, 7, 0.84);
    border-bottom-color: rgba(214, 255, 226, 0.16);
}

/* Nav Links */
.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    flex-wrap: nowrap;
    min-width: 0;
}

.site-nav .nav-links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.42rem 0.72rem;
    color: var(--ff-soft);
    font-family: var(--ff-font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--ff-transition);
}

.site-nav .nav-links a span {
    display: inline;
    font-size: inherit;
    font-weight: inherit;
    max-width: none;
    overflow: visible;
    text-overflow: unset;
    white-space: nowrap;
}

/* Terminal prompt: ogni link è una path "./…", hover/active diventa ">" lime */
.site-nav .nav-links a::before {
    content: "./";
    color: var(--ff-kicker-color);
    transition: color var(--ff-transition);
}

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

.site-nav .nav-links a:hover::before,
.site-nav .nav-links a.is-active::before {
    content: none;
    color: var(--ff-accent);
}

.site-nav .nav-links a.is-active {
    color: var(--ff-accent);
}

/* Contact link — CTA da terminale, prompt "$" */
.site-nav .nav-contact,
.site-nav .nav-contact:hover,
.site-nav .nav-contact.is-active {
    margin-left: 0.5rem;
}

.site-nav .nav-contact {
    border: 1px solid rgba(200, 255, 92, 0.3);
    border-radius: 999px;
    padding: 0.38rem 0.9rem;
    color: var(--ff-accent);
    font-family: var(--ff-font-mono);
    font-weight: 500;
    letter-spacing: 0.04em;
}

.site-nav .nav-contact::before {
    content: "$ ";
    color: var(--ff-kicker-color);
    transition: color var(--ff-transition);
}

.site-nav .nav-contact:hover {
    background: rgba(200, 255, 92, 0.1);
    border-color: rgba(200, 255, 92, 0.5);
    color: var(--ff-accent);
}

.site-nav .nav-contact:hover::before,
.site-nav .nav-contact.is-active::before {
    content: none;
    color: var(--ff-accent);
}

.site-nav .nav-contact.is-active {
    background: rgba(200, 255, 92, 0.12);
    border-color: rgba(200, 255, 92, 0.55);
    color: var(--ff-accent);
}

/* Switch lingua — chip mono quadrato, coerente col resto della nav.
   Selettore con 3 classi apposta: deve battere in specificità
   ".site-nav .nav-links a" (position: relative) qui sotto. */
.site-nav .nav-links .nav-lang {
    align-items: center;
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius-sm);
    color: var(--ff-soft-strong);
    display: inline-flex;
    font-family: var(--ff-font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    justify-content: center;
    letter-spacing: 0.04em;
    margin-left: 0.3rem;
    min-width: 30px;
    padding: 0.32rem 0.5rem;
    position: relative;
}

.site-nav .nav-links .nav-lang:hover {
    background: rgba(200, 255, 92, 0.1);
    border-color: rgba(200, 255, 92, 0.4);
    color: var(--ff-accent);
}

/* Copia mobile: sganciata dalla nav (che ha backdrop-filter e quindi
   diventerebbe il containing block di un position:fixed interno). */
.nav-lang-mobile {
    display: none;
}

/* Brand — prompt "francescofinelli@~" con cursore che lampeggia */
.site-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--ff-font-mono);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ff-accent);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--ff-transition);
}

.site-nav-brand:hover {
    color: var(--ff-accent-strong);
}

.site-nav-brand::before {
    content: "$ ";
    color: var(--ff-kicker-color);
}

.site-nav-brand::after {
    content: "▮";
    color: var(--ff-accent);
    animation: blinkBlock 1.06s steps(1, end) infinite;
}

/* Tablet: le etichette testuali sono compatte, la barra
   non trabocca. Il dock mobile resta invariato. */

/* ──────────────────────────────────────────────────────
   LAYOUT
   ────────────────────────────────────────────────────── */

main,
footer {
    border-top: 1px solid rgba(214, 255, 226, 0.09);
    padding: clamp(2.75rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
}

.container {
    width: min(1180px, calc(100% - 42px));
    margin-left: auto;
    margin-right: auto;
}

/* ──────────────────────────────────────────────────────
   HERO
   ────────────────────────────────────────────────────── */

.page-home .hero {
    align-items: center;
    box-sizing: border-box;
    display: grid;
    gap: clamp(2.5rem, 7vw, 7rem);
    grid-template-columns: minmax(0, 1.18fr) minmax(300px, 390px);
    min-height: 100svh;
    padding: 8rem 0 3rem;
    text-align: left;
}

.hero-copy {
    min-width: 0;
}

.hero-copy h1 {
    color: var(--ff-text);
    font-size: clamp(3.4rem, 7.5vw, 6rem);
    line-height: 1.0;
    margin-top: 0;
    margin-bottom: 1.4rem;
    letter-spacing: var(--ff-heading-tracking);
    background: none;
    -webkit-text-fill-color: initial;
}

.hero-copy h1 span {
    position: relative;
    display: inline-block;
    color: var(--ff-accent);
    text-shadow: 0 0 30px rgba(200, 255, 92, 0.10);
    animation: textAura 5.5s ease-in-out infinite alternate;
}

/* Cursore a blocco che lampeggia dopo "Francesco" */
.hero-copy h1 span::after {
    content: "";
    display: inline-block;
    width: 0.09em;
    height: 0.88em;
    margin-left: 0.08em;
    vertical-align: baseline;
    background: var(--ff-accent);
    animation: blinkBlock 1.06s steps(1, end) infinite;
}

.hero-copy p {
    max-width: 580px;
    font-size: clamp(1.05rem, 1.6vw, 1.22rem);
    line-height: 1.65;
    color: var(--ff-soft);
    margin: 0 0 1.6rem;
}

.hero-copy .hero-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-start;
    margin-left: 0;
    margin-bottom: 1.8rem;
}

.hero-copy .hero-skills span {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0;
    color: var(--ff-soft-strong);
    padding: 0.25rem 0.4rem 0.25rem 0;
    font-family: var(--ff-font-mono);
    font-size: 0.8rem;
    font-weight: 500;
}

.hero-copy .hero-skills span::before {
    content: "* ";
    color: var(--ff-kicker-color);
}

.hero-copy .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-start;
    margin-top: 0;
}

/* VexoHost */
.vexo-section {
    padding: 1.25rem 0 clamp(4rem, 8vw, 7rem);
}

.vexo-showcase {
    background:
        radial-gradient(circle at 15% 25%, rgba(43, 119, 246, 0.32), transparent 24rem),
        radial-gradient(circle at 90% 85%, rgba(46, 212, 255, 0.11), transparent 19rem),
        #0a0d13;
    border: 1px solid rgba(76, 143, 255, 0.28);
    border-radius: var(--ff-radius-lg);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.32), 0 0 70px rgba(43, 119, 246, 0.07);
    display: grid;
    gap: 1px;
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
    overflow: hidden;
    padding: 0;
    position: relative;
}

.vexo-showcase::before {
    background: linear-gradient(90deg, transparent, #2b77f6, #2ed4ff, transparent);
    content: "";
    height: 2px;
    left: 8%;
    position: absolute;
    right: 8%;
    top: 0;
}

.vexo-brand,
.vexo-role {
    min-width: 0;
    padding: clamp(1.7rem, 4vw, 3rem);
}

.vexo-brand {
    align-content: space-between;
    background: rgba(43, 119, 246, 0.055);
    border-right: 1px solid rgba(76, 143, 255, 0.18);
    display: grid;
    justify-items: start;
    min-height: 390px;
}

.vexo-brand-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.vexo-brand-head > span:first-child,
.vexo-kicker {
    color: #8eb8ff;
    font-family: var(--ff-font-mono);
    font-size: 0.69rem;
    font-weight: 750;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.vexo-live {
    align-items: center;
    background: rgba(46, 212, 255, 0.08);
    border: 1px solid rgba(46, 212, 255, 0.16);
    border-radius: 999px;
    color: #9aeafa;
    display: inline-flex;
    font-size: 0.68rem;
    gap: 0.35rem;
    padding: 0.4rem 0.65rem;
}

.vexo-live svg {
    height: 13px;
    width: 13px;
}

.vexo-wordmark {
    display: block;
    height: auto;
    max-width: min(100%, 340px);
    object-fit: contain;
    width: 100%;
}

.vexo-brand > p {
    color: #aab6c8;
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0;
    max-width: 38ch;
}

.vexo-role {
    align-content: center;
    display: grid;
    min-height: 390px;
    position: relative;
}

.vexo-role h2 {
    color: var(--ff-text);
    font-size: clamp(2.5rem, 5vw, 4.6rem);
    letter-spacing: var(--ff-heading-tracking);
    line-height: 0.9;
    margin: 0.8rem 0 1.15rem;
    max-width: 680px;
}

.vexo-role > div:not(.vexo-role-list) > p {
    color: #aab6c8;
    font-size: 0.93rem;
    line-height: 1.65;
    margin: 0;
    max-width: 580px;
}

.vexo-role-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.6rem;
}

.vexo-role-list span {
    align-items: center;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    color: #eef4ff;
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 650;
    gap: 0.45rem;
    padding: 0.65rem 0.75rem;
}

.vexo-role-list svg {
    color: #53c9ff;
    height: 16px;
    width: 16px;
}

/* Technology stack */
.stack-section {
    border-bottom: 1px solid var(--ff-line);
    border-top: 1px solid var(--ff-line);
    background:
        linear-gradient(90deg, rgba(200, 255, 92, 0.035), transparent 24%, transparent 76%, rgba(118, 247, 208, 0.035)),
        rgba(5, 7, 6, 0.54);
    overflow: hidden;
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}

.stack-heading {
    margin-bottom: 2.2rem;
    text-align: center;
}

.stack-kicker {
    color: var(--ff-kicker-color);
    display: block;
    font-family: var(--ff-font-mono);
    font-size: var(--ff-kicker);
    font-weight: 650;
    letter-spacing: 0.14em;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
}

.stack-kicker::before {
    content: "// ";
    color: var(--ff-kicker-color);
}

.stack-heading h2 {
    color: var(--ff-text);
    font-size: var(--ff-section-heading);
    letter-spacing: var(--ff-heading-tracking);
    line-height: 1.02;
}

.stack-lanes {
    display: grid;
    gap: 1rem;
}

.stack-lanes.container {
    box-sizing: border-box;
    max-width: 1760px;
    padding-inline: clamp(1rem, 3vw, 2.5rem);
    width: min(1760px, calc(100% - 42px));
}

.stack-lane {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-width: 0;
}

.stack-lane-database {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-inline: auto;
    max-width: 720px;
    width: 100%;
}

.stack-lane-database .stack-mark {
    background: rgba(118, 247, 208, 0.08);
    border-color: rgba(118, 247, 208, 0.18);
    color: var(--ff-cyan);
}

.stack-item {
    align-items: center;
    background: rgba(10, 12, 11, 0.55);
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius-sm);
    display: flex;
    gap: 0.8rem;
    min-width: 0;
    min-height: 68px;
    overflow: hidden;
    padding: 0.85rem 1rem;
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.stack-item:hover {
    background: rgba(200, 255, 92, 0.05);
    border-color: rgba(200, 255, 92, 0.32);
    transform: translateY(-2px);
}

.stack-mark {
    align-items: center;
    background: rgba(200, 255, 92, 0.06);
    border: 1px solid rgba(200, 255, 92, 0.16);
    border-radius: var(--ff-radius-sm);
    color: var(--ff-accent);
    display: inline-flex;
    flex: 0 0 44px;
    font-family: var(--ff-font-mono);
    font-size: 0.78rem;
    font-weight: 800;
    height: 44px;
    justify-content: center;
}

.stack-mark img {
    display: block;
    filter: saturate(0.88) brightness(1.03);
    height: 25px;
    object-fit: contain;
    transition: filter var(--ff-transition), transform var(--ff-transition);
    width: 25px;
}

.stack-item strong {
    color: #e6ece6;
    font-family: var(--ff-font-mono);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    min-width: 0;
    overflow-wrap: normal;
}

.stack-item strong::before {
    color: var(--ff-kicker-color);
    content: none;
}

@media (min-width: 1600px) {
    .stack-lane:not(.stack-lane-database) {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}

/* About code card */
.about-code-card {
    align-self: stretch;
    background: var(--ff-panel-gradient);
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.26);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    padding: 1.25rem 1.35rem;
}

.about-code-head {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    justify-content: space-between;
    margin: -0.15rem 0 1rem;
    padding-bottom: 0.9rem;
}

.about-code-card .window-bar {
    margin: 0;
}

.about-code-file {
    color: var(--ff-soft);
    font-family: var(--ff-font-mono);
    font-size: 0.72rem;
}

.about-code-card pre {
    margin: 0;
    overflow-x: auto;
}

.about-code-card code {
    font-size: clamp(0.72rem, 1vw, 0.84rem);
    line-height: 1.7;
}

.about-code-note {
    align-items: center;
    color: var(--ff-soft);
    display: flex;
    font-family: var(--ff-font-mono);
    font-size: 0.68rem;
    gap: 0.5rem;
    margin: 1rem 0 0;
}

.about-code-note span {
    animation: softPulse 2.2s ease-in-out infinite;
    background: var(--ff-accent);
    border-radius: 999px;
    box-shadow: 0 0 14px rgba(200, 255, 92, 0.34);
    height: 7px;
    width: 7px;
}

/* About profile */
.about-profile {
    padding-bottom: clamp(4rem, 8vw, 7rem);
}

.about-profile-hero {
    align-items: end;
    display: grid;
    gap: clamp(2rem, 5vw, 5rem);
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
    margin-bottom: 1.5rem;
}

.about-profile-copy {
    max-width: 820px;
}

.about-profile-copy h1 {
    color: var(--ff-text);
    font-size: clamp(3rem, 7.5vw, 6rem);
    letter-spacing: var(--ff-heading-tracking);
    line-height: 1.02;
    margin: 0 0 1.8rem;
    max-width: 14ch;
}

.about-profile-copy > p {
    color: var(--ff-soft);
    font-size: clamp(1.05rem, 1.5vw, 1.22rem);
    line-height: 1.72;
    margin: 0;
    max-width: 700px;
}

.about-facts {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-facts > div {
    background: var(--ff-panel-gradient);
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius-sm);
    min-height: 118px;
    padding: 1.15rem;
}

.about-facts span,
.about-section-label {
    color: var(--ff-kicker-color);
    display: block;
    font-family: var(--ff-font-mono);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.about-section-label::before {
    content: "// ";
    color: var(--ff-kicker-color);
}

.about-facts strong {
    color: var(--ff-text);
    display: block;
    font-size: 1.02rem;
    line-height: 1.25;
    margin-top: 0.75rem;
}

.about-traits-chart {
    background: var(--ff-panel-gradient);
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius);
    display: grid;
    gap: 1.15rem;
    padding: 1.4rem;
}

.about-chart-head,
.about-chart-row > div {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.about-chart-head {
    border-bottom: 1px solid var(--ff-line);
    padding-bottom: 1rem;
}

.about-chart-head span,
.about-chart-head strong {
    font-family: var(--ff-font-mono);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.about-chart-head span {
    color: var(--ff-accent);
}

.about-chart-head strong {
    color: var(--ff-soft);
}

.about-chart-row {
    display: grid;
    gap: 0.48rem;
}

.about-chart-row span {
    color: var(--ff-text);
    font-size: 0.82rem;
    font-weight: 680;
}

.about-chart-row strong {
    color: var(--ff-accent);
    font-family: var(--ff-font-mono);
    font-size: 0.7rem;
}

.about-chart-row > i {
    background: rgba(255, 255, 255, 0.065);
    border-radius: 999px;
    display: block;
    height: 7px;
    overflow: hidden;
    position: relative;
}

.about-chart-row > i::after {
    animation: aboutChartGrow 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
    background: linear-gradient(90deg, #8acb38, var(--ff-accent));
    border-radius: inherit;
    box-shadow: 0 0 18px rgba(200, 255, 92, 0.26);
    content: "";
    inset: 0 auto 0 0;
    position: absolute;
    width: var(--score);
}

.about-story-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    margin-bottom: 1rem;
}

.about-story-main,
.about-method {
    background:
        radial-gradient(circle at 85% 10%, rgba(200, 255, 92, 0.06), transparent 16rem),
        var(--ff-panel);
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius-lg);
    padding: clamp(1.5rem, 4vw, 2.7rem);
}

.about-story-main h2,
.about-vexo-copy h2,
.about-project-focus h2,
.about-profile-cta h2 {
    color: var(--ff-text);
    font-size: clamp(2.2rem, 4vw, 4rem);
    letter-spacing: var(--ff-heading-tracking);
    line-height: 0.96;
    margin: 0.85rem 0 1.35rem;
}

.about-story-main p,
.about-vexo-copy p,
.about-project-focus p,
.about-personal-grid p {
    color: var(--ff-soft);
    font-size: 1rem;
    line-height: 1.72;
    margin: 0;
}

.about-story-main p + p {
    margin-top: 1rem;
}

.about-method ol {
    display: grid;
    gap: 0;
    list-style: none;
    margin: 1.1rem 0 0;
    padding: 0;
}

.about-method li {
    align-items: start;
    border-top: 1px solid var(--ff-line);
    display: grid;
    gap: 1rem;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 1.15rem 0;
}

.about-method li > span {
    color: var(--ff-accent);
    font-family: var(--ff-font-mono);
    font-size: 0.72rem;
    font-weight: 750;
    padding-top: 0.18rem;
}

.about-method strong {
    color: var(--ff-text);
    display: block;
    font-size: 1rem;
    margin-bottom: 0.35rem;
}

.about-method p {
    color: var(--ff-soft);
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0;
}

.about-vexo {
    background:
        radial-gradient(circle at 13% 30%, rgba(43, 119, 246, 0.32), transparent 24rem),
        radial-gradient(circle at 90% 80%, rgba(46, 212, 255, 0.1), transparent 18rem),
        #090d14;
    border: 1px solid rgba(76, 143, 255, 0.28);
    border-radius: var(--ff-radius-lg);
    display: grid;
    gap: 1px;
    grid-template-columns: minmax(290px, 0.75fr) minmax(0, 1.25fr);
    margin-bottom: 1rem;
    overflow: hidden;
}

.about-vexo-brand,
.about-vexo-copy {
    min-width: 0;
    padding: clamp(1.7rem, 4vw, 3rem);
}

.about-vexo-brand {
    align-content: center;
    border-right: 1px solid rgba(76, 143, 255, 0.2);
    display: grid;
    justify-items: start;
    gap: 1.5rem;
}

.about-vexo-brand img {
    display: block;
    height: auto;
    max-width: min(100%, 320px);
    width: 100%;
}

.about-vexo-brand span {
    color: #8eb8ff;
    font-family: var(--ff-font-mono);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.about-vexo-copy {
    align-content: center;
    display: grid;
}

.about-vexo-copy .about-section-label {
    color: #8eb8ff;
}

.about-role-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1.35rem;
}

.about-role-pills span {
    align-items: center;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    color: #eef4ff;
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 650;
    gap: 0.4rem;
    padding: 0.65rem 0.75rem;
}

.about-role-pills svg {
    color: #53c9ff;
    height: 15px;
    width: 15px;
}

.about-vexo-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1rem;
}

.about-vexo-links a {
    align-items: center;
    background: rgba(43, 119, 246, 0.14);
    border: 1px solid rgba(83, 201, 255, 0.24);
    border-radius: 12px;
    color: #eef4ff;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 700;
    gap: 0.45rem;
    padding: 0.7rem 0.85rem;
    transition: background var(--ff-transition), border-color var(--ff-transition), transform var(--ff-transition);
}

.about-vexo-links a:hover {
    background: rgba(43, 119, 246, 0.24);
    border-color: rgba(83, 201, 255, 0.48);
    transform: translateY(-2px);
}

.about-vexo-links svg {
    color: #53c9ff;
    height: 15px;
    width: 15px;
}

.about-project-focus {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(200, 255, 92, 0.07), transparent 38%),
        var(--ff-panel);
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius-lg);
    display: grid;
    gap: clamp(1.2rem, 3vw, 2rem);
    grid-template-columns: auto minmax(0, 1fr) auto;
    margin-bottom: 1rem;
    padding: clamp(1.5rem, 4vw, 2.6rem);
}

.about-project-index {
    color: rgba(200, 255, 92, 0.16);
    font-family: var(--ff-font-mono);
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 800;
    line-height: 1;
}

.about-project-focus h2 {
    font-size: clamp(2rem, 3.4vw, 3.3rem);
}

.about-project-focus .btn {
    white-space: nowrap;
}

.about-personal-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 1rem;
}

.about-personal-grid article {
    background: var(--ff-panel-gradient);
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius);
    min-width: 0;
    padding: 1.6rem;
}

.about-personal-grid article > svg {
    color: var(--ff-accent);
    height: 25px;
    margin-bottom: 1.5rem;
    width: 25px;
}

.about-personal-grid h3 {
    color: var(--ff-text);
    font-size: 1.55rem;
    letter-spacing: -0.035em;
    margin: 0.6rem 0 0.8rem;
}

.about-profile-cta {
    background:
        radial-gradient(circle at 85% 20%, rgba(200, 255, 92, 0.09), transparent 15rem),
        rgba(12, 15, 13, 0.84);
    margin-top: 0;
}

.about-profile-cta h2 {
    font-size: clamp(2rem, 3.5vw, 3.4rem);
    margin-bottom: 0.7rem;
}

.about-profile-cta p {
    margin: 0;
}

@media (max-width: 900px) {
    .about-profile-hero,
    .about-story-grid,
    .about-vexo {
        /* minmax(0, …): con 1fr il minimo è min-content e i titoli mono lunghi sfondano la colonna */
        grid-template-columns: minmax(0, 1fr);
    }

    .about-vexo-brand {
        border-bottom: 1px solid rgba(76, 143, 255, 0.2);
        border-right: 0;
    }

    .about-project-focus {
        align-items: start;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .about-project-focus .btn {
        grid-column: 2;
        justify-self: start;
    }
}

@media (max-width: 680px) {
    .about-profile-copy h1 {
        /* 17vw era tarato sul font sans: in JetBrains Mono "aspettare." non entrava più nei 375px */
        font-size: clamp(2.6rem, 12.5vw, 4rem);
    }

    .about-facts,
    .about-personal-grid {
        grid-template-columns: 1fr;
    }

    .about-facts > div {
        min-height: 0;
    }

    .about-story-main,
    .about-method,
    .about-vexo,
    .about-project-focus,
    .about-personal-grid article {
        border-radius: 22px;
    }

    .about-project-focus {
        grid-template-columns: 1fr;
    }

    .about-project-index {
        font-size: 3.5rem;
    }

    .about-project-focus .btn {
        grid-column: 1;
    }
}

.hero-actions .btn,
.admin-actions .btn,
.row-actions .btn,
.admin-project-toolbar .btn {
    border-radius: 12px;
    min-height: 48px;
    padding: 0.8rem 1.15rem;
}

.btn-primary {
    background: var(--ff-accent);
    box-shadow: 0 10px 28px rgba(200, 255, 92, 0.14);
    color: var(--ff-on-accent);
    font-weight: 700;
    transition: background var(--ff-transition), box-shadow var(--ff-transition), transform 0.15s ease;
}

.btn-primary:hover {
    background: var(--ff-accent-strong);
    color: var(--ff-on-accent);
    box-shadow: 0 14px 36px rgba(200, 255, 92, 0.20);
    transform: translateY(-1px);
}

.btn-secondary {
    background: rgba(244, 247, 242, 0.06);
    border-color: var(--ff-line);
    color: var(--ff-text);
    transition: background var(--ff-transition), transform 0.15s ease;
}

.btn-secondary:hover {
    background: rgba(244, 247, 242, 0.10);
    transform: translateY(-1px);
}

.projects-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem 1.5rem;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.projects-count {
    color: var(--ff-soft);
    font-family: var(--ff-font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    margin: 0;
}

.projects-count::before {
    content: none;
    color: var(--ff-kicker-color);
}

.project-search-standalone {
    flex: 1;
    margin: 0;
    max-width: 380px;
    min-width: min(100%, 280px);
}

/* Hero Code Window */
.hero-code {
    background:
        radial-gradient(circle at 78% 22%, rgba(200, 255, 92, 0.075), transparent 12rem),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
        #0d0f0e;
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius-lg);
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.42),
        0 0 50px rgba(200, 255, 92, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    isolation: isolate;
    box-sizing: border-box;
    margin-left: auto;
    max-width: 440px;
    min-width: 0;
    min-height: 460px;
    width: 100%;
    padding: 1.7rem 1.8rem;
    position: relative;
    transform: rotate(-1.2deg);
    transition: transform var(--ff-transition), box-shadow var(--ff-transition), border-color var(--ff-transition);
    animation: floatCard 6s ease-in-out infinite;
}

.hero-code-head {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    margin: -0.3rem 0 1.35rem;
    padding-bottom: 1rem;
}

.hero-code-head .window-bar {
    margin: 0;
}

.hero-code-head > span {
    color: var(--ff-soft);
    font-family: var(--ff-font-mono);
    font-size: 0.65rem;
}

.hero-code-status {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
    justify-self: end;
}

.hero-code-status::before {
    animation: statusGlow 2.2s ease-in-out infinite;
    background: var(--ff-accent);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(200, 255, 92, 0.45);
    content: "";
    height: 6px;
    width: 6px;
}

.hero-code-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    display: grid;
    gap: 0.45rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: auto;
    padding-top: 1rem;
}

.hero-code-footer span {
    align-items: center;
    color: #cbd2cb;
    display: inline-flex;
    font-size: 0.61rem;
    font-weight: 650;
    gap: 0.32rem;
    justify-content: center;
    white-space: nowrap;
}

.hero-code-footer svg {
    color: var(--ff-accent);
    height: 13px;
    width: 13px;
}

.hero-code::before {
    background: linear-gradient(110deg, transparent 28%, rgba(255, 255, 255, 0.045) 46%, transparent 64%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    transform: translateX(-110%);
    animation: cardSheen 8s 2s ease-in-out infinite;
    z-index: -1;
}

.hero-code:hover {
    border-color: rgba(200, 255, 92, 0.26);
    box-shadow: 0 38px 92px rgba(0, 0, 0, 0.46), 0 0 52px rgba(200, 255, 92, 0.10);
    transform: rotate(0deg) translateY(-6px) scale(1.012);
}

.code-window pre {
    margin: 0;
    overflow-x: auto;
}

.code-window code {
    display: block;
    font-family: var(--ff-font-mono);
    font-size: clamp(0.78rem, 1.08vw, 0.92rem);
    line-height: 1.62;
}

.badge {
    color: var(--ff-accent);
    display: inline-flex;
    font-family: var(--ff-font-mono);
    font-size: var(--ff-kicker);
    font-weight: 650;
    letter-spacing: 0.14em;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
}

.badge::before {
    content: "# ";
    color: var(--ff-kicker-color);
}

.section-title {
    font-size: var(--ff-section-heading);
    letter-spacing: var(--ff-heading-tracking);
    line-height: 0.98;
    margin-bottom: 0.8rem;
    max-width: 12ch;
}

.reveal-line::after {
    background: linear-gradient(90deg, rgba(200, 255, 92, 0.9), rgba(118, 247, 208, 0.2));
    border-radius: 999px;
    content: "";
    display: block;
    height: 2px;
    margin-top: 1.2rem;
    transform: scaleX(0.22);
    transform-origin: left center;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    width: min(220px, 45vw);
}

.window-bar {
    display: flex;
    gap: 0.55rem;
    margin-bottom: 1.8rem;
}

.window-bar span {
    border-radius: 999px;
    height: 12px;
    width: 12px;
    animation: windowDot 3s ease-in-out infinite;
}

.window-bar span:nth-child(1) { background: var(--ff-danger); }
.window-bar span:nth-child(2) { background: var(--ff-star); animation-delay: 0.16s; }
.window-bar span:nth-child(3) { background: #22c55e; animation-delay: 0.32s; }

.code-keyword { color: #d783ff; }
.code-name { color: #ff7185; }
.code-prop { color: #e6a766; }
.code-string { color: #9fd27a; }
.code-boolean { color: #61d9e8; }
.code-window .hero-json-code code {
    font-size: 0;
    line-height: 0;
}

.hero-json-code .code-line {
    font-size: clamp(0.82rem, 1.08vw, 0.96rem);
    line-height: 1.64;
    min-height: 1.64em;
}

.hero-code .hero-json-code {
    margin: auto 0;
}

.code-line {
    animation: codeLineIn 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(0.1s + (var(--line) * 28ms));
    display: block;
    min-height: 1.82em;
}

.code-caret {
    animation: caretBlink 1s steps(1, end) infinite;
    background: var(--ff-accent);
    display: inline-block;
    height: 1.05em;
    margin-left: 0.22rem;
    vertical-align: -0.12em;
    width: 2px;
}

/* Home content */
.home-services {
    padding-top: clamp(4rem, 8vw, 7rem);
    padding-bottom: clamp(4rem, 8vw, 7rem);
    border-top: 1px solid rgba(214, 255, 226, 0.09);
}

.home-section-heading {
    align-items: end;
    display: grid;
    gap: clamp(1.5rem, 5vw, 5rem);
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    margin-bottom: 2rem;
    max-width: none;
}

.home-section-heading h2 {
    color: var(--ff-text);
    font-size: var(--ff-section-heading);
    letter-spacing: var(--ff-heading-tracking);
    line-height: 0.98;
    margin: 0;
    max-width: 660px;
}

.home-final-cta h2 {
    color: var(--ff-text);
    font-size: clamp(2.5rem, 5vw, 4.8rem);
    letter-spacing: var(--ff-heading-tracking);
    line-height: 0.95;
    margin: 0;
}

.home-section-heading > p {
    color: var(--ff-soft);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
    max-width: 520px;
}

.home-final-cta p {
    color: var(--ff-soft);
    font-size: 1rem;
    line-height: 1.7;
    margin: 1rem 0 0;
    max-width: 620px;
}

.home-service-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-service-grid article {
    background: var(--ff-panel-gradient);
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius);
    min-height: 250px;
    min-width: 0;
    padding: clamp(1.35rem, 3vw, 2rem);
    position: relative;
}

.home-service-grid article > span {
    color: rgba(200, 255, 92, 0.45);
    font-family: var(--ff-font-mono);
    font-size: 0.68rem;
    font-weight: 750;
}

.home-service-grid article > span::before {
    content: "$ ";
    color: var(--ff-kicker-color);
}

.home-service-grid article > svg {
    color: var(--ff-accent);
    display: block;
    height: 27px;
    margin: 1.5rem 0 1.2rem;
    width: 27px;
}

.home-service-grid h3 {
    color: var(--ff-text);
    font-size: 1.5rem;
    letter-spacing: -0.035em;
    line-height: 1.05;
    margin: 0 0 0.85rem;
}

.home-service-grid p {
    color: var(--ff-soft);
    font-size: 0.92rem;
    line-height: 1.65;
    margin: 0;
}

.home-final-cta {
    align-items: center;
    background:
        radial-gradient(circle at 85% 25%, rgba(200, 255, 92, 0.13), transparent 20rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 55%),
        var(--ff-panel);
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius-lg);
    box-sizing: border-box;
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    margin-top: clamp(3rem, 6vw, 5rem);
    margin-bottom: clamp(4rem, 8vw, 7rem);
    padding: clamp(1.7rem, 4vw, 3rem);
}

.home-final-cta h2 {
    font-size: clamp(2.2rem, 4.2vw, 4rem);
    max-width: 720px;
}

.home-final-cta .btn {
    flex: 0 0 auto;
}

@media (max-width: 820px) {
    .home-section-heading {
        align-items: start;
        gap: 1rem;
        grid-template-columns: 1fr;
    }

    .home-service-grid {
        grid-template-columns: 1fr;
    }

    .home-final-cta {
        align-items: stretch;
        flex-direction: column;
    }

    .home-final-cta .btn {
        box-sizing: border-box;
        justify-content: center;
        width: 100%;
    }
}

/* Reviews */
.review-page {
    max-width: 1120px;
    padding-top: 9.5rem;
}

.reviews-hero-panel {
    align-items: stretch;
    background: var(--ff-panel);
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius-lg);
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
    margin-bottom: 1.25rem;
    overflow: hidden;
    padding: clamp(1.6rem, 5vw, 3.4rem);
    position: relative;
}

.reviews-hero {
    margin: 0;
}

.reviews-hero h1 {
    color: var(--ff-text);
    font-size: clamp(2.2rem, 5vw, 4rem);
    letter-spacing: var(--ff-heading-tracking);
    line-height: 1.02;
    margin-bottom: 1.4rem;
}

.reviews-hero h1 span {
    color: var(--ff-accent);
}

.reviews-hero p {
    color: var(--ff-soft);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 1.6rem;
    max-width: 620px;
}

.reviews-hero .btn {
    min-height: 50px;
    padding: 0.85rem 1.15rem;
}

/* Score card come mini-terminale "feedback.log" (stessa grammatica della hero-code). */
.review-score-card {
    align-self: stretch;
    background: var(--ff-panel-gradient);
    border: 1px solid rgba(200, 255, 92, 0.16);
    border-radius: var(--ff-radius);
    display: flex;
    flex-direction: column;
    min-height: 270px;
    overflow: hidden;
    padding: 0;
}

/* Stesso chrome della .work-window-head: bar a sinistra, nome file centrato. */
.review-score-head {
    align-items: center;
    border-bottom: 1px solid var(--ff-line);
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr auto 1fr;
    padding: 0.8rem 1.1rem;
}

.review-score-head .window-bar {
    margin: 0;
}

.review-score-head .window-bar span {
    height: 10px;
    width: 10px;
}

.review-score-head > span {
    color: var(--ff-soft);
    font-family: var(--ff-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

.review-score-body {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding: 1.6rem;
    text-align: center;
}

.review-score-body > span {
    color: var(--ff-soft);
    font-family: var(--ff-font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.review-score-body > span::before {
    content: none;
    color: var(--ff-kicker-color);
}

.review-score-card strong {
    color: var(--ff-text);
    display: block;
    font-family: var(--ff-font-mono);
    font-size: clamp(4rem, 8vw, 6.5rem);
    letter-spacing: -0.03em;
    line-height: 0.9;
    margin: 1rem 0 0.75rem;
}

.review-score-card strong small {
    color: var(--ff-soft);
    font-size: 1rem;
    letter-spacing: 0;
}

.review-score-stars {
    color: var(--ff-star);
    font-size: 1.05rem;
    letter-spacing: 0.18em;
}

.review-score-card p {
    color: var(--ff-soft);
    font-size: 0.8rem;
    margin: 0.7rem 0 0;
}

/* Review form modal */
.review-modal {
    padding: 16px;
}

.review-modal-backdrop {
    background:
        radial-gradient(circle at 28% 34%, rgba(200, 255, 92, 0.08), transparent 28rem),
        rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(22px);
    inset: 0;
    position: absolute;
}

.review-modal-panel {
    background: var(--ff-panel-deep);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: var(--ff-radius-lg);
    box-shadow: 0 32px 120px rgba(0, 0, 0, 0.7);
    display: grid;
    grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
    max-height: calc(100dvh - 32px);
    overflow: hidden;
    position: relative;
    width: min(980px, 100%);
}

.review-modal-panel::before {
    background: linear-gradient(90deg, transparent, rgba(200, 255, 92, 0.75), transparent);
    content: "";
    height: 1px;
    left: 10%;
    position: absolute;
    right: 10%;
    top: 0;
}

/* Base del bottone mancante da qualche parte lungo la strada: senza
   `position: absolute` il bottone diventava un item griglia a tutti gli
   effetti, spanava .review-modal-intro nella colonna larga e .review-form-card
   in quella stretta, spaccando l'intero layout della modale (bug reale,
   non solo estetico). */
.review-modal-panel .close-modal {
    align-items: center;
    background: rgba(15, 18, 16, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: var(--ff-text);
    cursor: pointer;
    display: flex;
    height: 40px;
    justify-content: center;
    position: absolute;
    right: 18px;
    top: 18px;
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
    width: 40px;
    z-index: 5;
}

.review-modal-panel .close-modal svg {
    height: 18px;
    width: 18px;
}

.review-modal-panel .close-modal:hover {
    background: rgba(200, 255, 92, 0.14);
    border-color: rgba(200, 255, 92, 0.38);
    transform: rotate(5deg);
}

.review-modal-intro {
    background:
        radial-gradient(circle at 35% 18%, rgba(200, 255, 92, 0.17), transparent 15rem),
        linear-gradient(150deg, rgba(255, 255, 255, 0.035), transparent 55%),
        #111412;
    border-right: 1px solid var(--ff-line);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 570px;
    padding: clamp(1.7rem, 4vw, 2.8rem);
}

.review-modal-kicker,
.review-form-heading > span {
    color: var(--ff-kicker-color);
    /* block + margine: il titolo sotto non ha più il margin-top di default. */
    display: block;
    font-family: var(--ff-font-mono);
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.14em;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.review-modal-kicker::before,
.review-form-heading > span::before {
    content: "// ";
    color: var(--ff-kicker-color);
}

.review-modal-icon {
    align-items: center;
    background: var(--ff-accent);
    border-radius: 18px;
    color: #090b09;
    display: inline-flex;
    height: 54px;
    justify-content: center;
    margin-bottom: 1.35rem;
    transform: rotate(-4deg);
    width: 54px;
}

.review-modal-icon svg {
    height: 25px;
    width: 25px;
}

.review-modal-intro h2 {
    color: var(--ff-text);
    font-size: clamp(2.6rem, 5vw, 4.4rem);
    letter-spacing: var(--ff-heading-tracking);
    line-height: 0.9;
    margin: 0 0 1.25rem;
    max-width: 390px;
}

.review-modal-intro p {
    color: var(--ff-soft);
    font-size: 0.94rem;
    line-height: 1.65;
    margin: 0;
    max-width: 350px;
}

.review-pin-note {
    align-items: flex-start;
    background: rgba(200, 255, 92, 0.075);
    border: 1px solid rgba(200, 255, 92, 0.15);
    border-radius: 18px;
    display: flex;
    gap: 0.8rem;
    padding: 1rem;
}

.review-pin-note > svg {
    color: var(--ff-accent);
    flex: 0 0 auto;
    height: 19px;
    margin-top: 2px;
    width: 19px;
}

.review-pin-note strong,
.review-pin-note span {
    display: block;
}

.review-pin-note strong {
    color: var(--ff-text);
    font-size: 0.84rem;
    margin-bottom: 0.28rem;
}

.review-pin-note span {
    color: var(--ff-soft);
    font-size: 0.72rem;
    line-height: 1.45;
}

.review-pin-note-ok {
    background: rgba(118, 247, 208, 0.08);
    border-color: rgba(118, 247, 208, 0.18);
}

.review-pin-note-ok > svg {
    color: var(--ff-cyan);
}

.review-verified-activity {
    align-items: center;
    background:
        radial-gradient(circle at 12% 0%, rgba(200, 255, 92, 0.14), transparent 12rem),
        rgba(200, 255, 92, 0.05);
    border: 1px solid rgba(200, 255, 92, 0.22);
    border-radius: 16px;
    display: grid;
    gap: 0.8rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    margin: 0 0 1.25rem;
    padding: 0.95rem 1rem;
}

.review-verified-activity > svg {
    color: var(--ff-accent);
    flex: 0 0 auto;
    height: 22px;
    width: 22px;
}

.review-verified-activity strong,
.review-verified-activity span {
    display: block;
}

.review-verified-activity strong {
    color: var(--ff-text);
    font-size: 0.84rem;
    margin-bottom: 0.22rem;
}

.review-verified-activity span {
    color: var(--ff-soft);
    font-size: 0.76rem;
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.review-change-pin {
    color: var(--ff-soft);
    flex: 0 0 auto;
    font-family: var(--ff-font-mono);
    font-size: 0.62rem;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 180ms ease;
    white-space: nowrap;
}

.review-change-pin:hover {
    color: var(--ff-accent);
}

.review-identity-note span strong {
    color: var(--ff-text);
    font-weight: 750;
}

.review-modal-panel .review-form-card {
    background: var(--ff-panel-deep);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    padding: clamp(2rem, 4vw, 3rem);
    scrollbar-color: rgba(200, 255, 92, 0.35) transparent;
    scrollbar-width: thin;
}

.review-form-heading {
    margin-bottom: 1.7rem;
    padding-right: 3rem;
}

.review-form-heading h3 {
    color: var(--ff-text);
    font-size: clamp(1.65rem, 3vw, 2.25rem);
    letter-spacing: var(--ff-heading-tracking);
    line-height: 1.05;
    margin: 0.5rem 0 0;
}

.review-submit-form .form-grid {
    gap: 0.8rem;
}

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

.review-submit-form .form-group label,
.client-review-form .form-group label,
.client-pin-form .form-group label {
    color: var(--ff-soft);
    font-family: var(--ff-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    margin-bottom: 0.45rem;
    text-transform: uppercase;
}

.review-submit-form .form-group input,
.review-submit-form .form-group textarea,
.review-select-wrap {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.105);
    border-radius: 14px;
}

.review-submit-form .form-group input,
.review-submit-form .form-group textarea {
    min-height: 48px;
    padding: 0.8rem 0.9rem;
}

.review-submit-form .form-group input:focus,
.review-submit-form .form-group textarea:focus,
.review-select-wrap:focus-within {
    background: rgba(200, 255, 92, 0.035);
    border-color: rgba(200, 255, 92, 0.48);
    box-shadow: 0 0 0 4px rgba(200, 255, 92, 0.07);
}

.review-project-preview {
    align-items: center;
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.08);
    border-radius: 13px;
    display: flex;
    gap: 0.65rem;
    margin: 0 0 1rem;
    padding: 0.7rem 0.8rem;
}

.review-project-preview > svg {
    color: var(--ff-accent);
    flex: 0 0 auto;
    height: 16px;
    width: 16px;
}

.review-project-preview span {
    font-family: var(--ff-font-sans);
    font-size: 0.69rem;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1.4;
    text-transform: none;
}

.review-form-grid-secondary {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: minmax(170px, 0.62fr) minmax(0, 1.38fr);
}

.privacy-consent {
    align-items: flex-start;
    color: var(--ff-soft);
    cursor: pointer;
    display: flex;
    font-size: 0.76rem;
    gap: 0.65rem;
    line-height: 1.55;
    margin: 0.4rem 0 1rem;
}

.privacy-consent input {
    accent-color: var(--ff-accent);
    flex: 0 0 auto;
    height: 17px;
    margin-top: 0.15rem;
    width: 17px;
}

.review-select-wrap {
    align-items: center;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 18px;
    min-height: 48px;
    padding: 0 0.8rem;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.review-select-wrap > svg:first-child {
    color: var(--ff-star);
}

.review-select-wrap > svg {
    height: 17px;
    pointer-events: none;
    width: 17px;
}

.review-select-wrap select {
    appearance: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--ff-text);
    height: 46px;
    min-width: 0;
    outline: 0;
    padding: 0 0.55rem;
    width: 100%;
}

.review-message-field textarea {
    min-height: 104px !important;
    resize: none;
}

.review-form-footer {
    align-items: center;
    border-top: 1px solid var(--ff-line);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 0.2rem;
    padding-top: 1rem;
}

.review-form-footer > span {
    align-items: center;
    color: var(--ff-soft);
    display: inline-flex;
    font-size: 0.68rem;
    gap: 0.4rem;
}

.review-form-footer > span svg {
    color: var(--ff-accent);
    height: 15px;
    width: 15px;
}

.review-form-footer .btn {
    flex: 0 0 auto;
    min-height: 46px;
    padding: 0.75rem 1rem;
}

.admin-feedback-hero {
    align-items: stretch;
    background: var(--ff-panel);
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius-lg);
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
    margin: 0.75rem 0 0.9rem;
    overflow: hidden;
    padding: clamp(1.4rem, 3.5vw, 2.4rem);
}

.admin-feedback-hero-copy {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.admin-feedback-hero-copy h2 {
    font-size: var(--ff-section-heading);
    letter-spacing: var(--ff-heading-tracking);
    line-height: 0.98;
    margin: 0;
    max-width: 11ch;
}

.admin-feedback-hero-copy p {
    color: var(--ff-soft);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 60ch;
}

.admin-feedback-hero-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.admin-feedback-note {
    align-items: center;
    color: var(--ff-soft);
    display: inline-flex;
    font-size: 0.76rem;
    gap: 0.45rem;
}

.admin-feedback-note svg {
    color: var(--ff-accent);
    height: 15px;
    width: 15px;
}

.admin-feedback-hero-card {
    align-content: center;
    background: var(--ff-panel-deep);
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius-sm);
    display: grid;
    gap: 1rem;
    padding: 1.2rem;
}

.admin-feedback-hero-score {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.admin-feedback-hero-score > span,
.admin-feedback-hero-mini span {
    color: var(--ff-soft);
    font-family: var(--ff-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.admin-feedback-hero-score strong {
    color: var(--ff-text);
    font-family: var(--ff-font-mono);
    font-size: clamp(2.8rem, 6vw, 4.2rem);
    letter-spacing: -0.03em;
    line-height: 0.9;
}

.admin-feedback-hero-mini {
    display: grid;
    gap: 0.7rem;
}

.admin-feedback-hero-mini div {
    align-items: center;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    display: flex;
    justify-content: space-between;
    padding: 0.8rem 0.9rem;
}

.admin-feedback-hero-mini strong {
    color: var(--ff-text);
    font-size: 0.95rem;
    max-width: 18ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-review-actions {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.admin-review-actions form {
    margin: 0;
}

.admin-review-edit {
    align-items: center;
    display: grid;
    gap: 0.45rem;
    grid-template-columns: minmax(180px, 1fr) auto;
    width: 100%;
}

.admin-review-edit input {
    min-height: 38px;
    padding: 0.55rem 0.7rem;
}

.admin-review-actions .btn {
    min-height: 38px;
    padding: 0.6rem 0.8rem;
}

.admin-review-list {
    display: grid;
    gap: 0.85rem;
}

.admin-review-card {
    background: var(--ff-panel);
    border-radius: var(--ff-radius);
    padding: 1.1rem 1.2rem;
}

.admin-review-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    align-items: start;
    gap: 1rem;
}

.admin-review-copy {
    display: grid;
    gap: 0.55rem;
    min-width: 0;
}

.admin-review-title-row {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    min-width: 0;
}

.admin-review-title-row h4 {
    font-size: 1.08rem;
    letter-spacing: -0.03em;
    margin: 0;
}

.admin-review-rating {
    color: var(--ff-star);
    font-size: 0.9rem;
    letter-spacing: 0.16em;
    white-space: nowrap;
}

.admin-review-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.admin-review-date {
    align-items: center;
    color: var(--ff-soft);
    display: inline-flex;
    font-size: 0.72rem;
    gap: 0.35rem;
}

.admin-review-date svg {
    height: 14px;
    width: 14px;
}

.admin-review-text {
    color: #dde5de;
    font-size: 0.98rem;
    line-height: 1.72;
    margin: 0;
    max-width: 74ch;
}

.public-reviews {
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

.public-review-head {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.public-review-head h2 {
    font-size: var(--ff-section-heading);
    letter-spacing: var(--ff-heading-tracking);
    line-height: 0.95;
    margin-bottom: 0.6rem;
}

.public-review-head p {
    color: var(--ff-soft);
}

.public-review-head > svg {
    color: rgba(200, 255, 92, 0.14);
    height: 56px;
    width: 56px;
}

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

.review-card {
    background: var(--ff-panel-gradient);
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius);
    min-width: 0;
    padding: 1.4rem;
}

/* display:flex viveva nel CSS legacy rimosso (align-items/gap erano rimasti
   orfani e la media query mobile imposta ancora flex-direction: column):
   senza, persona e meta si impilavano anche su desktop. */
.review-card header {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.review-card-meta {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.review-person {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    min-width: 0;
}

.review-avatar {
    align-items: center;
    background: rgba(200, 255, 92, 0.11);
    border: 1px solid rgba(200, 255, 92, 0.22);
    border-radius: var(--ff-radius-sm);
    color: var(--ff-accent) !important;
    display: inline-flex;
    flex: 0 0 42px;
    font-family: var(--ff-font-mono);
    font-size: 0.9rem;
    font-weight: 700;
    height: 42px;
    justify-content: center;
}

.review-person small {
    display: block;
    line-height: 1.4;
    margin-top: 0.25rem;
}

.review-quote {
    color: #dce4dd !important;
    font-size: 1rem;
    line-height: 1.75 !important;
    margin: 1.3rem 0;
}

.review-quote::before {
    content: none;
    color: var(--ff-kicker-color);
    font-family: var(--ff-font-mono);
    font-weight: 700;
}

.review-empty-state {
    align-items: center;
    background:
        radial-gradient(circle at 50% 0%, rgba(200, 255, 92, 0.08), transparent 16rem),
        rgba(15, 17, 16, 0.66);
    border: 1px dashed rgba(200, 255, 92, 0.20);
    border-radius: var(--ff-radius-lg);
    display: flex;
    flex-direction: column;
    grid-column: 1 / -1;
    justify-content: center;
    min-height: 310px;
    padding: 2rem;
    text-align: center;
}

.review-empty-state > span {
    align-items: center;
    background: rgba(200, 255, 92, 0.09);
    border: 1px solid rgba(200, 255, 92, 0.18);
    border-radius: var(--ff-radius-sm);
    color: var(--ff-accent);
    display: inline-flex;
    height: 56px;
    justify-content: center;
    margin-bottom: 1rem;
    width: 56px;
}

.review-empty-state > span svg {
    height: 25px;
    width: 25px;
}

.review-empty-state h3 {
    font-size: 1.7rem;
    letter-spacing: -0.03em;
    margin-bottom: 0.6rem;
}

.review-empty-state p {
    color: var(--ff-soft);
    margin-bottom: 1.2rem;
    max-width: 480px;
}

.review-empty-state .btn {
    padding: 0.75rem 1rem;
}

/* ──────────────────────────────────────────────────────
   CARDS & PANELS
   ────────────────────────────────────────────────────── */

.card,
.contact-card,
.not-found-card,
.login-card,
.login-choice-card,
.client-card,
.admin-header,
.admin-card,
.message-card,
.project-row,
.success-banner {
    background: var(--ff-panel-gradient);
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 16px 48px rgba(0, 0, 0, 0.20);
    transition:
        border-color var(--ff-transition),
        box-shadow var(--ff-transition),
        transform var(--ff-transition),
        background var(--ff-transition);
}

/* Login / contatti: portiamo lo stile legacy (accent cyan,
   vetro bianco) nel sistema unificato lime + panel */
.login-choice-card.is-active {
    background:
        radial-gradient(circle at 88% 12%, rgba(200, 255, 92, 0.12), transparent 12rem),
        var(--ff-panel);
    border-color: rgba(200, 255, 92, 0.32);
    box-shadow: 0 0 40px rgba(200, 255, 92, 0.06);
}

.login-choice-icon {
    align-items: center;
    background: rgba(200, 255, 92, 0.08);
    border: 1px solid rgba(200, 255, 92, 0.2);
    border-radius: var(--ff-radius-sm);
    color: var(--ff-accent);
    display: flex;
    height: 56px;
    justify-content: center;
    margin-bottom: 1.1rem;
    width: 56px;
}

.login-choice-card h2 {
    letter-spacing: -0.02em;
}

.login-choice-card p {
    color: var(--ff-soft);
}

.login-portal-head h1,
.login-portal-head p {
    color: var(--ff-soft);
}

.warning-banner {
    background: rgba(255, 209, 102, 0.08);
    border-color: rgba(255, 209, 102, 0.24);
    color: #ffe0a3;
}

.warning-banner svg {
    color: var(--ff-star);
}

.card:hover,
.contact-card:hover,
.login-choice-card:hover,
.client-card:hover,
.admin-card:hover,
.message-card:hover,
.project-row:hover,
.review-card:hover {
    border-color: rgba(200, 255, 92, 0.24);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 22px 60px rgba(0, 0, 0, 0.26),
        0 0 34px rgba(200, 255, 92, 0.055);
    transform: translateY(-3px);
}

.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.card-tags .tag {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
}

.tag-featured {
    background: rgba(200, 255, 92, 0.08);
    border-color: rgba(200, 255, 92, 0.22);
    color: #e5ff8f;
}

/* Projects page — editorial showcase */
.work-list {
    display: grid;
    gap: clamp(2.2rem, 5vw, 4.5rem);
}

.work-item {
    border-top: 1px solid var(--ff-line);
    padding-top: clamp(1.8rem, 4vw, 3rem);
}

.work-item.is-pinned {
    border-top-color: rgba(200, 255, 92, 0.34);
}

.work-item-head {
    align-items: start;
    display: grid;
    gap: 1.2rem 2.2rem;
    grid-template-columns: auto 1fr auto;
}

.work-index {
    color: var(--ff-accent);
    font-family: var(--ff-font-mono);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    padding-top: 0.55rem;
}

.work-item-title h2 {
    color: var(--ff-text);
    font-size: clamp(2.1rem, 5.4vw, 4.3rem);
    letter-spacing: var(--ff-heading-tracking);
    line-height: 1.02;
    margin: 0;
}

.work-item-title p {
    color: var(--ff-soft);
    font-size: 1.02rem;
    line-height: 1.6;
    margin: 0.6rem 0 0;
    max-width: 56ch;
}

.work-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    /* 0.5rem: il bordo dei chip si allinea otticamente alla cap line dell'h2 */
    padding-top: 0.5rem;
}

.work-item-tags .tag {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
}

/* Tag: unico trattamento lime (sostituisce il vecchio cyan).
   La geometria di base viveva nel CSS legacy rimosso: senza queste righe
   i tag renderizzavano come testo nudo (niente bordo, padding o mono). */
.tag {
    align-items: center;
    background: rgba(200, 255, 92, 0.07);
    border: 1px solid rgba(200, 255, 92, 0.18);
    border-radius: 8px;
    color: #d8ffa6;
    display: inline-flex;
    font-family: var(--ff-font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    gap: 0.35rem;
    letter-spacing: 0.02em;
    padding: 0.32rem 0.6rem;
    white-space: nowrap;
}

.tag svg {
    height: 12px;
    width: 12px;
}

/* Finestra terminale attorno al media: stessa grammatica della hero-code in home
   (window-bar a tre punti, titolo mono, status "live" con pallino animato). */
.work-window {
    background: var(--ff-panel-deep);
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius-lg);
    margin-top: clamp(1.4rem, 3vw, 2.2rem);
    overflow: hidden;
    transition: border-color var(--ff-transition);
}

.work-window:hover {
    border-color: rgba(200, 255, 92, 0.35);
}

.work-window-head {
    align-items: center;
    border-bottom: 1px solid var(--ff-line);
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr auto 1fr;
    padding: 0.8rem 1.1rem;
}

.work-window-head .window-bar {
    margin: 0;
}

.work-window-head .window-bar span {
    height: 10px;
    width: 10px;
}

.work-window-title {
    color: var(--ff-soft);
    font-family: var(--ff-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-window-status {
    align-items: center;
    color: var(--ff-accent);
    display: inline-flex;
    font-family: var(--ff-font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    gap: 0.35rem;
    justify-self: end;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.work-window-status::before {
    animation: statusGlow 2.2s ease-in-out infinite;
    background: var(--ff-accent);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(200, 255, 92, 0.45);
    content: "";
    height: 6px;
    width: 6px;
}

.work-media {
    background: var(--ff-panel-deep);
    display: block;
    min-height: clamp(260px, 42vw, 460px);
    overflow: hidden;
    position: relative;
}

.work-media-img {
    animation: mediaKenBurns 24s ease-in-out infinite alternate;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    inset: 0;
    position: absolute;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

a.work-media:hover .work-media-img {
    animation-play-state: paused;
    transform: scale(1.04);
}

.work-media-logo {
    align-items: center;
    display: flex;
    justify-content: center;
}

.work-media-logo-img {
    animation: logoFloat 7s ease-in-out infinite;
    display: block;
    filter: drop-shadow(0 0 44px rgba(200, 255, 92, 0.14));
    height: auto;
    max-width: min(76%, 480px);
    width: 100%;
}

.work-media-hint {
    align-items: center;
    backdrop-filter: blur(6px);
    background: rgba(7, 8, 7, 0.78);
    border: 1px solid rgba(200, 255, 92, 0.3);
    border-radius: 999px;
    bottom: 1.2rem;
    color: var(--ff-text);
    display: inline-flex;
    font-size: 0.85rem;
    font-weight: 600;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    position: absolute;
    right: 1.2rem;
}

.work-metrics {
    margin-top: 1.6rem;
}

.work-creatives {
    margin-top: 1.2rem;
}

@media (max-width: 760px) {
    .work-item-head {
        grid-template-columns: auto 1fr;
    }

    .work-item-tags {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding-top: 0.2rem;
    }
}

.motion-ready [data-reveal] {
    opacity: 0;
    transform: translateY(28px) scale(0.98);
    transition:
        opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

.motion-ready [data-reveal="slide-left"] {
    transform: translate3d(-32px, 24px, 0) scale(0.98);
}

.motion-ready [data-reveal="slide-right"] {
    transform: translate3d(32px, 24px, 0) scale(0.98);
}

.motion-ready [data-reveal="zoom-in"] {
    transform: translateY(24px) scale(0.94);
}

.motion-ready [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.motion-ready .reveal-line[data-reveal].is-visible::after,
.motion-ready [data-reveal].is-visible.reveal-line::after {
    transform: scaleX(1);
}

.hero-skills span {
    transition:
        background var(--ff-transition),
        border-color var(--ff-transition),
        color var(--ff-transition),
        transform var(--ff-transition);
}

.hero-skills span:hover {
    background: rgba(200, 255, 92, 0.11);
    border-color: rgba(200, 255, 92, 0.25);
    color: var(--ff-text);
    transform: translateY(-2px);
}

@media (max-width: 980px) {
    .project-media-img {
        min-height: 340px;
    }

    .project-media-wordmark-img {
        max-width: min(100%, 300px);
    }
}

@media (max-width: 640px) {
    .project-media-img {
        min-height: 260px;
    }

    .project-media-wordmark {
        min-height: 340px;
        padding: 0.85rem;
    }
}

@keyframes auraDrift {
    0% {
        transform: translate3d(-1.5%, -1%, 0) rotate(0deg) scale(1);
    }

    100% {
        transform: translate3d(1.5%, 1.2%, 0) rotate(2deg) scale(1.04);
    }
}

@keyframes navAura {
    0% {
        opacity: 0.22;
        transform: translateX(-2%) scaleX(0.96);
    }

    100% {
        opacity: 0.42;
        transform: translateX(2%) scaleX(1.02);
    }
}

@keyframes floatCard {
    0%, 100% {
        transform: rotate(-1.2deg) translateY(0);
    }

    50% {
        transform: rotate(-0.45deg) translateY(-14px);
    }
}

@keyframes mediaKenBurns {
    0% {
        transform: scale(1.02) translate3d(0, 0, 0);
    }

    100% {
        transform: scale(1.1) translate3d(-1.5%, -1%, 0);
    }
}

@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}

@keyframes statusGlow {
    0%, 100% {
        box-shadow: 0 0 8px rgba(200, 255, 92, 0.4);
        opacity: 0.85;
    }

    50% {
        box-shadow: 0 0 18px rgba(200, 255, 92, 0.85);
        opacity: 1;
    }
}

@keyframes cardSheen {
    0%, 72% {
        opacity: 0;
        transform: translateX(-110%);
    }

    82% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateX(110%);
    }
}

@keyframes codeLineIn {
    from {
        filter: blur(4px);
        opacity: 0;
        transform: translateX(-12px);
    }

    to {
        filter: blur(0);
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes aboutChartGrow {
    from {
        opacity: 0;
        transform: scaleX(0);
        transform-origin: left center;
    }

    to {
        opacity: 1;
        transform: scaleX(1);
        transform-origin: left center;
    }
}

@keyframes blinkBlock {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes caretBlink {
    0%, 48% { opacity: 1; }
    49%, 100% { opacity: 0; }
}

/* Solo transform/opacity: la versione precedente animava box-shadow, che
   forza un repaint ad ogni frame invece di girare sul compositor — pesa
   su ogni pannello con window-bar del sito (Lighthouse: "non-composited
   animation"), per un effetto puramente decorativo. */
@keyframes windowDot {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

@keyframes softPulse {
    0%, 100% {
        box-shadow: inset 0 1px 0 rgba(200, 255, 92, 0.05), 0 0 0 rgba(200, 255, 92, 0);
    }

    50% {
        box-shadow: inset 0 1px 0 rgba(200, 255, 92, 0.08), 0 0 26px rgba(200, 255, 92, 0.08);
    }
}

@keyframes textAura {
    0% {
        text-shadow: 0 0 18px rgba(200, 255, 92, 0.08);
    }

    100% {
        text-shadow: 0 0 38px rgba(200, 255, 92, 0.16);
    }
}

/* ──────────────────────────────────────────────────────
   ADMIN PANEL
   ────────────────────────────────────────────────────── */

.admin-body {
    padding-top: 6rem;
}

.admin-shell.admin-body {
    display: grid;
    gap: 1rem;
    grid-template-columns: 210px minmax(0, 1fr);
    max-width: 1280px;
}

.admin-header,
.admin-section-head,
.admin-project-stats,
.admin-project-toolbar,
.project-list,
.message-list,
.success-banner,
.project-editor-layout {
    grid-column: 2;
}

.admin-header {
    background: var(--ff-panel);
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius);
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    padding: 1.6rem 1.8rem;
}

.admin-header .badge {
    margin-bottom: 0.6rem;
}

.admin-header h1 {
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    letter-spacing: -0.03em;
}

.admin-header p,
.admin-section-head p,
.project-row-copy p {
    color: var(--ff-soft);
}

.admin-actions .btn,
.row-actions .btn,
.admin-project-toolbar .btn {
    border-radius: 11px;
    min-height: 40px;
    padding: 0.68rem 0.9rem;
}

.admin-tabs {
    align-self: start;
    background: var(--ff-panel);
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius);
    display: grid;
    gap: 4px;
    grid-column: 1;
    grid-row: 1 / span 7;
    grid-template-columns: 1fr;
    margin: 0;
    padding: 12px;
    position: sticky;
    top: 80px;
    width: 100%;
}

.admin-tabs a,
.admin-tabs .tab-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--ff-radius-sm);
    color: var(--ff-soft);
    display: inline-flex;
    font-family: var(--ff-font-sans);
    font-size: 0.88rem;
    font-weight: 600;
    gap: 0.65rem;
    justify-content: flex-start;
    padding: 0.85rem 0.9rem;
    text-decoration: none;
    transition: background var(--ff-transition), border-color var(--ff-transition), color var(--ff-transition);
}

.admin-tabs a svg,
.admin-tabs .tab-btn svg {
    color: var(--ff-soft);
    flex: 0 0 auto;
    height: 17px;
    transition: color var(--ff-transition);
    width: 17px;
}

.admin-tabs a:hover,
.admin-tabs .tab-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--ff-text);
}

.admin-tabs a.is-active,
.admin-tabs .tab-btn.is-active {
    background: var(--ff-accent);
    border-color: var(--ff-accent);
    color: var(--ff-on-accent);
}

.admin-tabs a.is-active svg,
.admin-tabs .tab-btn.is-active svg {
    color: var(--ff-on-accent);
}

.admin-section-head {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin: 0.5rem 0 0;
}

.admin-section-head h2 {
    font-size: 1.5rem;
    letter-spacing: -0.03em;
}

.admin-project-stats {
    gap: 0.7rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 0;
}

.admin-review-stats {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0.65rem 0 0.15rem;
}

.admin-project-stats div,
.admin-review-stats div,
.admin-search-field,
.admin-project-toolbar select,
.project-row,
.message-card,
.admin-form-section,
.project-editor-nav {
    background: var(--ff-panel);
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius-sm);
    box-shadow: none;
}

.admin-project-stats div,
.admin-review-stats div {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.3rem;
    padding: 1rem 1.1rem;
}

.admin-project-stats div > span {
    color: var(--ff-soft);
    font-size: 0.76rem;
    font-weight: 600;
}

.admin-project-stats strong {
    color: var(--ff-text);
    font-family: var(--ff-font-mono);
    font-size: 1.9rem;
    letter-spacing: -0.02em;
}

.admin-review-stats span {
    color: var(--ff-soft);
    display: block;
    font-size: 0.76rem;
    font-weight: 600;
    margin-bottom: 0.45rem;
}

.admin-review-stats strong {
    color: var(--ff-text);
    font-size: 1.1rem;
    line-height: 1.35;
}

.admin-project-toolbar {
    grid-template-columns: minmax(240px, 1fr) 150px 150px auto;
    margin-bottom: 0;
}

.admin-search-field input,
.admin-project-toolbar select {
    color: var(--ff-text);
    min-height: 42px;
}

.project-list,
.message-list {
    gap: 0.65rem;
}

.project-row {
    padding: 0.8rem;
    transition: border-color var(--ff-transition);
}

.message-card {
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
}

.project-row:hover {
    border-color: rgba(200, 255, 92, 0.20);
}

.message-card-head {
    align-items: start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.message-card-head > div:first-child {
    min-width: 0;
}

.message-card-head h4 {
    font-size: 1rem;
    margin-bottom: 0.35rem;
}

.message-card-head a,
.message-card-head .admin-review-source {
    overflow-wrap: anywhere;
}

.message-card-head a {
    color: var(--ff-cyan);
    text-decoration: none;
}

.message-card-head a:hover {
    text-decoration: underline;
}

.project-thumb {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 10px;
    flex-basis: 78px;
    height: 56px;
    width: 78px;
}

.drag-handle {
    border-radius: 10px;
    height: 36px;
    width: 30px;
}

.project-row-copy h3 {
    font-size: 1rem;
}

.project-row-copy p {
    font-size: 0.85rem;
    -webkit-line-clamp: 1;
}

.project-row-meta {
    margin-top: 0.45rem;
}

.project-row-meta span,
.admin-pill {
    border-radius: 8px;
    font-size: 0.66rem;
    letter-spacing: 0.04em;
}

.admin-pill.is-live {
    background: rgba(200, 255, 92, 0.12);
    color: var(--ff-accent);
}

.admin-pill.is-draft {
    background: rgba(255, 209, 102, 0.12);
    color: var(--ff-star);
}

.row-actions {
    max-width: 320px;
}

.admin-review-actions {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-width: min(100%, 360px);
}

.admin-review-actions > span {
    color: var(--ff-soft);
    font-size: 0.78rem;
    text-align: right;
}

.admin-review-edit {
    display: grid;
    gap: 0.45rem;
    grid-template-columns: minmax(0, 1fr) auto;
    width: min(100%, 360px);
}

.admin-review-edit input {
    min-height: 44px;
}

.admin-review-edit .btn {
    justify-content: center;
}

.message-card p {
    color: var(--ff-soft);
    line-height: 1.65;
    margin: 0;
}

.message-card time {
    color: var(--ff-soft);
    display: block;
    font-size: 0.72rem;
}

.btn-danger {
    background: rgba(255, 107, 107, 0.12);
    border-color: rgba(255, 107, 107, 0.25);
    color: #ff9b9b;
}

.project-editor-layout {
    display: grid;
    align-items: start;
    gap: 1rem;
    grid-column: 2;
    grid-template-columns: 190px minmax(0, 1fr);
}

.project-editor-nav {
    align-self: start;
    background: var(--ff-panel);
    border: 1px solid var(--ff-line);
    border-radius: 18px;
    display: grid;
    gap: 0.45rem;
    padding: 0.85rem;
    position: sticky;
    top: 80px;
}

.project-editor-nav a {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--ff-soft);
    display: inline-flex;
    gap: 0.55rem;
    min-height: 42px;
    padding: 0.7rem 0.8rem;
    text-decoration: none;
    transition: background var(--ff-transition), border-color var(--ff-transition), color var(--ff-transition);
}

.project-editor-nav a:hover {
    background: rgba(200, 255, 92, 0.08);
    border-color: rgba(200, 255, 92, 0.16);
    color: var(--ff-text);
}

.project-editor-overview {
    display: grid;
    gap: 0.6rem;
    grid-column: 2;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: -0.15rem;
}

.project-editor-overview div {
    background: var(--ff-panel);
    border: 1px solid var(--ff-line);
    border-radius: 14px;
    padding: 0.85rem 0.9rem;
}

.project-editor-overview span {
    color: var(--ff-soft);
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}

.project-editor-overview strong {
    color: var(--ff-text);
    display: block;
    font-size: 0.98rem;
    line-height: 1.4;
}

.project-editor-form {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.project-editor-section {
    display: grid;
    gap: 1rem;
}

.admin-form-section {
    padding: 0.9rem;
}

/* Come .admin-form-section-head non aveva nessuna regola base (solo questo
   override colore sul numero), l'elemento renderizzava come testo inline
   nudo impilato sopra il titolo invece che come intestazione numerata
   allineata — stesso schema di .about-method li, riusato qui. */
.admin-form-section-head {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: auto minmax(0, 1fr);
    margin-bottom: 1.1rem;
}

.admin-form-section-head > span {
    align-items: center;
    background: var(--ff-accent);
    border-radius: var(--ff-radius-sm);
    color: var(--ff-on-accent);
    display: flex;
    flex: 0 0 auto;
    font-family: var(--ff-font-mono);
    font-size: 0.78rem;
    font-weight: 750;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.admin-form-section-head h3 {
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    margin-bottom: 0.3rem;
}

.admin-form-section-head p {
    color: var(--ff-soft);
    font-size: 0.86rem;
    margin: 0;
}

.project-editor-save {
    background: rgba(8, 9, 8, 0.86);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-color: var(--ff-line);
    border-radius: var(--ff-radius-sm);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.42);
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 0.95rem;
    position: sticky;
    bottom: 0.75rem;
    z-index: 2;
}

input,
textarea,
select {
    background: rgba(5, 7, 6, 0.62);
    border: 1px solid var(--ff-line);
    border-radius: 14px;
    box-sizing: border-box;
    color: var(--ff-text);
    font-family: var(--ff-font-mono);
    font-size: 0.95rem;
    min-height: 48px;
    padding: 0.8rem 0.9rem;
    width: 100%;
}

input[type="checkbox"],
input[type="radio"],
input[type="hidden"] {
    min-height: 0;
    padding: 0;
    width: auto;
}

/* Il browser sovrascrive lo sfondo con un colore nativo (di norma giallo)
   quando compila un campo salvato — lo riportiamo al tema scuro. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px rgba(11, 13, 11, 0.98) inset;
    -webkit-text-fill-color: var(--ff-text);
    caret-color: var(--ff-text);
    transition: background-color 9999s ease-in-out 0s;
}

.feedback-pin-control {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.feedback-pin-control .btn {
    min-height: 48px;
    padding: 0.75rem 0.9rem;
}

.form-hint {
    color: var(--ff-soft);
    display: block;
    font-size: 0.68rem;
    line-height: 1.4;
    margin-top: 0.45rem;
}

/* ──────────────────────────────────────────────────────
   LEGAL & MISC
   ────────────────────────────────────────────────────── */

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

/* Pagine legali come documento (/privacy-policy, /cookie-policy, /copyright,
   /vexohost): UNA colonna centrata. Con l'indice in sidebar il testo finiva
   146px a destra del centro pagina — la colonna larga 900px era centrata, la
   prosa dentro no. Qui l'indice sta sopra, a tutta larghezza. */
/* Selettore composto: .contact-page (max-width: 900px) e' piu' in basso nel
   file, con la sola .legal-page vinceva lui per ordine di sorgente. */
.contact-page.legal-page {
    max-width: 760px;
}

.legal-doc-head h1 {
    font-size: clamp(2.3rem, 4.6vw, 3.1rem);
    line-height: 1.04;
    margin-bottom: 0.9rem;
}

.legal-doc-head > p {
    color: var(--ff-soft);
    font-size: 1.08rem;
    line-height: 1.7;
    margin: 0;
}

.legal-doc-head .form-hint {
    margin-top: 0.7rem;
}

.legal-doc-meta {
    align-items: baseline;
    border-top: 1px solid var(--ff-line);
    color: var(--ff-soft);
    display: flex;
    flex-wrap: wrap;
    font-family: var(--ff-font-mono);
    font-size: 0.72rem;
    gap: 0.4rem 1rem;
    justify-content: space-between;
    letter-spacing: 0.08em;
    margin-top: 1.7rem;
    padding-top: 0.9rem;
    text-transform: uppercase;
}

.legal-doc-index {
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius);
    display: grid;
    gap: 0.1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 1.5rem 0;
    padding: 0.5rem;
}

.legal-doc-index a {
    align-items: baseline;
    border-radius: var(--ff-radius-sm);
    color: var(--ff-soft);
    display: flex;
    font-size: 0.88rem;
    gap: 0.6rem;
    padding: 0.6rem 0.7rem;
    text-decoration: none;
    transition: background 180ms ease, color 180ms ease;
}

.legal-doc-index a:hover {
    background: rgba(200, 255, 92, 0.07);
    color: var(--ff-text);
}

.legal-doc-index strong {
    color: var(--ff-accent);
    flex: 0 0 auto;
    font-family: var(--ff-font-mono);
    font-size: 0.72rem;
}

.legal-doc-body {
    padding: clamp(1.6rem, 4vw, 2.5rem);
}

.legal-doc-section {
    border-top: 1px solid var(--ff-line);
    padding: 2rem 0;
    /* Niente scroll-margin qui: html ha già scroll-padding-top: 100px per la
       nav fissa, i due si sommavano e l'ancora atterrava 196px sotto. */
}

.legal-doc-section:first-child {
    border-top: 0;
    padding-top: 0;
}

.legal-doc-section:last-child {
    padding-bottom: 0;
}

.legal-doc-number {
    color: var(--ff-accent);
    display: block;
    font-family: var(--ff-font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    margin-bottom: 0.5rem;
}

.legal-doc-section h2 {
    font-size: 1.32rem;
    letter-spacing: -0.02em;
    margin-bottom: 0.7rem;
}

.legal-doc-section p,
.legal-doc-section ul {
    color: var(--ff-soft);
    line-height: 1.75;
    margin: 0;
}

.legal-doc-section :is(p, ul, dl) + :is(p, ul, dl) {
    margin-top: 0.9rem;
}

.legal-doc-section ul {
    display: grid;
    gap: 0.75rem;
    padding-left: 1.15rem;
}

.legal-doc-section li strong {
    color: var(--ff-text);
}

.legal-doc-section a {
    color: var(--ff-accent);
    text-underline-offset: 3px;
}

/* Scheda a coppie etichetta/valore: nella colonna stretta del documento una
   tabella a 4 colonne andrebbe in scroll orizzontale anche su desktop. */
.legal-doc-facts {
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius);
    display: grid;
    margin: 0;
    overflow: hidden;
}

.legal-doc-facts > div {
    align-items: baseline;
    border-top: 1px solid var(--ff-line);
    display: grid;
    gap: 0.4rem 1rem;
    grid-template-columns: 120px minmax(0, 1fr);
    padding: 0.85rem 1rem;
}

.legal-doc-facts > div:first-child {
    border-top: 0;
}

.legal-doc-facts dt {
    color: var(--ff-soft);
    font-family: var(--ff-font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.legal-doc-facts dd {
    color: var(--ff-text);
    line-height: 1.6;
    margin: 0;
}

.legal-doc-facts code {
    color: var(--ff-accent);
}

@media (max-width: 560px) {
    .legal-doc-facts > div {
        grid-template-columns: 1fr;
    }
}

.legal-doc-cta {
    align-items: center;
    background: var(--ff-panel);
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius-lg);
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    justify-content: space-between;
    margin-top: 1.5rem;
    padding: clamp(1.4rem, 3vw, 2rem);
}

.legal-doc-cta h3 {
    font-size: 1.3rem;
    letter-spacing: -0.02em;
    margin-bottom: 0.4rem;
}

.legal-doc-cta p {
    color: var(--ff-soft);
    margin: 0;
}

@media (max-width: 620px) {
    .legal-doc-index {
        grid-template-columns: 1fr;
    }

    .legal-doc-cta {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}

.flash-neutral {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    color: #d4d4d8;
    margin: 1rem 0 1.5rem;
    padding: 1rem 1.1rem;
}

.not-found-hero .hero-copy h1 {
    max-width: 720px;
}

.not-found-card {
    max-width: 390px;
    width: 100%;
}

.not-found-links {
    display: flex;
    flex-direction: column;
    padding: 0.6rem;
}

.not-found-links a {
    align-items: center;
    border-radius: var(--ff-radius-sm);
    color: var(--ff-text);
    display: flex;
    font-weight: 600;
    gap: 0.75rem;
    padding: 0.9rem 0.9rem;
    text-decoration: none;
    transition: background 180ms ease, color 180ms ease;
}

.not-found-links a:hover {
    background: rgba(200, 255, 92, 0.08);
    color: var(--ff-accent);
}

.not-found-links a + a {
    border-top: 1px solid var(--ff-line);
}

.not-found-links a svg {
    color: var(--ff-accent);
    flex: 0 0 auto;
    height: 18px;
    width: 18px;
}

/* ──────────────────────────────────────────────────────
   RESPONSIVE — Tablet (≤ 900px)
   ────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .page-home .hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 7rem 0 3rem;
    }

    .hero-code {
        max-width: 100%;
        transform: none;
    }

    .stack-lane {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .stack-lane-database {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-project-toolbar,
    .project-editor-layout {
        grid-template-columns: 1fr;
    }

    .project-editor-nav {
        position: static;
    }

    .project-editor-overview {
        grid-column: 1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ──────────────────────────────────────────────────────
   RESPONSIVE — Mobile (≤ 768px)
   ────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    body {
        padding-bottom: 82px;
    }

    html {
        scroll-padding-top: 24px;
    }

    /* Dock navbar at bottom on mobile */
    .site-nav {
        box-sizing: border-box;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
        padding: 0.5rem 0.65rem;
        border-radius: 0;
        border-bottom: 0;
        border-top: 1px solid var(--ff-line);
        gap: 0;
        justify-content: space-between;
        background: rgba(7, 8, 7, 0.86);
    }

    .site-nav-brand {
        display: none;
    }

    .site-nav .nav-links a::before,
    .site-nav .nav-links a:hover::before,
    .site-nav .nav-links a.is-active::before,
    .site-nav .nav-contact::before,
    .site-nav .nav-contact:hover::before,
    .site-nav .nav-contact.is-active::before {
        content: "";
    }

    .nav-links {
        width: 100%;
        justify-content: space-between;
        gap: 2px;
    }

    .site-nav .nav-links a {
        flex: 1 1 0;
        min-width: 0;
        padding: 0.45rem 0.1rem;
        border-radius: 8px;
        flex-direction: column;
        gap: 0.15rem;
        text-align: center;
        letter-spacing: 0.05em;
    }

    .site-nav .nav-links a:hover {
        background: transparent;
        color: var(--ff-text);
    }

    .site-nav .nav-links a span {
        display: block;
        font-size: 0.56rem;
        font-weight: 750;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    .site-nav .nav-contact {
        background: transparent;
        border-color: transparent;
        color: var(--ff-accent);
        margin-left: 0;
        padding: 0.45rem 0.1rem;
    }

    .site-nav .nav-contact:hover {
        background: rgba(200, 255, 92, 0.1);
        color: var(--ff-accent);
    }

    /* Switch lingua: la copia dentro la nav si nasconde (il dock è pieno),
       usiamo quella fuori dalla nav come pillola fissa in alto a destra. */
    .site-nav .nav-links .nav-lang {
        display: none;
    }

    .nav-lang-mobile {
        align-items: center;
        background: rgba(11, 13, 11, 0.88);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid var(--ff-line);
        border-radius: var(--ff-radius-sm);
        color: var(--ff-soft-strong);
        display: inline-flex;
        font-family: var(--ff-font-mono);
        font-size: 0.68rem;
        font-weight: 700;
        justify-content: center;
        letter-spacing: 0.04em;
        min-width: 30px;
        padding: 0.32rem 0.5rem;
        position: fixed;
        right: 14px;
        top: 14px;
        text-decoration: none;
        z-index: 1001;
    }

    .nav-lang-mobile:hover,
    .nav-lang-mobile:active {
        background: rgba(200, 255, 92, 0.12);
        border-color: rgba(200, 255, 92, 0.4);
        color: var(--ff-accent);
    }

    /* Hero mobile */
    .page-home .hero {
        grid-template-columns: 1fr;
        text-align: left;
        min-height: auto;
        padding: 4rem 0 5rem;
    }

    .hero-copy h1 {
        font-size: clamp(2.8rem, 13.5vw, 4rem);
    }

    .hero-copy p {
        margin-left: 0;
        margin-right: 0;
    }

    .hero-copy .hero-skills,
    .hero-copy .hero-actions {
        justify-content: flex-start;
    }

    .hero-code {
        display: none;
    }

    .stack-section {
        padding: 3.5rem 0;
    }

    .stack-heading {
        margin-bottom: 1.7rem;
        text-align: left;
    }

    /* Mobile: niente griglia di card, una riga per tecnologia (icona + nome) */
    .stack-item {
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--ff-line);
        border-radius: 0;
        min-height: 0;
        padding: 0.75rem 0.1rem;
    }

    .stack-item:hover {
        background: transparent;
        border-bottom-color: rgba(200, 255, 92, 0.32);
        transform: none;
    }

    .stack-mark {
        flex: 0 0 36px;
        height: 36px;
    }

    .stack-mark img {
        height: 21px;
        width: 21px;
    }

    .stack-item strong {
        font-size: 0.92rem;
    }

    .stack-lane,
    .stack-lane-database {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .about-code-card {
        min-height: 390px;
    }

    /* Admin mobile */
    .admin-body {
        padding-top: 2rem;
    }

    .admin-shell.admin-body {
        display: block;
    }

    .admin-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-bottom: 1rem;
        position: static;
    }

    .admin-tabs::before {
        display: none;
    }

    .admin-project-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-review-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-project-toolbar {
        grid-template-columns: 1fr;
    }

    .project-row,
    .admin-header,
    .admin-section-head {
        align-items: stretch;
        flex-direction: column;
    }

    .message-card-head {
        align-items: stretch;
        flex-direction: column;
    }

    .row-actions {
        max-width: none;
        width: 100%;
    }

    .project-editor-layout {
        grid-template-columns: 1fr;
    }

    .project-editor-overview {
        grid-template-columns: 1fr;
    }

}

/* ── Sales direction: clean studio presentation ───────────────────── */
body {
    background:
        radial-gradient(circle at 82% 12%, rgba(200, 255, 92, 0.045), transparent 25rem),
        linear-gradient(180deg, #070908 0%, #090c0a 100%);
}

body::before {
    display: none;
}

h1,
h2,
h3 {
    font-family: var(--ff-font-sans);
    letter-spacing: 0;
    font-weight: 800;
}

.site-nav-brand {
    font-family: var(--ff-font-sans);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0;
}

.site-nav-brand::before,
.site-nav-brand::after,
.site-nav .nav-links a::before,
.site-nav .nav-contact::before {
    content: none;
}

.site-nav .nav-links a {
    font-family: var(--ff-font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.site-nav .nav-contact {
    border-radius: 8px;
    font-family: var(--ff-font-sans);
    font-weight: 700;
}

.hero-eyebrow {
    align-items: center;
    color: var(--ff-accent);
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 750;
    gap: 0.55rem;
    letter-spacing: 0.08em;
    margin-bottom: 1.2rem;
    text-transform: uppercase;
}

.hero-eyebrow::before {
    background: var(--ff-accent);
    border-radius: 50%;
    content: "";
    height: 7px;
    width: 7px;
}

.hero-copy h1 {
    font-weight: 800;
    letter-spacing: -0.045em;
}

.hero-copy h1 span {
    text-shadow: none;
}

.hero-copy h1 span::after {
    display: none;
}

.hero-copy .hero-skills {
    gap: 0.5rem;
    margin-top: 2rem;
}

.hero-copy .hero-skills span {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    font-family: var(--ff-font-sans);
    font-size: 0.74rem;
    padding: 0.42rem 0.7rem;
}

.hero-copy .hero-skills span::before {
    content: none;
}

.hero-proof {
    align-self: center;
    background: #f1f4ed;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 18px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34);
    color: #172019;
    display: flex;
    flex-direction: column;
    min-height: 420px;
    overflow: hidden;
    padding: 1.55rem;
    position: relative;
}

.hero-proof::after {
    background: var(--ff-accent);
    content: "";
    height: 100%;
    opacity: 0.8;
    position: absolute;
    right: 0;
    top: 0;
    width: 5px;
}

.hero-proof-top {
    align-items: center;
    border-bottom: 1px solid rgba(23, 32, 25, 0.12);
    display: flex;
    justify-content: space-between;
    padding-bottom: 1rem;
}

.hero-proof-label {
    color: #526055;
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-proof-dot {
    background: #2f9e5b;
    border: 4px solid rgba(47, 158, 91, 0.14);
    border-radius: 50%;
    height: 8px;
    width: 8px;
}

.hero-proof-content {
    margin: auto 0;
}

.hero-proof-number {
    color: #91a18f;
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    margin-bottom: 1.35rem;
}

.hero-proof h2 {
    color: #172019;
    font-size: clamp(2rem, 3.4vw, 3.15rem);
    line-height: 0.98;
    margin: 0 0 1.2rem;
    max-width: 8ch;
}

.hero-proof p {
    color: #59665c;
    font-size: 0.94rem;
    line-height: 1.65;
    margin: 0;
    max-width: 32ch;
}

.hero-proof-steps {
    border-top: 1px solid rgba(23, 32, 25, 0.12);
    display: grid;
    gap: 0.65rem;
    padding-top: 1rem;
}

.hero-proof-steps div {
    align-items: center;
    display: flex;
    gap: 0.75rem;
}

.hero-proof-steps strong {
    color: #82a342;
    font-size: 0.68rem;
}

.hero-proof-steps span {
    color: #2d3a30;
    font-size: 0.78rem;
    font-weight: 700;
}

.btn {
    border-radius: 8px;
    font-family: var(--ff-font-sans);
    font-size: 0.92rem;
    gap: 0.65rem;
    padding: 0.95rem 1.35rem;
}

.btn-primary {
    box-shadow: 0 14px 30px rgba(200, 255, 92, 0.16);
}

.stack-kicker,
.badge {
    font-family: var(--ff-font-sans);
    letter-spacing: 0.08em;
}

.stack-kicker::before,
.badge::before,
.projects-count::before {
    content: none;
}

.home-service-grid article > span {
    font-family: var(--ff-font-sans);
}

.home-service-grid article > span::before {
    content: none;
}

@media (max-width: 768px) {
    .hero-proof {
        min-height: 360px;
        padding: 1.35rem;
    }

    .hero-proof h2 {
        font-size: 2.35rem;
    }
}

/* ── Professional light theme ─────────────────────────────────────── */
:root {
    --ff-bg: #f5f7f2;
    --ff-panel: #ffffff;
    --ff-panel-solid: #ffffff;
    --ff-panel-deep: #edf1e9;
    --ff-line: #dfe6dc;
    --ff-text: #172019;
    --ff-soft: #657068;
    --ff-soft-strong: #354139;
    --ff-accent: #7aab2b;
    --ff-accent-strong: #92c83c;
    --ff-on-accent: #16200f;
    --ff-kicker-color: #7aab2b;
    --ff-kicker-bright: #7aab2b;
    --ff-nav-bg: rgba(255, 255, 255, 0.84);
    --ff-nav-border: #dfe6dc;
}

body {
    background: #f5f7f2;
    color: var(--ff-text);
}

.site-nav,
.site-nav.is-scrolled {
    background: rgba(255, 255, 255, 0.9);
    border-bottom-color: var(--ff-line);
    box-shadow: 0 1px 0 rgba(23, 32, 25, 0.03);
}

.site-nav-brand,
.site-nav-brand:hover {
    color: var(--ff-text);
}

.site-nav .nav-links a,
.site-nav .nav-links a:hover {
    color: #5b675e;
}

.site-nav .nav-links a.is-active {
    color: var(--ff-text);
}

.site-nav .nav-contact,
.site-nav .nav-contact:hover {
    border-color: #b9c7b4;
    color: #263228;
}

.site-nav .nav-contact:hover,
.site-nav .nav-contact.is-active {
    background: #eaf3df;
    border-color: #9fbc7c;
}

.page-home .hero {
    min-height: min(780px, 100svh);
}

.hero-copy h1,
.hero-copy h1 span {
    color: var(--ff-text);
}

.hero-copy h1 span {
    color: #6f9f20;
}

.hero-copy p,
.home-section-heading > p,
.home-final-cta p,
.home-service-grid p {
    color: var(--ff-soft);
}

.hero-copy .hero-skills span {
    background: #ffffff;
    border-color: var(--ff-line);
    color: #4b584e;
}

.hero-proof {
    border-color: #dfe6dc;
    box-shadow: 0 24px 60px rgba(38, 58, 38, 0.12);
}

.btn-secondary {
    background: #ffffff;
    border-color: #cbd7c8;
    color: #263228;
}

.btn-secondary:hover {
    background: #edf3e9;
}

.home-services {
    border-top-color: var(--ff-line);
}

.home-service-grid article,
.home-final-cta,
.stack-item,
.about-code-card,
.about-facts > div,
.about-traits-chart {
    background: #ffffff;
    border-color: var(--ff-line);
    box-shadow: 0 14px 34px rgba(37, 54, 37, 0.05);
}

.home-service-grid article > span,
.home-service-grid article > svg {
    color: var(--ff-accent);
}

.stack-item strong::before {
    content: none;
}

.stack-section {
    background: #edf2e9;
    border-bottom-color: var(--ff-line);
    border-top-color: var(--ff-line);
}

.stack-item:hover {
    background: #ffffff;
    border-color: #b5cd9b;
    box-shadow: 0 10px 24px rgba(48, 73, 44, 0.08);
}

.stack-item strong {
    color: #2b382d;
}

.stack-mark {
    background: #f1f7ea;
    border-color: #d7e6ca;
}

.home-final-cta {
    background: #ffffff;
}

.footer-socials .social-icon {
    background: #ffffff;
    border-color: var(--ff-line);
    color: #536057;
}

.copyright,
.footer-admin-link {
    color: #758078;
}

.nav-lang-mobile {
    background: #ffffff;
    border-color: var(--ff-line);
    color: #526055;
}

@media (max-width: 768px) {
    .site-nav {
        background: rgba(255, 255, 255, 0.96);
        border-top-color: var(--ff-line);
    }

    .site-nav .nav-contact {
        color: #6f9f20;
    }

    .stack-item {
        background: transparent;
        box-shadow: none;
    }
}

/* ──────────────────────────────────────────────────────
   RESPONSIVE — Small mobile (≤ 480px)
   ────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .container {
        width: min(100% - 20px, 1180px);
    }

    .site-nav .nav-links a span {
        font-size: 0.52rem;
    }

    .admin-tabs {
        grid-template-columns: 1fr;
    }

    .admin-project-stats {
        grid-template-columns: 1fr;
    }

    .admin-review-stats {
        grid-template-columns: 1fr;
    }

    .message-card-head {
        gap: 0.75rem;
    }

    .admin-review-actions {
        width: 100%;
    }

    .admin-review-actions > span {
        text-align: left;
    }

    .admin-review-edit {
        width: 100%;
    }
}

/* ──────────────────────────────────────────────────────
   SHORT VIEWPORT
   ────────────────────────────────────────────────────── */

@media (max-height: 760px) and (min-width: 900px) {
    .page-home .hero {
        padding-top: 6rem;
    }

    .hero-copy h1 {
        font-size: clamp(3.4rem, 7.5vw, 5.5rem);
    }

    .hero-code {
        max-width: 400px;
        min-height: 420px;
        padding: 1.7rem 1.8rem;
    }

    .code-window code {
        font-size: 0.82rem;
        line-height: 1.6;
    }
}

@media (max-width: 820px) {
    .vexo-showcase {
        grid-template-columns: 1fr;
    }

    .vexo-brand {
        border-bottom: 1px solid rgba(76, 143, 255, 0.18);
        border-right: 0;
        min-height: 280px;
    }

    .vexo-role {
        min-height: 340px;
    }

    .review-page {
        padding-top: 7rem;
    }

    .review-modal-panel {
        grid-template-columns: 1fr;
        width: min(620px, 100%);
    }

    .review-modal-intro {
        border-bottom: 1px solid var(--ff-line);
        border-right: 0;
        display: block;
        min-height: auto;
        padding: 1.45rem 4.5rem 1.45rem 1.6rem;
    }

    .review-modal-kicker,
    .review-modal-icon,
    .review-pin-note {
        display: none;
    }

    .review-verified-activity {
        align-items: start;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .review-change-pin {
        grid-column: 1 / -1;
        padding-top: 0.25rem;
    }

    .review-modal-intro h2 {
        font-size: clamp(2rem, 8vw, 3rem);
        margin-bottom: 0.55rem;
        max-width: none;
    }

    .review-modal-intro p {
        font-size: 0.82rem;
        line-height: 1.5;
        max-width: 520px;
    }

    .review-modal-panel .review-form-card {
        padding: 1.5rem 1.6rem 1.6rem;
    }

    .review-form-grid-secondary {
        grid-template-columns: 1fr;
    }

    .review-form-heading {
        margin-bottom: 1.2rem;
        padding-right: 0;
    }

    .reviews-hero-panel {
        grid-template-columns: 1fr;
    }

    .review-score-card {
        min-height: 220px;
    }

    .public-review-grid {
        grid-template-columns: 1fr;
    }

    .admin-feedback-hero {
        grid-template-columns: 1fr;
    }

    .admin-review-actions {
        align-items: flex-start;
        min-width: 0;
        width: 100%;
    }

    .admin-review-card-head {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .vexo-section {
        padding-top: 0;
    }

    .vexo-showcase {
        border-radius: 22px;
    }

    .vexo-brand,
    .vexo-role {
        min-height: auto;
        padding: 1.35rem;
    }

    .vexo-brand {
        gap: 2rem;
    }

    .vexo-role h2 {
        font-size: 2.65rem;
    }

    .vexo-role-list {
        display: grid;
        grid-template-columns: 1fr;
    }

    .review-modal {
        padding: 8px;
    }

    .review-modal-panel {
        border-radius: 22px;
        max-height: calc(100dvh - 16px);
    }

    .review-modal-panel .close-modal {
        height: 38px;
        right: 12px;
        top: 12px;
        width: 38px;
    }

    .review-modal-intro {
        padding: 1.2rem 3.6rem 1.15rem 1.2rem;
    }

    .review-modal-intro h2 {
        font-size: 2rem;
    }

    .review-modal-intro p {
        display: none;
    }

    .review-modal-panel .review-form-card {
        padding: 1.2rem;
    }

    .review-form-heading {
        margin-bottom: 1rem;
    }

    .review-form-heading h3 {
        font-size: 1.55rem;
    }

    .review-submit-form .form-grid,
    .review-form-grid-secondary {
        grid-template-columns: 1fr;
    }

    .review-project-preview {
        align-items: flex-start;
        margin-bottom: 0.75rem;
    }

    .review-rating-field {
        margin-bottom: 0.75rem;
    }

    .review-form-footer {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .review-form-footer .btn {
        justify-content: center;
        width: 100%;
    }

    .reviews-hero-panel {
        border-radius: var(--ff-radius);
        padding: 1.35rem;
    }

    .reviews-hero h1 {
        font-size: clamp(2.7rem, 14vw, 4rem);
    }

    .review-card header {
        align-items: flex-start;
        flex-direction: column;
    }

    .review-card-meta {
        align-items: center;
        flex-direction: row;
        gap: 0.6rem;
    }

    .public-review-head > svg {
        display: none;
    }

    .privacy-consent {
        font-size: 0.74rem;
    }

    .admin-review-actions {
        width: 100%;
    }

    .admin-review-actions form,
    .admin-review-actions .btn {
        width: 100%;
    }

    .admin-review-edit {
        grid-template-columns: 1fr;
    }

    .admin-feedback-hero {
        border-radius: 20px;
        padding: 1.15rem;
    }

    .admin-feedback-hero-copy h2 {
        font-size: 2rem;
    }

    .admin-feedback-hero-card {
        padding: 1rem;
    }

    .admin-feedback-hero-score strong {
        font-size: 2.6rem;
    }

    .admin-review-card {
        padding: 0.9rem;
    }

    .admin-review-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }
}

/* Friend feedback PINs */
.friend-pin-create {
    align-items: end;
    background: var(--ff-panel);
    border: 1px solid var(--ff-line);
    border-radius: 18px;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 1rem;
    padding: 1rem;
}

.friend-pin-create .form-group {
    margin: 0;
}

.friend-pin-summary {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 1rem;
}

.friend-pin-summary > div {
    background: var(--ff-panel);
    border: 1px solid var(--ff-line);
    border-radius: 16px;
    padding: 1rem;
}

.friend-pin-summary span,
.friend-pin-code > span {
    color: var(--ff-soft);
    display: block;
    font-family: var(--ff-font-mono);
    font-size: 0.67rem;
    font-weight: 750;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.friend-pin-summary strong {
    display: block;
    font-size: 1.5rem;
    margin-top: 0.3rem;
}

.friend-pin-list {
    display: grid;
    gap: 0.7rem;
}

.friend-pin-row {
    align-items: center;
    background: var(--ff-panel);
    border: 1px solid var(--ff-line);
    border-radius: 18px;
    display: grid;
    gap: 1rem;
    grid-template-columns: 160px minmax(0, 1fr) auto auto;
    padding: 1rem;
}

.friend-pin-code {
    background: rgba(200, 255, 92, 0.06);
    border: 1px solid rgba(200, 255, 92, 0.15);
    border-radius: 13px;
    padding: 0.75rem 0.9rem;
}

.friend-pin-code strong {
    color: var(--ff-accent);
    display: block;
    font-family: var(--ff-font-mono);
    font-size: 1.35rem;
    letter-spacing: 0.12em;
    margin-top: 0.25rem;
}

.friend-pin-info h3 {
    font-size: 1rem;
    margin: 0 0 0.3rem;
}

.friend-pin-info p {
    color: var(--ff-soft);
    font-size: 0.78rem;
    margin: 0;
}

.admin-review-source {
    align-items: center;
    color: var(--ff-cyan);
    display: inline-flex;
    font-size: 0.78rem;
    gap: 0.35rem;
}

.admin-review-source svg {
    height: 14px;
    width: 14px;
}

@media (max-width: 900px) {
    .friend-pin-row {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .friend-pin-row .row-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 620px) {
    .friend-pin-create,
    .friend-pin-summary {
        grid-template-columns: 1fr;
    }

    .friend-pin-create .btn {
        justify-content: center;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }

    .motion-ready [data-reveal] {
        opacity: 1;
        transform: none;
    }

}

/* ═══════════════════════════════════════════════════════════════════
   LEGACY → V3 · Porting consolidato
   Classi ex assets/css/style.css tradotte nel linguaggio v3
   (token --ff-*, lime, pannelli). Il file legacy viene rimosso.
   ═══════════════════════════════════════════════════════════════════ */

/* Base .btn — geometria (v3 definiva solo le varianti colore) */
.btn {
    padding: 1.25rem 2.5rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--ff-font-mono);
    font-size: 1rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    text-decoration: none;
    transition:
        background var(--ff-transition),
        border-color var(--ff-transition),
        color var(--ff-transition),
        box-shadow var(--ff-transition),
        transform 0.15s ease;
}

.btn:active {
    transform: translateY(0) scale(0.97);
}
.btn svg {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
}

/* .card-content (sezioni .card.card-content come le pagine legali) */
.card-content {
    padding: clamp(1.75rem, 5vw, 3rem);
}

/* Review modal — layout base e stati di apertura (v3 aveva solo il padding) */
.review-modal {
    align-items: center;
    display: none;
    inset: 0;
    justify-content: center;
    padding: 1rem;
    position: fixed;
    z-index: 2500;
}
.review-modal.is-open {
    display: flex;
}
body.modal-open {
    overflow: hidden;
}

/* Progetti — wrapper, intestazione e ricerca */
.projects-page {
    padding-top: 10rem;
}
.projects-heading {
    max-width: 820px;
    margin-bottom: 3rem;
}
.projects-heading .badge {
    margin-bottom: 0.75rem;
}
.projects-heading p {
    color: var(--ff-soft);
    font-size: 1.15rem;
    line-height: 1.75;
}
.project-search {
    align-items: center;
    background: var(--ff-panel);
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius-sm);
    box-sizing: border-box;
    display: flex;
    gap: 0.65rem;
    min-width: min(100%, 360px);
    padding: 0 1rem;
    transition: border-color var(--ff-transition);
}

.project-search:focus-within {
    border-color: rgba(200, 255, 92, 0.35);
}

.project-search-prompt {
    color: var(--ff-accent);
    font-family: var(--ff-font-mono);
    font-size: 0.95rem;
    font-weight: 700;
}
.project-search svg {
    color: var(--ff-soft);
    height: 18px;
    width: 18px;
}
.project-search input {
    background: transparent;
    border: 0;
    color: var(--ff-text);
    font-family: var(--ff-font-mono);
    font-size: 0.95rem;
    outline: none;
    padding: 0.9rem 0;
    width: 100%;
}

/* Tag e metriche progetti/social */
.tag-muted {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: #f4f4f5;
}
.social-results {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 1.5rem;
}
.social-results div {
    background: var(--ff-panel);
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius-sm);
    padding: 0.95rem;
}
.social-results span {
    color: var(--ff-soft);
    display: block;
    font-family: var(--ff-font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
}
.social-results span::before {
    content: none;
    color: var(--ff-kicker-color);
}
.social-results strong {
    color: var(--ff-text);
    font-family: var(--ff-font-mono);
    font-size: 1.25rem;
}
.creative-strip {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 1rem;
}
.creative-strip a {
    aspect-ratio: 1;
    background-color: var(--ff-panel-deep);
    background-position: center;
    background-size: cover;
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius-sm);
    display: block;
}

/* Recensioni — badge verificato, stelle e meta */
.review-card span {
    color: var(--ff-star);
    letter-spacing: 0.05em;
    white-space: nowrap;
}
/* Regola generica: il badge è usato anche nella dashboard cliente,
   dove la vecchia regola scoped a .review-card non arrivava. */
.verified-badge {
    align-items: center;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.24);
    border-radius: 8px;
    color: #86efac;
    display: inline-flex;
    font-family: var(--ff-font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    gap: 0.35rem;
    letter-spacing: 0.04em;
    padding: 0.32rem 0.55rem;
    text-transform: uppercase;
    white-space: nowrap;
}
.verified-badge svg {
    height: 14px;
    width: 14px;
}
.review-card small {
    color: var(--ff-soft);
    display: block;
    font-size: 0.78rem;
    margin-top: 0.3rem;
}
.review-card time {
    color: var(--ff-soft);
    display: block;
    font-family: var(--ff-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    margin-top: 0.3rem;
}
.review-card time::before {
    content: "// ";
    color: var(--ff-kicker-color);
}

/* Admin / editor — righe, form e stati */
.project-row.is-dragging {
    opacity: 0.55;
}
.switch-field {
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--ff-radius-sm);
    color: var(--ff-text);
    display: flex;
    font-weight: 800;
    gap: 0.7rem;
    padding: 0.95rem 1rem;
}
.switch-field input {
    accent-color: var(--ff-accent);
    width: auto;
}
.project-row-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    flex: 1;
}
.project-row-title {
    align-items: center;
    display: flex;
    gap: 0.65rem;
    margin-bottom: 0.35rem;
}
.project-filter-empty {
    margin-top: 1rem;
}
.empty-state {
    border: 1px dashed var(--ff-line);
    border-radius: var(--ff-radius);
    color: var(--ff-soft);
    padding: 4rem 2rem;
    text-align: center;
}
.empty-state svg {
    width: 40px;
    height: 40px;
    margin-bottom: 1rem;
}
.form-grid-thirds {
    grid-template-columns: 1fr 1fr 0.75fr;
}
.project-editor-preview {
    background-color: var(--ff-panel-deep);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius-sm);
    margin-bottom: 1.25rem;
    min-height: 220px;
}

/* Chi sono — wrapper e CTA */
.about-page {
    padding-top: 10rem;
}
.about-cta {
    align-items: center;
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius-lg);
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    margin-top: 1.5rem;
    padding: 2rem;
}
.about-cta p {
    margin-top: 0.75rem;
}

/* Contatti */
.contact-page {
    max-width: 900px;
    padding-top: 10rem;
}

.contact-heading {
    margin-bottom: 2.4rem;
    max-width: 620px;
}

.contact-heading p {
    color: var(--ff-soft);
    font-size: 1.15rem;
    line-height: 1.75;
}

/* Stesso pattern delle .work-window in /progetti: bordo + window-bar,
   così le CTA non fluttuano più sole in un pannello striminzito. */
.contact-window {
    background: var(--ff-panel-deep);
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius-lg);
    overflow: hidden;
}

.contact-window-body {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    padding: clamp(1.8rem, 4vw, 2.8rem);
}

.contact-window-body .btn-primary {
    flex: 1 1 320px;
    justify-content: center;
}

.contact-window-body .btn-secondary {
    flex: 0 0 auto;
    justify-content: center;
}

/* Login */
.login-portal-page {
    padding-top: 10rem;
}
.login-choice-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.login-choice-card {
    padding: clamp(1.6rem, 3vw, 2.4rem);
}
.login-stack {
    display: grid;
    gap: 1rem;
}
.login-stack .btn {
    box-sizing: border-box;
    justify-content: center;
    width: 100%;
}
.login-stack .form-group {
    margin-bottom: 0.25rem;
}
.login-stack .form-group label {
    color: var(--ff-soft-strong);
    display: block;
    font-family: var(--ff-font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 0.45rem;
    text-transform: uppercase;
}
.login-stack .form-group input::placeholder {
    color: var(--ff-soft);
    opacity: 0.75;
}
.login-stack .form-group input:focus {
    border-color: rgba(200, 255, 92, 0.5);
    box-shadow: 0 0 0 4px rgba(200, 255, 92, 0.08);
    outline: none;
}

/* Dashboard cliente */
.client-dashboard-page {
    padding-top: 10rem;
}
.client-access-card,
.client-panel {
    background: var(--ff-panel-gradient);
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius-lg);
}
.client-access-card {
    margin: 0 auto;
    max-width: 720px;
    padding: clamp(1.5rem, 5vw, 3rem);
}
.client-access-card h1,
.client-dashboard-hero h1 {
    font-size: clamp(2.6rem, 7vw, 5rem);
    line-height: 1.02;
    margin-bottom: 1rem;
}
.client-access-card p,
.client-dashboard-hero p,
.client-panel p {
    color: var(--ff-soft);
    line-height: 1.75;
}
.client-pin-form {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
}
.client-pin-form .btn {
    justify-content: center;
}
.client-dashboard-hero {
    align-items: stretch;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.7fr);
    margin-bottom: 1.5rem;
}
.client-hero-copy {
    background:
        radial-gradient(circle at 90% 10%, rgba(200, 255, 92, 0.08), transparent 15rem),
        var(--ff-panel-gradient);
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius-lg);
    padding: clamp(1.5rem, 4vw, 2.5rem);
}
.client-hero-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: space-between;
    /* Prima si appoggiava al margin-top di default dell'h1 (ora azzerato). */
    margin-bottom: 0.8rem;
}
.client-status-pill {
    align-items: center;
    background: rgba(200, 255, 92, 0.1);
    border: 1px solid rgba(200, 255, 92, 0.22);
    border-radius: 999px;
    color: #dfff9b;
    display: inline-flex;
    font-family: var(--ff-font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    gap: 0.4rem;
    padding: 0.55rem 0.7rem;
}
.client-status-pill svg {
    height: 14px;
    width: 14px;
}
.client-note {
    align-items: flex-start;
    background: rgba(118, 247, 208, 0.07);
    border: 1px solid rgba(118, 247, 208, 0.16);
    border-radius: var(--ff-radius-sm);
    display: flex;
    gap: 0.8rem;
    margin-top: 1.25rem;
    padding: 1rem;
}
.client-note svg {
    color: var(--ff-cyan);
    flex: 0 0 auto;
    height: 20px;
    margin-top: 0.15rem;
    width: 20px;
}
.client-project-cover {
    background-color: var(--ff-panel-deep);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid var(--ff-line);
    border-radius: var(--ff-radius-lg);
    min-height: 300px;
}
.client-dashboard-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin-bottom: 1rem;
}
.client-panel {
    padding: 1.35rem;
}
.client-stat-card {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.05), transparent),
        rgba(10, 13, 11, 0.86);
    min-height: 168px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.client-stat-card:hover {
    border-color: rgba(200, 255, 92, 0.22);
    transform: translateY(-2px);
}
.client-stat-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}
.client-stat-head span {
    color: var(--ff-soft);
    font-family: var(--ff-font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.client-stat-head span::before {
    content: none;
    color: var(--ff-kicker-color);
}
.client-stat-head svg {
    color: var(--ff-accent);
    height: 18px;
    width: 18px;
}
.client-panel > span {
    color: var(--ff-soft);
    display: block;
    font-family: var(--ff-font-mono);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.client-panel > span::before {
    content: none;
    color: var(--ff-kicker-color);
}
.client-panel strong {
    color: var(--ff-text);
    display: block;
    font-size: 1.35rem;
    line-height: 1.2;
    margin-bottom: 0.55rem;
}
.client-progress-bar {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    height: 10px;
    margin-top: 0.85rem;
    overflow: hidden;
}
.client-progress-bar span {
    background: linear-gradient(90deg, var(--ff-accent), var(--ff-cyan));
    border-radius: inherit;
    display: block;
    height: 100%;
}
.client-dashboard-layout {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.38fr);
}
.client-panel-wide .admin-section-head {
    margin-bottom: 1rem;
}
.client-actions-panel {
    display: grid;
    gap: 0.85rem;
}
.client-actions-panel h2 {
    font-size: 1.4rem;
    letter-spacing: 0;
    margin-bottom: 0.25rem;
}
.client-actions-panel .btn {
    box-sizing: border-box;
    justify-content: center;
    width: 100%;
}
.client-creatives {
    margin-top: 1.25rem;
}
.client-review-panel {
    margin-top: 1rem;
}
.client-review-form {
    display: grid;
    gap: 1rem;
}
.client-review-form .btn {
    justify-content: center;
}
.client-workspace {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1rem;
}
.client-step-list {
    display: grid;
    gap: 0.8rem;
    list-style: none;
}
.client-step-list li {
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ff-radius-sm);
    display: flex;
    gap: 0.85rem;
    padding: 0.95rem;
}
.client-step-list span {
    align-items: center;
    background: var(--ff-accent);
    border-radius: 999px;
    color: var(--ff-on-accent);
    display: inline-flex;
    flex: 0 0 auto;
    font-family: var(--ff-font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    height: 28px;
    justify-content: center;
    width: 28px;
}
.client-deliverables {
    display: grid;
    gap: 0.75rem;
}
.client-deliverables a,
.client-deliverables div,
.client-empty-block {
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ff-radius-sm);
    color: var(--ff-text);
    display: flex;
    gap: 0.8rem;
    justify-content: space-between;
    padding: 0.95rem;
    text-decoration: none;
}
.client-deliverables svg,
.client-empty-block svg {
    color: var(--ff-accent);
    flex: 0 0 auto;
    height: 20px;
    width: 20px;
}
.client-empty-block {
    color: var(--ff-soft);
    justify-content: flex-start;
}
.client-contact-strip {
    align-items: center;
    background:
        radial-gradient(circle at 85% 20%, rgba(200, 255, 92, 0.1), transparent 16rem),
        rgba(12, 15, 13, 0.92);
    border: 1px solid rgba(200, 255, 92, 0.18);
    border-radius: var(--ff-radius-lg);
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    margin-top: 1rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
}
.client-contact-strip h2 {
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    letter-spacing: var(--ff-heading-tracking);
    line-height: 1;
    margin: 0.75rem 0;
}
.client-contact-strip p {
    color: var(--ff-soft);
    line-height: 1.65;
    margin: 0;
    max-width: 660px;
}
.client-contact-strip .btn {
    flex: 0 0 auto;
}

/* Footer */
.footer-socials {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}
.social-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--ff-radius-sm);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ff-text);
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.social-icon svg {
    width: 24px;
    height: 24px;
}
.brand-icon path {
    fill: currentColor;
}
.social-icon:focus-visible,
.btn:focus-visible,
.admin-tabs a:focus-visible {
    outline: 3px solid var(--ff-focus-ring);
    outline-offset: 3px;
}
.social-github:hover {
    background: #f5f5f5;
    border-color: #f5f5f5;
    color: #050505;
    transform: translateY(-6px);
}
.social-instagram {
    color: #fb7185;
}
.social-instagram:hover {
    background: linear-gradient(135deg, #f97316, #e11d48 48%, #7c3aed);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-6px);
}
.social-discord {
    color: #5865f2;
}
.social-discord:hover {
    background: #5865f2;
    border-color: #5865f2;
    color: #fff;
    transform: translateY(-6px);
}
.copyright {
    color: var(--ff-soft);
    font-family: var(--ff-font-mono);
    font-size: 0.78rem;
}
.footer-sep {
    margin: 0 0.5rem;
    opacity: 0.6;
}
.footer-admin-link {
    align-items: center;
    color: var(--ff-soft);
    display: inline-flex;
    font-family: var(--ff-font-mono);
    font-weight: 500;
    min-height: 44px;
    padding: 0 0.2rem;
    text-decoration: none;
}
.footer-admin-link:hover {
    color: var(--ff-text);
}

/* ── Mobile (legacy consolidato) ──────────────────────────────── */
@media (max-width: 768px) {
    .btn {
        padding: 1rem 1.35rem;
    }
    .social-icon {
        width: 52px;
        height: 52px;
    }
    .projects-page {
        padding-top: 7rem;
    }
    .projects-heading {
        margin-bottom: 2rem;
    }
    .projects-heading p {
        font-size: 1rem;
    }
    .social-results,
    .creative-strip {
        grid-template-columns: 1fr;
    }
    .about-page {
        padding-top: 7rem;
    }
    .about-cta {
        align-items: stretch;
        flex-direction: column;
    }
    .about-cta .btn {
        justify-content: center;
    }
    .contact-page {
        padding-top: 7rem;
    }
    /* flex-direction: column ruota l'asse principale: senza azzerare basis/grow
       qui, i 320px del desktop diventano un'ALTEZZA e i bottoni esplodono
       in verticale fino a diventare cerchi (radius 999px su un box enorme). */
    .contact-window-body {
        flex-direction: column;
    }
    .contact-window-body .btn-primary,
    .contact-window-body .btn-secondary {
        flex: 0 0 auto;
        width: 100%;
    }
    .login-portal-page {
        padding-top: 7rem;
    }
    .login-choice-grid {
        grid-template-columns: 1fr;
    }
    .login-choice-card {
        border-radius: var(--ff-radius);
    }
    .client-dashboard-page {
        padding-top: 7rem;
    }
    .client-dashboard-hero,
    .client-dashboard-grid,
    .client-dashboard-layout,
    .client-workspace {
        /* minmax(0, …): con 1fr il minimo è min-content e i titoli mono lunghi sfondano la colonna */
        grid-template-columns: minmax(0, 1fr);
    }
    .client-access-card h1,
    .client-dashboard-hero h1 {
        /* I titoli arrivano dal DB: dimensione ridotta + spezzatura di emergenza per parole lunghe */
        font-size: clamp(2.1rem, 9.5vw, 2.6rem);
        overflow-wrap: anywhere;
    }
    .client-contact-strip {
        align-items: stretch;
        flex-direction: column;
    }
    .client-contact-strip .btn {
        box-sizing: border-box;
        justify-content: center;
        width: 100%;
    }
    .client-project-cover {
        border-radius: var(--ff-radius);
        min-height: 220px;
    }
    .client-panel,
    .client-access-card {
        border-radius: var(--ff-radius);
        padding: 1.35rem;
    }
    .form-grid-thirds {
        grid-template-columns: 1fr;
    }
}

/* Final presentation layer: professional studio, no terminal styling. */
:root {
    --ff-bg: #f5f7f2;
    --ff-panel: #ffffff;
    --ff-panel-solid: #ffffff;
    --ff-panel-deep: #edf1e9;
    --ff-line: #dfe6dc;
    --ff-text: #172019;
    --ff-soft: #657068;
    --ff-soft-strong: #354139;
    --ff-accent: #7aab2b;
    --ff-accent-strong: #92c83c;
    --ff-on-accent: #16200f;
    --ff-kicker-color: #7aab2b;
}

body {
    background: #f5f7f2;
    color: #172019;
}

body::before { display: none; }

.site-nav,
.site-nav.is-scrolled {
    background: rgba(255, 255, 255, 0.94);
    border-bottom-color: #dfe6dc;
    box-shadow: 0 1px 0 rgba(23, 32, 25, 0.04);
}

.site-nav-brand,
.site-nav-brand:hover { color: #172019; }

.site-nav .nav-links a,
.site-nav .nav-links a:hover { color: #5b675e; }

.site-nav .nav-links a.is-active { color: #172019; }

.site-nav .nav-contact,
.site-nav .nav-contact:hover {
    border-color: #b9c7b4;
    color: #263228;
}

.site-nav .nav-contact:hover,
.site-nav .nav-contact.is-active {
    background: #eaf3df;
    border-color: #9fbc7c;
}

h1, h2, h3 {
    color: #172019;
    font-family: var(--ff-font-sans);
    letter-spacing: 0;
}

.hero-copy h1 { letter-spacing: -0.04em; }
.hero-copy h1 span { color: #6f9f20; text-shadow: none; }
.hero-copy h1 span::after { display: none; }
.hero-copy p { color: #657068; }

.hero-copy .hero-skills span {
    background: #ffffff;
    border-color: #dfe6dc;
    color: #4b584e;
    font-family: var(--ff-font-sans);
}

.hero-copy .hero-skills span::before,
.site-nav-brand::before,
.site-nav-brand::after,
.site-nav .nav-links a::before,
.site-nav .nav-contact::before,
.stack-kicker::before,
.badge::before,
.projects-count::before,
.home-service-grid article > span::before,
.stack-item strong::before { content: none; }

.hero-proof {
    border-color: #dfe6dc;
    box-shadow: 0 24px 60px rgba(38, 58, 38, 0.12);
}

.btn {
    border-radius: 8px;
    font-family: var(--ff-font-sans);
}

.btn-secondary {
    background: #ffffff;
    border-color: #cbd7c8;
    color: #263228;
}

.btn-secondary:hover { background: #edf3e9; }

.home-services { border-top-color: #dfe6dc; }

.home-service-grid article,
.home-final-cta,
.stack-item,
.about-code-card,
.about-facts > div,
.about-traits-chart {
    background: #ffffff;
    border-color: #dfe6dc;
    box-shadow: 0 14px 34px rgba(37, 54, 37, 0.05);
}

.stack-section {
    background: #edf2e9;
    border-bottom-color: #dfe6dc;
    border-top-color: #dfe6dc;
}

.stack-item:hover {
    background: #ffffff;
    border-color: #b5cd9b;
    box-shadow: 0 10px 24px rgba(48, 73, 44, 0.08);
}

.stack-item strong { color: #2b382d; }

.stack-mark {
    background: #f1f7ea;
    border-color: #d7e6ca;
}

.footer-socials .social-icon {
    background: #ffffff;
    border-color: #dfe6dc;
    color: #536057;
}

.copyright,
.footer-admin-link { color: #758078; }

@media (max-width: 768px) {
    .site-nav {
        background: rgba(255, 255, 255, 0.97);
        border-top-color: #dfe6dc;
    }
    .site-nav .nav-contact { color: #6f9f20; }
    .stack-item { background: transparent; box-shadow: none; }
}

/* Navbar: centered navigation with one clear action. */
@media (min-width: 769px) {
    .site-nav {
        justify-content: initial;
    }

    .site-nav .nav-links {
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
    }
}

.site-nav .nav-links a {
    border-radius: 6px;
    padding: 0.55rem 0.72rem;
    position: relative;
}

.site-nav .nav-links a.is-active {
    font-weight: 750;
}

.site-nav .nav-links a.is-active::after {
    background: var(--ff-accent);
    border-radius: 999px;
    bottom: 0.1rem;
    content: "";
    height: 2px;
    left: 0.72rem;
    position: absolute;
    right: 0.72rem;
}

.site-nav .nav-contact,
.site-nav .nav-contact:hover,
.site-nav .nav-contact.is-active {
    background: var(--ff-accent);
    border-color: var(--ff-accent);
    border-radius: 8px;
    color: var(--ff-on-accent);
    margin-left: 0.45rem;
    padding-inline: 1rem;
}

.site-nav .nav-contact:hover {
    background: var(--ff-accent-strong);
    border-color: var(--ff-accent-strong);
}

.site-nav .nav-contact.is-active::after {
    display: none;
}

.site-nav .nav-lang {
    border: 0;
    color: #7a847c;
    min-width: 26px;
    padding-inline: 0.35rem;
}

.site-nav .nav-lang:hover {
    background: transparent;
    color: var(--ff-text);
}

.vexo-role {
    align-content: center;
    min-height: 320px;
}

.vexo-role h2 {
    max-width: 12ch;
}

@media (max-width: 768px) {
    .site-nav .nav-links a.is-active::after {
        bottom: 0.18rem;
        left: 25%;
        right: 25%;
    }

    .site-nav .nav-contact,
    .site-nav .nav-contact:hover,
    .site-nav .nav-contact.is-active {
        background: transparent;
        border-color: transparent;
        color: var(--ff-accent);
        margin-left: 0;
        padding-inline: 0.1rem;
    }

    .vexo-role {
        min-height: auto;
    }
}

/* Final theme: dark, polished and commercial. */
:root {
    --ff-bg: #080b09;
    --ff-panel: #111713;
    --ff-panel-solid: #111713;
    --ff-panel-deep: #0c110e;
    --ff-line: rgba(212, 232, 214, 0.14);
    --ff-text: #f1f4ee;
    --ff-soft: #a8b2aa;
    --ff-soft-strong: #dbe4db;
    --ff-accent: #b7e867;
    --ff-accent-strong: #d1f78a;
    --ff-on-accent: #10160d;
    --ff-kicker-color: #a6d45b;
}

body {
    background: #080b09;
    color: #f1f4ee;
}

.site-nav,
.site-nav.is-scrolled {
    background: rgba(8, 12, 9, 0.94);
    border-bottom-color: rgba(212, 232, 214, 0.14);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

.site-nav-brand,
.site-nav-brand:hover,
.site-nav .nav-links a.is-active {
    color: #f1f4ee;
}

.site-nav .nav-links a,
.site-nav .nav-links a:hover {
    color: #9ca89f;
}

.site-nav .nav-contact,
.site-nav .nav-contact:hover,
.site-nav .nav-contact.is-active {
    background: var(--ff-accent);
    border-color: var(--ff-accent);
    color: var(--ff-on-accent);
}

.site-nav .nav-contact:hover {
    background: var(--ff-accent-strong);
    border-color: var(--ff-accent-strong);
}

.site-nav .nav-lang {
    color: #9ca89f;
}

.site-nav .nav-lang:hover {
    color: #f1f4ee;
}

.hero-copy h1,
.hero-copy h1 span,
h1, h2, h3 {
    color: #f1f4ee;
}

.hero-copy h1 span {
    color: var(--ff-accent);
}

.hero-copy p,
.home-section-heading > p,
.home-final-cta p,
.home-service-grid p {
    color: #a8b2aa;
}

.hero-copy .hero-skills span {
    background: #111713;
    border-color: rgba(212, 232, 214, 0.14);
    color: #c3cec4;
}

.hero-proof {
    background: #121a15;
    border-color: rgba(183, 232, 103, 0.22);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.3);
    color: #f1f4ee;
}

.hero-proof-top,
.hero-proof-steps {
    border-color: rgba(212, 232, 214, 0.14);
}

.hero-proof-label,
.hero-proof p {
    color: #a8b2aa;
}

.hero-proof h2,
.hero-proof-steps span {
    color: #f1f4ee;
}

.btn-secondary {
    background: #121a15;
    border-color: rgba(212, 232, 214, 0.18);
    color: #f1f4ee;
}

.btn-secondary:hover {
    background: #1a241d;
}

.home-services {
    border-top-color: rgba(212, 232, 214, 0.12);
}

.home-service-grid article,
.home-final-cta,
.stack-item,
.about-code-card,
.about-facts > div,
.about-traits-chart {
    background: #111713;
    border-color: rgba(212, 232, 214, 0.14);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
}

.stack-section {
    background: #0d120f;
    border-bottom-color: rgba(212, 232, 214, 0.12);
    border-top-color: rgba(212, 232, 214, 0.12);
}

.stack-item:hover {
    background: #151d17;
    border-color: rgba(183, 232, 103, 0.38);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

.stack-item strong {
    color: #dce6dc;
}

.stack-mark {
    background: rgba(183, 232, 103, 0.08);
    border-color: rgba(183, 232, 103, 0.2);
}

.footer-socials .social-icon {
    background: #111713;
    border-color: rgba(212, 232, 214, 0.14);
    color: #c2cec4;
}

.copyright,
.footer-admin-link {
    color: #8f9b92;
}

@media (max-width: 768px) {
    .site-nav {
        background: rgba(8, 12, 9, 0.97);
        border-top-color: rgba(212, 232, 214, 0.14);
    }

    .site-nav .nav-contact,
    .site-nav .nav-contact:hover,
    .site-nav .nav-contact.is-active {
        background: transparent;
        border-color: transparent;
        color: var(--ff-accent);
    }
}

/* Remove the leftover terminal prompt from every page and state. */
.site-nav .nav-links a::before,
.site-nav .nav-links a:hover::before,
.site-nav .nav-links a.is-active::before,
.site-nav .nav-contact::before,
.site-nav .nav-contact:hover::before,
.site-nav .nav-contact.is-active::before,
.site-nav-brand::before,
.site-nav-brand::after,
.stack-item strong::before,
.projects-count::before,
.badge::before,
.stack-kicker::before,
.home-service-grid article > span::before {
    content: none !important;
    display: none !important;
}

/* Navigation layout: stable container across desktop and tablet. */
.site-nav {
    padding: 0;
}

.nav-shell {
    align-items: center;
    display: flex;
    gap: 2rem;
    margin: 0 auto;
    min-height: 68px;
    width: min(1180px, calc(100% - 42px));
}

.nav-shell .nav-links {
    align-items: center;
    display: flex;
    gap: 0.15rem;
    margin-left: auto;
    position: static;
    transform: none;
}

.nav-shell .site-nav-brand {
    flex: 0 0 auto;
}

@media (max-width: 980px) and (min-width: 769px) {
    .nav-shell {
        gap: 1rem;
        width: min(100% - 24px, 1180px);
    }

    .nav-shell .nav-links a {
        padding-inline: 0.45rem;
    }

    .nav-shell .nav-contact {
        padding-inline: 0.7rem;
    }
}

@media (max-width: 768px) {
    .nav-shell {
        min-height: 0;
        width: 100%;
    }

    .nav-shell .nav-links {
        margin-left: 0;
        width: 100%;
    }
}

/* Contact stays prominent without becoming a bright yellow block. */
.site-nav .nav-contact,
.site-nav .nav-contact:hover,
.site-nav .nav-contact.is-active {
    background: transparent;
    border-color: rgba(183, 232, 103, 0.42);
    color: var(--ff-accent);
}

.site-nav .nav-contact:hover,
.site-nav .nav-contact.is-active {
    background: rgba(183, 232, 103, 0.1);
    border-color: rgba(183, 232, 103, 0.7);
}

@media (max-width: 768px) {
    .site-nav .nav-contact,
    .site-nav .nav-contact:hover,
    .site-nav .nav-contact.is-active {
        background: transparent;
        border-color: transparent;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   MOTION — animazioni aggiunte (public/motion.js)
   Usano proprietà separate (translate, rotate) per non scontrarsi con le
   transform delle comparse [data-reveal].
   ═══════════════════════════════════════════════════════════════════ */

/* cambio pagina: dissolvenza leggera (View Transitions, dove supportate) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.22s cubic-bezier(0.4, 0, 0.2, 1) both vt-out; }
::view-transition-new(root) { animation: 0.38s cubic-bezier(0.16, 1, 0.3, 1) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* decodifica dei testi: casella a larghezza fissa per carattere */
.scramble-cell { display: inline-block; text-align: center; white-space: pre; }
.hero-copy h1 span .scramble-cell { color: inherit; }

/* barra di avanzamento sotto la nav */
.scroll-progress {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    z-index: 1001;
    background: var(--ff-accent);
    box-shadow: 0 0 12px rgba(200, 255, 92, 0.55);
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
}

/* luce che segue il mouse nella hero */
.page-home .hero.has-spotlight { position: relative; isolation: isolate; }
.page-home .hero.has-spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(520px circle at var(--spot-x, 50%) var(--spot-y, 40%), rgba(200, 255, 92, 0.09), transparent 62%);
    transition: background 0.08s linear;
}

/* card della hero che si inclina */
.page-home .hero { perspective: 1100px; }
.hero-proof {
    rotate: x var(--tilt-x, 0deg);
    transition: rotate 0.35s cubic-bezier(0.16, 1, 0.3, 1), translate 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-proof:hover { translate: 0 -4px; }
.hero-proof-content { rotate: y var(--tilt-y, 0deg); transition: rotate 0.35s cubic-bezier(0.16, 1, 0.3, 1); transform-style: preserve-3d; }

/* luce sulle card */
.has-glow { position: relative; }
.has-glow::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    padding: 1px;
    background: radial-gradient(260px circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(200, 255, 92, 0.55), transparent 65%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.has-glow:hover::after { opacity: 1; }
.home-service-grid article.has-glow { background-image: radial-gradient(420px circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(200, 255, 92, 0.06), transparent 60%), var(--ff-panel-gradient); }

/* bottoni magnetici */
.btn-primary, .btn-secondary, .site-nav .nav-contact {
    translate: var(--mag-x, 0px) var(--mag-y, 0px);
    transition: translate 0.25s cubic-bezier(0.16, 1, 0.3, 1), background var(--ff-transition), box-shadow var(--ff-transition), transform 0.15s ease, color var(--ff-transition), border-color var(--ff-transition);
}

/* stack: le icone entrano in cascata e si accendono al passaggio */
.motion-ready .stack-lanes[data-reveal] .stack-item { opacity: 0; translate: 0 14px; transition: opacity 0.5s ease, translate 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.motion-ready .stack-lanes[data-reveal].is-visible .stack-item { opacity: 1; translate: 0 0; }
.motion-ready .stack-lanes[data-reveal].is-visible .stack-item:nth-child(2) { transition-delay: 60ms; }
.motion-ready .stack-lanes[data-reveal].is-visible .stack-item:nth-child(3) { transition-delay: 120ms; }
.motion-ready .stack-lanes[data-reveal].is-visible .stack-item:nth-child(4) { transition-delay: 180ms; }
.motion-ready .stack-lanes[data-reveal].is-visible .stack-item:nth-child(5) { transition-delay: 240ms; }
.motion-ready .stack-lanes[data-reveal].is-visible .stack-item:nth-child(6) { transition-delay: 300ms; }
.motion-ready .stack-lanes[data-reveal].is-visible .stack-item:nth-child(7) { transition-delay: 360ms; }
.motion-ready .stack-lanes[data-reveal].is-visible .stack-item:nth-child(8) { transition-delay: 420ms; }
.stack-item .stack-mark { transition: box-shadow 0.3s ease, border-color 0.3s ease; }
.stack-item:hover .stack-mark { border-color: rgba(200, 255, 92, 0.6); box-shadow: 0 0 22px rgba(200, 255, 92, 0.25); }

@media (prefers-reduced-motion: reduce) {
    .page-home .hero.has-spotlight::before, .has-glow::after { display: none; }
    .hero-proof, .hero-proof-content { rotate: none; }
    .btn-primary, .btn-secondary, .site-nav .nav-contact { translate: none; }
    .motion-ready .stack-lanes .stack-item { opacity: 1; translate: none; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   GLYPH — "sotto c'è il codice" (public/glyph.js)
   ═══════════════════════════════════════════════════════════════════ */
.page-home .hero.hero-glyph {
    display: block;
    grid-template-columns: none;
    position: relative;
    min-height: 100svh;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    cursor: crosshair;
    touch-action: pan-y;
}
.glyph-canvas { position: absolute; inset: 0; z-index: 0; display: block; pointer-events: none; }
.glyph-inner {
    position: relative;
    z-index: 1;
    min-height: 100svh;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto auto minmax(150px, 1fr) auto;
    padding-top: clamp(6.5rem, 13vh, 9rem);
    padding-bottom: clamp(2.5rem, 6vh, 4rem);
    pointer-events: none;
}
.glyph-inner a, .glyph-inner button { pointer-events: auto; }
.glyph-title { margin: 0.9rem 0 0; font: 700 clamp(1.6rem, 3.4vw, 3rem)/1 var(--ff-font-mono); letter-spacing: -0.03em; color: var(--ff-text); }
.glyph-title .glyph-hi::before { content: "$ "; color: var(--ff-kicker-color); }
.glyph-space { min-height: 150px; margin: clamp(0.5rem, 2vh, 1.5rem) 0; }
.glyph-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: end; }
.glyph-bottom p { margin: 0; max-width: 34rem; color: var(--ff-soft); font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.6; }
.glyph-bottom .hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 0; }
.glyph-hint { position: absolute; right: clamp(1.4rem, 4vw, 3.5rem); top: clamp(5.5rem, 11vh, 7.5rem); z-index: 1; margin: 0; font: 500 0.68rem var(--ff-font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ff-kicker-color); pointer-events: none; }
.glyph-hint::before { content: "◉ "; color: var(--ff-accent); }
@media (hover: none) { .glyph-hint { display: none; } .page-home .hero.hero-glyph { cursor: auto; } }
@media (max-width: 760px) {
    .glyph-inner { grid-template-rows: auto auto minmax(110px, 0.7fr) auto; padding-top: 6rem; }
    .glyph-bottom { grid-template-columns: 1fr; }
    .glyph-bottom .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: no-preference) {
    .glyph-bottom, .glyph-title, .page-home .hero-glyph .hero-eyebrow { animation: glyphIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
    .glyph-title { animation-delay: 0.1s; } .glyph-bottom { animation-delay: 1.1s; }
}
@keyframes glyphIn { from { opacity: 0; transform: translateY(14px); } }

/* immagini: entrano come codice che si compila nella foto */
.ascii-host { position: relative; }
.ascii-wrap { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.ascii-wrap img { display: block; }
.ascii-layer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.ascii-host.ascii-armed > :not(.ascii-layer), .ascii-wrap.ascii-armed > img { clip-path: inset(0 0 var(--ascii-reveal, 100%) 0); }
.ascii-host .work-media-hint { z-index: 4; }
.ascii-host:hover { cursor: crosshair; }
@media (prefers-reduced-motion: reduce) { .ascii-host.ascii-armed > :not(.ascii-layer), .ascii-wrap.ascii-armed > img { clip-path: none; } }

/* ═══════════════════════════════════════════════════════════════════
   HOME — sessione terminale, lavori, nastri dello stack, chiusura a mosaico
   ═══════════════════════════════════════════════════════════════════ */
.page-home main { overflow: clip; }

/* sessione: il terminale resta fermo, lo scroll digita i comandi */
.session { position: relative; height: calc(var(--steps) * 70vh + 100vh); }
.session-stage { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; padding: 5.5rem clamp(1rem, 4vw, 3.5rem) 2rem; box-sizing: border-box; overflow: hidden; }
.session-words { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.session-words span {
    grid-area: 1 / 1; font: 900 clamp(5rem, 21vw, 22rem)/0.82 var(--ff-font-sans); letter-spacing: -0.06em; text-transform: uppercase; white-space: nowrap;
    color: transparent; -webkit-text-stroke: 1.5px rgba(200, 255, 92, 0.22);
    opacity: 0; transform: translateY(8%) scale(0.96); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.session-words span.on { opacity: 1; transform: none; }
.session-term {
    position: relative; z-index: 1; width: min(860px, 100%); border: 1px solid rgba(200, 255, 92, 0.22); border-radius: 14px; overflow: hidden;
    background: rgba(8, 10, 9, 0.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 80px rgba(200, 255, 92, 0.06);
    font: 500 clamp(0.82rem, 1.15vw, 1rem)/1.7 var(--ff-font-mono);
}
.session-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0.7rem 1rem; border-bottom: 1px solid rgba(200, 255, 92, 0.12); font-size: 0.72rem; color: var(--ff-soft); }
.session-bar .window-bar { margin: 0; } .session-count { justify-self: end; letter-spacing: 0.1em; } .session-count b { color: var(--ff-accent); font-weight: 600; }
.session-lines { list-style: none; margin: 0; padding: 1.2rem 1.4rem 1.4rem; min-height: min(56vh, 30rem); display: flex; flex-direction: column; justify-content: flex-end; }
.session-lines li { margin-top: 0.9rem; }
.session-lines p { margin: 0; color: var(--ff-soft-strong); overflow-wrap: anywhere; }
.session-lines .ps1 { color: var(--ff-accent); }
.session-lines .out { color: var(--ff-soft); padding-left: 1.2rem; } .session-lines .out b { color: var(--ff-text); font-weight: 600; } .session-lines .out i { font-style: normal; color: var(--ff-kicker-color); }
.session-lines .dir { color: #8fd3ff; text-decoration: none; } .session-lines a.dir:hover { text-decoration: underline; }
.session-progress { position: absolute; left: 50%; bottom: 1.6rem; width: min(240px, 50vw); height: 2px; translate: -50% 0; background: rgba(200, 255, 92, 0.15); border-radius: 2px; overflow: hidden; }
.session-progress i { display: block; height: 100%; width: 100%; background: var(--ff-accent); transform: scaleX(var(--sp, 0)); transform-origin: left; }
/* con JS: le righe non ancora "eseguite" sono nascoste, il cursore lampeggia sull'ultima */
.js .session.is-live .session-lines li { display: none; }
.js .session.is-live .session-lines li.shown { display: block; }
.js .session.is-live .session-lines li .out { opacity: 0; transition: opacity 0.35s ease; }
.js .session.is-live .session-lines li.done .out { opacity: 1; }
.session-lines li.typing .typed::after, .session-lines li.last .typed::after { content: "▮"; color: var(--ff-accent); margin-left: 2px; animation: blinkBlock 1.06s steps(1, end) infinite; }

/* lavori: un progetto per schermata, nome gigante che scorre dietro */
.home-work { padding: clamp(5rem, 10vw, 9rem) 0 3rem; }
.home-work-head { margin-bottom: clamp(1rem, 3vw, 2rem); }
.hw-item { position: relative; padding: clamp(4rem, 9vw, 8rem) 0; }
.hw-name { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; overflow: hidden; pointer-events: none; z-index: 0; }
.hw-name span {
    display: inline-block; white-space: nowrap; font: 900 clamp(6rem, 19vw, 20rem)/0.85 var(--ff-font-sans); letter-spacing: -0.06em;
    color: transparent; -webkit-text-stroke: 1.5px rgba(200, 255, 92, 0.16); translate: calc(var(--hp, 0.5) * -40% + 8%) 0; will-change: translate;
}
.hw-item.is-flip .hw-name span { translate: calc(var(--hp, 0.5) * 40% - 30%) 0; }
.hw-item.is-vexo .hw-name span { -webkit-text-stroke-color: rgba(61, 123, 255, 0.28); }
.hw-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.hw-item.is-flip .hw-media { order: 2; }
.hw-media { border-radius: 14px; border: 1px solid var(--ff-line); min-height: clamp(260px, 34vw, 480px); display: grid; place-items: center; text-decoration: none; }
.hw-media.work-media-logo img { width: min(70%, 440px); height: auto; animation: none; }
.hw-item.is-vexo .hw-media { border-color: rgba(61, 123, 255, 0.35); background: radial-gradient(circle at 30% 20%, rgba(61, 123, 255, 0.14), transparent 60%), var(--ff-panel-deep); }
.hw-n { font: 600 0.72rem var(--ff-font-mono); letter-spacing: 0.16em; color: var(--ff-accent); }
.hw-item.is-vexo .hw-n { color: #6f9cff; }
.hw-info h3 { margin: 0.8rem 0 1rem; font: 800 clamp(2rem, 4vw, 3.6rem)/1 var(--ff-font-sans); letter-spacing: -0.04em; color: var(--ff-text); }
.hw-info p { margin: 0 0 1.2rem; color: var(--ff-soft); line-height: 1.6; max-width: 34rem; }
.hw-info ul { list-style: none; margin: 0 0 1.6rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.hw-info li { font: 500 0.72rem var(--ff-font-mono); padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid var(--ff-line); color: var(--ff-soft-strong); }
.hw-link { font: 600 0.9rem var(--ff-font-mono); color: var(--ff-accent); text-decoration: none; border-bottom: 1px solid rgba(200, 255, 92, 0.35); padding-bottom: 0.2rem; transition: border-color var(--ff-transition), padding var(--ff-transition); }
.hw-link:hover { border-color: var(--ff-accent); padding-right: 0.4rem; }
.home-work-all { margin-top: 1rem; }
@media (max-width: 860px) { .hw-grid { grid-template-columns: 1fr; } .hw-item.is-flip .hw-media { order: 0; } .hw-name { top: 22%; } }

/* stack: nastri che scorrono, più veloci se scorri veloce */
.home-marquee { padding: clamp(4rem, 8vw, 7rem) 0; border-top: 1px solid var(--ff-line); border-bottom: 1px solid var(--ff-line); overflow: hidden; }
.home-marquee .stack-kicker { display: block; margin-bottom: 2rem; }
.marquee { overflow: hidden; }
.marquee-track { display: flex; width: max-content; gap: clamp(1.5rem, 4vw, 4rem); padding: 0.4rem 0; will-change: transform; }
.marquee-track span { display: inline-flex; align-items: center; gap: 1rem; font: 800 clamp(2.4rem, 6.5vw, 6rem)/1.05 var(--ff-font-sans); letter-spacing: -0.04em; color: var(--ff-text); white-space: nowrap; }
.marquee-track img { width: 0.8em; height: 0.8em; filter: saturate(0.9); }
.marquee.is-outline .marquee-track span { color: transparent; -webkit-text-stroke: 1.2px rgba(238, 240, 234, 0.35); }
.marquee.is-outline .marquee-track img { opacity: 0.5; }
.marquee-track span:hover { color: var(--ff-accent); -webkit-text-stroke-color: transparent; }

/* chiusura: PARLIAMONE fatto di celle */
.cta-glyph { position: relative; min-height: 92svh; overflow: hidden; isolation: isolate; cursor: crosshair; touch-action: pan-y; }
.cta-glyph-inner { position: relative; z-index: 1; min-height: 92svh; box-sizing: border-box; display: grid; grid-template-rows: auto minmax(150px, 1fr) auto; padding: clamp(4rem, 9vh, 7rem) 0 clamp(2.5rem, 6vh, 4rem); pointer-events: none; }
.cta-glyph-inner a { pointer-events: auto; }
.cta-glyph-bottom { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
.cta-glyph-bottom p { margin: 0; flex: 1 1 22rem; color: var(--ff-soft); line-height: 1.6; max-width: 32rem; }
.cta-mail { font: 500 0.82rem var(--ff-font-mono); color: var(--ff-soft-strong); text-decoration: none; } .cta-mail:hover { color: var(--ff-accent); }

@media (prefers-reduced-motion: reduce) {
    .session { height: auto; } .session-stage { position: relative; height: auto; min-height: 100svh; }
    .session-words span[data-i="0"] { opacity: 1; transform: none; }
    .hw-name span, .hw-item.is-flip .hw-name span { translate: -10% 0; }
}

/* ═══ FORM CONTATTI ═══ */
.contact-form { position: relative; border: 1px solid rgba(200, 255, 92, 0.2); border-radius: 14px; background: rgba(8, 10, 9, 0.85); padding: 0 clamp(1.1rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2rem); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45); }
.cf-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin: 0 calc(clamp(1.1rem, 3vw, 2rem) * -1) 1.4rem; padding: 0.7rem 1rem; border-bottom: 1px solid rgba(200, 255, 92, 0.12); font: 500 0.72rem var(--ff-font-mono); color: var(--ff-soft); }
.cf-head .window-bar { margin: 0; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cf-field { display: grid; gap: 0.45rem; margin-bottom: 1.1rem; }
.cf-field > span, .cf-kinds legend { font: 600 0.72rem var(--ff-font-mono); letter-spacing: 0.08em; color: var(--ff-kicker-color); }
.cf-field > span::before, .cf-kinds legend::before { content: "> "; color: var(--ff-accent); }
.cf-field input, .cf-field textarea { width: 100%; box-sizing: border-box; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--ff-line); border-radius: 10px; color: var(--ff-text); font: 400 1rem/1.5 var(--ff-font-sans); padding: 0.85rem 1rem; caret-color: var(--ff-accent); transition: border-color var(--ff-transition), box-shadow var(--ff-transition), background var(--ff-transition); resize: vertical; }
.cf-field input:focus, .cf-field textarea:focus { outline: none; border-color: rgba(200, 255, 92, 0.65); box-shadow: 0 0 0 3px rgba(200, 255, 92, 0.12); background: rgba(200, 255, 92, 0.03); }
.cf-field [aria-invalid="true"] { border-color: #ff7a6b; }
.cf-kinds { border: 0; padding: 0; margin: 0 0 1.1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cf-kinds legend { padding: 0; margin-bottom: 0.6rem; }
.cf-kinds label { position: relative; }
.cf-kinds input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cf-kinds span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--ff-line); font: 500 0.82rem var(--ff-font-mono); color: var(--ff-soft-strong); transition: all var(--ff-transition); }
.cf-kinds input:checked + span { background: var(--ff-accent); border-color: var(--ff-accent); color: var(--ff-on-accent); }
.cf-kinds input:focus-visible + span { outline: 2px solid var(--ff-focus-ring); outline-offset: 2px; }
.cf-kinds label:hover span { border-color: rgba(200, 255, 92, 0.5); }
.cf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-foot { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-top: 0.4rem; }
.cf-foot p { margin: 0; color: var(--ff-soft); font-size: 0.85rem; } .cf-foot a { color: var(--ff-soft-strong); }
.cf-status { margin: 0 0 1.2rem; padding: 0.8rem 1rem; border-radius: 10px; font: 500 0.88rem/1.5 var(--ff-font-mono); }
.cf-status b { font-weight: 700; margin-right: 0.4rem; }
.cf-status.is-ok { background: rgba(200, 255, 92, 0.08); border: 1px solid rgba(200, 255, 92, 0.35); color: var(--ff-accent); }
.cf-status.is-bad { background: rgba(255, 122, 107, 0.07); border: 1px solid rgba(255, 122, 107, 0.4); color: #ffb3a8; } .cf-status a { color: inherit; }
.contact-form.is-sending button[type="submit"] { opacity: 0.6; pointer-events: none; }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; margin-top: 2rem; }
.contact-side .contact-window { margin: 0; }
.home-form { padding: 0 0 clamp(4rem, 8vw, 7rem); max-width: 860px; }
.home-form .contact-form { scroll-margin-top: 90px; }
#form { scroll-margin-top: 100px; }
@media (max-width: 860px) { .contact-layout { grid-template-columns: 1fr; } .cf-row { grid-template-columns: 1fr; } }
.contact-side .contact-window-body { display: grid; gap: 0.8rem; padding: 1.2rem; }
.contact-side .contact-window-body .btn { flex: none; width: 100%; box-sizing: border-box; justify-content: space-between; min-width: 0; overflow-wrap: anywhere; font-size: 0.9rem; }
.session-words span { -webkit-text-stroke: 2px rgba(200, 255, 92, 0.42); color: rgba(200, 255, 92, 0.035); }
@media (max-width: 760px) {
    .session-stage { padding-top: 4.5rem; }
    .session-term { font-size: 0.78rem; }
    .session-lines { min-height: 0; max-height: 64svh; padding: 1rem; }
    .js .session.is-live .session-lines li.old { display: none; }
    .session-words span { font-size: 26vw; }
}
.marquee.is-outline .marquee-track span { color: transparent; -webkit-text-stroke-color: rgba(238, 240, 234, 0.55); }

/* Chi sono → VexoHost: una riga sola, pulita */
.about-vexo.is-clean { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(1.2rem, 3vw, 2.5rem); padding: clamp(1.2rem, 2.5vw, 1.8rem) clamp(1.2rem, 3vw, 2.2rem); background: var(--ff-panel-deep); background-image: none; border: 1px solid rgba(61, 123, 255, 0.28); border-radius: var(--ff-radius); min-height: 0; }
.about-vexo.is-clean > img { width: clamp(120px, 14vw, 170px); height: auto; display: block; }
.about-vexo.is-clean .about-vexo-copy { display: grid; gap: 0.3rem; padding: 0; border: 0; }
.about-vexo.is-clean .about-section-label { margin: 0; color: #6f9cff; }
.about-vexo.is-clean h2 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.15; }
.about-vexo.is-clean p { margin: 0; color: var(--ff-soft); font-size: 0.95rem; line-height: 1.55; max-width: 46ch; }
.about-vexo-link { display: inline-flex; align-items: center; gap: 0.35rem; font: 600 0.8rem var(--ff-font-mono); color: var(--ff-soft-strong); text-decoration: none; white-space: nowrap; border-bottom: 1px solid rgba(61, 123, 255, 0.4); padding-bottom: 0.15rem; }
.about-vexo-link:hover { color: #8fb1ff; border-color: #8fb1ff; }
.about-vexo-link svg { width: 14px; height: 14px; }
@media (max-width: 760px) { .about-vexo.is-clean { grid-template-columns: 1fr; justify-items: start; } }

/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD (admin + area cliente) — barra laterale + area di lavoro
   ═══════════════════════════════════════════════════════════════════ */
body.app-page { background: #070908; }
body.app-page main.app-main { padding: 0; border: 0; }
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.app-side { position: sticky; top: 0; height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; gap: 1.6rem; padding: 1.2rem 0.9rem; border-right: 1px solid var(--ff-line); background: #0a0c0b; }
.app-brand { display: flex; align-items: center; gap: 0.7rem; padding: 0.3rem 0.5rem; text-decoration: none; color: var(--ff-text); }
.app-brand strong { display: block; font: 700 0.92rem var(--ff-font-sans); letter-spacing: -0.01em; }
.app-brand small { display: block; font: 500 0.68rem var(--ff-font-mono); color: var(--ff-kicker-color); letter-spacing: 0.06em; }
.app-logo { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--ff-accent); color: var(--ff-on-accent); font: 800 1rem var(--ff-font-sans); flex: none; }
.app-nav { display: grid; gap: 0.2rem; }
.app-nav-item { display: flex; align-items: center; gap: 0.7rem; min-height: 40px; padding: 0 0.7rem; border-radius: 9px; color: var(--ff-soft); text-decoration: none; font: 500 0.9rem var(--ff-font-sans); transition: background var(--ff-transition), color var(--ff-transition); }
.app-nav-item svg { width: 17px; height: 17px; flex: none; }
.app-nav-item span { flex: 1; }
.app-nav-item b { font: 600 0.7rem var(--ff-font-mono); color: var(--ff-soft); background: rgba(255, 255, 255, 0.05); border-radius: 999px; padding: 0.12rem 0.5rem; }
.app-nav-item:hover { background: rgba(255, 255, 255, 0.04); color: var(--ff-text); }
.app-nav-item.is-active { background: rgba(200, 255, 92, 0.1); color: var(--ff-accent); }
.app-nav-item.is-active b { background: rgba(200, 255, 92, 0.18); color: var(--ff-accent); }
.app-nav-item.is-danger:hover { color: #ff8a7a; background: rgba(255, 107, 107, 0.07); }
.app-side-foot { margin-top: auto; display: grid; gap: 0.2rem; padding-top: 1rem; border-top: 1px solid var(--ff-line); }
.app-side-cta { justify-content: center; margin-bottom: 0.5rem; min-height: 42px; font-size: 0.88rem; }
.app-page-in { width: min(1180px, 100%); box-sizing: border-box; margin: 0 auto; padding: clamp(1.4rem, 3vw, 2.6rem) clamp(1rem, 3vw, 2.6rem) 4rem; display: grid; gap: 1.4rem; align-content: start; }
.app-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--ff-line); }
.app-top h1 { margin: 0; font: 800 clamp(1.6rem, 2.6vw, 2.2rem)/1.1 var(--ff-font-sans); letter-spacing: -0.035em; color: var(--ff-text); }
.app-top p { margin: 0.4rem 0 0; color: var(--ff-soft); font-size: 0.95rem; max-width: 60ch; line-height: 1.5; }
.app-back { display: inline-flex; align-items: center; gap: 0.35rem; margin-bottom: 0.6rem; font: 500 0.78rem var(--ff-font-mono); color: var(--ff-soft); text-decoration: none; } .app-back:hover { color: var(--ff-accent); } .app-back svg { width: 14px; height: 14px; }
.app-top .btn { min-height: 42px; padding: 0 1.1rem; font-size: 0.9rem; }
.app-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; }
.app-stats > div { padding: 1rem 1.1rem; border: 1px solid var(--ff-line); border-radius: 12px; background: #0b0d0c; display: grid; gap: 0.35rem; align-content: start; min-width: 0; }
.app-stats span { font: 600 0.68rem var(--ff-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ff-soft); }
.app-stats strong { font: 700 1.7rem/1.1 var(--ff-font-sans); letter-spacing: -0.03em; color: var(--ff-text); overflow-wrap: anywhere; }
.app-stats strong small { font-size: 0.55em; color: var(--ff-soft); margin-left: 0.1em; }
.app-stats strong.is-small { font-size: 1rem; line-height: 1.35; padding-top: 0.25rem; }
.app-stats em { font-style: normal; font-size: 0.8rem; color: var(--ff-soft); }
.app-flash { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1rem; border-radius: 10px; font-size: 0.9rem; }
.app-flash svg { width: 17px; height: 17px; flex: none; }
.app-flash.is-ok { background: rgba(200, 255, 92, 0.08); border: 1px solid rgba(200, 255, 92, 0.3); color: var(--ff-accent); }
.app-flash.is-bad { background: rgba(255, 107, 107, 0.07); border: 1px solid rgba(255, 107, 107, 0.35); color: #ffb3a8; }
.app-flash.is-note { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--ff-line); color: var(--ff-soft-strong); }
.app-toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.app-search { flex: 1 1 260px; display: flex; align-items: center; gap: 0.5rem; padding: 0 0.8rem; border: 1px solid var(--ff-line); border-radius: 10px; background: #0b0d0c; min-height: 42px; }
.app-search svg { width: 16px; height: 16px; color: var(--ff-soft); }
.app-search input { flex: 1; min-width: 0; background: none; border: 0; color: var(--ff-text); font: 400 0.92rem var(--ff-font-sans); padding: 0; outline: none; }
.app-search:focus-within { border-color: rgba(200, 255, 92, 0.55); }
.app-toolbar select { min-height: 42px; padding: 0 2rem 0 0.8rem; border-radius: 10px; border: 1px solid var(--ff-line); background-color: #0b0d0c; color: var(--ff-text); font: 500 0.88rem var(--ff-font-sans); width: auto; }
.app-toolbar .btn { min-height: 42px; padding: 0 1rem; font-size: 0.88rem; }
.app-btn { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 36px; padding: 0 0.85rem; border-radius: 9px; border: 1px solid var(--ff-line); background: rgba(255, 255, 255, 0.03); color: var(--ff-text); font: 600 0.82rem var(--ff-font-sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: border-color var(--ff-transition), background var(--ff-transition), color var(--ff-transition); }
.app-btn svg { width: 15px; height: 15px; }
.app-btn:hover { border-color: rgba(200, 255, 92, 0.5); color: var(--ff-accent); }
.app-icon { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 9px; border: 1px solid var(--ff-line); background: rgba(255, 255, 255, 0.03); color: var(--ff-soft-strong); cursor: pointer; text-decoration: none; transition: all var(--ff-transition); padding: 0; }
.app-icon svg { width: 16px; height: 16px; }
.app-icon:hover { color: var(--ff-accent); border-color: rgba(200, 255, 92, 0.5); }
.app-icon.is-danger:hover { color: #ff8a7a; border-color: rgba(255, 107, 107, 0.5); background: rgba(255, 107, 107, 0.06); }
.app-card { border: 1px solid var(--ff-line); border-radius: 14px; background: #0b0d0c; padding: clamp(1rem, 2.4vw, 1.5rem); min-width: 0; }
.app-card h2 { margin: 0 0 1rem; font: 700 1.05rem var(--ff-font-sans); letter-spacing: -0.01em; color: var(--ff-text); }
.app-empty { display: flex; align-items: center; gap: 0.6rem; margin: 0; color: var(--ff-soft); font-size: 0.9rem; } .app-empty svg { width: 17px; height: 17px; }

/* admin: elenco progetti compatto */
.admin-app .project-list { display: grid; gap: 0; border: 1px solid var(--ff-line); border-radius: 14px; overflow: hidden; background: #0b0d0c; }
.admin-app .project-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 1rem; border: 0; border-bottom: 1px solid var(--ff-line); border-radius: 0; background: transparent; box-shadow: none; transition: background var(--ff-transition); }
.admin-app .project-row:last-child { border-bottom: 0; }
.admin-app .project-row:hover { background: rgba(255, 255, 255, 0.02); }
.admin-app .project-row.is-dragging { opacity: 0.5; background: rgba(200, 255, 92, 0.05); }
.admin-app .project-row-main { display: flex; align-items: center; gap: 0.9rem; min-width: 0; flex: 1; }
.admin-app .drag-handle { width: 28px; height: 36px; display: grid; place-items: center; border: 0; background: none; color: var(--ff-soft); cursor: grab; padding: 0; border-radius: 6px; }
.admin-app .drag-handle svg { width: 16px; height: 16px; }
.admin-app .project-thumb { width: 64px; height: 44px; flex: none; border-radius: 8px; background-color: #121513; background-size: cover; background-position: center; border: 1px solid var(--ff-line); }
.admin-app .project-row-copy { min-width: 0; display: grid; gap: 0.2rem; }
.admin-app .project-row-title { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.admin-app .project-row-title h3 { margin: 0; font: 700 0.98rem var(--ff-font-sans); color: var(--ff-text); }
.admin-app .project-row-copy p { margin: 0; color: var(--ff-soft); font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-app .project-row-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; font: 500 0.72rem var(--ff-font-mono); color: var(--ff-soft); }
.admin-app .row-actions { display: flex; align-items: center; gap: 0.4rem; flex: none; }
.admin-app .row-actions form { margin: 0; }
.admin-app .admin-pill { font: 600 0.66rem var(--ff-font-mono); letter-spacing: 0.04em; padding: 0.15rem 0.5rem; border-radius: 999px; border: 1px solid var(--ff-line); }
.admin-app .admin-pill.is-live { color: var(--ff-accent); border-color: rgba(200, 255, 92, 0.35); background: rgba(200, 255, 92, 0.06); }
.admin-app .admin-pill.is-draft { color: #ffd166; border-color: rgba(255, 209, 102, 0.35); }

/* admin: feedback e PIN */
.admin-app .admin-review-list { display: grid; gap: 0.7rem; }
.admin-app .admin-review-card { padding: 1rem 1.1rem; border: 1px solid var(--ff-line); border-radius: 12px; background: #0b0d0c; box-shadow: none; }
.admin-app .admin-review-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem; align-items: flex-start; }
.admin-app .admin-review-title-row { display: flex; align-items: center; gap: 0.6rem; }
.admin-app .admin-review-title-row h4 { margin: 0; font: 700 0.95rem var(--ff-font-sans); }
.admin-app .admin-review-rating { color: var(--ff-star); font-size: 0.8rem; letter-spacing: 0.05em; }
.admin-app .admin-review-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin-top: 0.3rem; font: 500 0.74rem var(--ff-font-mono); color: var(--ff-soft); }
.admin-app .admin-review-meta svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 0.25rem; }
.admin-app .admin-review-meta a { color: var(--ff-soft-strong); }
.admin-app .admin-review-actions { display: flex; gap: 0.4rem; align-items: center; }
.admin-app .admin-review-actions form { margin: 0; display: flex; gap: 0.4rem; }
.admin-app .admin-review-edit input { min-height: 36px; padding: 0 0.7rem; border-radius: 9px; border: 1px solid var(--ff-line); background: #070908; color: var(--ff-text); font: 400 0.85rem var(--ff-font-sans); width: 170px; }
.admin-app .admin-review-text { margin: 0.8rem 0 0; color: var(--ff-soft-strong); line-height: 1.55; font-size: 0.92rem; }
.admin-app .friend-pin-create { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.7rem; padding: 1rem; border: 1px solid var(--ff-line); border-radius: 12px; background: #0b0d0c; }
.admin-app .friend-pin-create .form-group { flex: 1 1 260px; margin: 0; }
.admin-app .friend-pin-create input { min-height: 42px; }
.admin-app .friend-pin-create .btn { min-height: 42px; padding: 0 1.1rem; font-size: 0.9rem; }
.admin-app .friend-pin-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.admin-app .friend-pin-summary > div { padding: 1rem 1.1rem; border: 1px solid var(--ff-line); border-radius: 12px; background: #0b0d0c; display: grid; gap: 0.3rem; }
.admin-app .friend-pin-summary span { font: 600 0.68rem var(--ff-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ff-soft); }
.admin-app .friend-pin-summary strong { font: 700 1.6rem var(--ff-font-sans); }
.admin-app .friend-pin-list { display: grid; gap: 0; border: 1px solid var(--ff-line); border-radius: 14px; overflow: hidden; background: #0b0d0c; }
.admin-app .friend-pin-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 1rem; padding: 0.8rem 1rem; border: 0; border-bottom: 1px solid var(--ff-line); border-radius: 0; background: transparent; }
.admin-app .friend-pin-row:last-child { border-bottom: 0; }
.admin-app .friend-pin-code { display: grid; gap: 0.1rem; } .admin-app .friend-pin-code span { font: 600 0.6rem var(--ff-font-mono); color: var(--ff-soft); letter-spacing: 0.1em; } .admin-app .friend-pin-code strong { font: 700 1.15rem var(--ff-font-mono); color: var(--ff-accent); letter-spacing: 0.12em; }
.admin-app .friend-pin-info h3 { margin: 0; font: 700 0.92rem var(--ff-font-sans); } .admin-app .friend-pin-info p { margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--ff-soft); }

/* editor progetto dentro la shell */
.admin-app .project-editor-layout { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.admin-app .project-editor-nav { position: sticky; top: 1.2rem; display: grid; gap: 0.2rem; padding: 0.5rem; border: 1px solid var(--ff-line); border-radius: 12px; background: #0b0d0c; }
.admin-app .project-editor-nav a { display: flex; align-items: center; gap: 0.55rem; min-height: 38px; padding: 0 0.7rem; border-radius: 8px; color: var(--ff-soft); text-decoration: none; font: 500 0.88rem var(--ff-font-sans); }
.admin-app .project-editor-nav a:hover { background: rgba(255, 255, 255, 0.04); color: var(--ff-text); }
.admin-app .project-editor-nav svg { width: 16px; height: 16px; }
.admin-app .project-editor-form { display: grid; gap: 1rem; padding-bottom: 5.5rem; }
.admin-app .project-editor-section { border: 1px solid var(--ff-line); border-radius: 14px; background: #0b0d0c; padding: clamp(1rem, 2.4vw, 1.5rem); scroll-margin-top: 1.2rem; }
.admin-app .project-editor-save { position: fixed; left: 248px; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: flex-end; gap: 0.6rem; padding: 0.8rem clamp(1rem, 3vw, 2.6rem); background: rgba(7, 9, 8, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--ff-line); margin: 0; }
.admin-app .project-editor-save .btn { min-height: 42px; padding: 0 1.2rem; font-size: 0.9rem; }

/* area cliente */
.client-app .client-top { align-items: center; }
.client-app .client-top > div:first-child { flex: 1 1 380px; }
.client-app .client-status-pill { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 0.7rem; padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid rgba(200, 255, 92, 0.3); background: rgba(200, 255, 92, 0.06); color: var(--ff-accent); font: 600 0.74rem var(--ff-font-mono); }
.client-app .client-status-pill svg { width: 14px; height: 14px; }
.client-cover { flex: 0 1 300px; aspect-ratio: 16 / 10; border-radius: 12px; border: 1px solid var(--ff-line); background-color: #0b0d0c; background-size: cover; background-position: center; }
.client-cover.is-logo { background-size: 70% auto; background-repeat: no-repeat; border-color: rgba(61, 123, 255, 0.3); }
.client-progress-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; margin-top: 0.3rem; }
.client-progress-bar span { display: block; height: 100%; background: var(--ff-accent); border-radius: inherit; }
.client-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.client-grid .client-summary { grid-column: 1 / -1; }
.client-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.client-steps li { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0.8rem; border-radius: 10px; background: rgba(255, 255, 255, 0.025); }
.client-steps span { font: 700 0.75rem var(--ff-font-mono); color: var(--ff-accent); } .client-steps p { margin: 0; font-size: 0.92rem; color: var(--ff-soft-strong); }
.client-files { display: grid; gap: 0.5rem; }
.client-files > * { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.8rem; border-radius: 10px; background: rgba(255, 255, 255, 0.025); color: var(--ff-soft-strong); text-decoration: none; font-size: 0.92rem; }
.client-files span { flex: 1; } .client-files svg { width: 16px; height: 16px; color: var(--ff-soft); } .client-files a:hover { color: var(--ff-accent); }
.client-meta { margin: -0.4rem 0 0.8rem; font: 500 0.78rem var(--ff-font-mono); color: var(--ff-soft); }
.client-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; } .client-tags span { font: 500 0.74rem var(--ff-font-mono); padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--ff-line); color: var(--ff-soft-strong); }
.client-app .client-review-panel .admin-section-head { margin-bottom: 1rem; }
.client-app .client-review-panel h2 { margin: 0; }
.client-app .client-review-panel .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }

/* mobile: la barra laterale diventa una barra in alto con le sezioni scorrevoli */
@media (max-width: 900px) {
    .app { grid-template-columns: 1fr; }
    .app-side { position: sticky; top: 0; z-index: 40; height: auto; flex-direction: row; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; border-right: 0; border-bottom: 1px solid var(--ff-line); overflow-x: auto; scrollbar-width: none; }
    .app-side::-webkit-scrollbar { display: none; }
    .app-brand span:not(.app-logo) { display: none; }
    .app-nav { display: flex; gap: 0.2rem; }
    .app-nav-item { white-space: nowrap; min-height: 38px; }
    .app-side-foot { margin: 0 0 0 auto; padding: 0; border: 0; display: flex; }
    .app-side-foot .app-nav-item span, .app-side-cta { display: none; }
    .app-stats, .admin-app .friend-pin-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .client-grid, .client-app .client-review-panel .form-grid { grid-template-columns: 1fr; }
    .client-cover { flex-basis: 100%; }
    .admin-app .project-editor-layout { grid-template-columns: 1fr; }
    .admin-app .project-editor-nav { position: static; display: flex; overflow-x: auto; }
    .admin-app .project-editor-save { left: 0; }
    .admin-app .project-row { flex-wrap: wrap; } .admin-app .project-thumb { display: none; }
    .admin-app .friend-pin-row { grid-template-columns: 1fr auto; } .admin-app .friend-pin-row .admin-pill { justify-self: start; }
}
.app-page-in { grid-template-columns: minmax(0, 1fr); }
.app-page-in > * { grid-column: 1 / -1; min-width: 0; }
.admin-app .admin-review-actions { flex-wrap: nowrap; }
.admin-app .admin-review-card-head { flex-wrap: nowrap; }
.admin-app .project-editor-section .form-group { margin-bottom: 1.1rem; display: grid; gap: 0.4rem; }
.admin-app .project-editor-section .form-group label { font: 600 0.78rem var(--ff-font-sans); color: var(--ff-soft-strong); }
.admin-app .project-editor-section :is(input[type="text"], input[type="url"], input[type="number"], select, textarea) { min-height: 44px; border-radius: 10px; }
@media (max-width: 900px) { .admin-app .admin-review-card-head { flex-wrap: wrap; } .admin-app .admin-review-edit input { width: 140px; } }

/* ═══ TERMINALE DEL SITO (public/console.js) ═══ */
.con-fab { position: fixed; right: clamp(0.8rem, 2.4vw, 1.6rem); bottom: clamp(0.8rem, 2.4vw, 1.6rem); z-index: 1200; display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0 0.6rem 0 0.95rem; border-radius: 999px; border: 1px solid rgba(200, 255, 92, 0.35); background: rgba(8, 10, 9, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--ff-text); font: 600 0.82rem var(--ff-font-mono); cursor: pointer; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(200, 255, 92, 0.4); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color var(--ff-transition), box-shadow 0.3s ease; animation: conPulse 3.2s ease-in-out 2.5s 3; }
.con-fab:hover { transform: translateY(-2px); border-color: var(--ff-accent); }
.con-fab-ps { color: var(--ff-accent); }
.con-fab kbd { font: 600 0.72rem var(--ff-font-mono); min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: rgba(200, 255, 92, 0.12); color: var(--ff-accent); border: 1px solid rgba(200, 255, 92, 0.3); }
.con-fab.is-open { opacity: 0; pointer-events: none; }
@keyframes conPulse { 0%, 100% { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(200, 255, 92, 0.35); } 50% { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 0 10px rgba(200, 255, 92, 0); } }
.con { position: fixed; right: clamp(0.8rem, 2.4vw, 1.6rem); bottom: clamp(0.8rem, 2.4vw, 1.6rem); z-index: 1300; width: min(560px, calc(100vw - 1.6rem)); height: min(440px, 70vh); display: grid; grid-template-rows: auto 1fr auto auto; border-radius: 14px; overflow: hidden; border: 1px solid rgba(200, 255, 92, 0.3); background: rgba(7, 9, 8, 0.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 30px 100px rgba(0, 0, 0, 0.65), 0 0 60px rgba(200, 255, 92, 0.08); font: 500 0.84rem/1.6 var(--ff-font-mono); color: var(--ff-soft-strong); opacity: 0; transform: translateY(14px) scale(0.98); transform-origin: bottom right; transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.con.is-in { opacity: 1; transform: none; }
.con.flash { animation: conFlash 0.7s ease; }
@keyframes conFlash { 30% { border-color: var(--ff-accent); box-shadow: 0 30px 100px rgba(0, 0, 0, 0.65), 0 0 80px rgba(200, 255, 92, 0.35); } }
.con-bar { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 0.8rem; padding: 0.55rem 0.8rem; border-bottom: 1px solid rgba(200, 255, 92, 0.14); font-size: 0.72rem; color: var(--ff-soft); }
.con-bar .window-bar { margin: 0; }
.con-title { text-align: center; }
.con-secrets { color: var(--ff-kicker-color); } .con-secrets b { color: var(--ff-accent); font-weight: 700; }
.con-x { background: none; border: 1px solid var(--ff-line); border-radius: 6px; color: var(--ff-soft); font: 600 0.66rem var(--ff-font-mono); padding: 0.2rem 0.45rem; cursor: pointer; } .con-x:hover { color: var(--ff-text); border-color: var(--ff-soft); }
.con-out { overflow-y: auto; padding: 0.8rem 1rem; overscroll-behavior: contain; scrollbar-width: thin; }
.con-line { margin: 0.12rem 0; overflow-wrap: anywhere; }
.con-line b { color: var(--ff-text); }
.con-line a { color: var(--ff-accent); }
.con-line .k { color: var(--ff-accent); }
.con-line .d { color: var(--ff-soft); }
.con-line .dir { color: #8fd3ff; }
.con-line .err { color: #ff8a7a; }
.con-line.is-cmd { margin-top: 0.6rem; color: var(--ff-text); }
.con-line.is-dim { color: var(--ff-soft); }
.con-line.is-err { color: #ff8a7a; }
.con-line.is-secret { color: #ffd166; } .con-line.is-secret b { color: #ffd166; }
.con-line.is-grid { display: grid; grid-template-columns: max-content 1fr; gap: 0.1rem 1.2rem; }
.con-ps { color: var(--ff-accent); white-space: nowrap; }
.con-in { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1rem; border-top: 1px solid rgba(200, 255, 92, 0.12); }
.con-in input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--ff-text); font: inherit; caret-color: var(--ff-accent); padding: 0.3rem 0; }
.con-hints { display: flex; gap: 0.35rem; padding: 0 1rem 0.7rem; overflow-x: auto; scrollbar-width: none; }
.con-hints button { flex: none; background: rgba(200, 255, 92, 0.06); border: 1px solid rgba(200, 255, 92, 0.2); color: var(--ff-soft-strong); font: 500 0.72rem var(--ff-font-mono); border-radius: 999px; padding: 0.25rem 0.65rem; cursor: pointer; min-height: 30px; }
.con-hints button:hover { color: var(--ff-accent); border-color: var(--ff-accent); }
.con-rain { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1250; pointer-events: none; }
body.con-quake { animation: conQuake 0.12s linear 10; }
@keyframes conQuake { 25% { transform: translate(3px, -2px) rotate(0.3deg); } 50% { transform: translate(-3px, 2px) rotate(-0.3deg); } 75% { transform: translate(2px, 3px); } }
body.app-page .con-fab { display: none; }
@media (max-width: 760px) {
    .con { right: 0.5rem; left: 0.5rem; bottom: 0.5rem; width: auto; height: 62vh; }
    .con-fab span:not(.con-fab-ps) { display: none; } .con-fab kbd { display: none; } .con-fab { padding: 0 0.95rem; bottom: 4.6rem; }
}
@media (prefers-reduced-motion: reduce) { .con-fab { animation: none; } body.con-quake { animation: none; } }
/* nella home: la sessione finisce con l'invito a provare */
.session-try { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid rgba(200, 255, 92, 0.4); background: rgba(200, 255, 92, 0.08); color: var(--ff-accent); font: 600 0.82rem var(--ff-font-mono); cursor: pointer; text-decoration: none; pointer-events: auto; }
.session-try:hover { background: var(--ff-accent); color: var(--ff-on-accent); }
.con[hidden] { display: none; }
.social-telegram { color: #27a7e7; }
.social-telegram:hover { background: #27a7e7; border-color: #27a7e7; color: #fff; transform: translateY(-6px); }

/* ═══ MOBILE: correzioni ═══ */
@media (max-width: 760px) {
    /* il bottone del terminale va in alto, accanto a IT: non copre più i contenuti */
    .con-fab { top: 14px; bottom: auto; right: 72px; min-height: 26px; height: 26px; padding: 0 0.6rem; border-radius: var(--ff-radius-sm); font-size: 0.68rem; box-shadow: none; animation: none; background: rgba(11, 13, 11, 0.88); }
    .con-fab .con-fab-ps { font-size: 0.72rem; }
    /* il terminale si apre come pannello sopra la barra di navigazione in basso */
    .con { top: 50px; bottom: auto; left: 0.5rem; right: 0.5rem; height: min(62vh, 520px); transform-origin: top right; }
    /* footer: link legali ordinati, senza puntini a inizio riga */
    .copyright { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.1rem; text-align: center; line-height: 1.6; }
    .copyright .footer-sep { display: none; }
    .copyright .footer-admin-link { min-height: 32px; }
    /* progetti in home: testo breve, niente muri di testo */
    .hw-info p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
    .hw-item { padding: 3rem 0; }
    .hw-name { top: 18%; }
}
.client-review-done { display: grid; gap: 0.8rem; }
.client-review-done-note { display: flex; align-items: center; gap: 0.6rem; margin: 0; color: var(--ff-soft-strong); font-size: 0.92rem; }
.client-review-done-note svg { width: 18px; height: 18px; color: var(--ff-accent); flex: none; }
.client-review-done blockquote { margin: 0; padding: 1rem 1.1rem; border-radius: 10px; border: 1px solid var(--ff-line); background: rgba(255, 255, 255, 0.025); }
.client-review-done blockquote p { margin: 0 0 0.6rem; color: var(--ff-text); line-height: 1.55; }
.client-review-done footer { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; font: 500 0.78rem var(--ff-font-mono); color: var(--ff-soft); }
.client-review-done footer span { color: var(--ff-star); }

/* ── Feedback modal (fb-*) — una colonna, passi, stelle ─────────── */
.review-modal-panel.fb-panel {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    overflow-y: auto;
    padding: clamp(1.4rem, 4vw, 2.25rem);
    width: min(540px, 100%);
    background:
        radial-gradient(120% 60% at 50% -10%, rgba(200, 255, 92, 0.10), transparent 60%),
        var(--ff-panel-deep);
    animation: fb-in 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes fb-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
.fb-panel .close-modal { right: 14px; top: 14px; }
.fb-head { display: grid; gap: 0.7rem; }
.fb-kicker { color: var(--ff-kicker-color); font-family: var(--ff-font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.fb-head h2 { font-size: clamp(1.7rem, 5vw, 2.2rem); letter-spacing: var(--ff-heading-tracking); line-height: 1.05; margin: 0.35rem 0 0; }
.fb-head p { color: var(--ff-soft); margin: 0; line-height: 1.55; }
.fb-steps { display: flex; gap: 0.5rem; list-style: none; margin: 0.2rem 0 0; padding: 0; }
.fb-steps li {
    align-items: center; color: var(--ff-soft); display: flex; flex: 1; font-family: var(--ff-font-mono);
    font-size: 0.7rem; gap: 0.45rem; letter-spacing: 0.08em; padding-top: 0.6rem; position: relative; text-transform: uppercase;
}
.fb-steps li::before { background: var(--ff-line); border-radius: 2px; content: ""; height: 3px; left: 0; position: absolute; right: 0; top: 0; }
.fb-steps li.is-done::before, .fb-steps li.is-current::before { background: var(--ff-accent); }
.fb-steps li.is-current::before { box-shadow: 0 0 12px rgba(200, 255, 92, 0.55); }
.fb-steps li span {
    align-items: center; border: 1px solid var(--ff-line); border-radius: 50%; display: inline-flex;
    flex: 0 0 auto; font-size: 0.65rem; height: 18px; justify-content: center; width: 18px;
}
.fb-steps li.is-current { color: var(--ff-text); }
.fb-steps li.is-current span, .fb-steps li.is-done span { background: var(--ff-accent); border-color: var(--ff-accent); color: var(--ff-on-accent); }
.fb-steps li span svg { height: 11px; width: 11px; stroke-width: 3; }

.fb-verified {
    align-items: center; background: rgba(200, 255, 92, 0.06); border: 1px solid rgba(200, 255, 92, 0.22);
    border-radius: var(--ff-radius); display: flex; gap: 0.75rem; padding: 0.75rem 0.9rem;
}
.fb-verified > svg { color: var(--ff-accent); flex: 0 0 auto; height: 20px; width: 20px; }
.fb-verified div { display: grid; flex: 1; gap: 0.1rem; min-width: 0; }
.fb-verified strong { font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-verified span { color: var(--ff-soft); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-verified b { color: var(--ff-text); font-weight: 600; }
.fb-verified a { color: var(--ff-soft); flex: 0 0 auto; font-size: 0.78rem; text-decoration: underline; text-underline-offset: 3px; }
.fb-verified a:hover { color: var(--ff-accent); }

.fb-alert {
    align-items: flex-start; background: rgba(255, 107, 107, 0.08); border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: var(--ff-radius); color: #ffc9c9; display: flex; font-size: 0.88rem; gap: 0.6rem; line-height: 1.45; padding: 0.75rem 0.9rem;
}
.fb-alert svg { color: var(--ff-danger); flex: 0 0 auto; height: 18px; margin-top: 1px; width: 18px; }

.fb-form { display: grid; gap: 1.1rem; }
.fb-field { display: grid; gap: 0.5rem; position: relative; }
.fb-field label, .fb-rating legend { color: var(--ff-soft-strong); font-size: 0.85rem; font-weight: 600; }
.fb-form input[type="text"], .fb-form textarea {
    background: rgba(255, 255, 255, 0.03); border: 1px solid var(--ff-line); border-radius: var(--ff-radius);
    color: var(--ff-text); font: inherit; padding: 0.85rem 1rem; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; width: 100%;
}
.fb-form textarea { line-height: 1.55; min-height: 130px; resize: vertical; }
.fb-form input[type="text"]:focus, .fb-form textarea:focus {
    background: rgba(200, 255, 92, 0.03); border-color: rgba(200, 255, 92, 0.55); box-shadow: 0 0 0 4px rgba(200, 255, 92, 0.12); outline: none;
}
.fb-big-input { font-size: 1.15rem !important; padding: 1rem 1.1rem !important; }
.fb-pin-input { font-family: var(--ff-font-mono) !important; font-size: 1.6rem !important; letter-spacing: 0.45em; text-align: center; }
.fb-pin-input::placeholder { color: rgba(238, 240, 234, 0.22); }
.fb-count { color: var(--ff-soft); font-family: var(--ff-font-mono); font-size: 0.7rem; justify-self: end; }

.fb-rating { border: 0; display: grid; gap: 0.55rem; margin: 0; padding: 0; }
.fb-stars { display: flex; flex-direction: row-reverse; gap: 0.3rem; justify-content: flex-end; }
.fb-stars input { opacity: 0; pointer-events: none; position: absolute; }
.fb-stars label { cursor: pointer; padding: 2px; transition: transform 0.18s cubic-bezier(0.3, 1.6, 0.5, 1); }
.fb-stars svg { display: block; fill: transparent; height: 38px; stroke: rgba(238, 240, 234, 0.35); stroke-linejoin: round; stroke-width: 1.4; transition: fill 0.15s, stroke 0.15s; width: 38px; }
.fb-stars label:hover, .fb-stars input:checked + label { transform: scale(1.12); }
.fb-stars input:checked ~ label svg, .fb-stars label:hover svg, .fb-stars label:hover ~ label svg { fill: var(--ff-star); stroke: var(--ff-star); }
.fb-stars:hover input:checked ~ label:not(:hover):not(:hover ~ label) svg { fill: transparent; stroke: rgba(238, 240, 234, 0.35); }
.fb-stars input:focus-visible + label { border-radius: 8px; outline: 2px solid var(--ff-focus-ring); }
.fb-rating-text { color: var(--ff-soft); font-family: var(--ff-font-mono); font-size: 0.75rem; letter-spacing: 0.04em; min-height: 1.1em; }
.fb-rating-text.is-set { color: var(--ff-star); }

.fb-consent { align-items: flex-start; color: var(--ff-soft); cursor: pointer; display: flex; font-size: 0.8rem; gap: 0.65rem; line-height: 1.5; }
.fb-consent input { accent-color: var(--ff-accent); flex: 0 0 auto; height: 18px; margin-top: 1px; width: 18px; }
.fb-consent a { color: var(--ff-soft-strong); text-decoration: underline; }
.fb-submit { justify-content: center; min-height: 52px; width: 100%; }
.fb-foot { align-items: center; border-top: 1px solid var(--ff-line); color: var(--ff-soft); display: flex; font-size: 0.74rem; gap: 0.45rem; margin: 0; padding-top: 1rem; }
.fb-foot svg { flex: 0 0 auto; height: 14px; width: 14px; }

.fb-done { align-items: center; display: grid; gap: 0.9rem; justify-items: center; padding: 1.5rem 0 0.5rem; text-align: center; }
.fb-done-icon {
    align-items: center; animation: fb-pop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) both 0.1s; background: var(--ff-accent); border-radius: 50%;
    box-shadow: 0 0 0 10px rgba(200, 255, 92, 0.1), 0 0 50px rgba(200, 255, 92, 0.35); color: var(--ff-on-accent); display: flex; height: 72px; justify-content: center; width: 72px;
}
.fb-done-icon svg { height: 34px; stroke-width: 3; width: 34px; }
.fb-done h2 { font-size: 2.2rem; letter-spacing: var(--ff-heading-tracking); margin: 0.6rem 0 0; }
.fb-done p { color: var(--ff-soft); margin: 0 0 0.6rem; max-width: 34ch; }
@keyframes fb-pop { from { opacity: 0; transform: scale(0.4); } }

@media (max-width: 560px) {
    .review-modal { align-items: flex-end; padding: 0; }
    .review-modal-panel.fb-panel { border-bottom-left-radius: 0; border-bottom-right-radius: 0; max-height: 92dvh; padding: 1.4rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom)); width: 100%; }
    @keyframes fb-in { from { transform: translateY(40px); opacity: 0; } }
    .fb-steps li { font-size: 0.62rem; }
    .fb-stars svg { height: 42px; width: 42px; }
    .fb-verified strong, .fb-verified span { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .review-modal-panel.fb-panel, .fb-done-icon { animation: none; } }

/* Link legali nelle dashboard (le pagine app non hanno il footer pubblico) */
.app-legal { display: flex; flex-wrap: wrap; gap: 0.25rem 0.8rem; padding: 0.7rem 0.75rem 0.2rem; }
.app-legal a { color: var(--ff-soft); font: 500 0.72rem var(--ff-font-mono); text-decoration: none; }
.app-legal a:hover { color: var(--ff-accent); }
@media (max-width: 900px) {
    .app-legal { flex-wrap: nowrap; align-items: center; padding: 0 0.4rem; white-space: nowrap; }
}