:root {
  color-scheme: dark;
  --bg: #090f1c;
  --surface: #101a2b;
  --text: #eef4fb;
  --muted: #a6b4c8;
  --cyan: #65ead4;
  --line: #263244;
  --header-height: 84px;
  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--font);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 18px); }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 1rem; line-height: 1.65; overflow-wrap: anywhere; }
::selection { background: var(--cyan); color: var(--bg); }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button, select { cursor: pointer; }
button:disabled, input:disabled, select:disabled { cursor: default; }
button { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
.light-demo :focus-visible { outline-color: #075bb4; }
h1, h2, h3, h4, h5, p, figure, dl, dd { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
ul { margin: 0; padding: 0; list-style: none; }
button { border: 0; }
strong { font-weight: 650; }
.shell { width: min(100% - 64px, 1200px); margin-inline: auto; }
.section { padding-block: 92px; border-top: 1px solid var(--line); }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 18px; background: var(--cyan); color: var(--bg); transform: translateY(-180%); border-radius: 6px; }
.skip-link:focus { transform: none; }
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(9,15,28,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; min-height: 84px; padding-block: 12px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: .875rem; font-weight: 700; white-space: nowrap; }
.brand-mark { color: var(--text); font-size: 1.9rem; letter-spacing: -.1em; font-weight: 800; }
.brand-mark span { color: var(--cyan); }
.site-header nav { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.site-header nav a { padding: 10px 11px; border-radius: 6px; color: #b5c1d2; font-size: .875rem; line-height: 1.5; transition: background .18s, color .18s; }
.site-header nav a:hover, .site-header nav a[aria-current] { color: var(--cyan); background: #142937; }
.header-contact { font-size: .875rem; font-weight: 600; white-space: nowrap; }
.header-contact span { margin-left: 9px; color: var(--cyan); }
.eyebrow, .tiny-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .13em; font-weight: 650; color: var(--muted); }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.small-line { width: 24px; height: 2px; background: var(--cyan); }
.hero { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,1fr); align-items: center; gap: 54px; padding-block: 92px 88px; }
.hero-copy, .preview-heading > div { min-width: 0; }
h1 { font-size: clamp(2.7rem, 4.6vw, 4.25rem); line-height: 1.1; letter-spacing: -.06em; font-weight: 750; max-width: 16ch; }
h1 > span { color: var(--cyan); }
.hero-intro { margin-top: 26px; color: var(--muted); max-width: 530px; font-size: 1.0625rem; }
.hero-intro strong { color: var(--text); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; padding: 13px 20px; min-height: 48px; border-radius: 7px; font-size: .9375rem; font-weight: 650; border: 1px solid transparent; line-height: 1.5; transition: background .18s, border-color .18s, transform .18s; }
.button:hover { transform: translateY(-2px); }
.button.primary { background: var(--cyan); color: #092327; }
.button.primary:hover { background: #a0f6e7; }
.button.secondary { border-color: #364258; }
.button.secondary:hover { background: #152237; border-color: #678094; }
.hero-footnote { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 30px; color: #93a5bd; font-size: .75rem; }
.hero-footnote span + span { position: relative; padding-left: 17px; }
.hero-footnote span + span::before { content: "/"; position: absolute; left: 0; color: #496175; }
.hero-visual { min-width: 0; position: relative; padding-bottom: 56px; }
.overview-preview { background: #eef2f7; color: #17273a; border-radius: 12px; overflow: hidden; box-shadow: 0 28px 90px #0006; border: 1px solid #3d4f64; }
.preview-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 15px 18px; background: #f8fafc; border-bottom: 1px solid #d6dee9; font-size: .875rem; font-weight: 600; }
.mini-brand { font-size: 1.15rem; font-weight: 800; letter-spacing: -.08em; }
.demo-badge { display: inline-flex; align-items: center; border: 1px solid #54637b; border-radius: 5px; padding: 3px 7px; font-size: .75rem; white-space: nowrap; font-weight: 500; letter-spacing: 0; color: #cad5e4; }
.preview-top .demo-badge { margin-left: auto; color: #516478; border-color: #c8d3e1; }
.preview-body { padding: 25px; }
.preview-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.preview-heading h2 { font-size: 1.25rem; letter-spacing: -.03em; margin-top: 3px; }
.preview-body .tiny-label { color: #5c6d80; font-size: .75rem; letter-spacing: .03em; text-transform: none; }
.month-label { color: #5a6c82; font-size: .75rem; border: 1px solid #ccd6e3; padding: 4px 8px; border-radius: 4px; }
.preview-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 25px; }
.preview-metrics div { background: #fff; border: 1px solid #dce3ec; border-radius: 6px; padding: 12px; }
.preview-metrics span { display: block; font-size: .75rem; color: #607186; }
.preview-metrics strong { font-size: clamp(1rem, 2vw, 1.6rem); letter-spacing: -.04em; }
.hero-chart { height: 160px; margin-top: 22px; display: grid; grid-template-columns: repeat(6,1fr); gap: 18px; border-bottom: 1px solid #cdd8e5; background: repeating-linear-gradient(to top,transparent 0,transparent 38px,#dae2ec 39px,transparent 40px); }
.hero-chart > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 0; gap: 6px; }
.hero-chart i { display: block; flex: none; width: 100%; max-width: 34px; height: calc(var(--bar) * .76); background: #77949d; border-radius: 4px 4px 0 0; }
.hero-chart .latest i { background: #0c8d79; }
.hero-chart span { color: #546779; font-size: .75rem; background: #eef2f7; width: 100%; text-align: center; }
.preview-task { display: flex; align-items: center; gap: 9px; margin-top: 20px; color: #4b6175; font-size: .75rem; }
.check-icon { color: #087762; font-weight: 700; }
.automation-note { position: relative; margin: -8px 18px 0 auto; width: fit-content; max-width: calc(100% - 24px); display: flex; gap: 14px; align-items: center; padding: 16px 21px; background: #102a32; border: 1px solid #2b706d; border-radius: 8px; box-shadow: 0 14px 35px #0005; }
.note-icon { font-size: 1.7rem; color: var(--cyan); }
.automation-note .tiny-label { color: #a6d4cd; font-size: .75rem; letter-spacing: .06em; }
.automation-note p { font-size: .875rem; margin-top: 3px; }
.automation-note p span { color: var(--cyan); padding-inline: 2px; }
.visual-caption { position: absolute; bottom: 10px; right: 0; color: var(--muted); font-size: .75rem; }
.visual-caption:hover { color: var(--cyan); }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 40px; }
h2 { font-size: clamp(1.95rem, 3.2vw, 2.9rem); font-weight: 700; line-height: 1.18; letter-spacing: -.045em; }
.section-heading .eyebrow { margin-bottom: 16px; }
.section-heading > p { max-width: 280px; color: var(--muted); font-size: 1rem; }
.services-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.service { position: relative; padding: 34px; background: linear-gradient(130deg,#111f31,#0d1625); }
.service + .service { border-left: 1px solid var(--line); }
.service-icon { position: absolute; top: 25px; right: 30px; font-family: ui-monospace,monospace; font-size: 1.2rem; color: var(--cyan); }
.service h3 { font-size: 1.6rem; line-height: 1.3; letter-spacing: -.035em; margin-top: 25px; }
.service > p { margin-top: 16px; color: var(--muted); max-width: 430px; }
.inline-list { display: flex; flex-wrap: wrap; gap: 14px; color: #c3d1e4; margin-top: 24px; font-size: .875rem; }
.inline-list li { padding-bottom: 5px; border-bottom: 1px solid #3c5867; }
.method { margin-top: 34px; }
.method > h3 { font-size: 1rem; margin-bottom: 20px; }
.method ol { padding: 0; margin: 0; list-style: none; display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.method li { display: flex; gap: 14px; }
.method li > span { color: var(--cyan); font: .8125rem/1.9 ui-monospace,monospace; }
.method p { font-size: .875rem; color: var(--muted); margin-top: 4px; }
.collaboration-note { max-width: 850px; margin-top: 30px; color: var(--muted); font-size: .9375rem; padding-left: 18px; border-left: 2px solid #375e69; }
.projects .section-heading { margin-bottom: 52px; }
.case-study { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: center; margin-bottom: 88px; }
.case-copy { min-width: 0; }
.project-category { display: flex; gap: 12px; align-items: baseline; color: var(--muted); font-size: .8125rem; margin-bottom: 22px; }
.project-category > span { color: var(--cyan); font-family: ui-monospace,monospace; }
.case-copy h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.16; letter-spacing: -.045em; }
.case-intro { margin-top: 20px; color: #c5d1e1; }
.case-facts { margin-top: 25px; }
.case-facts > div + div { margin-top: 20px; }
.case-facts dt { color: var(--text); font-size: .875rem; font-weight: 650; margin-bottom: 5px; }
.case-facts dd { color: var(--muted); font-size: .9375rem; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.tags li { border: 1px solid #35465c; padding: 3px 9px; border-radius: 5px; color: #b8cadd; font-size: .75rem; }
.demo-hint { margin-top: 28px; font-size: .875rem; color: var(--cyan); }
.demo-hint span { margin-right: 7px; }
.light-demo { color-scheme: light; color: #1c2b3d; background: #f4f6fa; border: 1px solid #526277; border-radius: 12px; min-width: 0; box-shadow: 0 20px 45px #0003; }
.demo-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 9px; border-bottom: 1px solid #29374b; padding: 14px 18px; font-size: .875rem; }
.light-demo .demo-toolbar { border-color: #dce3ec; }
.light-demo .demo-badge { color: #526477; border-color: #c8d4e3; }
.demo-brand { font-weight: 650; }
.demo-brand > span { color: #12796d; margin-right: 5px; }
.dashboard-body { padding: 24px; }
.dashboard-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.dashboard-heading .tiny-label { color: #5d6f84; letter-spacing: 0; text-transform: none; }
.dashboard-heading h4 { font-size: 1.6rem; letter-spacing: -.04em; margin-top: 2px; line-height: 1.2; }
.period-control { font-size: .75rem; color: #526375; max-width: 100%; }
.period-control select { display: block; max-width: 100%; color: #253c52; border: 1px solid #bccadd; background: #fff; border-radius: 5px; min-height: 44px; padding: 8px; font-size: .875rem; margin-top: 3px; }
.dashboard-kpis { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-block: 24px; }
.dashboard-kpis > div { background: #fff; border: 1px solid #dce4ee; border-radius: 6px; padding: 12px; }
.dashboard-kpis span { display: block; font-size: .75rem; color: #556b80; }
.dashboard-kpis strong { display: block; font-size: clamp(1rem, 2.1vw, 1.7rem); font-variant-numeric: tabular-nums; line-height: 1.6; letter-spacing: -.035em; overflow-wrap: anywhere; }
.chart-heading { display: flex; justify-content: space-between; gap: 8px; }
.chart-heading h5 { font-size: .875rem; font-weight: 650; }
.chart-heading > span { color: #596c81; font-size: .75rem; }
.revenue-chart { display: flex; gap: 12px; margin-block: 14px 22px; height: 180px; padding-top: 14px; background: repeating-linear-gradient(to top,transparent 0,transparent 40px,#dce4ed 41px,transparent 42px); }
.chart-column { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; font-variant-numeric: tabular-nums; }
.chart-column > span, .chart-column > small { font-size: .75rem; color: #466075; }
.chart-column i { flex: none; width: 65%; max-width: 40px; height: calc(var(--bar) * .65); background: #228a7a; border-radius: 4px 4px 0 0; transition: height .25s ease; }
.chart-column:last-child i { background: #146c60; }
.chart-column small { background: #f4f6fa; width: 100%; text-align: center; }
.sales-table { width: 100%; border-collapse: collapse; font-size: .875rem; font-variant-numeric: tabular-nums; }
.sales-table caption { text-align: left; font-weight: 650; margin-bottom: 7px; }
.sales-table th, .sales-table td { padding: 7px 3px; border-bottom: 1px solid #dce4ed; text-align: right; }
.sales-table th:first-child { text-align: left; font-weight: 500; }
.sales-table thead th { color: #566c83; font-weight: 500; font-size: .75rem; }
.demo-disclaimer { font-size: .75rem; margin-top: 16px; line-height: 1.55; color: #617083; }
.bot-case { grid-template-columns: 1.15fr .85fr; }
.bot-demo { min-width: 0; background: #0c1925; border: 1px solid #345565; border-radius: 12px; overflow: hidden; }
.terminal-label { font-family: ui-monospace,monospace; color: #c0e2e5; font-size: .8125rem; }
.terminal-label span { color: var(--cyan); margin-right: 5px; }
.bot-body { padding: 22px; }
.bot-flow { padding: 0; display: grid; grid-template-columns: repeat(3,1fr); list-style: none; margin: 0 0 24px; border: 1px solid #2f475b; border-radius: 5px; overflow: hidden; }
.bot-flow li { padding: 10px; font-size: .8125rem; color: #b4c9d5; }
.bot-flow li + li { border-left: 1px solid #2f475b; }
.bot-flow span { display: block; font: .75rem ui-monospace,monospace; color: var(--cyan); margin-bottom: 2px; }
.filter-heading { display: flex; justify-content: space-between; align-items: center; font-size: .875rem; }
.filter-heading output { font-weight: 700; color: var(--cyan); font-size: 1.2rem; font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; margin: 6px 0; min-height: 44px; accent-color: var(--cyan); cursor: pointer; }
.match-count { color: #a9c5cc; font-size: .8125rem; margin-bottom: 10px; }
.listing-list { border-top: 1px solid #2a4053; }
.listing-list li { display: grid; grid-template-columns: 28px minmax(0,1fr) auto auto; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid #2a4053; }
.listing-token { display: grid; place-items: center; width: 28px; height: 34px; background: #15343b; color: #8cd9ca; border: 1px solid #32565d; border-radius: 4px; font: .75rem ui-monospace,monospace; }
.listing-list strong { font-size: .875rem; line-height: 1.4; display: block; }
.listing-list div > span { display: block; color: #91a8bc; font-size: .75rem; margin-top: 2px; }
.listing-list b { font-size: .875rem; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.match-status { font-size: .75rem; color: #8de9cc; }
.listing-list .excluded .match-status { color: #adb8c8; }
.listing-list .excluded strong { color: #94a5b6; }
.listing-list .excluded .listing-token { background: #172432; color: #9dacbd; border-color: #364555; }
.bot-button { background: #1c3b40; border-color: #3b716e; width: 100%; margin-top: 18px; color: #baf7e9; }
.bot-button:hover { background: #234b4b; }
.notification { margin-top: 15px; border-left: 2px solid #4b8885; padding: 10px 14px; background: #122731; min-height: 88px; }
.notification .tiny-label { color: #88bbb6; font-size: .75rem; letter-spacing: .07em; }
.notification p { font-size: .875rem; margin-top: 4px; color: #c4dce0; }
.bot-demo .demo-disclaimer { color: #8fa7bd; }
.lab-heading { display: flex; align-items: center; gap: 24px; border-top: 1px solid var(--line); padding-top: 36px; margin-bottom: 28px; }
.lab-heading .eyebrow { margin: 0; color: var(--cyan); white-space: nowrap; }
.lab-heading > p { font-size: .9375rem; color: var(--muted); }
.lab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.lab-card { min-width: 0; background: #101927; border: 1px solid var(--line); border-radius: 10px; padding: 30px; display: flex; flex-direction: column; }
.lab-card h3 { font-size: 1.85rem; line-height: 1.2; letter-spacing: -.035em; }
.lab-card > p:not(.project-category) { color: var(--muted); font-size: .9375rem; margin-top: 18px; }
.booking-demo, .recipe-demo { padding: 18px; background: #0a1422; border: 1px solid #2d3c52; border-radius: 7px; margin-top: 24px; }
.demo-label { font-size: .75rem; color: #a3b9d1; margin-bottom: 16px; }
.step-buttons { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
.step-buttons button { padding: 9px 4px; min-height: 44px; border-radius: 4px; background: #17283c; color: #b6c9df; font-size: .8125rem; border: 1px solid #304761; }
.step-buttons button[aria-pressed="true"] { color: #e0f2ff; background: #20496d; border-color: #78b9ea; }
.system-diagram { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-block: 26px; }
.client-stack { display: grid; gap: 8px; }
.diagram-node { display: block; padding: 8px; border: 1px solid #3b526f; border-radius: 5px; font-size: .8125rem; text-align: center; color: #b8c9da; }
.diagram-node.active { border-color: #80c6ef; color: #dbf3ff; background: #143c54; }
.diagram-node.conflict { border-color: #e8b969; color: #ffdcad; background: #413626; }
.diagram-node.small, .diagram-node small { font-size: .75rem; color: #b7cee6; }
.diagram-connector { color: #6d9fc4; }
.booking-explanation, .recipe-explanation { min-height: 138px; border-top: 1px solid #2f4056; padding-top: 15px; }
.booking-explanation strong, .recipe-explanation strong { font-size: .875rem; color: #d0e6f8; }
.booking-explanation p, .recipe-explanation p { font-size: .875rem; color: #a6bbd1; margin-top: 6px; }
.recipe-demo { background: #19172b; border-color: #41375d; }
.recipe-tree { display: flex; flex-direction: column; align-items: center; padding-block: 6px 14px; }
.recipe-tree button { min-height: 44px; background: #27213c; border: 1px solid #594a7b; color: #dbcdef; padding: 8px 13px; border-radius: 5px; font-size: .8125rem; position: relative; }
.recipe-tree button[aria-pressed="true"] { background: #463160; border-color: #b59ae6; color: #faf0ff; }
.recipe-tree button:hover { border-color: #bca5eb; }
.recipe-root span { margin-right: 8px; }
.recipe-children { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; padding-top: 22px; position: relative; margin-top: 14px; width: 100%; }
.recipe-children::before { content: ""; position: absolute; width: 55%; top: 0; border-top: 1px solid #70578d; }
.recipe-children::after { content: ""; position: absolute; height: 14px; top: -14px; left: 50%; border-left: 1px solid #70578d; }
.recipe-children button::before { content: ""; position: absolute; height: 22px; top: -23px; left: 50%; border-left: 1px solid #70578d; }
.recipe-tree .visitor-button { margin-top: 15px; background: transparent; border-style: dashed; font-size: .8125rem; }
.recipe-explanation { border-color: #49395f; }
.recipe-explanation strong { color: #e0cfee; }
.recipe-explanation p { color: #c0afd2; }
.lab-card .learning { margin-bottom: auto; }
.learning strong { display: block; color: var(--text); margin-bottom: 4px; font-size: .875rem; }
.projects-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); margin-top: 36px; padding-top: 26px; color: var(--muted); font-size: .9375rem; }
.text-link { color: var(--cyan); font-size: .9375rem; font-weight: 600; }
.text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.text-link > span { margin-left: 8px; }
.profile { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.muted { color: #8a9db5; }
.profile-copy > p { color: var(--muted); margin-bottom: 20px; }
.profile-copy .large-copy { color: var(--text); font-size: 1.3rem; line-height: 1.5; letter-spacing: -.025em; }
.profile-stack { grid-column: 1 / -1; min-width: 0; border-top: 1px solid var(--line); padding-top: 36px; }
.stack-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: 28px; }
.stack-heading h3 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.035em; }
.stack-heading > p { max-width: 380px; color: var(--muted); font-size: .9375rem; }
.stack-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.stack-group { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: #0e1727; }
.stack-group h4 { margin: 0 0 20px; color: #a8bad0; font-size: .8125rem; font-weight: 600; letter-spacing: .04em; }
.stack-list { display: grid; gap: 18px; list-style: none; margin: 0; padding: 0; }
.stack-list li { display: flex; align-items: center; gap: 14px; min-width: 0; }
.stack-icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px; background: #172337; color: #8bc4f5; }
.stack-icon svg { display: block; width: 29px; height: 29px; }
.stack-icon--assembly { color: #bdabf6; }
.stack-icon--mysql { color: #79bfd8; }
.stack-icon--n8n { color: #ff8daf; }
.stack-name { min-width: 0; font-size: 1rem; font-weight: 600; }
.stack-learning { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: #ffad66; font-size: .75rem; font-weight: 400; }
.stack-learning::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.journey-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
.journey-grid article { border-top: 1px solid #43516a; padding-top: 20px; }
.journey-number { color: var(--cyan); font: .8125rem ui-monospace,monospace; }
.journey-grid h3 { font-size: 1.25rem; margin-top: 18px; }
.journey-grid p { color: var(--muted); font-size: .9375rem; margin-top: 10px; }
.journey-proof { display: block; color: #91a8bc; font-size: .8125rem; margin-top: 18px; }
.contact-section { padding: 64px 48px; margin-bottom: 65px; background: linear-gradient(110deg,#102d36,#122030); border: 1px solid #2d5461; border-radius: 12px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 55px; align-items: center; }
.contact-main h2 { font-size: clamp(1.85rem, 3vw, 2.65rem); }
.contact-main h2 span { color: var(--cyan); }
.contact-main > p:not(.eyebrow) { margin-top: 18px; color: #afc4d2; max-width: 440px; }
.contact-main .button { margin-top: 28px; }
.contact-form { margin-top: 28px; min-width: 0; }
.contact-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.contact-form label { display: grid; gap: 8px; margin-bottom: 18px; font-size: .875rem; font-weight: 600; }
.contact-form input, .contact-form textarea { box-sizing: border-box; width: 100%; min-width: 0; padding: 13px 14px; border: 1px solid #526878; border-radius: 8px; background: #0c1b29; color: var(--text); font: inherit; font-weight: 400; }
.contact-form textarea { resize: vertical; min-height: 140px; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #a6b8c8; opacity: 1; }
.contact-form textarea:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
.contact-form .button { margin-top: 18px; }
.contact-form .button:disabled { opacity: .55; cursor: not-allowed; }
.form-hint, .form-status { font-size: .8125rem; line-height: 1.6; color: #b6cbd8; }
.form-status { margin-top: 14px; }
.form-status[data-state="error"] { color: #ffb698; }
.form-status[data-state="success"] { color: var(--cyan); }
@media (max-width: 600px) { .contact-fields { grid-template-columns: 1fr; gap: 0; } }
.contact-detail { min-width: 0; padding-left: 28px; border-left: 1px solid #35525f; }
.email-address { display: block; font-size: clamp(1rem, 1.7vw, 1.35rem); letter-spacing: -.03em; font-weight: 600; margin-top: 12px; overflow-wrap: anywhere; }
.copy-button { display: inline-flex; align-items: center; gap: 14px; padding: 10px 0; min-height: 44px; font-size: .875rem; background: transparent; color: #a9d9d3; }
.copy-button:hover { color: #ecfffb; }
#copy-status { font-size: .8125rem; min-height: 26px; color: #beddd6; margin-bottom: 16px; }
footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; padding-bottom: 30px; color: #98a9be; font-size: .8125rem; }
footer a { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; }
.notice { padding: 16px; border: 1px solid #48656d; border-radius: 6px; margin-bottom: 24px; color: var(--muted); }
@media (max-width: 1100px) {
  .header-contact { display: none; }
  .hero { gap: 32px; }
  .case-study { gap: 36px; }
  .contact-section { gap: 28px; padding-inline: 32px; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 60px; }
  h1 { font-size: clamp(2.5rem, 6.8vw, 4rem); max-width: 20ch; }
  .hero-copy { max-width: 650px; }
  .hero-intro { max-width: 600px; }
  .hero-visual { width: min(100%, 590px); margin: 8px auto 0; }
  .hero { padding-bottom: 52px; }
  .section { padding-block: 68px; }
  .header-inner { gap: 12px; }
  .brand { gap: 7px; }
  .site-header nav a { padding-inline: 8px; }
  .case-study, .bot-case { grid-template-columns: 1fr; gap: 28px; }
  .bot-case .case-copy { order: -1; }
  .case-copy { max-width: 650px; }
  .dashboard-demo, .bot-demo { width: 100%; }
  .dashboard-kpis strong { font-size: 1.6rem; }
  .lab-grid { grid-template-columns: 1fr; }
  .lab-card { padding: 28px; }
  .booking-explanation, .recipe-explanation { min-height: 100px; }
  .system-diagram { justify-content: center; gap: 24px; }
  .diagram-node { padding: 12px 20px; }
  .profile { gap: 32px; }
  .contact-section { grid-template-columns: 1fr; padding: 36px; }
  .contact-detail { padding: 24px 0 0; border-left: 0; border-top: 1px solid #35525f; }
}
@media (max-width: 760px) {
  :root { --header-height: 144px; }
  .shell { width: calc(100% - 40px); }
  .header-inner { display: block; padding-top: 6px; padding-bottom: 6px; min-height: 0; }
  .brand { display: flex; justify-content: center; height: 42px; font-size: .8125rem; }
  .brand-mark { font-size: 1.55rem; }
  .site-header nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2px 4px; }
  .site-header nav a { text-align: center; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 3px; font-size: .875rem; }
  .hero { padding-top: 38px; }
  .eyebrow { font-size: .75rem; letter-spacing: .085em; margin-bottom: 18px; }
  .section-heading { display: block; }
  .section-heading > p { max-width: 450px; margin-top: 18px; }
  .services-grid { grid-template-columns: 1fr; }
  .service { padding: 28px; }
  .service + .service { border-left: 0; border-top: 1px solid var(--line); }
  .method ol { grid-template-columns: 1fr; gap: 20px; }
  .profile, .journey-grid { grid-template-columns: 1fr; }
  .journey-grid { gap: 28px; }
  .case-study { margin-bottom: 60px; }
  .lab-heading { display: block; }
  .lab-heading > p { margin-top: 12px; }
  .projects-footer { align-items: flex-start; }
  .projects-footer .text-link { white-space: nowrap; }
  .contact-section { width: calc(100% - 40px); margin-bottom: 38px; }
}
.nav-toggle { display: none; }
@media (max-width: 900px) {
  .site-header.menu-ready .header-inner { display: flex; flex-wrap: wrap; min-height: 68px; padding-block: 10px; gap: 8px 16px; }
  .site-header.menu-ready .brand { justify-content: flex-start; height: auto; }
  .site-header.menu-ready .nav-toggle { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: #142337; font: inherit; cursor: pointer; }
  .nav-toggle-icon { font-size: 1.2rem; line-height: 1; }
  .site-header.menu-ready nav { display: none; width: 100%; max-height: 65vh; overflow-y: auto; }
  .site-header.menu-ready.menu-open nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
  .site-header.menu-ready nav a { display: flex; align-items: center; justify-content: flex-start; min-height: 44px; padding: 10px 12px; }
  .site-header.menu-ready .header-contact { display: none; }
}
@media (max-width: 440px) {
  .shell { width: calc(100% - 32px); }
  .hero { gap: 30px; }
  h1 { font-size: 2.5rem; line-height: 1.12; letter-spacing: -.05em; }
  .hero-intro { font-size: 1rem; margin-top: 22px; }
  .actions { gap: 10px; }
  .actions .button { padding-inline: 14px; font-size: .875rem; gap: 8px; }
  .hero-footnote { gap: 6px 12px; margin-top: 23px; }
  .hero-footnote span + span { padding-left: 12px; }
  .preview-top { gap: 6px; padding: 12px; font-size: .75rem; }
  .preview-top .mini-brand { font-size: 1rem; }
  .preview-top .demo-badge { padding: 2px 5px; }
  .preview-body { padding: 18px 14px; }
  .preview-heading { align-items: flex-start; }
  .preview-heading h2 { font-size: 1.12rem; }
  .month-label { display: none; }
  .preview-metrics { gap: 6px; margin-top: 18px; }
  .preview-metrics div { padding: 8px; }
  .preview-metrics strong { font-size: 1.12rem; }
  .hero-chart { height: 120px; gap: 16px; }
  .automation-note { padding: 11px 14px; margin-right: 10px; gap: 9px; }
  .automation-note p { font-size: .8125rem; }
  .visual-caption { left: 0; right: auto; max-width: 100%; font-size: .75rem; bottom: 5px; }
  .service { padding: 24px; }
  .service h3 { font-size: 1.4rem; }
  .section { padding-block: 54px; }
  .demo-toolbar { padding: 12px; font-size: .8125rem; }
  .dashboard-body { padding: 16px 12px; }
  .dashboard-heading h4 { font-size: 1.25rem; }
  .dashboard-heading { align-items: flex-start; }
  .dashboard-heading .tiny-label { display: block; max-width: 115px; }
  .period-control { min-width: 0; }
  .period-control select { max-width: 100%; padding-inline: 5px; font-size: .8125rem; }
  .dashboard-kpis { gap: 6px; margin-block: 20px; }
  .dashboard-kpis > div { padding: 9px 6px; }
  .dashboard-kpis strong { font-size: 1.15rem; }
  .revenue-chart { gap: 6px; height: 160px; }
  .chart-column i { width: 75%; }
  .sales-table { font-size: .8125rem; }
  .bot-body { padding: 16px 12px; }
  .terminal-label { font-size: .75rem; }
  .listing-list li { grid-template-columns: minmax(0,1fr) auto; gap: 2px 12px; padding-block: 11px; }
  .listing-token { display: none; }
  .listing-list b { grid-column: 2; grid-row: auto; }
  .listing-list .match-status { grid-column: 1 / -1; }
  .notification { min-height: 100px; }
  .lab-card { padding: 22px 16px; }
  .lab-card h3 { font-size: 1.65rem; }
  .booking-demo, .recipe-demo { padding: 14px 10px; }
  .step-buttons button { font-size: .75rem; }
  .system-diagram { gap: 5px; justify-content: space-between; }
  .diagram-node { padding: 8px 6px; font-size: .75rem; }
  .archive-node { padding-inline: 5px; }
  .recipe-children { gap: 12px; }
  .recipe-tree button { padding-inline: 10px; font-size: .8125rem; }
  .contact-section { width: calc(100% - 32px); padding: 30px 22px; }
  .email-address { font-size: 1.05rem; }
  .projects-footer { display: block; }
  .projects-footer .text-link { display: inline-block; margin-top: 12px; }
  footer { font-size: .75rem; gap: 4px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Project previews are code-native illustrations with synthetic data. */
.carousel-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; color: var(--muted); font-size: .875rem; }
.carousel-controls[hidden] { display: none; }
.carousel-controls > div { display: flex; gap: 8px; }
.carousel-controls button { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; min-width: 44px; min-height: 44px; padding: 8px 14px; }
.carousel-controls button:hover { border-color: var(--cyan); }
.project-viewport { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #496175 var(--bg); padding: 4px 4px 20px; touch-action: pan-x pan-y; cursor: grab; }
.project-viewport.dragging { cursor: grabbing; user-select: none; }
.project-track { display: flex; gap: 24px; }
.project-slide { flex: 0 0 390px; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.project-preview { height: 270px; padding: 20px; background: #e8eff5; color: #172d3e; overflow: hidden; }
.mini-window { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: .75rem; font-weight: 650; margin-bottom: 22px; }
.preview-label { font-size: .625rem; color: #31575d; background: #cde7e2; padding: 3px 7px; border-radius: 5px; font-weight: 500; }
.mini-table { border-collapse: collapse; width: 100%; font-size: .75rem; }
.mini-table caption { text-align: left; font-weight: 700; margin-bottom: 12px; }
.mini-table th, .mini-table td { text-align: left; border-bottom: 1px solid #c4d1dd; padding: 10px 4px; }
.mini-table td span { color: #126757; }
.mini-kpis { display: flex; justify-content: space-between; font-size: .7rem; gap: 10px; }
.mini-kpis strong { display: block; font-size: 1.15rem; }
.mini-bars { height: 135px; display: flex; align-items: flex-end; gap: 18px; padding-bottom: 22px; margin-top: 12px; border-bottom: 1px solid #bccbd7; }
.mini-bars i { height: var(--height); flex: 1; background: #178c7b; border-radius: 4px 4px 0 0; position: relative; font-size: .65rem; font-style: normal; color: transparent; }
.mini-bars i::after { content: ''; }
.mini-map { position: relative; height: 192px; background: repeating-linear-gradient(0deg,transparent 0 32px,#cddbcf 33px 35px),repeating-linear-gradient(90deg,#dce8da 0 44px,#cddbcf 45px 47px); border-radius: 8px; overflow: hidden; }
.map-street { position: absolute; width: 130%; height: 12px; background: #faf8ef; transform: rotate(-25deg); left: -15%; }
.street-a { top: 40px; }.street-b { top: 130px; transform: rotate(30deg); }
.map-river { position: absolute; width: 30px; height: 140%; background: #a4cfde; left: 60%; top: -20%; transform: rotate(-20deg); }
.map-pin { position: absolute; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #173e52; color: white; width: 32px; height: 32px; display: grid; place-items: center; font-size: .65rem; }
.pin-a { left: 20%; top: 30px; }.pin-b { left: 48%; top: 90px; }.pin-c { left: 78%; top: 40px; }
.map-caption { position: absolute; bottom: 10px; left: 10px; padding: 4px 8px; background: #fff; border-radius: 4px; font-size: .7rem; }
.mini-chat { display: grid; gap: 8px; font-size: .625rem; }
.mini-chat p { padding: 7px 10px; border-radius: 8px; background: white; width: 90%; }
.mini-chat p + p { margin-left: auto; background: #cce8df; }
.mini-chat span { display: block; font-size: .75rem; }
.mini-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 0; margin: 12px 0 0; list-style: none; counter-reset: flow; }
.mini-flow li { font-size: .65rem; border: 1px solid #abc4ce; padding: 5px 7px; border-radius: 5px; counter-increment: flow; }
.mini-flow li::before { content: counter(flow) ' → '; color: #08725e; }
.project-slide-copy { padding: 24px; }
.project-slide-copy .project-category { font-size: .7rem; margin-bottom: 10px; }
.project-slide-copy h3 { font-size: 1.5rem; letter-spacing: -.03em; line-height: 1.25; margin-bottom: 14px; }
.project-slide-copy > p:not(.project-category) { color: var(--muted); font-size: .9375rem; min-height: 100px; }
.project-slide-copy .text-link { display: inline-block; margin-top: 18px; }
.project-details { margin-top: 32px; }
.project-detail { border-bottom: 1px solid var(--line); }
.project-detail summary { padding: 20px 8px; cursor: pointer; font-weight: 600; }
.project-detail summary:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.detail-body { padding: 16px 8px 32px; }
.detail-body > p { max-width: 760px; color: var(--muted); }
.detail-body > .tags { margin-block: 22px; }
.detail-body .case-study { margin-top: 20px; }
.reception-flow { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; padding-left: 24px; margin-block: 28px; }
.reception-flow li { padding: 12px; background: var(--surface); border-radius: 8px; }
.reception-flow span { display: block; margin-top: 8px; font-size: .875rem; color: var(--muted); }
@media (max-width: 700px) {
 .project-slide { flex-basis: min(340px, calc(100vw - 64px)); }
 .project-preview { padding: 16px; }
 .carousel-controls { align-items: flex-start; flex-direction: column; }
 .project-slide-copy { padding: 20px; }
 .reception-flow { grid-template-columns: 1fr; }
 .mini-bars { gap: 12px; }
}

/* Personal approach diagram in the opening section. */
.approach-visual { padding: 28px 0; }
.approach-visual > .eyebrow { color: var(--muted); margin-bottom: 24px; }
.approach-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 30px; }
.approach-steps li { position: relative; display: flex; align-items: flex-start; gap: 20px; padding: 25px; background: linear-gradient(120deg, #132333, #101a2b); border: 1px solid #2b4652; border-radius: 14px; }
.approach-steps li:not(:last-child)::after { content: "↓"; position: absolute; left: 44px; top: 100%; height: 30px; display: grid; place-items: center; color: var(--cyan); font-size: 1.15rem; }
.approach-number { flex: 0 0 40px; height: 40px; display: grid; place-items: center; color: var(--cyan); background: #173c40; border: 1px solid #2d6564; border-radius: 10px; font-size: .875rem; font-weight: 650; }
.approach-steps h2 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -.025em; }
.approach-steps p { margin-top: 9px; color: var(--muted); font-size: .9375rem; }
@media (max-width: 700px) {
 .approach-visual { padding: 4px 0; }
 .approach-steps { gap: 24px; }
 .approach-steps li { padding: 18px; gap: 14px; }
 .approach-steps li:not(:last-child)::after { height: 24px; left: 36px; }
 .approach-steps h2 { font-size: 1.125rem; }
 .approach-steps p { font-size: .875rem; }
}

/* Align the project heading below the sticky navigation, excluding section padding. */
#progetti { scroll-margin-top: -92px; }
@media (max-width: 900px) { #progetti { scroll-margin-top: -68px; } }
@media (max-width: 440px) { #progetti { scroll-margin-top: -54px; } }

.profile-back { padding-top: 36px; }
body:has(.profile-back) .profile { border-top: 0; padding-top: 40px; }
.profile #profile-title { font-size: clamp(2rem, 4vw, 3.5rem); max-width: none; }

.skills-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; }
.skills-grid .tags { margin-top: 20px; }
.skills-next { margin-top: 40px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.skills-next h3 { font-size: 1.25rem; }
.skills-next p { max-width: 780px; margin-block: 12px 18px; color: var(--muted); }
@media (max-width: 760px) { .skills-grid { grid-template-columns: 1fr; } }

/* Service anchors use the same heading alignment as Projects. */
#servizi { scroll-margin-top: -92px; }
@media (max-width: 900px) { #servizi { scroll-margin-top: -68px; } }
@media (max-width: 440px) { #servizi { scroll-margin-top: -54px; } }
.header-contact { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 9px 16px; background: var(--cyan); color: #092327; border: 1px solid var(--cyan); border-radius: 8px; }
.header-contact span { margin: 0; color: inherit; }
.header-contact:hover { background: #a0f6e7; border-color: #a0f6e7; }
.contact-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.contact-topics li { padding: 6px 10px; border: 1px solid #355b62; border-radius: 6px; color: #c8e4e2; font-size: .8125rem; }
.contact-guide { color: #afc4d2; font-size: .9375rem; margin-top: 16px; }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 24px; }
.contact-actions .copy-button { padding: 10px 12px; border: 1px solid #46656b; border-radius: 7px; }
#contatti { scroll-margin-top: 12px; }
@media (max-width: 900px) {
 .site-header.menu-ready .header-contact { display: none; }
 .site-header.menu-ready.menu-open .header-contact { display: inline-flex; width: 100%; }
}

.contact-form h3 { font-size: 1.125rem; margin-bottom: 20px; }
.contact-section:has(.contact-form) { align-items: start; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.contact-form .contact-fields { margin-top: 0; }
.contact-form .form-status { min-height: 3.2em; }
@media (max-width: 900px) { .contact-section:has(.contact-form) { grid-template-columns: 1fr; } }

.stack-heading h2 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.035em; }
.stack-section-title { font-size: 1rem; color: var(--text); margin-bottom: 18px; }
.stack-context { display: block; margin-top: 5px; color: var(--muted); font-size: .8125rem; line-height: 1.5; font-weight: 400; }
.stack-icon--text { font-size: .75rem; font-weight: 700; color: var(--cyan); }
.stack-secondary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 24px; }
@media (max-width: 760px) { .stack-secondary { grid-template-columns: 1fr; } }

.standalone-stack { padding-block: 60px; }
.journey-proof a { color: var(--cyan); }
.journey-proof a:hover { text-decoration: underline; text-underline-offset: 4px; }
.profile-contact, .project-page-contact { padding: 32px; margin-bottom: 60px; border: 1px solid #2d5461; border-radius: 12px; background: linear-gradient(110deg,#102d36,#122030); }
.profile-contact p { margin-top: 12px; max-width: 700px; color: var(--muted); }
.project-page { padding-block: 40px 60px; }
.project-page > h1 { margin-block: 28px; max-width: none; font-size: clamp(2rem,4vw,3.5rem); }
.project-page-contact { margin-top: 40px; }
.project-page-contact .button { margin-top: 20px; }
.project-page [id] { scroll-margin-top: 18px; }

.project-proof > span { display: block; margin-bottom: 6px; color: var(--muted); }
.competence-project-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.competence-project-links a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 8px; font-size: .9375rem; font-weight: 600; color: var(--cyan); }
.competence-project-links a:hover, .competence-project-links a:focus-visible { text-decoration: underline; text-underline-offset: 5px; }
.project-return { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.project-return a { display: inline-flex; align-items: center; min-height: 44px; }
.project-page article:target { outline: 1px solid var(--cyan); outline-offset: 6px; border-radius: 12px; }

.contact-form #contact-title { font-size: clamp(1.85rem, 3vw, 2.65rem); line-height: 1.2; letter-spacing: -.035em; margin-bottom: 28px; }
.contact-main > .contact-form { margin-top: 0; }