/* =========================================================
   cristianristagno.net — v2
   ========================================================= */

/* self-hosted fonts (SIL Open Font License): no requests to Google */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("fonts/Inter-300-800.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url("fonts/JetBrainsMono-400-500.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* theme is set on <html data-theme> by an inline script; dark is the default */
:root {
    --bg: #0d0a14;
    --bg-2: #141020;
    --bg-3: #1a1426;
    --line: #2c2140;
    --text: #e9e4f5;
    --muted: #a59cbd;
    --purple: #a855f7;
    --purple-2: #c084fc;
    --purple-deep: #6d28d9;
    --red: #f43f5e;
    --blue: #38bdf8;
    --heading: #ffffff;
    --nav-bg: rgba(13, 10, 20, .85);
    --chip: rgba(255, 255, 255, .04);
    --panel: rgba(26, 20, 38, .7);
    --tag-text: #d8d4f2;
    --hero-top: #1a0f2e;
    --inset: rgba(0, 0, 0, .28);
    --faint: #4a3f63;
    --radius: 6px;
    --wrap: 100%;
    --gutter: clamp(24px, 4vw, 72px);
    --font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --mono: 'JetBrains Mono', Consolas, monospace;
}

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

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

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

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

a {
    color: var(--purple-2);
}

h1,
h2,
h3 {
    line-height: 1.15;
    margin: 0 0 .6em;
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 700;
}

h3 {
    font-size: 1.1rem;
    font-weight: 600;
}

p {
    margin: 0 0 1em;
}

strong {
    color: var(--heading);
    font-weight: 600;
}

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* ---------- NAV ---------- */
.topnav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    transition: background .3s, box-shadow .3s, border-color .3s;
    border-bottom: 1px solid transparent;
}

.topnav.scrolled {
    background: var(--nav-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: var(--line);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--heading);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.brand-icon {
    width: 22px;
}

.accent {
    color: var(--purple-2);
}

.nav-links {
    display: flex;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

.nav-links a {
    color: var(--muted);
    text-decoration: none;
    font-size: .92rem;
    padding: 8px 12px;
    border-radius: 5px;
    transition: color .2s, background .2s;
}

.nav-links a:hover {
    color: var(--heading);
    background: rgba(168, 85, 247, .1);
}

.nav-links .nav-cta {
    color: #fff;
    background: var(--purple-deep);
}

.nav-links .nav-cta:hover {
    background: var(--purple);
}

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--line);
    color: var(--heading);
    border-radius: 5px;
    padding: 6px;
    cursor: pointer;
}

/* ---------- BUTTONS ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 5px;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
}

.btn svg {
    width: 18px;
    height: 18px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--purple), var(--purple-deep));
    color: #fff;
    box-shadow: 0 8px 24px rgba(168, 85, 247, .35);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(168, 85, 247, .5);
}

.btn-ghost {
    color: var(--text);
    border: 1px solid var(--line);
    background: var(--chip);
}

.btn-ghost:hover {
    border-color: var(--purple);
    transform: translateY(-2px);
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

/* ---------- HERO ---------- */
.hero {
    position: relative;
    padding: 140px 0 60px;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(60% 50% at 15% 20%, rgba(168, 85, 247, .25), transparent 70%),
        radial-gradient(40% 40% at 90% 10%, rgba(56, 189, 248, .12), transparent 70%),
        radial-gradient(40% 40% at 70% 90%, rgba(244, 63, 94, .1), transparent 70%),
        linear-gradient(180deg, var(--hero-top), var(--bg));
}

.hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(168, 85, 247, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(168, 85, 247, .06) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 56px;
    align-items: center;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .85rem;
    color: var(--muted);
    border: 1px solid var(--line);
    background: var(--chip);
    padding: 6px 14px;
    border-radius: 999px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .6);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.hero h1 {
    font-size: clamp(2.4rem, 5.5vw, 4.2rem);
    font-weight: 800;
    margin: 22px 0 20px;
    letter-spacing: -0.035em;
}

.grad {
    background: linear-gradient(90deg, var(--red), var(--purple-2) 50%, var(--blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-social {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
}

.hero-social a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 5px;
    border: 1px solid var(--line);
    color: var(--muted);
    transition: color .2s, border-color .2s;
}

.hero-social a:hover {
    color: var(--heading);
    border-color: var(--purple);
}

.hero-social svg {
    width: 18px;
    height: 18px;
}

/* terminal */
.hero-card {
    position: relative;
}

.terminal {
    background: rgba(20, 16, 32, .95);
    border: 1px solid #2c2140;
    border-radius: var(--radius);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(168, 85, 247, .08);
    overflow: hidden;
}

.terminal-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    border-bottom: 1px solid #2c2140;
    background: rgba(255, 255, 255, .02);
}

.terminal-bar span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #3a3150;
}

.terminal-bar span:nth-child(1){ background: #f43f5e; }
.terminal-bar span:nth-child(2){ background: #eab308; }
.terminal-bar span:nth-child(3){ background: #22c55e; }

.terminal-bar em {
    margin-left: auto;
    font-style: normal;
    font-family: var(--mono);
    font-size: .75rem;
    color: var(--muted);
}

.terminal-body {
    margin: 0;
    padding: 20px;
    font-family: var(--mono);
    font-size: .84rem;
    line-height: 1.7;
    color: #e9e4f5;
    overflow-x: auto;
}

.c-mute{ color: #6b6385; }
.c-hi{ color: var(--purple-2); }
.c-key{ color: var(--blue); }
.c-str{ color: #a7f3d0; }
.c-num{ color: #fda4af; }

.cursor {
    color: var(--purple-2);
    animation: blink 1s steps(1) infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

.avatar-chip {
    position: absolute;
    left: -28px;
    bottom: -28px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px 10px 10px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
}

.avatar-chip img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--purple);
}

.avatar-chip strong {
    display: block;
    font-size: .9rem;
}

.avatar-chip span {
    font-size: .78rem;
    color: var(--muted);
}

/* stats */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 90px;
}

.stat {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
}

.stat b {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--heading);
    letter-spacing: -0.03em;
}

.stat span {
    color: var(--muted);
    font-size: .9rem;
}

/* ---------- SECTIONS ---------- */
.section {
    padding: 110px 0;
}

.section-alt {
    background: var(--bg-2);
    border-block: 1px solid var(--line);
}

.section-dark {
    background:
        radial-gradient(50% 60% at 100% 0%, rgba(168, 85, 247, .12), transparent 70%),
        var(--bg);
}

.kicker {
    font-family: var(--mono);
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--purple-2);
    margin-bottom: 12px;
}

.section-sub {
    color: var(--muted);
    max-width: 640px;
    margin-bottom: 48px;
}

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

.two-col p {
    color: var(--muted);
}

.traits {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
}

.traits li {
    font-size: .85rem;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--text);
}

.purple-explainer {
    padding: 32px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: linear-gradient(160deg, rgba(168, 85, 247, .1), var(--panel));
}

.rb {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin: 20px 0 24px;
}

.rb-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border-radius: 5px;
    background: var(--inset);
    border: 1px solid var(--line);
}

.rb-item.red svg{ color: var(--red); }
.rb-item.blue svg{ color: var(--blue); }

.rb-item span {
    font-size: .82rem;
    color: var(--muted);
}

.rb-plus {
    align-self: center;
    font-size: 1.4rem;
    color: var(--purple-2);
}

.philosophy {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: .9rem;
    color: var(--purple-2) !important;
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.philosophy svg {
    flex-shrink: 0;
    width: 18px;
    margin-top: 2px;
}

/* cards */
.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 40px;
}

.card {
    padding: 28px;
    border-radius: var(--radius);
    background: var(--bg-3);
    border: 1px solid var(--line);
    transition: transform .25s, border-color .25s, box-shadow .25s;
}

.card:hover {
    transform: translateY(-4px);
    border-color: rgba(168, 85, 247, .5);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}

.card>svg {
    width: 30px;
    height: 30px;
    color: var(--purple-2);
    margin-bottom: 18px;
}

.card p {
    color: var(--muted);
    font-size: .94rem;
    margin: 0;
}

.cards-group {
    font-family: var(--mono);
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 40px 0 0;
}

.cards-group + .cards { margin-top: 14px; }

/* timeline */
.timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 150px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: linear-gradient(var(--purple), var(--line));
}

.timeline > li {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 40px;
    padding-bottom: 36px;
    position: relative;
}

.timeline > li::before {
    content: "";
    position: absolute;
    left: 145px;
    top: 7px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--purple);
}

.timeline > li.current::before {
    background: var(--purple);
    box-shadow: 0 0 0 5px rgba(168, 85, 247, .2);
}

.tl-date {
    font-family: var(--mono);
    font-size: .82rem;
    color: var(--muted);
    padding-top: 2px;
}

.timeline .current .tl-date {
    color: var(--purple-2);
}

.tl-body h3 {
    margin-bottom: 2px;
}

.tl-org {
    color: var(--purple-2);
    font-size: .92rem;
    margin-bottom: 8px;
}

.tl-body p:last-child {
    color: var(--muted);
    margin: 0;
    font-size: .95rem;
}

/* skills */

.ic-violet{ color: #c084fc; }
.ic-pink{ color: #e879f9; }
.ic-orange{ color: #fb923c; }
.ic-aqua{ color: #2dd4bf; }
.ic-blue{ color: #60a5fa; }
.ic-cyan{ color: #67e8f9; }

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.tags li {
    font-size: .8rem;
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--chip);
    border: 1px solid var(--line);
    color: var(--tag-text);
}

.fusion {
    margin: 36px 0 0;
    text-align: center;
    color: var(--muted);
}

.fusion strong {
    color: var(--purple-2);
    font-weight: 600;
}

/* method */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    list-style: none;
    padding: 0;
    margin: 40px 0 0;
    counter-reset: step;
}

.steps li {
    position: relative;
    padding: 28px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--bg-2);
    counter-increment: step;
}

.steps li::after {
    content: "0" counter(step);
    position: absolute;
    top: 22px;
    right: 24px;
    font-family: var(--mono);
    font-size: .8rem;
    color: var(--faint);
}

.steps svg {
    width: 26px;
    height: 26px;
    color: var(--purple-2);
    margin-bottom: 14px;
}

.steps p {
    color: var(--muted);
    margin: 0;
    font-size: .94rem;
}

/* beyond */
.beyond {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 40px;
}

.b-card {
    padding: 28px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--bg-3);
}

.b-card>svg {
    width: 28px;
    height: 28px;
    color: var(--purple-2);
    margin-bottom: 14px;
}

.b-card p {
    color: var(--muted);
    font-size: .94rem;
}

.b-card.pilot {
    background: linear-gradient(160deg, rgba(56, 189, 248, .1), var(--bg-3) 60%);
}

.b-card.pilot>svg {
    color: var(--blue);
}

blockquote {
    margin: 0;
    padding-left: 0;
    font-style: italic;
    color: var(--text);
    font-size: .94rem;
}

.plain {
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--muted);
    font-size: .94rem;
}

.plain li {
    padding: 4px 0;
}

.mt {
    margin-top: 22px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mt svg {
    width: 18px;
    color: var(--purple-2);
}

.lang {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lang li {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px dashed var(--line);
    font-size: .94rem;
}

.lang em {
    font-style: normal;
    color: var(--muted);
    font-size: .85rem;
}

.tags.light li {
    font-size: .82rem;
}

/* contact */
.contact-box {
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 48px;
    align-items: center;
}

.contact-box p {
    color: var(--muted);
    max-width: 560px;
}

.signature {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 24px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--bg-3);
}

.signature img {
    width: 96px;
    height: 96px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.signature div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sig-role {
    color: var(--purple-2);
    font-weight: 600;
    font-size: .92rem;
}

.signature em {
    color: var(--muted);
    font-size: .82rem;
}

.signature a {
    font-size: .85rem;
    margin-top: 6px;
    text-decoration: none;
}

/* footer */
.footer {
    border-top: 1px solid var(--line);
    padding: 28px 0;
    font-size: .88rem;
    color: var(--muted);
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.footer p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer svg {
    width: 18px;
    color: var(--purple);
}

.footer a {
    color: var(--muted);
    text-decoration: none;
}

.footer a:hover {
    color: var(--heading);
}

/* reveal */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s ease, transform .7s ease;
}

.reveal.in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html{ scroll-behavior: auto; }
    .reveal{ opacity: 1; transform: none; transition: none; }
    .dot, .cursor{ animation: none; }
}

/* ---------- RESPONSIVE ---------- */
/* the full menu needs ~1200px: below that it collapses into the hamburger */
@media (max-width: 1200px) {
    .nav-toggle {
        display: grid;
    }

    .nav-links {
        position: absolute;
        top: 68px;
        left: 16px;
        right: 16px;
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
        background: var(--bg-3);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
        max-height: calc(100vh - 90px);
        overflow-y: auto;
        display: none;
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links a {
        padding: 12px 14px;
        font-size: 1rem;
    }

    .nav-inner {
        gap: 12px;
    }
}

@media (max-width: 980px) {
    .hero-grid,
    .two-col,
    .contact-box {
        grid-template-columns: 1fr;
    }

    .hero-card {
        max-width: 520px;
    }

    .cards,
    .steps,
    .beyond {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 760px) {
    .wrap {
        padding: 0 16px;
    }

    .hero {
        padding-top: 110px;
    }

    .avatar-chip {
        position: static;
        margin-top: 16px;
        display: inline-flex;
    }

    .section {
        padding: 80px 0;
    }

    .cards,
    .steps,
    .beyond {
        grid-template-columns: 1fr;
    }

    .timeline::before {
        left: 5px;
    }

    .timeline > li {
        grid-template-columns: 1fr;
        gap: 4px;
        padding-left: 30px;
    }

    .timeline > li::before {
        left: 0;
    }

    .rb {
        flex-direction: column;
    }

    .rb-plus {
        transform: rotate(90deg);
    }

    .signature img {
        width: 72px;
        height: 72px;
    }
}

/* grid children must be allowed to shrink below their content (pre/terminal) */
.hero-grid > *,
.two-col > *,
.contact-box > *,
.cards > *,
.steps > *,
.beyond > * {
    min-width: 0;
}

/* know-how timeline */
.tl-body h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
}

.tl-step {
    font-family: var(--mono);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--purple-2);
    padding: 2px 8px;
    background: rgba(168, 85, 247, .12);
    border-radius: 4px;
}

.tl-body p {
    color: var(--muted);
    font-size: .95rem;
    max-width: 680px;
    margin: 6px 0 12px;
}

.tl-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.tl-tags li {
    font-size: .76rem;
    padding: 3px 9px;
    border-radius: 4px;
    background: rgba(168, 85, 247, .08);
    border: 1px solid var(--line);
    color: var(--tag-text);
}

.timeline > li.next::before {
    border-style: dashed;
    border-color: var(--muted);
}

.timeline > li.next .tl-body {
    opacity: .75;
}

/* particles canvas */
#particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* ---------- AI ---------- */
.ai-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.ai-card {
    position: relative;
    padding: 28px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background:
        radial-gradient(80% 60% at 100% 0%, rgba(56, 189, 248, .08), transparent 70%),
        var(--bg-3);
    transition: transform .25s, border-color .25s;
    min-width: 0;
}

.ai-card:hover {
    transform: translateY(-4px);
    border-color: rgba(56, 189, 248, .45);
}

.ai-card>svg {
    width: 30px;
    height: 30px;
    color: var(--blue);
    margin-bottom: 16px;
}

.ai-card.red {
    background:
        radial-gradient(80% 60% at 100% 0%, rgba(244, 63, 94, .1), transparent 70%),
        var(--bg-3);
}

.ai-card.red:hover {
    border-color: rgba(244, 63, 94, .45);
}

.ai-card.red>svg {
    color: var(--red);
}

.ai-card p {
    color: var(--muted);
    font-size: .94rem;
}

/* ---------- TRAINING ---------- */
.train-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.train-head .section-sub {
    margin-bottom: 0;
}

.train-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 32px;
}

.train-card {
    padding: 24px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--panel);
    min-width: 0;
}

.train-tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--purple-2);
    margin-bottom: 10px;
}

.train-card p {
    color: var(--muted);
    font-size: .92rem;
    margin: 0;
}

.train-formats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    list-style: none;
    padding: 24px 0 0;
    margin: 28px 0 0;
    border-top: 1px solid var(--line);
}

.train-formats li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    min-width: 0;
}

.train-formats svg {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--purple-2);
    margin-top: 2px;
}

.train-formats strong {
    display: block;
    font-size: .95rem;
}

.train-formats span {
    color: var(--muted);
    font-size: .85rem;
}

/* ---------- LANGUAGE SWITCH ---------- */
.nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lang-switch {
    display: flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 5px;
    overflow: hidden;
    font-size: .78rem;
    font-weight: 600;
}

.lang-switch a {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    letter-spacing: .04em;
    color: var(--muted);
    text-decoration: none;
    transition: color .2s, background .2s;
}

.lang-switch a+a {
    border-left: 1px solid var(--line);
}

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

.lang-switch a.active {
    color: var(--heading);
    background: rgba(168, 85, 247, .18);
}


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

    .nav-links a {
        padding: 8px 8px;
        font-size: .88rem;
    }
}

@media (max-width: 760px) {
    .ai-grid,
    .train-grid,
    .train-formats {
        grid-template-columns: 1fr;
    }
}

/* about pillars */
.pillars {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-top: 56px;
}

.pillar {
    padding: 22px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--bg-2);
    min-width: 0;
}

.pillar>svg {
    width: 24px;
    height: 24px;
    color: var(--purple-2);
    margin-bottom: 12px;
}

.pillar h3 {
    font-size: .98rem;
}

.pillar p {
    color: var(--muted);
    font-size: .88rem;
    margin: 0;
}

@media (max-width: 1080px) {
    .pillars {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 760px) {
    .pillars {
        grid-template-columns: 1fr;
    }
}

/* ---------- LIGHT THEME ---------- */
:root[data-theme="light"] {
    --bg: #faf8ff;
    --bg-2: #f3effc;
    --bg-3: #ffffff;
    --line: #e2d9f2;
    --text: #2a2238;
    --muted: #5f5675;
    --heading: #160f24;
    --purple: #9333ea;
    --purple-2: #7c3aed;
    --purple-deep: #6d28d9;
    --red: #e11d48;
    --blue: #0284c7;
    --nav-bg: rgba(250, 248, 255, .85);
    --chip: rgba(109, 40, 217, .05);
    --panel: #ffffff;
    --tag-text: #3b2f52;
    --hero-top: #ece2ff;
    --inset: rgba(109, 40, 217, .05);
    --faint: #c9bde0;
    color-scheme: light;
}

:root[data-theme="light"] .card:hover,
:root[data-theme="light"] .avatar-chip {
    box-shadow: 0 14px 34px rgba(76, 29, 149, .12);
}

:root[data-theme="light"] .terminal {
    box-shadow: 0 30px 70px rgba(76, 29, 149, .25);
}

:root[data-theme="light"] .tags li,
:root[data-theme="light"] .tl-tags li {
    background: rgba(109, 40, 217, .06);
}

/* theme toggle */
.theme-toggle {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 5px;
    border: 1px solid var(--line);
    background: none;
    color: var(--muted);
    cursor: pointer;
    transition: color .2s, border-color .2s;
}

.theme-toggle:hover {
    color: var(--heading);
    border-color: var(--purple);
}

.theme-toggle svg {
    width: 17px;
    height: 17px;
}

.theme-toggle .ic-sun{ display: none; }
:root[data-theme="light"] .theme-toggle .ic-sun{ display: block; }
:root[data-theme="light"] .theme-toggle .ic-moon{ display: none; }

/* intro loader */
.loader {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    background: var(--bg);
    transition: opacity .5s ease, visibility .5s;
    /* safety net: never block the page for more than 4s, even without JS */
    animation: loader-out .5s ease 4s forwards;
}

@keyframes loader-out {
    to { opacity: 0; visibility: hidden; }
}

.loader img {
    width: 96px;
    height: 96px;
}

.loader.done {
    opacity: 0;
    visibility: hidden;
}

.brand-icon {
    width: 28px;
    height: 28px;
}

/* brand lockup */
.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-text b {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.01em;
    color: var(--heading);
}

.brand-text small {
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .02em;
    color: var(--purple-2);
    margin-top: 3px;
}

/* email toast */
.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100% - 32px);
    padding: 12px 18px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--bg-3);
    color: var(--text);
    font-size: .9rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
    transform: translate(-50%, 20px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, transform .25s, visibility .25s;
}

.toast.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.toast-action {
    background: none;
    border: 0;
    padding: 0;
    color: var(--purple-2);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

button.btn {
    font-family: inherit;
    cursor: pointer;
}

/* skills carousel */
.ic-red { color: var(--red); }

.skill-carousel {
    margin-top: 40px;
}

.sc-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2 * 18px) / 3);
    column-gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.sc-track::-webkit-scrollbar {
    display: none;
}

.sc-track:focus-visible {
    outline: 2px solid var(--purple);
    outline-offset: 4px;
    border-radius: var(--radius);
}

.sc-card {
    scroll-snap-align: start;
    padding: 24px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--panel);
    min-width: 0;
}

.sc-card.featured {
    background:
        radial-gradient(80% 60% at 0% 0%, rgba(168, 85, 247, .16), transparent 70%),
        var(--panel);
}

.sc-card h3 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 1rem;
    line-height: 1.35;
    margin-bottom: 4px;
}

.sc-card h3 svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

.sc-count {
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 16px 30px;
}

.sc-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.sc-items li {
    font-size: .8rem;
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--chip);
    border: 1px solid var(--line);
    color: var(--tag-text);
}

.sc-card.offensive .sc-items li {
    font-family: var(--mono);
    font-size: .76rem;
}

.sc-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 22px;
}

.sc-arrow {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 5px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--heading);
    cursor: pointer;
    transition: border-color .2s, opacity .2s;
}

.sc-arrow:hover:not(:disabled) {
    border-color: var(--purple);
}

.sc-arrow:disabled {
    opacity: .35;
    cursor: default;
}

.sc-arrow svg {
    width: 18px;
    height: 18px;
}

.sc-dots {
    display: flex;
    gap: 8px;
}

.sc-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--line);
    cursor: pointer;
    transition: background .2s, width .2s;
}

.sc-dot.active {
    width: 22px;
    border-radius: 4px;
    background: var(--purple);
}

@media (max-width: 980px) {
    .sc-track {
        grid-auto-columns: calc((100% - 18px) / 2);
    }
}

@media (max-width: 760px) {
    .sc-track {
        grid-auto-columns: 86%;
        column-gap: 12px;
    }
}

/* hero tagline + security mark (from the original header) */
.security-mark {
    width: 24px;
    margin-top: 18px;
    opacity: .9;
}

:root[data-theme="light"] .security-mark {
    filter: invert(1);
}

.tagline {
    font-size: 1.15rem;
    font-style: italic;
    color: var(--muted);
    max-width: 560px;
    margin: 0;
}

/* ---------- LEGAL PAGES (cookie policy) ---------- */
.legal {
    padding: 130px 0 90px;
    background:
        radial-gradient(50% 40% at 10% 0%, rgba(168, 85, 247, .14), transparent 70%),
        var(--bg);
}

.legal-wrap {
    max-width: 820px;
}

.legal h1 {
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 6px;
}

.legal-updated {
    font-family: var(--mono);
    font-size: .8rem;
    color: var(--muted);
    margin-bottom: 32px;
}

.legal-callout {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 22px 24px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background:
        radial-gradient(80% 80% at 0% 0%, rgba(168, 85, 247, .16), transparent 70%),
        var(--panel);
}

.legal-callout svg {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    color: var(--purple-2);
}

.legal-callout p {
    margin: 0;
    color: var(--text);
}

.legal-toc {
    margin: 28px 0 8px;
    padding: 18px 24px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--bg-2);
}

.legal-toc ol {
    margin: 0;
    padding-left: 20px;
    columns: 2;
    column-gap: 32px;
    font-size: .92rem;
}

.legal-toc li {
    padding: 3px 0;
}

.legal-toc a {
    text-decoration: none;
}

.legal-toc a:hover {
    text-decoration: underline;
}

.legal-body h2 {
    font-size: 1.4rem;
    margin-top: 48px;
    padding-top: 8px;
}

.legal-body h3 {
    font-size: 1.05rem;
    margin-top: 28px;
}

.legal-body p,
.legal-body li {
    color: var(--muted);
}

.legal-body li {
    margin-bottom: 8px;
}

.legal-body strong {
    color: var(--heading);
}

.legal-body code {
    font-family: var(--mono);
    font-size: .85em;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--chip);
    border: 1px solid var(--line);
    color: var(--tag-text);
}

.highlight {
    color: var(--purple-2);
    font-weight: 600;
}

.browser-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
}

.browser-list li {
    margin: 0;
}

.browser-list a {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 5px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text);
    text-decoration: none;
    font-size: .9rem;
    transition: border-color .2s;
}

.browser-list a:hover {
    border-color: var(--purple);
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .9rem;
    color: var(--muted);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 5px;
}

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

.back-link svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 760px) {
    .legal {
        padding-top: 100px;
    }

    .legal-toc ol {
        columns: 1;
    }

    .back-link {
        display: none;
    }
}

/* image slots: gradient frame shows until the image file is added */
.media {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background:
        radial-gradient(60% 80% at 15% 20%, rgba(244, 63, 94, .18), transparent 70%),
        radial-gradient(60% 80% at 85% 80%, rgba(56, 189, 248, .18), transparent 70%),
        radial-gradient(50% 60% at 50% 50%, rgba(168, 85, 247, .25), transparent 70%),
        var(--bg-3);
}

.media::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(168, 85, 247, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(168, 85, 247, .08) 1px, transparent 1px);
    background-size: 32px 32px;
}

/* soft dark fade so photos sit well on the page */
.media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(13, 10, 20, .35));
    pointer-events: none;
}

:root[data-theme="light"] .media::after {
    background: linear-gradient(180deg, transparent 60%, rgba(76, 29, 149, .12));
}

.media img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-wide {
    aspect-ratio: 21 / 9;
    max-height: 340px;
    width: 100%;
    margin-bottom: 28px;
}

.media-16x9 {
    aspect-ratio: 16 / 9;
}

.about-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.train-head + .media-wide {
    margin-top: 28px;
    margin-bottom: 0;
}

@media (max-width: 760px) {
    .media-wide {
        aspect-ratio: 16 / 9;
    }
}


/* text overlay on a banner image (left side, over the dark area) */
.media.has-overlay::after {
    background: linear-gradient(90deg, rgba(5, 10, 30, .75) 0%, rgba(5, 10, 30, .35) 45%, transparent 70%);
}

.media-overlay {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    width: min(55%, 560px);
    padding: 0 clamp(20px, 4vw, 48px);
    color: #fff;
}

.mo-kicker {
    align-self: flex-start;
    font-family: var(--mono);
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #c084fc;
    padding: 3px 10px;
    border-radius: 4px;
    background: rgba(168, 85, 247, .18);
}

.mo-title {
    margin: 0;
    font-size: clamp(1.4rem, 3.2vw, 2.4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .5);
}

.mo-sub {
    font-family: var(--mono);
    font-size: clamp(.7rem, 1.2vw, .85rem);
    color: rgba(255, 255, 255, .75);
}

@media (max-width: 760px) {
    .media-overlay {
        width: 70%;
        gap: 6px;
    }

    .mo-sub {
        display: none;
    }
}

/* overlay variants */
.media.overlay-bottom::after {
    background: linear-gradient(0deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .35) 40%, transparent 65%);
}

.overlay-bottom .media-overlay {
    inset: auto 0 0 0;
    width: auto;
    justify-content: flex-end;
    gap: 6px;
    padding: 0 22px 20px;
}

.overlay-bottom .mo-title {
    font-size: clamp(1.15rem, 2vw, 1.5rem);
}

.overlay-narrow .media-overlay {
    width: min(38%, 420px);
}

.overlay-narrow .mo-title {
    font-size: clamp(1.2rem, 2.6vw, 2rem);
}

@media (max-width: 760px) {
    .overlay-narrow .media-overlay {
        width: 52%;
    }
}

/* keep overlay text white even inside sections that recolor paragraphs (e.g. .two-col p) */
.media-overlay .mo-title {
    color: #fff;
}


/* ---------- CROSS-PLATFORM ---------- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    -webkit-tap-highlight-color: transparent;
}

/* notch / rounded-corner devices (needs viewport-fit=cover) */
.nav-inner {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.toast {
    bottom: calc(24px + env(safe-area-inset-bottom));
}

/* brand never pushes the controls off screen */
.brand {
    min-width: 0;
    flex-shrink: 1;
}

.brand-text {
    min-width: 0;
}

.brand-text b,
.brand-text small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-right {
    flex-shrink: 0;
}

@media (max-width: 760px) {
    .nav-inner {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
}

@media (max-width: 440px) {
    .brand {
        gap: 8px;
    }

    .brand-icon {
        width: 24px;
        height: 24px;
    }

    .brand-text b {
        font-size: .88rem;
    }

    .brand-text small {
        font-size: .6rem;
    }

    .nav-right {
        gap: 6px;
    }

    .lang-switch a {
        padding: 6px 8px;
    }
}

/* touch devices: bigger hit areas, no sticky hover lifts */
@media (pointer: coarse) {
    .theme-toggle,
    .nav-toggle,
    .sc-arrow {
        min-width: 44px;
        min-height: 44px;
    }

    .lang-switch a {
        min-height: 40px;
    }

    .sc-dot {
        position: relative;
    }

    .sc-dot::after {
        content: "";
        position: absolute;
        inset: -12px -6px;
    }
}

@media (hover: none) {
    .card:hover,
    .ai-card:hover,
    .btn-primary:hover,
    .btn-ghost:hover {
        transform: none;
    }
}

/* ---------- COMPANIES MARQUEE (sponsor style) ---------- */
.logos {
    padding: 36px 0 44px;
    border-block: 1px solid var(--line);
    background: var(--bg-2);
}

.logos-label {
    margin: 0 0 22px;
    text-align: center;
    font-family: var(--mono);
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

.marquee {
    display: flex;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.marquee-track {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 72px;
    margin: 0;
    padding: 0 36px;
    list-style: none;
    animation: marquee 38s linear infinite;
}

.marquee:hover .marquee-track {
    animation-play-state: paused;
}

@keyframes marquee {
    to { transform: translateX(-100%); }
}

.lm-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    white-space: nowrap;
    opacity: .6;
    transition: opacity .25s;
}

.lm-item:hover {
    opacity: 1;
}

.lm-name {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--heading);
}

.lm-item small {
    font-family: var(--mono);
    font-size: .65rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.lm-logo {
    display: block;
    height: 34px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
    /* monochrome sponsor look: white silhouettes on dark, black on light */
    filter: brightness(0) invert(1);
}

:root[data-theme="light"] .lm-logo {
    filter: brightness(0);
}


@media (max-width: 760px) {
    .marquee-track {
        gap: 44px;
        padding: 0 22px;
        animation-duration: 28s;
    }

    .lm-name {
        font-size: 1.15rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .marquee {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .marquee-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 18px;
        flex-shrink: 1;
    }

    .marquee-track[aria-hidden="true"] {
        display: none;
    }
}

/* ---------- LIQUID LAYOUT ----------
   Full-width container (see --wrap / --gutter), fluid type and spacing with clamp(),
   and grids that reflow by available space (auto-fit / minmax) instead of fixed column counts.
   Placed last on purpose: it supersedes the fixed-column breakpoint rules above. */
html {
    /* everything sized in rem scales smoothly from phones (15px) to large monitors (19px) */
    font-size: clamp(15px, 13.6px + 0.32vw, 19px);
}

.section {
    padding-block: clamp(64px, 8vw, 140px);
}

.hero {
    padding-top: clamp(100px, 10vw, 170px);
}

.hero-grid {
    gap: clamp(32px, 4vw, 80px);
}

.stats {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    margin-top: clamp(48px, 6vw, 100px);
}

.cards,
.steps,
.beyond {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.ai-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}

.train-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.train-formats {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.pillars {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.cards,
.steps,
.beyond,
.ai-grid,
.train-grid,
.pillars,
.stats {
    gap: clamp(12px, 1.4vw, 24px);
}

/* carousel: card width follows the viewport (≈1 on phones, 2 on tablets, 3–4 on large screens) */
.sc-track {
    grid-auto-columns: clamp(260px, calc((100% - 3 * 18px) / 4), 520px);
}

@media (max-width: 1400px) {
    .sc-track {
        grid-auto-columns: clamp(260px, calc((100% - 2 * 18px) / 3), 520px);
    }
}

@media (max-width: 980px) {
    .sc-track {
        grid-auto-columns: calc((100% - 18px) / 2);
    }
}

@media (max-width: 640px) {
    .sc-track {
        grid-auto-columns: 86%;
    }
}

/* banners keep their proportion but don't become too tall on wide screens */
.media-wide {
    max-height: clamp(220px, 26vw, 460px);
}


/* 6-item grids: at most 3 columns, so they always split evenly (3+3, 2+2+2, 1×6) */
.cards,
.steps {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(280px, calc((100% - 2 * 24px) / 3))), 1fr));
}

.stats {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
}

/* back-to-top button (site icon + chevron) */
.to-top {
    position: fixed;
    right: max(20px, env(safe-area-inset-right));
    bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 60;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 6px;
    border: 0;
    background: var(--nav-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .25s, transform .25s, visibility .25s, background .2s;
}

.to-top.show {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.to-top:hover {
    background: var(--bg-3);
}

.to-top img {
    width: 26px;
    height: 26px;
    margin-top: 4px;
}

.to-top svg {
    width: 14px;
    height: 14px;
    margin-top: -6px;
    color: var(--purple-2);
    transition: transform .2s;
}

.to-top:hover svg {
    transform: translateY(-2px);
}


/* ---------- BUTTONS (compact, tinted style) ----------
   neutral = "Salva", primary = "Nuovo", danger = "Elimina":
   dark tinted fill, colored label, 1px tone-on-tone border, small radius */
:root {
    --btn-n-bg: #1e2633;   --btn-n-bd: #2f3949;   --btn-n-fg: #d1d8e3;   --btn-n-hover: #263041;
    --btn-p-bg: #193241;   --btn-p-bd: #234a5b;   --btn-p-fg: #5deefd;   --btn-p-hover: #1d3d4f;
    --btn-d-bg: #2d2633;   --btn-d-bd: #4a3040;   --btn-d-fg: #f0788a;   --btn-d-hover: #382c3c;
}

:root[data-theme="light"] {
    --btn-n-bg: #eef1f6;   --btn-n-bd: #d6dce6;   --btn-n-fg: #1e2633;   --btn-n-hover: #e3e8f0;
    --btn-p-bg: #e0f6fa;   --btn-p-bd: #a8e2ec;   --btn-p-fg: #0e7490;   --btn-p-hover: #d0f0f6;
    --btn-d-bg: #fdecef;   --btn-d-bd: #f4c0c9;   --btn-d-fg: #be123c;   --btn-d-hover: #fadde3;
}

.btn {
    gap: 7px;
    padding: 9px 16px;
    border-radius: 4px;
    border: 1px solid var(--btn-n-bd);
    background: var(--btn-n-bg);
    color: var(--btn-n-fg);
    font-size: .9rem;
    font-weight: 600;
    box-shadow: none;
    transition: background .15s, border-color .15s, color .15s;
}

.btn:hover {
    background: var(--btn-n-hover);
    transform: none;
    box-shadow: none;
}

.btn svg {
    width: 16px;
    height: 16px;
}

.btn-primary {
    background: var(--btn-p-bg);
    border-color: var(--btn-p-bd);
    color: var(--btn-p-fg);
    box-shadow: none;
}

.btn-primary:hover {
    background: var(--btn-p-hover);
    transform: none;
    box-shadow: none;
}

.btn-ghost {
    background: var(--btn-n-bg);
    border-color: var(--btn-n-bd);
    color: var(--btn-n-fg);
}

.btn-ghost:hover {
    background: var(--btn-n-hover);
    border-color: var(--btn-n-bd);
    transform: none;
}

.btn-danger {
    background: var(--btn-d-bg);
    border-color: var(--btn-d-bd);
    color: var(--btn-d-fg);
}

.btn-danger:hover {
    background: var(--btn-d-hover);
}

/* menu "Contact" uses the primary style too */
.nav-links .nav-cta {
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid var(--btn-p-bd);
    background: var(--btn-p-bg);
    color: var(--btn-p-fg);
    font-weight: 600;
}

.nav-links .nav-cta:hover {
    background: var(--btn-p-hover);
    color: var(--btn-p-fg);
}

/* every company occupies the same box, so logos read as the same size */
.lm-item {
    width: 170px;
    flex-shrink: 0;
}

.lm-logo {
    width: 170px;
    height: 48px;
    max-width: none;
    object-fit: contain;
}

.lm-name {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 170px;
    height: 48px;
    font-size: 1.3rem;
}

@media (max-width: 760px) {
    .lm-item,
    .lm-logo,
    .lm-name {
        width: 130px;
    }

    .lm-logo,
    .lm-name {
        height: 38px;
    }

    .lm-name {
        font-size: 1.05rem;
    }
}

/* ---------- 404 ---------- */
.error-page {
    min-height: 100vh;
    display: grid;
    align-items: center;
}

.err-code {
    font-size: clamp(5rem, 18vw, 10rem);
    line-height: .9;
    margin: 0 0 8px;
}

.err-it {
    color: var(--muted);
    font-weight: 500;
}

.err-text {
    color: var(--muted);
    margin: 0 0 24px;
}

.err-term {
    border-radius: var(--radius);
    background: rgba(20, 16, 32, .95);
    border: 1px solid #2c2140;
    margin: 0 0 8px;
}

/* ---------- TOOLS BAND ---------- */
.tools-band .marquee-track {
    gap: 28px;
    padding: 0 14px;
    animation-direction: reverse;
    animation-duration: 60s;
}

.tool-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 104px;
    flex-shrink: 0;
    opacity: .6;
    transition: opacity .25s;
}

.tool-item:hover {
    opacity: 1;
}

.tool-ico {
    width: 44px;
    height: 44px;
    object-fit: contain;
    /* same monochrome treatment as the company logos */
    filter: brightness(0) invert(1);
}

:root[data-theme="light"] .tool-ico {
    filter: brightness(0);
}

.tool-ico-line {
    filter: none;
    color: var(--heading);
}

.tool-item span {
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--muted);
    white-space: nowrap;
}

@media (max-width: 760px) {
    .tools-band .marquee-track {
        gap: 18px;
        animation-duration: 45s;
    }

    .tool-item {
        width: 84px;
    }

    .tool-ico {
        width: 36px;
        height: 36px;
    }
}

/* tools band: more compact */
.tools-band {
    padding: 24px 0 28px;
}

.tools-band .logos-label {
    margin-bottom: 14px;
}

.tools-band .marquee-track {
    gap: 18px;
    padding: 0 9px;
}

.tool-item {
    width: 76px;
    gap: 6px;
}

.tool-ico {
    width: 28px;
    height: 28px;
}

.tool-item span {
    font-size: .62rem;
}

@media (max-width: 760px) {
    .tool-item {
        width: 64px;
    }

    .tool-ico {
        width: 24px;
        height: 24px;
    }
}

/* tools band: icons only (names stay for screen readers and as hover tooltip) */
.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;
}

.tool-item {
    width: 44px;
    gap: 0;
}

.tools-band .marquee-track {
    gap: 30px;
    padding: 0 15px;
}

@media (max-width: 760px) {
    .tool-item {
        width: 36px;
    }

    .tools-band .marquee-track {
        gap: 22px;
        padding: 0 11px;
    }
}

/* ---------- KNOWLEDGE STACK (next to the know-how timeline) ---------- */
.kh-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 440px);
    gap: clamp(32px, 5vw, 110px);
    align-items: start;
}

.kh-stack {
    position: sticky;
    top: 110px;
}

.kh-year {
    font-family: var(--mono);
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    font-weight: 500;
    color: var(--heading);
    margin: 0 0 18px;
}

.kh-layers {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* the stack widens towards the base: older layers are the foundations */
.kh-layer[data-layer="7"] { margin-inline: 42px; }
.kh-layer[data-layer="6"] { margin-inline: 35px; }
.kh-layer[data-layer="5"] { margin-inline: 28px; }
.kh-layer[data-layer="4"] { margin-inline: 21px; }
.kh-layer[data-layer="3"] { margin-inline: 14px; }
.kh-layer[data-layer="2"] { margin-inline: 7px; }

.kh-layer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-radius: 4px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--muted);
    font: inherit;
    font-size: .9rem;
    text-align: left;
    cursor: pointer;
    transition: background .35s, color .35s, box-shadow .35s, opacity .35s;
    opacity: .55;
}

.kh-num {
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--faint);
    transition: color .35s;
}

/* reached layers stay lit */
.kh-layer.on {
    opacity: 1;
    color: var(--text);
    background: linear-gradient(90deg, rgba(168, 85, 247, .16), rgba(56, 189, 248, .08));
}

.kh-layer.on .kh-num {
    color: var(--purple-2);
}

/* the layer you're reading now */
.kh-layer.current {
    color: var(--heading);
    font-weight: 600;
    background: linear-gradient(90deg, rgba(168, 85, 247, .38), rgba(56, 189, 248, .18));
    box-shadow: 0 0 28px rgba(168, 85, 247, .35);
}

.kh-layer[data-layer="7"].on {
    background: rgba(255, 255, 255, .04);
}

.kh-note {
    margin: 16px 0 0;
    font-size: .85rem;
    font-style: italic;
    color: var(--muted);
}

@media (max-width: 980px) {
    .kh-grid {
        grid-template-columns: 1fr;
    }

    .kh-stack {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kh-layer {
        transition: none;
    }
}

/* companies: name-only wordmarks sized by letter height, so every name reads the same size.
   --cap = height of a capital letter; lowercase-only marks are scaled on their x-height. */
.logos {
    --cap: 15px;
    padding: 26px 0 30px;
}

.logos .logos-label {
    margin-bottom: 16px;
}

.marquee-track {
    gap: 56px;
    padding: 0 28px;
}

.lm-item {
    width: auto;
    justify-content: center;
    min-height: calc(var(--cap) * 2.6);
}

.lm-logo {
    width: auto;
    max-width: none;
    object-fit: initial;
}

.lm-logo.lm-caps { height: var(--cap); }
.lm-logo.lm-caps.lm-asc { height: calc(var(--cap) * 1.03); }
.lm-logo.lm-mark { height: calc(var(--cap) * 2.2); }   /* AnsaldoBreda: symbol + name, name = half the image height */
.lm-logo.lm-lower.lm-asc { height: calc(var(--cap) * 1.08); }
.lm-logo.lm-lower { height: calc(var(--cap) * .78); }
.lm-logo.lm-lower.lm-asc { height: calc(var(--cap) * 1.08); }

.lm-name {
    width: auto;
    height: auto;
    font-size: calc(var(--cap) / .727);
    line-height: 1;
}

.lm-item small {
    margin-top: 5px;
    font-size: .58rem;
}

@media (max-width: 760px) {
    .logos {
        --cap: 12px;
    }

    .marquee-track {
        gap: 40px;
        padding: 0 20px;
    }

    .lm-item,
    .lm-logo,
    .lm-name {
        width: auto;
    }

    .lm-name {
        height: auto;
        font-size: calc(var(--cap) / .727);
    }
}

/* timeline step selected from the knowledge stack */
.timeline > li .tl-body {
    border-radius: var(--radius);
    transition: background .35s, box-shadow .35s;
}

.timeline > li.tl-focus .tl-body {
    background: linear-gradient(90deg, rgba(168, 85, 247, .12), transparent 80%);
    box-shadow: -12px 0 0 rgba(168, 85, 247, 0);
}

/* lowercase wordmarks: their x-height is a small part of the image, scale them up to match */
.lm-logo.lm-lower.lm-asc { height: calc(var(--cap) * 1.6); }   /* startit */
.lm-logo.lm-lower:not(.lm-asc) { height: calc(var(--cap) * 1.25); } /* sos|seo */

/* 4-item grids (software & web services, training): at most 4 columns -> 4 / 2+2 / 1 (training: 4+3) */
.cards.cards-4 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(240px, calc((100% - 3 * 24px) / 4))), 1fr));
}

/* service cards with a photo on top (software, web & digital) */
.card.has-img {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.card-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    filter: saturate(.85) brightness(.9);
    transition: transform .4s, filter .4s;
}

.card.has-img:hover .card-img {
    transform: scale(1.04);
    filter: none;
}

.card-body {
    padding: 22px 26px 26px;
}

/* training cards with a photo on top (reuses .card-img / .card-body) */
.train-card.has-img {
    padding: 0;
    overflow: hidden;
}

.train-card.has-img .card-body {
    padding: 18px 22px 22px;
}

.train-card.has-img:hover .card-img {
    transform: scale(1.04);
    filter: none;
}

/* training: 4 courses, at most 4 columns -> 4 / 2+2 / 1x4 */
.train-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(240px, calc((100% - 3 * 24px) / 4))), 1fr));
}

/* photo cards: tag + title (linked to the dedicated page) + one line */
.card.has-img .card-body h3,
.train-card.has-img .card-body h3 {
    margin-bottom: 6px;
}

.card.has-img,
.train-card.has-img {
    position: relative;
}

.card-link {
    color: inherit;
    text-decoration: none;
}

/* the whole card is clickable */
.card-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.card-link:hover,
.card-link:focus-visible {
    color: var(--purple-2);
}

.card.has-img:focus-within,
.train-card.has-img:focus-within {
    outline: 2px solid var(--purple-2);
    outline-offset: 2px;
}

.card-link:focus-visible { outline: none; }

.more-link {
    margin: 16px 0 0;
    font-size: .95rem;
}

.more-link a {
    color: var(--purple-2);
    text-decoration: none;
}

.more-link a:hover { text-decoration: underline; }

.crumbs a,
.svc-others a { text-decoration: none; }

/* home: area map under the contact box */
.home-area { margin-top: clamp(28px, 4vw, 56px); }
.home-area h3 { margin: 0 0 10px; font-size: 1.25rem; }

/* hero: the areas covered, under the main title */
.hero-areas {
    font-family: var(--mono);
    font-size: .9rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--purple-2);
    margin: -6px 0 18px;
}

/* Kali mark next to the "Security" services label */
.cards-group .security-mark {
    display: inline-block;
    width: 18px;
    height: auto;
    margin: 0 10px 0 0;
    vertical-align: -4px;
    opacity: .85;
}

/* ===== service / course pages (services/, training/, it/servizi/, it/formazione/) ===== */
.crumbs {
    font-family: var(--mono);
    font-size: .78rem;
    color: var(--muted);
    margin-bottom: 28px;
}

.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--purple-2); }
.crumbs span { color: var(--text); }

.svc-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: center;
}

.svc-hero .train-tag { display: block; }

.svc-lead {
    font-size: 1.15rem;
    color: var(--muted);
    max-width: 620px;
    margin: 14px 0 26px;
}

.svc-img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--line);
}

.svc-page h2 {
    font-size: 1.35rem;
    margin: 0 0 16px;
}

.svc-cols {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 48px);
    margin-top: clamp(40px, 5vw, 72px);
}

.svc-cols > section,
.svc-cta,
.svc-area {
    padding: clamp(20px, 2.4vw, 32px);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--panel);
    min-width: 0;
}

.svc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

.svc-list li {
    position: relative;
    padding-left: 26px;
}

.svc-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .5em;
    width: 12px;
    height: 7px;
    border-left: 2px solid var(--purple-2);
    border-bottom: 2px solid var(--purple-2);
    transform: rotate(-45deg);
}

.svc-details {
    margin: 0;
    display: grid;
    gap: 6px 0;
}

.svc-details dt {
    font-family: var(--mono);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--purple-2);
    margin-top: 10px;
}

.svc-details dt:first-child { margin-top: 0; }
.svc-details dd { margin: 0; color: var(--muted); }

.svc-area {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: clamp(20px, 3vw, 48px);
    align-items: center;
    margin-top: clamp(20px, 2.4vw, 32px);
}

.svc-area p { color: var(--muted); margin: 0; }

.svc-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 32px;
    align-items: center;
    justify-content: space-between;
    margin-top: clamp(20px, 2.4vw, 32px);
    background:
        radial-gradient(80% 120% at 0% 0%, rgba(168, 85, 247, .16), transparent 70%),
        var(--panel);
}

.svc-cta p { margin: 0; color: var(--muted); }
.svc-cta h2 { margin-bottom: 6px; }

.svc-others { margin-top: clamp(40px, 5vw, 64px); }

.svc-others ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.svc-others a {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 4px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text);
    font-size: .92rem;
}

.svc-others a:hover { color: var(--purple-2); }

@media (max-width: 860px) {
    .svc-hero,
    .svc-cols,
    .svc-area { grid-template-columns: minmax(0, 1fr); }
}

/* ===== area map: static OpenStreetMap image + SVG radius overlay ===== */
.area-map { margin: 0; min-width: 0; }

.area-map-frame {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
}

.area-map-frame img {
    display: block;
    width: 100%;
    height: auto;
}

.area-map-frame svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* dark theme: darken the map tiles to match the site */
:root:not([data-theme="light"]) .area-map-frame img {
    filter: invert(.92) hue-rotate(180deg) saturate(.55) brightness(.95) contrast(.9);
}

.am-radius {
    fill: rgba(168, 85, 247, .16);
    stroke: #a855f7;
    stroke-width: 2.5;
}

.am-line {
    stroke: #a855f7;
    stroke-width: 2;
    stroke-dasharray: 6 5;
}

.am-label {
    font: 600 20px var(--mono, monospace);
    fill: #a855f7;
    text-anchor: middle;
    paint-order: stroke;
    stroke: rgba(13, 10, 20, .7);
    stroke-width: 4px;
}

:root[data-theme="light"] .am-label { stroke: rgba(255, 255, 255, .85); }

.am-pin {
    fill: #f43f5e;
    stroke: #fff;
    stroke-width: 3;
}

.area-map figcaption {
    font-size: .72rem;
    color: var(--muted);
    margin-top: 6px;
    text-align: right;
}

.area-map figcaption a { color: var(--muted); text-decoration: underline; }

/* ===== nav dropdowns: Services / Training -> dedicated pages ===== */
.nav-links .has-sub { position: relative; }

.nav-links .has-sub > a::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    opacity: .7;
}

.nav-links .sub {
    list-style: none;
    margin: 0;
    padding: 8px;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 280px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
    display: none;
    z-index: 20;
}

/* invisible bridge so the menu doesn't close while the pointer moves down to it */
.nav-links .sub::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
}

.nav-links .has-sub:hover > .sub,
.nav-links .has-sub:focus-within > .sub { display: block; }

.nav-links .sub a {
    display: block;
    padding: 9px 12px;
    font-size: .9rem;
    white-space: nowrap;
}

@media (max-width: 1200px) {
    .nav-links .sub {
        position: static;
        display: block;
        min-width: 0;
        padding: 0 0 6px 14px;
        background: none;
        border: 0;
        box-shadow: none;
    }

    .nav-links .sub::before { display: none; }

    .nav-links .sub a {
        padding: 8px 14px;
        font-size: .92rem;
        white-space: normal;
    }

    .nav-links .has-sub > a::after { display: none; }
}

/* area box: small and compact (text + small square map) */
.svc-area {
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 18px;
    max-width: 560px;
    padding: 16px 18px;
}

.svc-area h2,
.svc-area h3 {
    font-size: 1rem;
    margin: 0 0 6px;
}

.svc-area p { font-size: .88rem; }

.area-map figcaption {
    font-size: .62rem;
    margin-top: 4px;
}

.am-radius { stroke-width: 4; }
.am-line { stroke-width: 3; stroke-dasharray: 9 7; }
.am-label { font-size: 38px; stroke-width: 6px; }
.am-pin { stroke-width: 4; }

@media (max-width: 860px) {
    .svc-area { grid-template-columns: minmax(0, 1fr) 150px; }
}

@media (max-width: 440px) {
    .svc-area { grid-template-columns: minmax(0, 1fr); }
    .svc-area .area-map { max-width: 220px; }
}

/* ===== site footer: brand · services · training · area served ===== */
.site-footer {
    padding: clamp(40px, 5vw, 64px) 0 24px;
    background: var(--bg-2);
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(24px, 3vw, 48px);
    padding-bottom: clamp(28px, 4vw, 44px);
    margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
}

.site-footer .f-col p { display: block; margin: 0 0 10px; line-height: 1.55; }

.site-footer .f-brand .brand { margin-bottom: 14px; display: inline-flex; }

.site-footer .f-title {
    font-family: var(--mono);
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--purple-2);
    margin-bottom: 12px;
}

.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.site-footer .f-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 14px;
}

.site-footer .f-links a { display: inline-flex; align-items: center; gap: 6px; }

/* the small area map: undo the generic footer icon sizing */
.site-footer .area-map { max-width: 190px; margin-top: 4px; }
.site-footer .area-map-frame svg { width: 100%; height: 100%; color: inherit; }
.site-footer .area-map figcaption { display: block; text-align: left; }

@media (max-width: 980px) {
    .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* service pages: area line + FAQ (native <details>, no JS) */
.svc-geo {
    font-family: var(--mono);
    font-size: .78rem;
    letter-spacing: .04em;
    color: var(--muted);
    margin: -14px 0 24px;
}

.svc-faq { margin-top: clamp(20px, 2.4vw, 32px); }

.svc-faq details {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    margin-bottom: 10px;
}

.svc-faq summary {
    cursor: pointer;
    list-style: none;
    padding: 14px 44px 14px 18px;
    font-weight: 600;
    color: var(--heading);
    position: relative;
}

.svc-faq summary::-webkit-details-marker { display: none; }

.svc-faq summary::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--purple-2);
    border-bottom: 2px solid var(--purple-2);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .2s;
}

.svc-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }

.svc-faq details p {
    margin: 0;
    padding: 0 18px 16px;
    color: var(--muted);
}

/* "Beyond code": two compact cards */
.beyond {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    max-width: 920px;
    gap: 16px;
}

.b-card { padding: 20px 22px; }
.b-card > svg { width: 22px; height: 22px; margin-bottom: 10px; }
.b-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.b-card p { font-size: .9rem; }
.b-card blockquote { font-size: .88rem; margin: 10px 0 0; }
.b-card .tags li { font-size: .78rem; }

/* ===== COMPACT LAYOUT: less empty space everywhere (overrides the earlier, roomier values) ===== */
.section { padding-block: clamp(44px, 5vw, 88px); }
.section-sub { margin-bottom: 24px; }
.two-col { gap: clamp(24px, 3.5vw, 52px); }

.cards,
.steps,
.beyond,
.train-grid,
.skill-carousel { margin-top: 22px; }

.cards,
.steps,
.beyond,
.train-grid,
.pillars,
.stats { gap: clamp(10px, 1vw, 16px); }

.cards-group { margin: 26px 0 0; }
.cards-group + .cards { margin-top: 10px; }

.card { padding: 18px 20px; }
.card > svg { width: 26px; height: 26px; margin-bottom: 10px; }
.card h3 { margin-bottom: 6px; }
.card p { font-size: .9rem; }

/* photo cards: shorter images, tighter text */
.card-img { aspect-ratio: 2 / 1; }
.card-body,
.train-card.has-img .card-body { padding: 14px 18px 16px; }
.train-tag { margin-bottom: 6px; }

.steps li { padding: 18px 20px; }
.steps svg { margin-bottom: 8px; }

.stats { margin-top: clamp(28px, 3.5vw, 56px); }
.stat { padding: 14px 18px; }

.pillars { margin-top: 28px; }
.pillar { padding: 14px 16px; }
.pillar > svg { margin-bottom: 8px; }

.purple-explainer { padding: 20px 22px; }
.rb { margin: 14px 0 16px; }
.rb-item { padding: 12px; }

.timeline > li { gap: 24px; }
.tl-body p { margin: 4px 0 8px; }

.sc-card { padding: 16px 18px; }
.sc-count { margin-bottom: 10px; }
.sc-controls { margin-top: 14px; }

.train-grid { margin-top: 18px; }
.train-formats { margin: 18px 0 0; padding-top: 16px; }
.media-wide { margin-bottom: 18px; max-height: clamp(180px, 20vw, 360px); }
.train-head + .media-wide { margin-top: 18px; }

.contact-box { gap: 28px; }
.signature { padding: 16px 18px; }
.cta-row { margin-top: 20px; }

/* service / course pages */
.legal { padding: 104px 0 56px; }
.crumbs { margin-bottom: 18px; }
.svc-lead { margin: 10px 0 18px; }
.svc-geo { margin: -8px 0 18px; }
.svc-cols { margin-top: clamp(24px, 3vw, 40px); gap: clamp(14px, 2vw, 28px); }
.svc-cols > section,
.svc-cta { padding: clamp(16px, 1.8vw, 22px); }
.svc-cta { margin-top: 16px; }
.svc-faq { margin-top: 16px; }
.svc-faq summary { padding: 11px 40px 11px 16px; }
.svc-faq details { margin-bottom: 8px; }
.svc-others { margin-top: 28px; }
.svc-list { gap: 8px; }

/* footer */
.site-footer { padding: clamp(30px, 3.5vw, 44px) 0 18px; }
.footer-grid { padding-bottom: clamp(20px, 2.5vw, 30px); margin-bottom: 16px; }
/* keep the bottom footer row clear of the floating back-to-top button */
.site-footer .footer-inner { padding-right: 64px; }
.site-footer ul { gap: 6px; }

/* ===== Insights / Approfondimenti ===== */
.ins-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(220px, calc((100% - 3 * 16px) / 4))), 1fr));
    gap: clamp(10px, 1vw, 16px);
    margin-top: 18px;
}

.ins-card { position: relative; display: flex; flex-direction: column; }
.ins-card h3 { font-size: 1.02rem; }
.ins-card p { flex: 1; }

.ins-meta {
    font-family: var(--mono);
    font-size: .74rem;
    color: var(--purple-2);
    margin-top: 10px;
}

.article { min-width: 0; }

.article-body { margin-top: 8px; }

.article-body h2 {
    font-size: 1.25rem;
    margin: 28px 0 8px;
}

.article-body p,
.article-body li { color: var(--text); line-height: 1.7; }

.article-body ul,
.article-body ol { padding-left: 22px; margin: 0 0 12px; }

.article-body li { margin-bottom: 6px; }

.article-body code {
    font-family: var(--mono);
    font-size: .88em;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(168, 85, 247, .12);
}

.article-body pre {
    margin: 12px 0 16px;
    padding: 14px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--bg-2);
    overflow-x: auto;
}

.article-body pre code {
    padding: 0;
    background: none;
    font-size: .86rem;
    line-height: 1.6;
}

.article-related {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}

.article-related a { color: var(--purple-2); text-decoration: none; }
.article-related a:hover { text-decoration: underline; }

.ins-more { margin-top: 32px; }

/* article reading layout: bigger text, one block per section, number badges, closing callout */
.article .svc-lead { font-size: 1.2rem; line-height: 1.6; max-width: none; }
.article-body { margin-top: 20px; font-size: 1.0625rem; }
.article-body p,
.article-body li { line-height: 1.75; }

.art-sec {
    padding: clamp(16px, 2vw, 22px) clamp(16px, 2.2vw, 26px);
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--chip);
}
.art-sec > :last-child { margin-bottom: 0; }

.article-body .art-sec h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    font-size: 1.22rem;
    line-height: 1.3;
}

.art-num {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(168, 85, 247, .16);
    color: var(--purple-2);
    font-family: var(--mono);
    font-size: .92rem;
    font-weight: 600;
}

/* text of a numbered step lines up with the heading text, not the badge */
@media (min-width: 600px) {
    .art-step > :not(h2, pre, .code) { margin-left: 44px; }
}
/* code blocks use the full block width, compact lines */
.article-body .art-sec pre { font-size: .84rem; line-height: 1.55; }
.article-body .art-sec pre code { font-size: inherit; line-height: inherit; }

.article-body .art-sec ul { list-style: none; padding-left: 0; }
.article-body .art-sec ul li { position: relative; padding-left: 22px; }
.article-body .art-sec ul li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .72em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--purple-2);
}

.art-note { background: rgba(168, 85, 247, .08); }

/* ---- article page: hero, two columns (text + sticky table of contents), depth ---- */
.art-hero,
.art-layout { max-width: 1180px; margin-left: auto; margin-right: auto; }
.crumbs:has(+ .art-hero) { max-width: 1180px; margin-left: auto; margin-right: auto; }

.art-hero {
    position: relative;
    padding: clamp(22px, 3vw, 40px) clamp(18px, 3vw, 44px);
    border: 1px solid var(--line);
    border-radius: 14px;
    background:
        radial-gradient(60% 140% at 100% 0%, rgba(56, 189, 248, .10), transparent 60%),
        radial-gradient(70% 160% at 0% 0%, rgba(168, 85, 247, .22), transparent 65%),
        var(--bg-2);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
    overflow: hidden;
}
.art-hero h1 { max-width: 900px; margin: 6px 0 0; }
.art-hero .svc-lead { max-width: 760px; margin: 14px 0 0; font-size: 1.2rem; line-height: 1.6; }

.art-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 3vw, 40px);
    margin-top: clamp(18px, 2.4vw, 28px);
}
@media (min-width: 1100px) {
    .art-layout { grid-template-columns: minmax(0, 1fr) 270px; }
}

.article-body { margin-top: 0; }
.art-layout .svc-cta { margin-top: 18px; }

.art-sec {
    background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
    box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
    margin-bottom: 16px;
    padding: clamp(18px, 2.2vw, 28px) clamp(18px, 2.6vw, 32px);
}
.art-note {
    background:
        radial-gradient(90% 140% at 0% 0%, rgba(168, 85, 247, .18), transparent 70%),
        var(--bg-2);
}

.art-num {
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, var(--purple), var(--purple-deep));
    color: #fff;
    box-shadow: 0 4px 14px rgba(168, 85, 247, .35);
}

/* table of contents (wide screens only) */
.art-aside { display: none; }
@media (min-width: 1100px) {
    .art-aside { display: block; }
    .art-toc { position: sticky; top: 92px; }
}
.art-toc {
    padding: 18px 18px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-2);
}
.art-toc-h {
    font-family: var(--mono);
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 10px;
}
.art-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.art-toc a {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 6px 8px;
    border-radius: 6px;
    color: var(--text);
    font-size: .92rem;
    line-height: 1.35;
    text-decoration: none;
}
.art-toc a:hover { background: rgba(168, 85, 247, .12); color: var(--heading); }
.art-toc b { font-family: var(--mono); font-size: .8rem; color: var(--purple-2); min-width: 12px; }

/* code: editor-style block, always dark, coloured syntax */
.code {
    margin: 14px 0 16px;
    border-radius: 10px;
    overflow: hidden;
    background: #0f0b18;
    border: 1px solid #2c2140;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}
.code-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    background: #17112a;
    border-bottom: 1px solid #2c2140;
}
.code-bar span { width: 10px; height: 10px; border-radius: 50%; background: #3a2f52; }
.code-bar span:nth-child(1) { background: #f43f5e; }
.code-bar span:nth-child(2) { background: #eab308; }
.code-bar span:nth-child(3) { background: #22c55e; }
.code-bar em {
    margin-left: 8px;
    font-style: normal;
    font-family: var(--mono);
    font-size: .74rem;
    color: #a59cbd;
}
.code-copy {
    margin-left: auto;
    padding: 3px 10px;
    border: 1px solid #3a2f52;
    border-radius: 6px;
    background: transparent;
    color: #c9c1dc;
    font-family: var(--mono);
    font-size: .72rem;
    cursor: pointer;
}
.code-copy:hover { background: rgba(168, 85, 247, .18); color: #fff; }
.article-body .code pre,
.article-body .art-sec .code pre {
    margin: 0;
    padding: 16px 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #e9e4f5;
}
.code .c-key { color: #c084fc; }
.code .c-str { color: #86efac; }
.code .c-num { color: #fda4af; }
.code .c-fn { color: #7dd3fc; }
.code .c-cls { color: #fde68a; }
.code .c-hi { color: #f0abfc; }
.code .c-arg { color: #fdba74; }
.code .c-mute { color: #7c7396; font-style: italic; }

/* light theme: softer shadows (the code block stays dark) */
:root[data-theme="light"] .art-hero { box-shadow: 0 18px 50px rgba(76, 29, 149, .12); }
:root[data-theme="light"] .art-sec { box-shadow: 0 8px 24px rgba(76, 29, 149, .08); }
:root[data-theme="light"] .code { box-shadow: 0 12px 30px rgba(76, 29, 149, .18); }

/* footer: five columns on wide screens */
@media (min-width: 1201px) {
    .footer-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
}

/* About: explainer under the text (left), the image fills the right column's height -> no empty space */
#about .two-col { align-items: stretch; }
#about .purple-explainer { margin-top: 22px; }
#about .about-side { display: flex; flex-direction: column; }
#about .about-side .media {
    flex: 1;
    aspect-ratio: auto;
    min-height: 300px;
    margin: 0;
}
#about .about-side .media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* training banner (people photo): keep faces in frame when the banner is very wide */
#training .media-wide img { object-position: 50% 28%; }

/* company name links to the company site (footer, signature): quiet, underlined on hover */
.footer-inner p a,
.signature em a {
    color: inherit;
    font-size: inherit;
    margin: 0;
    text-decoration: underline;
    text-decoration-color: var(--line);
    text-underline-offset: 3px;
}
.footer-inner p a:hover,
.signature em a:hover { color: var(--purple-2); text-decoration-color: currentColor; }