/* =========================================================================
   Applicazioni (Synthelion, Kodinn) e vetrina in home.
   Si appoggia ai token di minimal.css (--ds-*).
   ========================================================================= */

.ds-eyebrow {
    display: inline-block;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ds-brand-deep);
    background: var(--ds-brand-soft);
    border-radius: 999px;
}

/* ---------- Vetrina (home e hub) ---------- */
.ds-apps-showcase { padding: 70px 0 40px; }
.ds-apps-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.ds-apps-head h2 { margin: 16px 0 12px; font-size: clamp(30px, 4vw, 46px); font-weight: 650; letter-spacing: -.035em; }
.ds-apps-head p { margin: 0; font-size: 17px; color: var(--ds-ink-2); }

.ds-apps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

.ds-appcard {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 28px;
    color: var(--ds-ink);
    background:
        radial-gradient(420px circle at var(--sx, -200px) var(--sy, -200px), color-mix(in srgb, var(--a1) 14%, transparent), transparent 62%),
        var(--ds-glass-strong);
    border: 1px solid var(--ds-line);
    border-radius: 32px;
    box-shadow: var(--ds-shadow);
    overflow: hidden;
    isolation: isolate;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s;
}
.ds-appcard:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(11, 13, 18, .14); border-color: color-mix(in srgb, var(--a1) 45%, transparent); }
.ds-appcard-aurora {
    position: absolute;
    inset: -30% -20% auto auto;
    width: 70%;
    aspect-ratio: 1;
    z-index: -1;
    background: radial-gradient(circle, color-mix(in srgb, var(--a2) 28%, transparent), transparent 65%);
    filter: blur(20px);
    opacity: .8;
    transition: transform .6s ease;
}
.ds-appcard:hover .ds-appcard-aurora { transform: translate(-6%, 8%) scale(1.1); }
.ds-appcard-top { display: flex; align-items: center; gap: 18px; }
.ds-appicon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    border-radius: 26px;
    background: linear-gradient(160deg, #0b0f14, #11221c);
    box-shadow: 0 14px 34px color-mix(in srgb, var(--a1) 40%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .08);
    overflow: hidden;
}
.ds-appicon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ds-appcard-id strong { display: block; font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 8px; }
.ds-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px 4px 10px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 999px;
}
.ds-status i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ds-status.is-live { color: #1f6b36; background: rgba(42, 132, 66, .12); }
.ds-status.is-live i { animation: apx-pulse 1.8s ease-in-out infinite; }
.ds-status.is-soon { color: #9a6b00; background: rgba(245, 166, 35, .16); }
.ds-appcard-tag { font-size: 16.5px; line-height: 1.5; color: var(--ds-ink-2); }
.ds-appcard-shot {
    display: block;
    margin: 4px -6px 0;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--ds-line);
    box-shadow: 0 22px 50px rgba(11, 13, 18, .16);
    transform: perspective(1200px) rotateX(5deg) rotateZ(-.6deg);
    transform-origin: 50% 100%;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.ds-appcard:hover .ds-appcard-shot { transform: perspective(1200px) rotateX(0) rotateZ(0) translateY(-4px); }
.ds-appcard-shot img { display: block; width: 100%; height: auto; }
.ds-appcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ds-appcard-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-appcard-chips em { font-style: normal; font-size: 12px; font-weight: 600; padding: 4px 11px; border: 1px solid var(--ds-line-strong); border-radius: 999px; color: var(--ds-ink-2); background: rgba(255, 255, 255, .7); }
.ds-appcard-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; font-size: 14px; font-weight: 600; color: #fff; background: var(--ds-ink); border-radius: 999px; transition: background .2s, gap .2s; }
.ds-appcard:hover .ds-appcard-cta { background: var(--a1); gap: 12px; }
.ds-appcard-cta b { font-weight: 500; }

@media (max-width: 991.98px) {
    .ds-apps-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .ds-appcard { padding: 20px; border-radius: 26px; }
    .ds-appicon { width: 76px; height: 76px; border-radius: 22px; }
    .ds-appcard-id strong { font-size: 24px; }
}

/* ---------- Sistema comune pagine app ---------- */
@keyframes apx-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.8); } }
@keyframes apx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes apx-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(6%, -5%, 0) scale(1.15); } 100% { transform: translate3d(0, 0, 0) scale(1); } }

.apx { --a1: #2a8442; --a2: #22b8cf; }
.apx-section { padding: 84px 0; position: relative; }
html.apx-js .apx [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
html.apx-js .apx [data-reveal].is-in { opacity: 1; transform: none; }

.apx-head { max-width: 780px; margin: 0 auto 48px; text-align: center; }
.apx-head h2 { margin: 16px 0 14px; font-size: clamp(30px, 4.2vw, 50px); font-weight: 650; letter-spacing: -.04em; line-height: 1.08; }
.apx-head p { margin: 0; font-size: 17.5px; line-height: 1.65; color: var(--ds-ink-2); }
.apx-muted { color: var(--ds-muted); font-size: 14.5px; line-height: 1.6; }

.apx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .2s, background .2s, border-color .2s, box-shadow .2s, color .2s;
}
.apx-btn:hover { transform: translateY(-2px); }
.apx-btn-primary { color: #fff !important; background: var(--ds-ink); box-shadow: 0 12px 30px rgba(11, 13, 18, .22); }
.apx-btn-primary:hover { background: var(--a1); box-shadow: 0 16px 36px color-mix(in srgb, var(--a1) 45%, transparent); }
.apx-btn-ghost { color: var(--ds-ink) !important; background: transparent; border-color: var(--ds-line-strong); }
.apx-btn-ghost:hover { background: #fff; border-color: var(--ds-ink); }
.apx-btn-glass { color: var(--ds-ink) !important; background: var(--ds-glass-strong); border-color: var(--ds-line-strong); backdrop-filter: blur(12px); }
.apx-btn-glass:hover { background: #fff; }

.apx-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ds-ink-2);
    background: var(--ds-glass-strong);
    border: 1px solid var(--ds-line);
    border-radius: 999px;
}
.apx-pill i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.apx-pill.is-live { color: #1f6b36; background: rgba(42, 132, 66, .12); border-color: rgba(42, 132, 66, .25); }
.apx-pill.is-live i { animation: apx-pulse 1.8s ease-in-out infinite; }
.apx-pill.is-soon { color: #9a6b00; background: rgba(245, 166, 35, .15); border-color: rgba(245, 166, 35, .35); }
.apx-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }

/* Stage */
.apx-stage {
    position: relative;
    margin: 0 16px;
    padding: 70px 0 80px;
    border-radius: 44px;
    overflow: hidden;
    isolation: isolate;
}
.apx-stage-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 40px; width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.apx-aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.apx-aurora i { position: absolute; width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; border-radius: 50%; filter: blur(70px); opacity: .55; animation: apx-drift 16s ease-in-out infinite; }
.apx-aurora i:nth-child(1) { left: -8%; top: -20%; background: var(--a1); }
.apx-aurora i:nth-child(2) { right: -6%; top: -12%; background: var(--a2); animation-delay: -5s; }
.apx-aurora i:nth-child(3) { left: 30%; bottom: -34%; background: #7c5ce6; opacity: .35; animation-delay: -9s; }

.apx-title { display: flex; align-items: center; gap: 18px; margin: 0 0 14px; font-size: clamp(46px, 7.2vw, 96px); font-weight: 750; letter-spacing: -.05em; line-height: 1; }
.apx-title-icon { width: clamp(52px, 6vw, 84px); height: auto; border-radius: 22px; box-shadow: 0 12px 34px color-mix(in srgb, var(--a1) 35%, transparent); background: #fff; }
.apx-title-icon.is-dark { background: #05080a; }
.apx-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 14px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--ds-ink-2); }
.apx-kicker i { width: 5px; height: 5px; border-radius: 50%; background: var(--a1); }
.apx-lead { margin: 0 0 14px; font-size: clamp(20px, 2.4vw, 28px); font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }
.apx-lead span { display: block; font-weight: 500; color: var(--ds-ink-2); }
.apx-grad { background: linear-gradient(110deg, var(--a1), var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.apx-sub { max-width: 560px; margin: 0 0 28px; font-size: 16.5px; line-height: 1.65; color: var(--ds-ink-2); }
.apx-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* Stage chiaro (Synthelion) */
.apx-stage-light { background: linear-gradient(160deg, #f1faff 0%, #f6fbf8 45%, #eef8f2 100%); border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow-lift); }
.apx-stage-light .apx-aurora i { opacity: .35; }

/* Mascotte Synthelion */
.syn-visual { position: relative; display: grid; place-items: center; min-height: 440px; }
.syn-visual-glow { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(34, 184, 207, .35), rgba(42, 132, 66, .12) 55%, transparent 70%); filter: blur(10px); }
.syn-mascot { position: relative; width: min(400px, 80%); height: auto; overflow: visible; filter: drop-shadow(0 28px 40px rgba(31, 60, 110, .22)); }
.syn-float { animation: apx-float 5s ease-in-out infinite; transform-box: fill-box; }
.syn-wave { transform-origin: 140px 296px; animation: syn-wave 3.2s ease-in-out infinite; transform-box: view-box; }
.syn-flower { transform-origin: 80px 204px; animation: syn-sway 3.2s ease-in-out infinite; transform-box: view-box; }
.syn-eyes { transform-origin: 210px 186px; animation: syn-blink 5s infinite; transform-box: view-box; }
.syn-emblem { animation: syn-glow 3s ease-in-out infinite; }
@keyframes syn-glow { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
.syn-shadow { animation: syn-shadow 5s ease-in-out infinite; transform-origin: 210px 474px; transform-box: view-box; }
@keyframes syn-wave { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-5deg); } }
@keyframes syn-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }
@keyframes syn-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes syn-shadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.86); opacity: .7; } }
.syn-badge70 {
    position: absolute;
    right: 0;
    bottom: 12%;
    display: grid;
    padding: 14px 24px 14px 22px;
    text-align: center;
    color: #fff;
    background: linear-gradient(140deg, #0f2a5f, #1c5fb0 70%, #22b8cf);
    border-radius: 22px;
    box-shadow: 0 22px 46px rgba(15, 42, 95, .35);
    transform: rotate(-4deg);
    animation: apx-float 6s ease-in-out infinite;
}
.syn-badge70 small { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.syn-badge70 b { font-size: 64px; font-weight: 800; line-height: .95; letter-spacing: -.04em; background: linear-gradient(180deg, #fff, #8fe9ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.syn-badge70 span { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.syn-quote { position: absolute; left: 0; bottom: 6%; max-width: 230px; margin: 0; font-family: 'Segoe Script', 'Bradley Hand', cursive; font-size: 19px; font-style: italic; line-height: 1.25; color: #1c4f9c; transform: rotate(-5deg); }

.apx-float { position: absolute; display: grid; padding: 10px 16px; text-align: center; background: var(--ds-glass-strong); border: 1px solid var(--ds-line); border-radius: 18px; box-shadow: var(--ds-shadow-lift); backdrop-filter: blur(14px); animation: apx-float 5s ease-in-out infinite; }
.apx-float b { font-size: 24px; font-weight: 750; letter-spacing: -.03em; background: linear-gradient(110deg, var(--a1), var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.apx-float span { font-size: 12px; font-weight: 600; color: var(--ds-ink-2); }
.apx-float-a { left: 2%; bottom: 20%; animation-delay: -1.5s; }
.apx-float-b { right: 4%; top: 6%; animation-delay: -3s; }
.apx-float-c { left: 6%; top: 36%; animation-delay: -2.2s; }

/* Frame finestra */
.apx-frame { position: relative; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--ds-line-strong); box-shadow: 0 40px 90px rgba(11, 13, 18, .22), 0 0 0 1px rgba(255, 255, 255, .6) inset; }
.apx-frame.is-dark { background: #0b0f14; border-color: rgba(255, 255, 255, .1); box-shadow: 0 40px 100px rgba(0, 0, 0, .5), 0 0 80px color-mix(in srgb, var(--a1) 18%, transparent); }
.apx-frame-bar { display: flex; align-items: center; gap: 7px; padding: 11px 16px; background: linear-gradient(#f3f5f8, #e9edf2); border-bottom: 1px solid var(--ds-line); }
.apx-frame.is-dark .apx-frame-bar { background: linear-gradient(#141b22, #10161c); border-bottom-color: rgba(255, 255, 255, .06); }
.apx-frame-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff6058; }
.apx-frame-bar i:nth-child(2) { background: #ffbd2e; }
.apx-frame-bar i:nth-child(3) { background: #27c93f; }
.apx-frame-bar span { margin-left: 10px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--ds-muted); }
.apx-frame img { display: block; width: 100%; height: auto; }

/* Stats */
.apx-stats { padding: 56px 0 8px; }
.apx-stats .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.apx-stat { padding: 8px 12px; text-align: center; }
.apx-stat b { display: block; font-size: clamp(38px, 5vw, 64px); font-weight: 750; letter-spacing: -.05em; line-height: 1; background: linear-gradient(110deg, var(--a1), var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.apx-stat span { display: block; margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--ds-ink-2); }

/* Cards */
.apx-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.apx-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.apx-card {
    position: relative;
    padding: 28px;
    background: radial-gradient(360px circle at var(--sx, -200px) var(--sy, -200px), color-mix(in srgb, var(--a1) 12%, transparent), transparent 62%), var(--ds-glass-strong);
    border: 1px solid var(--ds-line);
    border-radius: 26px;
    box-shadow: var(--ds-shadow);
    overflow: hidden;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .3s;
}
.apx-card:hover { transform: translateY(-5px); box-shadow: var(--ds-shadow-lift); border-color: color-mix(in srgb, var(--a1) 40%, transparent); }
.apx-card > i { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; font-size: 26px; color: var(--a1); background: color-mix(in srgb, var(--a1) 12%, transparent); border-radius: 16px; }
.apx-card h3 { margin: 0 0 10px; font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.apx-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ds-ink-2); }

/* Prima / dopo */
.apx-before-after { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 20px; max-width: 980px; margin: 0 auto; }
.apx-ba { display: flex; flex-direction: column; gap: 12px; padding: 28px; background: var(--ds-glass-strong); border: 1px solid var(--ds-line); border-radius: 26px; box-shadow: var(--ds-shadow); }
.apx-ba span { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ds-muted); }
.apx-ba p { margin: 0; flex: 1; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; line-height: 1.7; color: var(--ds-ink); }
.apx-ba em { align-self: flex-start; font-style: normal; font-size: 13px; font-weight: 700; padding: 5px 14px; border-radius: 999px; background: rgba(11, 13, 18, .06); }
.apx-ba.is-after { background: linear-gradient(150deg, rgba(42, 132, 66, .12), rgba(34, 184, 207, .1)); border-color: rgba(42, 132, 66, .3); }
.apx-ba.is-after em { color: #fff; background: var(--a1); }
.apx-ba-arrow { align-self: center; font-size: 34px; color: var(--a1); }

/* Galleria */
.apx-gallery-tabs { display: flex; gap: 8px; margin: 0 auto 28px; padding: 6px; max-width: 100%; width: fit-content; overflow-x: auto; scrollbar-width: none; background: var(--ds-glass-strong); border: 1px solid var(--ds-line); border-radius: 999px; }
.apx-gallery-tabs::-webkit-scrollbar { display: none; }
.apx-gallery-tabs button { flex: 0 0 auto; padding: 9px 18px; font-size: 13.5px; font-weight: 600; color: var(--ds-ink-2); background: transparent; border: 0; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; }
.apx-gallery-tabs button:hover { color: var(--ds-ink); }
.apx-gallery-tabs button.is-active { color: #fff; background: var(--ds-ink); }
.apx-gallery-stage { position: relative; max-width: 1080px; margin: 0 auto; }
.apx-gallery-slide { display: none; margin: 0; animation: apx-slide .55s cubic-bezier(.2, .8, .2, 1); }
.apx-gallery-slide.is-active { display: block; }
.apx-gallery-slide figcaption { margin-top: 22px; text-align: center; font-size: 16px; color: var(--ds-ink-2); }
@keyframes apx-slide { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }

/* Installazione */
.apx-tabs { max-width: 920px; margin: 0 auto 40px; }
.apx-tabs-nav { display: flex; gap: 8px; margin-bottom: 18px; padding: 6px; width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; background: var(--ds-glass-strong); border: 1px solid var(--ds-line); border-radius: 999px; }
.apx-tabs-nav button { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 10px 20px; font-size: 14px; font-weight: 600; color: var(--ds-ink-2); background: transparent; border: 0; border-radius: 999px; cursor: pointer; }
.apx-tabs-nav button.is-active { color: #fff; background: var(--ds-ink); }
.apx-tabs-panel { display: none; padding: 28px; background: var(--ds-glass-strong); border: 1px solid var(--ds-line); border-radius: 26px; box-shadow: var(--ds-shadow); }
.apx-tabs-panel.is-active { display: block; animation: apx-slide .45s ease; }
.apx-tabs-panel h4 { margin: 18px 0 10px; font-size: 15px; font-weight: 650; }
.apx-tabs-panel h4:first-child { margin-top: 0; }
.apx-code { position: relative; margin: 0 0 14px; }
.apx-code pre { margin: 0; padding: 18px 90px 18px 20px; overflow-x: auto; font-family: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.7; color: #d7f5e2; background: #0b1210; border: 1px solid rgba(255, 255, 255, .06); border-radius: 16px; }
.apx-code code { background: none; color: inherit; padding: 0; font-size: inherit; }
.apx-copy { position: absolute; top: 10px; right: 10px; padding: 6px 14px; font-size: 12px; font-weight: 600; color: #d7f5e2; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; cursor: pointer; transition: background .2s; }
.apx-copy:hover { background: rgba(255, 255, 255, .16); }
.apx-copy.is-done { background: var(--a1); border-color: var(--a1); color: #fff; }
.apx-steps { display: grid; gap: 18px; max-width: 920px; margin: 0 auto 30px; padding: 0; list-style: none; counter-reset: step; }
.apx-steps li { display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 24px; background: var(--ds-glass-strong); border: 1px solid var(--ds-line); border-radius: 24px; }
.apx-steps li > b { display: grid; place-items: center; width: 52px; height: 52px; font-size: 20px; color: #fff; background: linear-gradient(140deg, var(--a1), var(--a2)); border-radius: 16px; }
.apx-steps h4 { margin: 4px 0 8px; font-size: 17px; font-weight: 650; }
.apx-update { max-width: 920px; margin: 0 auto; }
.apx-update h4 { font-size: 15px; font-weight: 650; margin-bottom: 10px; }

.apx-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.apx-logos span { padding: 12px 26px; font-size: 15px; font-weight: 650; color: var(--ds-ink); background: var(--ds-glass-strong); border: 1px solid var(--ds-line); border-radius: 999px; box-shadow: var(--ds-shadow); }

.apx-final { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 48px; background: linear-gradient(150deg, #f1faff, #f2faf5); border: 1px solid var(--ds-line); border-radius: 40px; box-shadow: var(--ds-shadow-lift); }
.apx-final h2 { margin: 0 0 12px; font-size: clamp(26px, 3.4vw, 40px); font-weight: 650; letter-spacing: -.035em; }
.apx-final p { margin: 0 0 24px; font-size: 16.5px; color: var(--ds-ink-2); }
.apx-final-mascot .syn-mascot { width: min(320px, 100%); display: block; margin: 0 auto; }
.apx-final-center { grid-template-columns: 1fr; text-align: center; }
.apx-final-center .apx-cta { justify-content: center; }
.apx-final-icon { width: 120px; height: 120px; margin: 0 auto 6px; border-radius: 30px; background: #05080a; box-shadow: 0 20px 50px color-mix(in srgb, var(--a1) 35%, transparent); }

/* Punti di forza Synthelion (banner statico) */
.syn-hl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.syn-hl { display: flex; align-items: center; gap: 14px; padding: 18px 18px; background: var(--ds-glass-strong); border: 1px solid var(--ds-line); border-radius: 20px; box-shadow: 0 6px 20px rgba(11, 13, 18, .05); transition: transform .25s, box-shadow .25s; }
.syn-hl:hover { transform: translateY(-3px); box-shadow: var(--ds-shadow-lift); }
.syn-hl-ic { flex: 0 0 auto; display: grid; place-items: center; width: 56px; height: 56px; font-size: 27px; color: #fff; background: linear-gradient(145deg, var(--c1), var(--c2)); border-radius: 50%; box-shadow: 0 8px 20px color-mix(in srgb, var(--c1) 40%, transparent); }
.syn-hl h3 { margin: 0 0 3px; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.syn-hl p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ds-ink-2); }
.syn-hl-strip { display: grid; grid-template-columns: repeat(4, auto) 1.4fr; gap: 24px; align-items: center; margin-top: 18px; padding: 26px 34px; color: #e9f4ff; background: linear-gradient(120deg, #0b1f4a, #0d2f66 60%, #0e4a73); border-radius: 26px; }
.syn-hl-strip > div { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.syn-hl-strip i { grid-row: span 2; font-size: 30px; color: #5ce1ff; }
.syn-hl-strip b { font-size: 15px; }
.syn-hl-strip span { font-size: 13px; opacity: .8; }
.syn-hl-strip p { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.2; text-align: right; color: #fff; }
.syn-hl-strip p em { display: block; font-style: normal; color: #5ce1ff; }

/* Desktop 1.2.6 */
.syn-desktop-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; padding: 44px; background: linear-gradient(140deg, #0b1220, #0f1c2e 60%, #0f2a2a); color: #e8f1f7; border-radius: 40px; box-shadow: var(--ds-shadow-lift); position: relative; overflow: hidden; }
.syn-desktop-card::before { content: ""; position: absolute; width: 420px; height: 420px; right: -80px; top: -140px; background: radial-gradient(circle, rgba(34, 184, 207, .35), transparent 65%); }
.syn-desktop-card h2 { margin: 16px 0 12px; font-size: clamp(26px, 3.4vw, 40px); font-weight: 650; letter-spacing: -.035em; color: #fff; }
.syn-desktop-card p { margin: 0; font-size: 16.5px; line-height: 1.65; color: #b6c6d4; }
.syn-desktop-os { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.syn-os { display: grid; justify-items: center; gap: 4px; padding: 24px 12px; text-align: center; background: rgba(255, 255, 255, .06); border: 1px dashed rgba(255, 255, 255, .22); border-radius: 22px; }
.syn-os i { font-size: 40px; color: #7fe3f5; }
.syn-os b { font-size: 16px; color: #fff; }
.syn-os span { font-size: 12.5px; color: #9fb4c4; }

/* Hub */
.apx-sources { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.apx-source { display: flex; align-items: center; gap: 18px; padding: 26px; background: var(--ds-glass-strong); border: 1px solid var(--ds-line); border-radius: 26px; box-shadow: var(--ds-shadow); }
.apx-source > i { display: grid; place-items: center; flex: 0 0 auto; width: 56px; height: 56px; font-size: 28px; color: var(--ds-brand); background: var(--ds-brand-soft); border-radius: 18px; }
.apx-source h4 { margin: 0 0 4px; font-size: 18px; font-weight: 650; }
.apx-source p { margin: 0; font-size: 14.5px; color: var(--ds-ink-2); }
.apx-source .apx-btn { margin-left: auto; flex: 0 0 auto; padding: 12px 20px; }

/* Tabella / bento / cowork */
.apx-table-wrap { max-width: 980px; margin: 0 auto; overflow-x: auto; border: 1px solid var(--ds-line); border-radius: 26px; background: var(--ds-glass-strong); box-shadow: var(--ds-shadow); }
.apx-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 14.5px; }
.apx-table th, .apx-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--ds-line); }
.apx-table thead th { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ds-muted); }
.apx-table tbody th { font-weight: 600; color: var(--ds-ink); }
.apx-table .is-us { color: var(--ds-brand-deep); font-weight: 700; background: var(--ds-brand-soft); }
.apx-table tr:last-child th, .apx-table tr:last-child td { border-bottom: 0; }
.apx-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.apx-bento-card { padding: 28px; background: radial-gradient(360px circle at var(--sx, -200px) var(--sy, -200px), color-mix(in srgb, var(--a1) 12%, transparent), transparent 62%), var(--ds-glass-strong); border: 1px solid var(--ds-line); border-radius: 26px; box-shadow: var(--ds-shadow); }
.apx-bento-card.is-wide { grid-column: span 2; }
.apx-bento-card h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 19px; font-weight: 650; }
.apx-bento-card h3 i { color: var(--a1); font-size: 24px; }
.apx-bento-card p, .apx-bento-card li { font-size: 15px; line-height: 1.6; color: var(--ds-ink-2); }
.apx-bento-card ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.apx-cowork-card { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 36px; align-items: center; padding: 44px; background: linear-gradient(140deg, color-mix(in srgb, var(--a1) 10%, #fff), color-mix(in srgb, var(--a2) 10%, #fff)); border: 1px solid color-mix(in srgb, var(--a1) 30%, transparent); border-radius: 40px; }
.apx-cowork-card h2 { margin: 16px 0 12px; font-size: clamp(26px, 3.4vw, 40px); font-weight: 650; letter-spacing: -.035em; }
.apx-cowork-card p { margin: 0 0 18px; font-size: 16.5px; line-height: 1.65; color: var(--ds-ink-2); }
.apx-cowork-points { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.apx-cowork-points li { display: flex; align-items: center; gap: 14px; padding: 16px 20px; font-size: 15px; font-weight: 600; color: var(--ds-ink); background: var(--ds-glass-strong); border: 1px solid var(--ds-line); border-radius: 20px; }
.apx-cowork-points i { font-size: 24px; color: var(--a1); }

@media (max-width: 1100px) {
    .apx-cards, .apx-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .syn-hl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .syn-hl-strip { grid-template-columns: repeat(2, 1fr); }
    .syn-hl-strip p { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 991.98px) {
    .apx-stage-inner, .apx-final, .apx-cowork-card, .syn-desktop-card { grid-template-columns: 1fr; }
    .apx-stats .container { grid-template-columns: repeat(2, 1fr); }
    .apx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .apx-sources { grid-template-columns: 1fr; }
    .syn-visual { min-height: 380px; }
}
@media (max-width: 767.98px) {
    .apx-section { padding: 56px 0; }
    .apx-stage { margin: 0 10px; padding: 40px 0 48px; border-radius: 30px; }
    .apx-stage-inner { width: calc(100% - 32px); }
    .apx-cards, .apx-cards-4, .syn-hl-grid, .apx-bento { grid-template-columns: 1fr; }
    .apx-bento-card.is-wide { grid-column: auto; }
    .apx-before-after { grid-template-columns: 1fr; }
    .apx-ba-arrow { transform: rotate(90deg); justify-self: center; }
    .apx-final, .apx-cowork-card, .syn-desktop-card { padding: 26px; border-radius: 28px; }
    .syn-desktop-os { grid-template-columns: 1fr; }
    .syn-hl-strip { grid-template-columns: 1fr; padding: 22px; }
    .apx-tabs-panel { padding: 18px; }
    .apx-steps li { grid-template-columns: 1fr; }
    .apx-title { gap: 12px; }
    .syn-quote { display: none; }
    .syn-badge70 b { font-size: 48px; }
    .apx-float { display: none; }
    .apx-source { flex-wrap: wrap; }
    .apx-source .apx-btn { margin-left: 0; width: 100%; }
}

/* ===================== KODINN: pagina cinematica ===================== */
body.ds-app-dark { background: #04070a; }
body.ds-app-dark .ds-hs, body.ds-app-dark .ds-fx, body.ds-app-dark #ds-fluid, body.ds-app-dark::before { display: none !important; }
body.ds-app-dark.ds-inner main { padding-top: 0; }
body.ds-app-dark .footer-style2 { margin-top: 0; border-top: 1px solid rgba(255, 255, 255, .06); background: #070b0e !important; }
body.ds-app-dark .footer-style2 .foot-tilte, body.ds-app-dark .footer-style2 h6 { color: #fff !important; }
body.ds-app-dark .footer-style2 a, body.ds-app-dark .footer-style2 li, body.ds-app-dark .footer-style2 p, body.ds-app-dark .footer-style2 span { color: #9fb2a8 !important; }

.apx-kodinn { --a1: #22d3ee; --a2: #4ade80; --k-green: #2fe37a; --k-lime: #b8ff5a; color: #dff5e7; background: radial-gradient(1200px 700px at 50% -10%, #0a1f16, #04070a 60%); }
.apx-kodinn h1, .apx-kodinn h2, .apx-kodinn h3, .apx-kodinn h4 { color: #f2fff6; }
.apx-kodinn .apx-head p, .apx-kodinn .apx-card p, .apx-kodinn .apx-bento-card p, .apx-kodinn .apx-bento-card li, .apx-kodinn .apx-gallery-slide figcaption { color: #9fb8aa; }
.apx-kodinn .ds-eyebrow { color: var(--k-green); background: rgba(47, 227, 122, .1); border: 1px solid rgba(47, 227, 122, .25); }
.apx-kodinn .apx-card, .apx-kodinn .apx-bento-card, .apx-kodinn .apx-table-wrap, .apx-kodinn .apx-gallery-tabs {
    background: radial-gradient(360px circle at var(--sx, -200px) var(--sy, -200px), rgba(47, 227, 122, .14), transparent 62%), rgba(255, 255, 255, .035);
    border-color: rgba(255, 255, 255, .08);
    box-shadow: none;
    backdrop-filter: blur(10px);
}
.apx-kodinn .apx-card:hover, .apx-kodinn .apx-bento-card:hover { border-color: rgba(47, 227, 122, .4); box-shadow: 0 0 50px rgba(47, 227, 122, .12); }
.apx-kodinn .apx-card > i { color: var(--k-green); background: rgba(47, 227, 122, .1); }
.apx-kodinn .apx-bento-card h3 i { color: var(--k-green); }
.apx-kodinn .apx-gallery-tabs button { color: #9fb8aa; }
.apx-kodinn .apx-gallery-tabs button:hover { color: #fff; }
.apx-kodinn .apx-gallery-tabs button.is-active { color: #04110a; background: var(--k-green); }
.apx-kodinn .apx-table th, .apx-kodinn .apx-table td { border-color: rgba(255, 255, 255, .07); color: #b8cfc0; }
.apx-kodinn .apx-table tbody th { color: #fff; }
.apx-kodinn .apx-table thead th { color: #7f9a8a; }
.apx-kodinn .apx-table .is-us { color: var(--k-green); background: rgba(47, 227, 122, .08); }
.apx-kodinn .apx-btn-primary { color: #04110a !important; background: var(--k-green); box-shadow: 0 12px 34px rgba(47, 227, 122, .35); }
.apx-kodinn .apx-btn-primary:hover { background: var(--k-lime); }
.apx-kodinn .apx-btn-ghost { color: #dff5e7 !important; border-color: rgba(255, 255, 255, .2); }
.apx-kodinn .apx-btn-ghost:hover { background: rgba(255, 255, 255, .08); border-color: var(--k-green); }
.apx-kodinn .apx-pill.is-soon { color: #ffd68a; background: rgba(245, 166, 35, .12); border-color: rgba(245, 166, 35, .3); }
.apx-kodinn .apx-cowork-card { background: linear-gradient(140deg, rgba(47, 227, 122, .1), rgba(34, 211, 238, .06)); border-color: rgba(47, 227, 122, .25); }
.apx-kodinn .apx-cowork-card p { color: #9fb8aa; }
.apx-kodinn .apx-cowork-points li { color: #e8fff0; background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .08); }
.apx-kodinn .apx-cowork-points i { color: var(--k-green); }
.apx-kodinn .apx-final { background: transparent; border: 0; box-shadow: none; }
.apx-kodinn .apx-final p { color: #9fb8aa; }
.apx-kodinn .apx-final-icon { box-shadow: 0 0 80px rgba(47, 227, 122, .35); }

/* Hero cinematico */
.kod-hero { position: relative; display: grid; align-items: center; min-height: 100vh; padding: 140px 0 100px; overflow: hidden; isolation: isolate; }
.kod-orb { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; z-index: 0; pointer-events: none; background: #04070a; }
.kod-orb canvas { display: block; width: 100%; height: 100%; }
.kod-orb:not(:has(canvas)) { background: radial-gradient(circle at 50% 50%, rgba(47, 227, 122, .35), rgba(47, 227, 122, .08) 35%, transparent 60%); }
.kod-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 36% 50%, transparent 38%, rgba(4, 7, 10, .8) 100%), linear-gradient(to bottom, rgba(4, 7, 10, .6), transparent 20%, transparent 80%, #04070a); }
.kod-scan { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .5; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
.kod-scan::after { content: ""; position: absolute; left: 0; right: 0; height: 120px; background: linear-gradient(to bottom, transparent, rgba(47, 227, 122, .08), transparent); animation: kod-scan 7s linear infinite; }
@keyframes kod-scan { from { transform: translateY(-140px); } to { transform: translateY(100vh); } }
.kod-hero-copy { position: relative; z-index: 3; width: min(600px, 46%); margin-left: auto; margin-right: max(5vw, 90px); }
.kod-chip { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 6px 14px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #ffd68a; background: rgba(245, 166, 35, .1); border: 1px solid rgba(245, 166, 35, .35); border-radius: 6px; }
.kod-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: apx-pulse 1.8s ease-in-out infinite; }
.kod-title { margin: 0; font-size: clamp(46px, 6.6vw, 104px); font-weight: 800; line-height: .92; letter-spacing: .04em; color: var(--k-green) !important; text-shadow: 0 0 40px rgba(47, 227, 122, .5), 0 0 110px rgba(47, 227, 122, .25); }
.kod-title span { display: inline-block; opacity: 0; filter: blur(14px); transform: translateY(24px) scale(1.08); animation: kod-letter .9s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--i) * 90ms + .2s); background: linear-gradient(180deg, #c9ff8a, #2fe37a 60%, #14a85a); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes kod-letter { to { opacity: 1; filter: blur(0); transform: none; } }
.kod-tagline { margin: 22px 0 16px; font-size: clamp(12px, 1.4vw, 16px); font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: #cffbe0; }
.kod-desc { margin: 0 0 26px; font-size: 16.5px; line-height: 1.7; color: #8fb09f; }
.kod-downloads { display: grid; gap: 12px; margin-bottom: 14px; }
.kod-download { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 20px; color: #e8fff0; background: rgba(255, 255, 255, .04); border: 1px solid rgba(47, 227, 122, .28); border-radius: 18px; backdrop-filter: blur(12px); overflow: hidden; }
.kod-download > i { font-size: 34px; color: var(--k-green); }
.kod-download span { display: grid; gap: 2px; flex: 1; }
.kod-download b { font-size: 16px; }
.kod-download em { font-style: normal; font-size: 12.5px; letter-spacing: .06em; color: #ffd68a; }
.kod-download u { text-decoration: none; display: grid; place-items: center; width: 38px; height: 38px; color: #9fb8aa; background: rgba(255, 255, 255, .06); border-radius: 12px; }
.kod-download.is-disabled { cursor: not-allowed; opacity: .92; background-image: repeating-linear-gradient(135deg, transparent 0 10px, rgba(255, 255, 255, .02) 10px 20px); }
.kod-download.is-disabled::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(47, 227, 122, .1) 50%, transparent 70%); transform: translateX(-100%); animation: kod-sheen 4.5s ease-in-out infinite; }
@keyframes kod-sheen { 60%, 100% { transform: translateX(100%); } }
.kod-note { margin: 0; font-size: 13.5px; color: #6f8c7c; }
.kod-note a { color: var(--k-green); text-decoration: underline; text-underline-offset: 3px; }
.kod-scroll { position: absolute; left: 50%; bottom: 28px; z-index: 4; display: grid; justify-items: center; gap: 4px; transform: translateX(-50%); font-size: 11.5px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: #cffbe0 !important; text-shadow: 0 0 18px rgba(47, 227, 122, .6); }
.kod-scroll i { font-size: 18px; color: var(--k-green); animation: kod-bob 1.6s ease-in-out infinite; }
@keyframes kod-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
.kod-hud { position: absolute; left: 32px; bottom: 28px; z-index: 4; display: flex; gap: 10px; }
.kod-hud span { padding: 8px 14px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #8fb09f; background: rgba(47, 227, 122, .06); border: 1px solid rgba(47, 227, 122, .25); border-radius: 6px; }
.kod-hud b { color: var(--k-green); }

/* Rail laterale */
.kod-rail { position: fixed; right: 26px; top: 50%; z-index: 50; display: grid; gap: 22px; transform: translateY(-50%); }
.kod-rail::before { content: ""; position: absolute; right: 3px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(to bottom, transparent, rgba(47, 227, 122, .35), transparent); }
.kod-rail a { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 12px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px; font-weight: 600; letter-spacing: .22em; color: rgba(159, 184, 170, .45) !important; transition: color .25s; }
.kod-rail a i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: rgba(159, 184, 170, .4); transition: background .25s, box-shadow .25s, transform .25s; }
.kod-rail a:hover, .kod-rail a.is-active { color: var(--k-green) !important; }
.kod-rail a.is-active i { background: var(--k-green); box-shadow: 0 0 14px 3px rgba(47, 227, 122, .7); transform: scale(1.35); }

@media (max-width: 1199.98px) { .kod-rail { display: none; } }
@media (max-width: 991.98px) {
    .kod-hero { min-height: 0; padding: 120px 0 110px; }
    .kod-orb { width: 100%; height: 62vh; bottom: auto; top: 30px; opacity: .8; }
    .kod-hero-copy { width: calc(100% - 40px); margin: 52vh auto 0; }
    .kod-hud { display: none; }
}
@media (max-width: 575.98px) {
    .kod-title { font-size: clamp(48px, 17vw, 84px); }
    .kod-tagline { letter-spacing: .2em; }
    .kod-download { padding: 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .kod-title span { animation: none; opacity: 1; filter: none; transform: none; }
    .kod-scan::after, .apx-aurora i, .syn-float, .syn-wave, .syn-flower, .syn-eyes, .apx-float, .syn-badge70 { animation: none; }
    html.apx-js .apx [data-reveal] { opacity: 1; transform: none; }
}

.ds-status.is-req { color: #0b4fa3; background: rgba(0, 88, 184, .12); }
@media (min-width: 1200px) { .ds-apps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ds-logo-white { display: none; }
body.ds-app-dark .ds-logo .ds-logo-color, body.ds-app-dark .foot-logo .ds-logo-color { display: none; }
body.ds-app-dark .ds-logo .ds-logo-white { display: block; height: 46px; width: auto; }
body.ds-app-dark .foot-logo .ds-logo-white { display: block; }
body.ds-app-dark .foot-logo .ds-logo-white { max-width: 100%; height: auto; }

body.ds-app-dark .ds-nav-pill { background: rgba(8, 14, 12, .62); border-color: rgba(255, 255, 255, .1); box-shadow: 0 10px 40px rgba(0, 0, 0, .45); }
body.ds-app-dark .ds-nav.is-scrolled .ds-nav-pill { background: rgba(8, 14, 12, .86); }
body.ds-app-dark .ds-nav-links .nav-link, body.ds-app-dark .ds-nav-chip, body.ds-app-dark .ds-nav-icon { color: #b7cfc0 !important; }
body.ds-app-dark .ds-nav-links .nav-link:hover, body.ds-app-dark .ds-nav-chip:hover, body.ds-app-dark .ds-nav-icon:hover { color: #fff !important; background: rgba(255, 255, 255, .07); }
body.ds-app-dark .ds-nav-links .nav-link.active { color: #2fe37a !important; background: rgba(47, 227, 122, .1); }
body.ds-app-dark .ds-nav-toggler .navbar-toggler-icon { background-image: linear-gradient(#cfe9d8, #cfe9d8), linear-gradient(#cfe9d8, #cfe9d8), linear-gradient(#cfe9d8, #cfe9d8); }
body.ds-app-dark .ds-dock { background: rgba(8, 14, 12, .62); border-color: rgba(255, 255, 255, .1); box-shadow: 0 10px 40px rgba(0, 0, 0, .45); }
body.ds-app-dark .ds-dock-item { color: #b7cfc0; background: rgba(255, 255, 255, .05); }
body.ds-app-dark .ds-dock-item:hover { color: #04110a; background: #2fe37a; box-shadow: 0 0 30px rgba(47, 227, 122, .45); }
body.ds-app-dark .ds-dock-sep { background: rgba(255, 255, 255, .12); }
body.ds-app-dark .ds-dock-label { color: #04110a; background: #2fe37a; }
body.ds-app-dark .ds-dock-label::before { background: #2fe37a; }

.apx-kodinn p, .apx-kodinn li { color: #9fb8aa; }
.apx-kodinn .kod-tagline { color: #cffbe0; }
.apx-kodinn .kod-desc { color: #8fb09f; }
.apx-kodinn .kod-note { color: #6f8c7c; }
.apx-kodinn .kod-chip { color: #ffd68a; }
.apx-kodinn .kod-download { color: #e8fff0; }
.apx-kodinn .kod-download em { color: #ffd68a; }
.apx-kodinn .apx-card h3, .apx-kodinn .apx-bento-card h3 { color: #f2fff6; }
.apx-kodinn .apx-final h2 { color: #f2fff6; }
.ds-logo .ds-logo-white, .foot-logo .ds-logo-white { display: none; }
body.ds-app-dark .ds-logo .ds-logo-white, body.ds-app-dark .foot-logo .ds-logo-white { display: block; }
body.ds-app-dark .ds-logo .ds-logo-color, body.ds-app-dark .foot-logo .ds-logo-color { display: none; }

.kod-mascot-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.kod-mascot-grid figure { margin: 0; overflow: hidden; background: #05080a; border: 1px solid rgba(47, 227, 122, .18); border-radius: 26px; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.kod-mascot-grid figure:hover { transform: translateY(-6px); box-shadow: 0 0 60px rgba(47, 227, 122, .18); }
.kod-mascot-grid img { display: block; width: 100%; height: auto; }
.kod-mascot-grid figcaption { padding: 14px 16px 18px; font-size: 14px; font-weight: 600; text-align: center; color: #cffbe0; }
@media (max-width: 991.98px) { .kod-mascot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.kod-qg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.kod-qg-copy h2 { margin: 18px 0 16px; font-size: clamp(30px, 4vw, 48px); font-weight: 700; letter-spacing: -.04em; line-height: 1.08; }
.kod-qg-copy > p { margin: 0 0 22px; font-size: 17px; line-height: 1.65; }
.kod-qg-points { display: grid; gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; }
.kod-qg-points li { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 16px; padding: 14px 18px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(47, 227, 122, .18); border-radius: 18px; }
.kod-qg-points b { font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: #2fe37a; text-shadow: 0 0 24px rgba(47, 227, 122, .4); }
.kod-qg-points span { font-size: 15px; line-height: 1.5; color: #b6cdbf; }
.kod-qg-note { font-size: 14.5px !important; color: #7f9a8a !important; }
.kod-qg-shots { position: relative; display: grid; grid-template-columns: 1fr 1.7fr; gap: 14px; align-items: start; }
.kod-qg-shots .apx-frame { box-shadow: 0 0 70px rgba(47, 227, 122, .14); }
.kod-qg-panel { transform: translateY(-14px); }
.kod-qg-wide { transform: translateY(26px); }
@media (max-width: 991.98px) { .kod-qg-grid { grid-template-columns: 1fr; } .kod-qg-panel, .kod-qg-wide { transform: none; } }
@media (max-width: 575.98px) { .kod-qg-points li { grid-template-columns: 1fr; gap: 4px; } .kod-qg-shots { grid-template-columns: 1fr; } }

/* Tabelle di confronto estese */
.apx-table-wrap { position: relative; }
.apx-table-wide { min-width: 860px; font-size: 14px; }
.apx-table-wide th, .apx-table-wide td { padding: 13px 16px; vertical-align: top; }
.apx-table-wide tbody th { position: sticky; left: 0; z-index: 1; min-width: 220px; max-width: 280px; background: var(--ds-glass-strong); backdrop-filter: blur(10px); font-weight: 600; }
.apx-table-wide td.is-yes { text-align: center; font-size: 20px; color: var(--ds-brand); }
.apx-table-wide td.is-no { text-align: center; color: var(--ds-muted); }
.apx-table-wide thead th { position: sticky; top: 0; background: var(--ds-glass-strong); }
.apx-table-wide td.is-us.is-yes { color: var(--ds-brand-deep); }
.apx-table-wide tbody tr:hover td, .apx-table-wide tbody tr:hover th { background: rgba(42, 132, 66, .05); }
.apx-compare-notes { max-width: 980px; margin: 26px auto 0; }
.apx-compare-notes p { margin: 0 0 12px; font-size: 15px; line-height: 1.65; color: var(--ds-ink-2); }
.apx-compare-notes .apx-fine { font-size: 13px; color: var(--ds-muted); }
.apx-kodinn .apx-table-wide tbody th { background: rgba(7, 11, 14, .92); color: #fff; }
.apx-kodinn .apx-table-wide thead th { background: rgba(7, 11, 14, .92); }
.apx-kodinn .apx-table-wide td.is-yes { color: #2fe37a; }
.apx-kodinn .apx-compare-notes p { color: #9fb8aa; }
.apx-kodinn .apx-compare-notes .apx-fine { color: #6f8c7c; }
.apx-kodinn .apx-compare-notes b { color: #e8fff0; }
.apx-table-wrap { max-height: 78vh; overflow: auto; }

/* DesireeIA */
.kod-pipeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 26px; position: relative; }
.kod-step { position: relative; padding: 26px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(47, 227, 122, .2); border-radius: 24px; }
.kod-step b { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; font-size: 18px; color: #04110a; background: linear-gradient(140deg, #b8ff5a, #2fe37a); border-radius: 13px; box-shadow: 0 0 30px rgba(47, 227, 122, .4); }
.kod-step h4 { margin: 0 0 8px; font-size: 18px; font-weight: 650; }
.kod-step p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.kod-backends { display: grid; gap: 12px; justify-items: center; margin-bottom: 30px; text-align: center; }
.kod-backends-label { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: #6f8c7c; }
.kod-backend-chain { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.kod-backend-chain em { font-style: normal; padding: 10px 20px; font-size: 14px; font-weight: 700; color: #dff5e7; background: rgba(47, 227, 122, .08); border: 1px solid rgba(47, 227, 122, .3); border-radius: 999px; }
.kod-backend-chain em:first-child { box-shadow: 0 0 30px rgba(47, 227, 122, .25); }
.kod-backend-chain i { color: #2fe37a; }
.kod-desiree-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kod-desiree-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .kod-pipeline, .kod-desiree-cards { grid-template-columns: 1fr; } .apx-table-wide tbody th { min-width: 160px; } }

/* altezze uniformi card app */
.ds-apps-grid { align-items: stretch; }
.ds-appcard { height: 100%; }
.ds-appcard-tag { min-height: 4.5em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ds-appcard-shot { aspect-ratio: 16 / 9; }
.ds-appcard-shot img { height: 100%; object-fit: cover; object-position: top center; }
.ds-appcard-foot { margin-top: auto; }
@media (max-width: 991.98px) { .ds-appcard-tag { min-height: 0; } }

@media (min-width: 992px) { .ds-apps-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }