/* INOSTORAGE website. Look (2026-10-13): the style of inostorage.eu/dist, which the team prefers: light blue page,
   bright blue, rounded white cards with soft shadows, pill labels, centred section headings, thin divider lines. */
:root {
  --bg: #f6fbff;
  --panel: #ffffff;
  --fg: #13273a;
  --muted: #5f6f80;
  --line: #dbe7ef;
  --accent: #3478f6;      /* primary blue (as on inostorage.eu/dist) */
  --accent-dark: #2459c8;
  --accent-soft: #e7f0fe;
  --accent-2: #5a6dcc;    /* second blue, for gradients */
  --red: #c80a0c;         /* scale tray red */
  --ok: #1e8a4c;  --ok-soft: #d5f0df;
  --bad: #c0262a; --bad-soft: #f8dcdc;
  --confirm: #8a5a00; --confirm-soft: #fff2d6;
  --shadow-sm: 0 10px 30px rgba(34, 74, 112, 0.08);
  --shadow-soft: 0 20px 54px rgba(34, 74, 112, 0.12);
  --shadow-hover: 0 24px 70px rgba(34, 74, 112, 0.18);
  --radius: 14px;
  --font-display: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-data: "Inter", "Segoe UI", system-ui, sans-serif;
  --wrap: 1440px;      /* same content width as inostorage.eu/dist */
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 var(--font-body); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; display: block; }
a { color: var(--accent); }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.12; margin: 0; text-wrap: balance; color: var(--fg); }
h1 { font-size: 56px; font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; }
h3 { font-size: 19px; font-weight: 650; letter-spacing: -0.01em; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.eyebrow { display: inline-flex; align-items: center; width: max-content; max-width: 100%; justify-self: start; padding: 6px 14px; border-radius: 999px;
           background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--accent); font: 700 12px/1.2 var(--font-body);
           text-transform: uppercase; letter-spacing: 0.08em; }
.lead { font-size: 18px; color: var(--muted); max-width: 68ch; }
.muted { color: var(--muted); }
.mono { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* header */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.82); backdrop-filter: saturate(1.4) blur(14px);
               -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid color-mix(in oklab, var(--line) 70%, transparent); }
.site-header .wrap { display: flex; align-items: center; gap: 28px; height: 70px; }
/* logo: the same look as website_v2 (dark text with wide letter spacing, icon without a tile) */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg); font: 700 19px "IBM Plex Sans", var(--font-display); letter-spacing: 0.08em; }
.brand img { width: 30px; height: 30px; }
.site-nav { display: flex; gap: 26px; margin-left: auto; align-items: center; }
.site-nav a { color: var(--fg); text-decoration: none; font-weight: 500; font-size: 15px; padding: 6px 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--accent); }
.site-nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 10px; font: 650 15px var(--font-body);
       text-decoration: none; cursor: pointer; border: 1px solid transparent; color: #fff;
       background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 70%, var(--accent-2)));
       box-shadow: 0 10px 24px rgba(52, 120, 246, 0.28); transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(52, 120, 246, 0.36); }
.btn.secondary { background: #fff; color: var(--fg); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn.secondary:hover { border-color: color-mix(in oklab, var(--accent) 40%, var(--line)); color: var(--accent); }
.btn.small { padding: 8px 14px; font-size: 13px; border-radius: 8px; }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.link-arrow { font-weight: 600; text-decoration: none; }
.link-arrow::after { content: " →"; }

/* sections: one page colour, thin blue lines between sections */
section { padding-block: 96px; position: relative; }
section.tight { padding-block: 56px; }
section.alt { background: transparent; }
section + section::before { content: ""; position: absolute; top: 0; left: 50%; width: min(520px, 60%); height: 1px; transform: translateX(-50%);
                            background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 35%, transparent), transparent); }
section.dark { background: var(--fg); color: #fff; }
section.dark .lead, section.dark .muted { color: #b7bfd6; }
.section-head { display: grid; gap: 14px; margin-bottom: 48px; max-width: 800px; }
.wrap:not(.split) > .section-head { margin-inline: auto; text-align: center; justify-items: center; }
.wrap:not(.split) > .section-head .eyebrow { justify-self: center; }
.wrap:not(.split) > .section-head .lead, .wrap:not(.split) > .section-head .muted { margin-inline: auto; }
.grid { display: grid; gap: 24px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; }
.split > img, .split > video { border-radius: 16px !important; box-shadow: var(--shadow-soft); }
.split > img[src*="render-cad"] { box-shadow: none; }

/* cards */
.card { background: linear-gradient(180deg, #fff, color-mix(in oklab, var(--bg) 70%, #fff)); border: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
        border-radius: var(--radius); padding: 26px; display: grid; gap: 10px; align-content: start; box-shadow: var(--shadow-soft);
        transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: color-mix(in oklab, var(--accent) 22%, var(--line)); }
form.card:hover, .card:has(table):hover { transform: none; }
section.alt .card { background: linear-gradient(180deg, #fff, color-mix(in oklab, var(--bg) 70%, #fff)); }
.card .num { font: 700 13px var(--font-data); color: var(--accent); }
.card ul { margin: 4px 0 0; padding-left: 18px; color: var(--muted); }
.photo-card { padding: 0; overflow: hidden; }
.photo-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-card .ph { aspect-ratio: 4 / 3; display: grid; place-items: center; background: repeating-linear-gradient(45deg, #edf3f8 0 10px, #e6eef5 10px 20px);
                  color: var(--muted); font: 500 13px var(--font-data); text-align: center; padding: 16px; }
.photo-card .body { padding: 18px 22px 22px; display: grid; gap: 6px; }
.tag { display: inline-block; font: 700 11px var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 10px; border-radius: 99px;
       background: var(--accent-soft); color: var(--accent); justify-self: start; }
.tag.confirm { background: var(--confirm-soft); color: var(--confirm); }

/* icon tiles (Lucide icons, see site.js) */
.ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto;
       background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 13%, #fff), color-mix(in oklab, var(--accent-2) 16%, #fff)); color: var(--accent); }
.ico svg, .ico i { width: 22px; height: 22px; stroke-width: 2; }
.ico.solid { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; counter-reset: step; padding: 0; margin: 0; }
.steps li { list-style: none; background: linear-gradient(180deg, #fff, color-mix(in oklab, var(--bg) 70%, #fff)); border: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
            border-radius: var(--radius); padding: 22px 20px; display: grid; gap: 8px; align-content: start; box-shadow: var(--shadow-sm); }
.steps li::before { counter-increment: step; content: "0" counter(step); font: 700 12px var(--font-data); color: var(--accent); background: var(--accent-soft);
                    border-radius: 999px; padding: 4px 10px; justify-self: start; letter-spacing: 0.04em; }
.steps li .ico { margin-top: 4px; }
.steps.steps-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* figures */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.stat { background: linear-gradient(180deg, #fff, color-mix(in oklab, var(--bg) 70%, #fff)); border: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
        border-radius: var(--radius); padding: 24px; display: grid; gap: 6px; align-content: start; box-shadow: var(--shadow-soft); }
.stat b { font: 800 34px var(--font-display); letter-spacing: -0.02em; color: var(--accent); }

/* hero */
.hero { padding-block: 80px 96px; background:
          radial-gradient(circle at 85% 0%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 45%),
          radial-gradient(circle at 0% 100%, color-mix(in oklab, var(--accent-2) 10%, transparent), transparent 40%), var(--bg); }
.hero .split { align-items: center; }
.hero h1 { margin-block: 18px 20px; }
.hero .actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.hero-img { justify-self: center; max-height: 620px; width: auto; }
.cycle { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font: 600 15px var(--font-data); }
.cycle span { background: var(--accent-soft); color: var(--accent); padding: 8px 14px; border-radius: 999px; }
.cycle i { color: var(--muted); font-style: normal; }
.note-box { border-left: 4px solid var(--confirm); background: var(--confirm-soft); padding: 14px 18px; border-radius: 8px; color: #4d3800; font-size: 14px; }
/* Photos with a caption (Company story, How it works cell sizes) */
.photo-fig { margin: 0; display: grid; gap: 8px; align-content: start; }
.photo-fig img { width: 100%; height: auto; border-radius: 12px; box-shadow: var(--shadow-soft); }
.photo-fig figcaption { font-size: 13px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: center; }
.story-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.story-grid .story-text { flex: 1 1 100%; max-width: 72ch; }
.story-grid .story-text p + p { margin-top: 12px; }
.story-grid .photo-fig img { height: 520px; width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 800px) { .story-grid .photo-fig img { height: auto; width: 100%; } }
.bins-fig { max-width: 640px; margin: 8px auto 20px; }
.bins-fig img { border-radius: 0; box-shadow: none; } /* transparent background: no card edge */
.cta-band { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-radius: 24px; padding: 52px; display: flex; gap: 32px;
            align-items: center; justify-content: space-between; flex-wrap: wrap; box-shadow: 0 30px 60px rgba(52, 120, 246, 0.28); }
.cta-band h2 { color: #fff; }
.cta-band .btn { background: #fff; color: var(--accent); border-color: #fff; box-shadow: 0 10px 24px rgba(19, 39, 58, 0.18); }
.cta-band .btn.secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7); box-shadow: none; }
.figure-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; }
.figure-row figure { margin: 0; display: grid; gap: 8px; justify-items: center; }
.figure-row figcaption { font-size: 14px; color: var(--muted); text-align: center; }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; }
table.data th, table.data td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; }

/* forms */
form.form { display: grid; gap: 16px; }
.form .row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; min-width: 0; }
.form input, .form select, .form textarea { width: 100%; min-width: 0; font: 400 15px var(--font-body); padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--fg); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent); }
.form textarea { min-height: 120px; resize: vertical; }
.form .hint { font-weight: 400; color: var(--muted); font-size: 13px; }
.form-result { padding: 14px 16px; border-radius: 10px; background: var(--ok-soft); color: #134d2c; font-size: 14px; }
.form-result.error { background: #fdecec; color: #8a1c1c; }

/* footer */
.site-footer { background: #0f2236; color: #c3cedb; padding-block: 64px 32px; font-size: 14px; }
.site-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr 1.3fr; gap: 28px; }
.site-footer h4 { color: #fff; font: 700 12px var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 12px; }
.site-footer a { color: #c3cedb; text-decoration: none; display: block; padding: 3px 0; }
.site-footer a:hover { color: #fff; }
.site-footer .brand { color: #fff !important; display: flex; }
.site-footer .eu { display: flex; gap: 14px; align-items: center; margin-top: 32px; padding-top: 24px; border-top: 1px solid #23394f; }
.site-footer .eu img { height: 44px; width: auto; }
.trust { margin-top: 24px; font-size: 14px; color: var(--muted); border-left: 3px solid var(--accent); padding-left: 12px; max-width: 60ch; }
.card-cta { grid-template-columns: 1fr auto; align-items: center; }
.site-nav .nav-demo { display: none; }

/* mobile menu button (shown below 1000 px) */
.nav-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; padding: 0; position: relative; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { position: absolute; left: 11px; width: 18px; height: 2px; background: var(--fg); content: ""; transition: transform 0.15s; }
.nav-toggle span { top: 19px; }
.nav-toggle span::before { left: 0; top: -6px; }
.nav-toggle span::after { left: 0; top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* text lists and notes */
ul.plain { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 8px; color: var(--muted); }
ul.plain b { color: var(--fg); }
.card .sub { font: 700 12px var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg); margin-top: 6px; }
.note-plain { margin-top: 24px; padding: 16px 20px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-dark); max-width: 80ch; }

/* points: parallel items as small cards */
.points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.points.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.points.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.points > div { background: linear-gradient(180deg, #fff, color-mix(in oklab, var(--bg) 70%, #fff)); border: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
                border-radius: var(--radius); padding: 22px; display: grid; gap: 8px; align-content: start; box-shadow: var(--shadow-sm); }
.points h3 { font-size: 18px; }
.points .ico { margin-bottom: 6px; }
/* platform screenshots side by side (How it works) */
.screens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0; }
.screens figure { margin: 0; display: grid; gap: 8px; }
.screens img { width: 100%; aspect-ratio: 1600 / 694; object-fit: cover; object-position: top left; border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.screens figcaption { font-size: 14px; color: var(--muted); text-align: center; }
@media (max-width: 760px) { .screens { grid-template-columns: minmax(0, 1fr); } }
.hero.hero-short { padding-block: 64px 56px; }
.eu-badge { display: inline-block; width: fit-content; justify-self: start; background: #0e1426; padding: 14px 20px; border-radius: 10px; margin: 4px 0 20px; }
.eu-badge img { height: 48px; width: auto; display: block; }

/* home hero: text, the product video and a render, with two floating notes (as on inostorage.eu/dist) */
.hero-home { padding-block: 64px 88px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: 56px; align-items: center; }
.hero-grid h1 { font-size: 62px; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.hero-tags li { padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: color-mix(in oklab, var(--fg) 86%, var(--accent));
                background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 10%, #fff), color-mix(in oklab, var(--accent-2) 13%, #fff)); }
.hero-media { position: relative; padding: 24px 12px 56px 72px; }
.hero-video { border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 30px 80px rgba(34, 74, 112, 0.22); background: #1b2c9c; }
.hero-video video, .hero-video img { width: 100%; height: 100%; object-fit: cover; }
.hero-render { position: absolute; left: -70px; bottom: -40px; width: 64%; }
/* solid white with a clear border and shadow, so the notes stand out from the light page background */
.float-card { position: absolute; display: grid; gap: 4px; max-width: 230px; padding: 16px 18px; border-radius: 16px; background: #fff;
              border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--line)); box-shadow: 0 18px 44px rgba(34, 74, 112, 0.22), 0 2px 6px rgba(34, 74, 112, 0.08);
              font-size: 14px; color: var(--muted); z-index: 1; }
.float-card b { color: var(--fg); font-size: 16px; }
.float-card .ico { width: 36px; height: 36px; border-radius: 10px; margin-bottom: 4px; }
.float-card .ico svg { width: 18px; height: 18px; }
.fc-1 { top: 0; left: 12px; }
.fc-2 { right: -18px; bottom: 96px; }

/* tablet */
@media (max-width: 1000px) {
  .site-header .wrap { gap: 12px; height: 62px; }
  .header-cta { margin-left: auto; }
  .nav-toggle { display: block; }
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; flex-direction: column; align-items: stretch; gap: 0;
              background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(20, 28, 51, 0.08); padding: 8px 24px 16px; }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .site-nav a:last-child { border-bottom: 0; }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--line); }
  .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps, .steps.steps-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .points.c3, .points.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
  .site-footer .cols > div:first-child { grid-column: 1 / -1; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero-media { max-width: 560px; justify-self: center; width: 100%; }
}
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero-img, .split > img, .split > video { max-height: 420px !important; width: auto; justify-self: center; }
}

/* phone */
@media (max-width: 760px) {
  body { font-size: 15px; }
  .wrap { padding-inline: 16px; }
  .site-nav { padding-inline: 16px; }
  h1, .hero-grid h1 { font-size: 36px; }
  h2 { font-size: 28px; }
  .card h2 { font-size: 22px !important; }
  h3 { font-size: 18px; }
  .lead { font-size: 17px; }
  section { padding-block: 64px; }
  section.tight { padding-block: 40px; }
  .hero, .hero-home { padding-block: 40px 64px; }
  .section-head { margin-bottom: 32px; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero-img, .split > img, .split > video { max-height: 380px !important; width: auto; justify-self: center; }
  .grid.c2, .grid.c3 { grid-template-columns: minmax(0, 1fr); }
  .grid { gap: 16px; }
  .card { padding: 20px; }
  .steps, .steps.steps-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat b { font-size: 28px; }
  .figure-row { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cta-band { padding: 30px 22px; border-radius: 18px; }
  .cta-band > div:last-child { width: 100%; }
  .card-cta { grid-template-columns: minmax(0, 1fr); }
  .form .row2 { grid-template-columns: minmax(0, 1fr); }
  .hero .actions .btn, .cta-band .btn { flex: 1 1 auto; justify-content: center; }
  table.data { font-size: 14px; }
  table.data th, table.data td { padding: 8px 6px; }
  .card:has(> table.data) { overflow-x: auto; }
  .site-footer .cols { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .site-footer .eu { flex-direction: column; align-items: flex-start; }
  .points, .points.c3, .points.c4 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .hero-media { padding: 16px 0 40px 28px; }
  .hero-render { left: -24px; bottom: -24px; width: 60%; }
  .fc-1 { left: -4px; top: -6px; max-width: 190px; padding: 12px 14px; }
  .fc-2 { right: -4px; bottom: 56px; max-width: 190px; padding: 12px 14px; }
  .float-card b { font-size: 15px; }
}

/* small phone */
@media (max-width: 480px) {
  .grid.c4 { grid-template-columns: minmax(0, 1fr); }
  .stats { gap: 16px; }
  .header-cta { display: none; }
  .site-nav a.nav-demo { display: flex; justify-content: center; margin-top: 12px; padding: 12px; color: #fff; border: 0; }
  .nav-toggle { margin-left: auto; }
  .brand { font-size: 17px; }
  .steps, .steps.steps-5 { grid-template-columns: minmax(0, 1fr); }
  .fc-2 { display: none; }
}
@media (prefers-reduced-motion: reduce) { .card, .btn { transition: none; } .card:hover, .btn:hover { transform: none; } }

/* short page titles (Contact, Solutions, configurator): centred, like the section headings */
.wrap.section-head { text-align: center; justify-items: center; }
.wrap.section-head .lead { margin-inline: auto; }
.wrap.section-head .eyebrow { justify-self: center; }
.wrap.section-head .cfg-steps { justify-content: center; }
/* a long "To confirm" note wraps: rounded box instead of a pill */
.tag.confirm { border-radius: 8px; line-height: 1.45; }

/* top menu: 7 items, so it folds into the menu button below 1150 px (not 1000) and never wraps */
.site-nav a, .btn { white-space: nowrap; }
@media (max-width: 1150px) {
  .site-header .wrap { gap: 12px; height: 62px; }
  .header-cta { margin-left: auto; }
  .nav-toggle { display: block; }
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; flex-direction: column; align-items: stretch; gap: 0;
              background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(20, 28, 51, 0.08); padding: 8px 24px 16px; }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .site-nav a:last-child { border-bottom: 0; }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--line); }
}

/* Company: EU projects at the top */
.hero-eu { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; }
.hero-eu .eu-badge { margin: 0; }
.eu-projects { display: grid; gap: 28px; }
.eu-project { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 40px; align-items: start; padding: 32px; }
.eu-project:hover { transform: none; }
.eu-project img { width: 100%; height: auto; border-radius: 8px; }
.eu-body { display: grid; gap: 12px; }
.eu-body h3 { font-size: 24px; }
.eu-body dl { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px 16px; margin: 6px 0 0; font-size: 15px; }
.eu-body dt { font-weight: 700; color: var(--fg); }
.eu-body dd { margin: 0; color: var(--muted); }
@media (max-width: 900px) { .eu-project { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 20px; } .eu-project img { max-width: 480px; } }
@media (max-width: 480px) { .eu-body dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .eu-body dd { margin-bottom: 8px; } }
.eu-body .lt { font-style: italic; margin-top: -6px; }
.eu-body .small { font-size: 13px; }
section[id] { scroll-margin-top: 80px; }

/* home page (2026-10-19): dark figures strip, tinted sections, hub diagram, step timeline, large cabinet renders,
   framed platform screenshot, two value columns */
section.tint { background: color-mix(in oklab, var(--accent) 6%, var(--bg)); }
section.strip { padding-block: 44px; background: linear-gradient(135deg, var(--fg), #1f3f6e); color: #fff; }
section.tint::before, section.tint + section::before, section.strip::before, section.strip + section::before { display: none; }
.strip .stat, .stats.on-dark .stat { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); box-shadow: none; }
.strip .stat b, .stats.on-dark .stat b { color: #fff; font-size: clamp(28px, 2.6vw, 38px); white-space: nowrap; }
.strip .stat .muted, .stats.on-dark .stat .muted { color: #b7c6dd; }
.strip-note { margin-top: 20px; display: flex; gap: 12px 24px; justify-content: space-between; flex-wrap: wrap; color: #8fa3c0; font-size: 14px; }
.strip-note a { color: #fff; }

/* Solution: hub diagram. Cabinet inputs on the left, cloud platform in the centre, outputs on the right.
   Moving dots on the lines show the direction of the data. */
.hub-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr); gap: 72px; align-items: center; padding: 44px;
           border-radius: 24px; border: 1px solid var(--line); box-shadow: var(--shadow-soft);
           background: radial-gradient(circle, color-mix(in oklab, var(--accent) 14%, transparent) 1px, transparent 1.5px) 0 0 / 22px 22px, #fff; }
.hub-side { display: grid; gap: 22px; }
.hub-label { font: 700 12px var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.hub-node { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 16px; background: #fff;
            border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.hub-node > div { display: grid; gap: 4px; }
.hub-node b { font-size: 16px; }
.hub-node > div > span { color: var(--muted); font-size: 14px; line-height: 1.45; }
.hub-node::after { content: ""; position: absolute; top: 50%; width: 72px; height: 3px; margin-top: -1.5px;
                   background: repeating-linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 11px); opacity: 0.7;
                   animation: hub-dots 1.1s linear infinite; }
.hub-in .hub-node::after { left: 100%; }
.hub-out .hub-node::after { right: 100%; }
@keyframes hub-dots { from { background-position: 0 0; } to { background-position: 11px 0; } }
.hub-core { position: relative; display: grid; gap: 10px; justify-items: center; text-align: center; padding: 34px 26px; border-radius: 22px; color: #fff;
            background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 24px 60px rgba(52, 120, 246, 0.35); }
.hub-core::before { content: ""; position: absolute; inset: -12px; border-radius: 30px; border: 2px dashed color-mix(in oklab, var(--accent) 35%, transparent); }
.hub-core .ico { width: 56px; height: 56px; border-radius: 16px; background: rgba(255, 255, 255, 0.18); color: #fff; }
.hub-core .ico svg { width: 28px; height: 28px; }
.hub-core > b { font-size: 22px; color: #fff; }
.hub-core > span:not(.ico):not(.hub-tag) { color: #e3ebff; font-size: 15px; line-height: 1.5; }
.hub-tag { padding: 4px 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.16); font: 700 11px var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; }
.hub-chips { list-style: none; margin: 6px 0 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.hub-chips li { padding: 4px 12px; border-radius: 99px; background: #fff; color: var(--accent); font-weight: 600; font-size: 13px; }
.hub-loop { margin: 22px auto 0; display: flex; gap: 10px; align-items: center; justify-content: center; width: fit-content; max-width: 100%; padding: 10px 18px;
            border-radius: 99px; background: #fff; border: 1px solid var(--line); color: var(--accent); font-weight: 600; font-size: 15px; text-align: center; }
.hub-loop svg { flex: 0 0 auto; width: 18px; height: 18px; }

/* How it works on the home page: a numbered timeline, not cards, so it looks different from the hub above */
.steps.timeline li { background: none; border: 0; box-shadow: none; padding: 0 6px; position: relative; justify-items: center; text-align: center; }
.steps.timeline li::before { content: counter(step); justify-self: center; width: 52px; height: 52px; padding: 0; display: grid; place-items: center;
                             border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font: 700 18px var(--font-body);
                             box-shadow: 0 10px 24px rgba(52, 120, 246, 0.3); position: relative; z-index: 1; }
.steps.timeline li:not(:last-child)::after { content: ""; position: absolute; top: 25px; left: calc(50% + 38px); width: calc(100% - 60px); height: 2px;
                                             background: repeating-linear-gradient(90deg, color-mix(in oklab, var(--accent) 50%, transparent) 0 6px, transparent 6px 12px); }
.steps.timeline .ico { display: none; }
.steps.timeline h3 { margin-top: 6px; }

/* cropped renders at one height, so the cabinets keep their true height of 1985 mm */
.figure-row.cabinets { display: flex; justify-content: center; align-items: flex-end; gap: 48px; flex-wrap: wrap; }
.figure-row.cabinets img { height: 380px; width: auto; max-width: 100%; object-fit: contain; }
.figure-row.cabinets figcaption { display: grid; gap: 2px; font-size: 14px; }
.figure-row.cabinets figcaption b { color: var(--fg); font-size: 16px; }

.app-frame { margin: 32px 0 0; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--line);
             box-shadow: var(--shadow-soft); }
.app-bar { display: flex; gap: 7px; padding: 11px 16px; background: #eef3f8; border-bottom: 1px solid var(--line); }
.app-bar span { width: 11px; height: 11px; border-radius: 50%; background: #cfd9e3; }
.app-frame img { width: 100%; }

.value-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.value-col { display: grid; gap: 18px; align-content: start; padding: 28px; border-radius: 20px; background: #fff; border: 1px solid var(--line);
             box-shadow: var(--shadow-soft); }
.value-head { display: flex; gap: 14px; align-items: center; }
.value-head h3 { font-size: 21px; }
.value-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.value-list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--bg);
                 border: 1px solid color-mix(in oklab, var(--line) 70%, transparent); }
.value-list li { align-items: center; }
.value-list svg { flex: 0 0 auto; width: 34px; height: 34px; padding: 8px; border-radius: 10px; color: var(--accent); stroke-width: 2;
                  background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 13%, #fff), color-mix(in oklab, var(--accent-2) 16%, #fff)); }

@media (max-width: 1150px) {
  .hub-map { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 24px; max-width: 560px; margin-inline: auto; }
  .hub-node::after { display: none; }
  .hub-side { position: relative; }
  .hub-in::after, .hub-out::before { content: ""; position: absolute; left: 50%; width: 3px; height: 40px; margin-left: -1.5px;
                                     background: repeating-linear-gradient(180deg, var(--accent) 0 5px, transparent 5px 11px); opacity: 0.7; }
  .hub-in::after { top: 100%; }
  .hub-out::before { bottom: 100%; }
  .hub-loop { border-radius: 16px; }
  .steps.timeline li:not(:last-child)::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hub-node::after { animation: none; } }
@media (max-width: 900px) { .value-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .strip .stat b { font-size: 28px; white-space: normal; }
  .figure-row.cabinets { gap: 32px; }
  .figure-row.cabinets img { height: auto; max-height: 240px; }
  .value-col { padding: 20px; }
}

/* home page, About section: EU logo with a short note */
.eu-note { display: flex; gap: 18px; align-items: center; padding: 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.eu-note .eu-badge { margin: 0; padding: 10px 14px; flex: 0 0 auto; }
.eu-note .eu-badge img { height: 34px; width: auto; }
.eu-note p { font-size: 14px; }
@media (max-width: 480px) { .eu-note { flex-direction: column; align-items: flex-start; } }

/* home page, round 3 (2026-10-19) */
/* links to the detail pages: under the section text, as a small pill */
.head-link { display: inline-flex; align-items: center; width: max-content; max-width: 100%; padding: 8px 16px; border-radius: 99px; background: #fff;
             border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--line)); box-shadow: var(--shadow-sm); font-size: 15px; }
.head-link:hover { border-color: var(--accent); }
.head-links { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.wrap:not(.split) > .section-head .head-link { justify-self: center; }
/* Problem: photo area under the text, until the photo is ready */
.problem-photo { margin-top: 12px; aspect-ratio: 2 / 1; border-radius: 16px; display: grid; place-items: center; padding: 24px; text-align: center;
                 background: repeating-linear-gradient(45deg, #edf3f8 0 10px, #e6eef5 10px 20px); color: var(--muted); font: 500 14px var(--font-data);
                 border: 1px dashed var(--line); }
/* Typical uses: numbered rows next to a photo */
.uses { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 64px; align-items: center; }
.uses > img { width: 100%; max-height: 640px; object-fit: cover; border-radius: 20px; box-shadow: var(--shadow-soft); }
.use-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.use-rows li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.use-num { font: 800 36px/1 var(--font-display); color: color-mix(in oklab, var(--accent) 35%, #fff); letter-spacing: -0.02em; }
.use-rows li > div { display: grid; gap: 6px; }
.use-who { font: 700 12px var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
section.cta-section { padding-top: 48px; }
@media (max-width: 900px) {
  .uses { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .uses > img { max-height: 420px; }
}
@media (max-width: 760px) { .use-rows li { grid-template-columns: 52px minmax(0, 1fr); } .use-num { font-size: 28px; } }

/* How it works page (2026-10-19) */
.page-nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 44px; }
.page-nav a { padding: 8px 16px; border-radius: 99px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
              color: var(--fg); font-weight: 600; font-size: 14px; text-decoration: none; }
.page-nav a:hover { border-color: var(--accent); color: var(--accent); }
/* How it works page, steps: the icon is the large circle on the line, the number is a small label in the card */
.steps.timeline.with-icons li { margin-top: 80px; padding: 26px 20px 24px; background: #fff; border: 1px solid var(--line); border-radius: 16px;
                                box-shadow: var(--shadow-sm); align-content: start; }
.steps.timeline.with-icons li::before { content: "0" counter(step); width: auto; height: auto; padding: 4px 10px; border-radius: 999px; box-shadow: none;
                                        background: var(--accent-soft); color: var(--accent); font: 700 12px var(--font-data); letter-spacing: 0.04em; }
.steps.timeline.with-icons .ico { display: inline-flex; position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 60px; height: 60px;
                                  border-radius: 50%; margin: 0; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
                                  box-shadow: 0 10px 24px rgba(52, 120, 246, 0.3), 0 0 0 6px var(--bg); }
.steps.timeline.with-icons .ico svg { width: 26px; height: 26px; }
.steps.timeline.with-icons li:not(:last-child)::after { top: -51px; left: calc(50% + 40px); width: calc(100% - 80px + 16px); }
.steps.timeline.with-icons h3 { margin-top: 2px; }
/* inside the cabinet: weighing cell photo and touch screen */
.inside-media { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: end; }
.inside-media figure { margin: 0; display: grid; gap: 8px; }
.inside-media figcaption { font-size: 13px; color: var(--muted); text-align: center; }
/* Partners, colours and branding: standard and customer colours side by side, at the same scale */
#colours { scroll-margin-top: 80px; }
.colour-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; max-width: 980px; margin-inline: auto; }
.colour-row figure { margin: 0; display: grid; gap: 8px; }
.colour-row img { width: 100%; height: auto; border-radius: 12px; box-shadow: var(--shadow-soft); }
.colour-row figcaption { font-size: 13px; color: var(--muted); text-align: center; }
@media (max-width: 600px) { .colour-row { gap: 10px; } .colour-row figcaption { font-size: 12px; } }
/* One image with the three cabinets on a transparent background */
.colour-trio { margin: 0 auto; max-width: 1100px; }
.colour-trio img { width: 100%; height: auto; }
/* Other form factors: home "The cabinet" band and the Partners form-factor block (bulk unit renders) */
#form-factors { scroll-margin-top: 80px; margin-top: 88px; }
.form-factor-band { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 36px; align-items: center; margin-top: 48px; padding: 28px 36px; }
.form-factor-band > div { display: grid; gap: 10px; justify-items: start; }
.form-factor-band img, .form-factor-pair img { width: 100%; height: auto; }
.form-factor-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: end; }
.form-factor-pair figure { margin: 0; display: grid; gap: 8px; }
.form-factor-pair figcaption { font-size: 13px; color: var(--muted); text-align: center; }
.ff-example { display: grid; gap: 6px; margin-top: 8px; padding: 16px 20px; border-left: 3px solid var(--accent); border-radius: 8px; background: var(--accent-soft); }
@media (max-width: 800px) { .form-factor-band { grid-template-columns: minmax(0, 1fr); padding: 22px; gap: 20px; } }
/* weighing cell: image with a transparent background; the LED on its front blinks (position in % of the image) */
.inside-cell { position: relative; }
.inside-cell img { width: 100%; height: auto; }
.cell-led { position: absolute; left: 37.33%; top: 72.25%; width: 1.6%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
            background: radial-gradient(circle, #eafff0 0 25%, #3df27a 55%, #1fbf55 70%); box-shadow: 0 0 6px 2px rgba(61, 242, 122, 0.75), 0 0 16px 6px rgba(61, 242, 122, 0.35);
            opacity: 0; animation: cell-led 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes cell-led { 0%, 50%, 100% { opacity: 0; } 60%, 72% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cell-led { animation: none; } }
.inside-screen img { width: 100%; max-height: 460px; object-fit: cover; object-position: top; border-radius: 20px; border: 7px solid var(--fg);
                     box-shadow: var(--shadow-soft); }
/* why weighing: dark section */
section.dark::before, section.dark + section::before { display: none; }
section.dark { background: linear-gradient(135deg, var(--fg), #1f3f6e); }
section.dark h2, section.dark h3 { color: #fff; }
section.dark .eyebrow { background: rgba(255, 255, 255, 0.1); color: #9ec2ff; }
.weigh-cards .card { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); box-shadow: none; }
.weigh-cards .card:hover { border-color: rgba(255, 255, 255, 0.3); box-shadow: none; }
.weigh-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; padding-top: 36px;
               border-top: 1px solid rgba(255, 255, 255, 0.14); text-align: center; }
.weigh-stats div { display: grid; gap: 4px; }
.weigh-stats b { font: 800 48px/1.1 var(--font-display); color: #fff; letter-spacing: -0.02em; white-space: nowrap; }
.weigh-stats span { color: #b7c6dd; }
.weigh-note { margin-top: 20px; text-align: center; color: #8fa3c0; font-size: 14px; }
/* cloud platform: one screenshot, two tabs */
.screen-tabs { display: flex; gap: 8px; justify-content: center; }
.screen-tabs button { padding: 9px 20px; border-radius: 99px; border: 1px solid var(--line); background: #fff; color: var(--fg);
                      font: 600 15px var(--font-body); cursor: pointer; }
.screen-tabs button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.screen-tabs + .app-frame { margin-top: 20px; }
.app-frame img[hidden] { display: none; }
/* spec tiles: dimensions, delivery */
.spec-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.spec-tiles > div { display: grid; gap: 4px; align-content: start; padding: 20px; border-radius: 14px; background: #fff; border: 1px solid var(--line);
                    box-shadow: var(--shadow-sm); }
.spec-tiles .ico { margin-bottom: 8px; }
.spec-name { font: 700 12px var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.spec-tiles b { font: 800 30px/1.15 var(--font-display); letter-spacing: -0.02em; color: var(--fg); margin-top: 4px; }
.spec-tiles > div > span:last-child:not(.spec-name) { color: var(--muted); font-size: 14px; }
.spec-tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
@media (max-width: 900px) {
  .spec-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inside-media { max-width: 560px; justify-self: center; width: 100%; }
}
@media (max-width: 760px) {
  .weigh-stats { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .weigh-stats b { font-size: 38px; }
  .page-nav { margin-top: 28px; }
}
@media (max-width: 480px) { .spec-tiles, .spec-tiles.two { grid-template-columns: minmax(0, 1fr); } }

/* Solutions page (2026-10-19) */
.segment-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.segment-cards a.card { color: inherit; text-decoration: none; }
.segment-cards .link-arrow { color: var(--accent); margin-top: 4px; }
.side-video { border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; max-height: 680px; justify-self: center; width: 100%;
              box-shadow: 0 30px 80px rgba(34, 74, 112, 0.22); background: #1b2c9c; }
.side-video video { width: 100%; height: 100%; object-fit: cover; }
.use-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.use-group { display: grid; gap: 18px; align-content: start; padding: 26px; border-radius: 20px; background: #fff; border: 1px solid var(--line);
             box-shadow: var(--shadow-soft); }
.model-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.model-tiles > div { display: grid; gap: 6px; align-content: start; padding: 22px; border-radius: 16px; background: #fff; border: 1px solid var(--line);
                     box-shadow: var(--shadow-sm); }
.model-tiles .ico { margin-bottom: 6px; }
.model-note { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
.icon-card { grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
.icon-card > div { display: grid; gap: 6px; }
@media (max-width: 1150px) { .use-groups { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; } }
@media (max-width: 900px) {
  .segment-cards, .model-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .side-video { max-width: 460px; }
}
@media (max-width: 600px) { .segment-cards, .model-tiles { grid-template-columns: minmax(0, 1fr); } }

/* Partners page (2026-10-19) */
.partner-media { position: relative; padding: 40px 0; }
.partner-media img { width: 100%; max-height: 520px; object-fit: contain; }
.pc-1 { top: 8px; left: 0; }
.pc-2 { right: 0; bottom: 24px; }
.proof-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.proof-row > div { display: grid; gap: 6px; align-content: start; justify-items: center; text-align: center; padding: 28px 22px; border-radius: 18px;
                   background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); }
.proof-row .ico { margin-bottom: 8px; }
.proof-row b { color: #fff; font-size: 19px; line-height: 1.3; }
.proof-row span:last-child { color: #b7c6dd; }
/* vertical timeline: numbered circles on one line */
.vtimeline { list-style: none; margin: 0; padding: 0; counter-reset: vstep; display: grid; gap: 0; }
.vtimeline li { position: relative; padding: 0 0 34px 76px; display: grid; gap: 6px; }
.vtimeline li::before { counter-increment: vstep; content: counter(vstep); position: absolute; left: 0; top: -6px; width: 52px; height: 52px; border-radius: 50%;
                        display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
                        font: 700 18px var(--font-body); box-shadow: 0 10px 24px rgba(52, 120, 246, 0.3); }
.vtimeline li:not(:last-child)::after { content: ""; position: absolute; left: 25px; top: 52px; bottom: 0; width: 2px;
                                        background: repeating-linear-gradient(180deg, color-mix(in oklab, var(--accent) 50%, transparent) 0 6px, transparent 6px 12px); }
.vtimeline h3 { padding-top: 6px; }
@media (max-width: 900px) { .proof-row { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; } .partner-media { max-width: 560px; justify-self: center; width: 100%; } }
@media (max-width: 760px) { .pc-1, .pc-2 { max-width: 190px; padding: 12px 14px; } .vtimeline li { padding-left: 66px; } }
@media (max-width: 480px) { .pc-2 { display: none; } }

/* plain feature list: bold title and text, thin divider above, no card and no icon */
.feature-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.feature-list.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.feature-list > div { display: grid; gap: 6px; align-content: start; padding: 20px 0 24px; border-top: 2px solid var(--line); }
.feature-list > div:hover { border-top-color: var(--accent); }
.feature-list h3 { font-size: 18px; }
@media (max-width: 900px) { .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .feature-list, .feature-list.two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .spec-tiles b { font-size: 24px; } }

/* How it works hero: jump links in the text column, under the buttons */
.section-head .page-nav { justify-content: flex-start; align-items: center; margin-top: 18px; gap: 8px; }
.section-head .page-nav span { color: var(--muted); font-size: 14px; font-weight: 600; margin-right: 4px; }
.section-head .page-nav a { padding: 6px 13px; font-size: 13px; }

/* plain list lines with thin dividers (Solutions, typical uses) */
.plain-rows { list-style: none; margin: 0; padding: 0; }
.plain-rows li { padding: 11px 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.plain-rows li:first-child { border-top: 1px solid var(--line); }
/* numbered tiles (Solutions, business models) */
.model-tiles.numbered { counter-reset: model; }
.model-tiles.numbered > div::before { counter-increment: model; content: "0" counter(model); font: 800 34px/1 var(--font-display); letter-spacing: -0.02em;
                                      color: color-mix(in oklab, var(--accent) 35%, #fff); margin-bottom: 8px; }
.model-tiles.numbered h3 { font-size: 20px; }
/* references in the dark band: text only */
.proof-row b { font-size: 22px; }

/* Partners hero: chain from Inostorage to the partner to the customer (not the home page hero) */
.partner-chain { display: grid; gap: 34px; max-width: 520px; justify-self: center; width: 100%; }
.chain-node { position: relative; display: flex; gap: 18px; align-items: center; padding: 20px 22px; border-radius: 18px; background: #fff;
              border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.chain-node > div { display: grid; gap: 3px; }
.chain-node b { font-size: 17px; line-height: 1.3; color: var(--fg); }
.chain-node > div > span:last-child { color: var(--muted); font-size: 14px; line-height: 1.45; }
.chain-role { font: 700 11px var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
.chain-node:not(:last-child)::after { content: "↓"; position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%);
                                      font: 700 22px/1 var(--font-body); color: var(--accent); }
.chain-logo { width: 54px; height: 54px; flex: 0 0 auto; padding: 10px; border-radius: 14px; background: var(--accent-soft); }
.chain-cabinet { width: 54px; height: 64px; flex: 0 0 auto; object-fit: contain; }
.chain-mark { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--accent);
              font: 800 16px var(--font-body); }
.chain-node.you { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; transform: scale(1.04);
                  box-shadow: 0 22px 50px rgba(52, 120, 246, 0.35); }
.chain-node.you b { color: #fff; }
.chain-node.you .chain-role { color: #cfe0ff; }
.chain-node.you > div > span:last-child { color: #e3ebff; }
@media (max-width: 760px) { .chain-node.you { transform: none; } }

/* Company page: facts card in the hero */
.fact-card { display: grid; gap: 14px; padding: 30px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-soft);
             max-width: 540px; justify-self: center; width: 100%; }
.fact-card dl { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 0; margin: 0; }
.fact-card dt, .fact-card dd { padding: 12px 0; border-top: 1px solid var(--line); margin: 0; }
.fact-card dt { font-weight: 700; font-size: 14px; color: var(--fg); }
.fact-card dd { color: var(--muted); font-size: 15px; }
.fact-card .eu-badge { margin: 6px 0 0; }
.fact-card .eu-badge img { height: 40px; }
/* Contact page: e-mail, phone and address tiles */
.contact-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.contact-tiles a.card { color: inherit; text-decoration: none; }
.contact-tiles .ico { margin-bottom: 6px; }
.contact-tiles b { font-size: 20px; line-height: 1.3; color: var(--fg); }
@media (max-width: 900px) { .contact-tiles { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; } }
@media (max-width: 480px) { .fact-card dl { grid-template-columns: minmax(0, 1fr); } .fact-card dd { border-top: 0; padding-top: 0; } }

/* product video: a click stops or starts it (see site.js) */
.hero-video, .side-video { position: relative; }
.hero-video video, .side-video video { cursor: pointer; }