/* Actana landing, design stage v2 (client feedback 29.10).
   Theme: html[data-theme] = light | dark, switched from any section.
   Sections alternate two surfaces (data-surface a | b). All colours come from tokens below. */
:root {
  --red: #F23125;
  --red-btn: #DD2A1F;
  --navy: #0F1E3D;
  --ink: #13213C;
  --slate: #546079;

  /* One restrained palette (Sergii 30.10): brand red + three accents that sit well with it
     (deep blue, wine, amber) and their tints. Nothing outside this set is used for content. */
  --a1: #2B4C8C;      /* blue: Better Research */
  --a2: #9E1F45;      /* wine: Better Decisions */
  --a3: #E8900C;      /* amber: Better Products */
  --a4: #2E8A66;      /* green: Development & Implementation (lifecycle only) */
  --a5: #6A4FB8;      /* violet: Strategic Delivery & Intelligence (lifecycle only) */
  /* Tints for the six lifecycle blocks and other colour-coded tiles (dark ink on top). */
  --c-prd: #BCCDEC;   /* Product Research & Discovery: blue */
  --c-vsd: #F8D59A;   /* Venture Strategy & Documentation: amber */
  --c-cff: #E9BACA;   /* Capital Formation & Fundraising: wine */
  --c-sdi: #F7BDB5;   /* Strategic Delivery & Intelligence: red */
  --c-dev: #DCE4F3;   /* Development & Implementation: light blue */
  --c-team: #C9D0DC;  /* Team Formation: slate */

  /* IBM Plex Sans for the whole site (Daniil 30.10). */
  --display: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --display-track-xl: -0.04em;
  --body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 48px);
  --sec-pad: clamp(64px, 8vw, 112px);
  --r: 16px;
}
:root, [data-theme="light"] {
  --bg-a: #FFFFFF;
  --bg-b: #EEF2F7;
  --fg: #13213C;
  --muted: #546079;
  --line: #D5DDE7;
  --card: rgba(19, 33, 60, .045);
  --card-solid: #FFFFFF;
  --chip: rgba(19, 33, 60, .06);
  --header: rgba(255, 255, 255, .94);
  --ghost: rgba(19, 33, 60, .28);
  --hover: rgba(19, 33, 60, .06);
  --hero-fade: rgba(255, 255, 255, 0);
}
[data-theme="dark"] {
  --bg-a: #0F1E3D;
  --bg-b: #0A1630;
  --fg: #FFFFFF;
  --muted: #A3B0C6;
  --line: #24365A;
  --card: rgba(255, 255, 255, .045);
  --card-solid: #14284F;
  --chip: rgba(255, 255, 255, .08);
  --header: rgba(15, 30, 61, .94);
  --ghost: rgba(255, 255, 255, .35);
  --hover: rgba(255, 255, 255, .08);
  --hero-fade: rgba(15, 30, 61, 0);
  --a1: #8FAEE8;
  --a2: #E8839F;
  --a3: #FFB547;
  --a4: #6FD0A4;
  --a5: #B6A4F2;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg-a); color: var(--fg); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background .25s, color .25s; }
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--display); font-weight: 600; line-height: 1.12; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 3px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; color: var(--ink); padding: 8px 14px; }
.skip:focus { left: 8px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.h2 { font-size: clamp(34px, 4.6vw, 58px); font-weight: 650; letter-spacing: -0.025em; font-variation-settings: "opsz" 96; }
.h3 { font-size: clamp(21px, 2.2vw, 26px); letter-spacing: -0.01em; }
.lead { margin-top: 14px; font-size: clamp(17px, 1.5vw, 20px); color: var(--muted); max-width: 36em; }

/* ---------- sections ---------- */
.sec { position: relative; padding: clamp(40px, 4.5vw, 60px) 0 clamp(48px, 5.5vw, 72px); background: var(--bg-a); color: var(--fg); transition: background .25s, color .25s; }
.sec[data-surface="b"] { background: var(--bg-b); }
.sec-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px 32px; margin-bottom: clamp(32px, 4vw, 52px); flex-wrap: wrap; }
.sec-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.sub-head { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 20px; }

/* Dark / Light switch: one for the whole site, in the fixed header. */
.theme-tog { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--card-solid); font-size: 13px; font-weight: 600; }
.theme-tog button { border: 0; background: none; padding: 6px 12px; border-radius: 999px; cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.theme-tog button[aria-pressed="true"] { background: var(--fg); color: var(--bg-a); }
.theme-tog svg { width: 14px; height: 14px; }
/* EN / DE switch with flags, same pill as the theme one (Daniil 03.11). */
.lang-tog { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--card-solid); font-size: 13px; font-weight: 600; }
.lang-tog button { border: 0; background: none; padding: 6px 10px; border-radius: 999px; cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.lang-tog button[aria-pressed="true"] { background: var(--fg); color: var(--bg-a); }
.lang-tog svg { flex: none; width: 18px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }


/* ---------- header ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; color: var(--fg); transition: background .25s, box-shadow .25s; }
.site-header.scrolled { background: var(--header); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.header-inner .nav { margin-left: auto; }
.logo { display: flex; align-items: center; text-decoration: none; }
.logo img { height: 34px; width: auto; }
.logo .logo-dark { display: none; }
[data-theme="dark"] .logo .logo-dark { display: block; }
[data-theme="dark"] .logo .logo-light { display: none; }
.nav ul { display: flex; gap: 4px; }
.nav a { display: block; padding: 8px 14px; border-radius: 999px; text-decoration: none; font-size: 15px; font-weight: 500; }
.nav a:hover { background: var(--hover); }
.nav a.nav-cta { border: 1px solid var(--ghost); margin-left: 8px; }
.nav-toggle { display: none; background: none; border: 1px solid var(--ghost); border-radius: 999px; padding: 6px 16px; cursor: pointer; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 26px; border-radius: 999px; font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background .2s; }
.btn-solid { background: var(--red-btn); color: #fff; }
.btn-solid:hover { background: #c4231a; }
.btn-ghost { border-color: var(--ghost); color: var(--fg); }
.btn-ghost:hover { background: var(--hover); }

/* ---------- 1. hero ---------- */
.hero { min-height: min(86svh, 680px); display: flex; align-items: center; overflow: hidden; padding: 0; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 20%; background: linear-gradient(to bottom, var(--hero-fade), var(--bg-a)); pointer-events: none; }
.hero-inner { position: relative; z-index: 2; width: 100%; padding-top: 132px; padding-bottom: 44px; }
.hero-slogan { font: 700 clamp(40px, 7.4vw, 108px)/.92 var(--display); letter-spacing: var(--display-track-xl); color: var(--red); }
.hero-statement { margin-top: clamp(22px, 3vw, 36px); max-width: 24em; font: 600 clamp(20px, 2.5vw, 34px)/1.24 var(--display); letter-spacing: -0.015em; }
.hero-tagline { margin-top: clamp(22px, 2.6vw, 34px); font: 700 clamp(22px, 2.75vw, 37px)/1.3 var(--display); letter-spacing: -0.01em; color: var(--fg); } /* about 1.2× the original size (Sergii 31.10: 1.5× was too much) */
.hero-tagline .arr { display: inline-block; width: 1.25em; height: .7em; margin: 0 .22em; vertical-align: .02em; color: var(--red); }
.hero-tagline .t1 { color: var(--a1); }
.hero-tagline .t2 { color: var(--a2); }
.hero-tagline .t3 { color: var(--a3); }
@media (min-width: 1100px) { .hero-tagline { white-space: nowrap; } }
/* German tagline is longer: a touch smaller so it still fits one line (Daniil 03.11). */
html[lang="de"] .hero-tagline { font-size: clamp(22px, 2.4vw, 33px); }
.hero-actions { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.hero-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.hero-tools { position: absolute; z-index: 3; right: var(--gutter); top: 88px; }

/* ---------- 2. about ---------- */
.about-trio { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.about-trio div { padding: 20px 24px 22px; border-radius: var(--r); background: var(--card-solid); border: 1px solid var(--line); }
.values-title, .about-trio dt { font: 700 clamp(21px, 1.9vw, 25px)/1.15 var(--display); letter-spacing: -0.01em; color: var(--red); margin-bottom: 10px; }
.about-trio dd { margin: 0; font: 500 clamp(16px, 1.45vw, 19px)/1.42 var(--display); letter-spacing: -0.01em; }
/* Values heading lines up with the text inside the About cards (card padding 24 + border 1). */
#about .values-title { padding-left: 25px; }
.values-wrap { margin-top: clamp(36px, 4vw, 52px); }

/* values B: icon tiles */
.values[data-variant="b"] { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.values[data-variant="b"] .v-group h4 { font: 700 clamp(20px, 1.9vw, 24px)/1.2 var(--display); color: var(--fg); margin-bottom: 12px; padding-left: 25px; }
.values[data-variant="b"] ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.values[data-variant="b"] li { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 24px; border-radius: 12px; background: var(--card-solid); border: 1px solid var(--line); font: 600 15px/1.25 var(--display); }
.values[data-variant="b"] li svg { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--c); color: var(--ink); }

/* ---------- 3. markets + use cases ---------- */
.mk-second { margin: clamp(48px, 6vw, 80px) 0 clamp(28px, 3vw, 40px); }
.mk-groups { display: grid; gap: 16px; }
/* B: stacks (one big coloured card per group) */
.mk[data-variant="b"] .mk-groups { grid-template-columns: 1fr 1fr; gap: 20px; }
.mk[data-variant="b"] .mk-group { background: color-mix(in srgb, var(--a) 9%, var(--card-solid)); border: 1px solid color-mix(in srgb, var(--a) 22%, transparent); color: var(--fg); border-radius: 20px; padding: clamp(18px, 2vw, 22px) clamp(16px, 1.7vw, 20px); }
.mk[data-variant="b"] .mk-group h3 { font-size: clamp(21px, 2vw, 26px); color: var(--a); margin-bottom: 14px; }
.mk[data-variant="b"] ul { display: flex; flex-wrap: wrap; gap: 6px; }
.mk[data-variant="b"] li { background: var(--card-solid); border: 1px solid color-mix(in srgb, var(--a) 16%, transparent); border-radius: 9px; padding: 6px 9px; font: 500 13.5px/1.3 var(--display); }

/* ---------- 4. lifecycle ---------- */
.lc { position: relative; }
/* B: metro (SVG) */
.lc-b svg { width: 100%; height: auto; }
.lc-b .m-name { font: 700 22px/1 var(--display); }
.lc-b .m-or { font: 600 14px/1 var(--body); fill: var(--muted); }
.lc-b .m-station { fill: var(--bg-b); stroke-width: 6; }
.lc-b .m-tick { stroke: var(--ghost); stroke-width: 2; stroke-dasharray: 2 6; }
/* Team Formation: a tapering teal arrow under the whole cycle. */
.lc-b .m-team-s0 { stop-color: #2BB3B1; }
.lc-b .m-team-s1 { stop-color: #1C7FA6; }
.lc-b .m-team { font: 700 22px/1 var(--display); fill: #fff; }
.lc-bm svg { display: block; max-width: 440px; }
.lc-bm .m-name { font-size: 19px; }
.lc-bm .m-or { font-size: 12px; }
.lc-bm .m-station { stroke-width: 5; }
.lc-bm .m-team { font-size: 17px; }
/* mobile lifecycle: one column */
.lc-mobile { display: none; }

/* ---------- 5. services ---------- */
.s-num { font: 700 14px/1 var(--body); opacity: .7; }
.s-name { font: 700 clamp(24px, 2.6vw, 34px)/1.08 var(--display); letter-spacing: -0.02em; }
.s-desc { font-size: 16px; line-height: 1.5; opacity: .82; }
.s-sub-name { font: 650 17px/1.25 var(--display); }
.s-items { display: flex; flex-wrap: wrap; gap: 6px; }
.s-items li { font-size: 13.5px; line-height: 1.25; padding: 6px 10px; border-radius: 999px; }
/* B: columns, third level revealed on hover / tap */
.svc[data-variant="b"] .svc-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.svc[data-variant="b"] .s-top .s-name { font-size: clamp(20px, 2vw, 27px); hyphens: auto; }
.svc[data-variant="b"] .s-card { display: grid; gap: 10px; }
.svc[data-variant="b"] .s-top { background: var(--c); color: var(--ink); border-radius: 20px; padding: 22px; min-height: 210px; display: grid; grid-template-rows: auto 1fr; gap: 14px; }
.svc[data-variant="b"] .s-top .s-name { align-self: center; padding-bottom: 28px; } /* names sit mid-plate (Daniil 30.10) */
.svc[data-variant="b"] .s-desc { display: none; }
.svc[data-variant="b"] .s-sub { position: relative; border: 2px solid var(--c); border-radius: 14px; padding: 14px 16px; background: var(--card-solid); cursor: pointer; transition: box-shadow .2s; }
.svc[data-variant="b"] .s-sub::after { content: "+"; position: absolute; right: 14px; top: 12px; font: 600 18px/1 var(--body); color: var(--muted); transition: transform .2s; }
.svc[data-variant="b"] .s-sub .s-sub-name { padding-right: 18px; }
.svc[data-variant="b"] .s-items { display: none; margin-top: 10px; }
.svc[data-variant="b"] .s-items li { background: var(--chip); }
.svc[data-variant="b"] .s-sub.open .s-items { display: flex; }
.svc[data-variant="b"] .s-sub.open::after { transform: rotate(45deg); }
@media (hover: hover) {
  .svc[data-variant="b"] .s-sub:hover .s-items { display: flex; }
  .svc[data-variant="b"] .s-sub:hover::after { transform: rotate(45deg); }
  .svc[data-variant="b"] .s-sub:hover { box-shadow: 0 8px 24px rgba(15, 30, 61, .12); }
}

/* ---------- 6. AI solutions ---------- */
.pb-logo { display: inline-flex; align-items: center; gap: 10px; font: 700 22px/1 var(--display); letter-spacing: -0.02em; }
.pb-logo img { width: 34px; height: 34px; }
.agents { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.agent { border-radius: var(--r); padding: 20px 22px 22px; background: var(--card-solid); border: 1px solid var(--line); display: grid; align-content: start; gap: 8px; }
.agent .ai-ico { width: 56px; height: 56px; margin-bottom: 4px; }
.agent h3 { font-size: 21px; }
.agent p { color: var(--muted); font-size: 15.5px; }

/* ---------- 7. partners (logo cells stay white in both themes) ---------- */
.p-cat { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 26px 0; border-top: 1px solid var(--line); }
.p-cat h3 { font-size: clamp(21px, 1.9vw, 24px); }
.p-cat p { color: var(--muted); font-size: 14px; margin-top: 6px; }
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.logo-cell { height: 80px; border-radius: 10px; background: #fff; display: grid; place-items: center; border: 1px solid #E3E9F1; }
.logo-cell img { display: block; }

/* ---------- 8. how we work ---------- */
.snake { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 40px; }
.step { position: relative; display: flex; align-items: center; gap: 14px; background: var(--card-solid); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; min-height: 70px; }
.step-n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 700 15px/1 var(--display); background: var(--red); color: #fff; }
.step h3 { font-size: 16.5px; font-weight: 600; }
/* Connectors are small red arrows (Sergii 30.10). */
.step::after { content: ""; position: absolute; background: center / contain no-repeat; }
.step.to-right::after { top: calc(50% - 8px); left: 100%; width: 40px; height: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cpath d='M4 8H34M27 2l7 6-7 6' fill='none' stroke='%23F23125' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.step.to-left::after { top: calc(50% - 8px); right: 100%; width: 40px; height: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cpath d='M36 8H6M13 2L6 8l7 6' fill='none' stroke='%23F23125' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.step.to-down::after { left: calc(50% - 8px); top: 100%; width: 16px; height: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 22'%3E%3Cpath d='M8 2V18M2 12l6 6 6-6' fill='none' stroke='%23F23125' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.step.last::after { display: none; }
.coop-title { margin: clamp(40px, 5vw, 64px) 0 18px; }
.coop { display: flex; flex-wrap: wrap; gap: 10px; }
.coop li { padding: 12px 20px; border-radius: 999px; border: 1.5px solid var(--fg); font: 600 16px/1.2 var(--display); }
/* Chips stretch so the row spans the full width, its right end lines up with the steps above (Daniil 31.10). */
@media (min-width: 981px) { .coop li { flex: 1 1 auto; text-align: center; } }

/* ---------- 9. why ---------- */
.why-ico { width: 54px; height: 54px; flex: none; border-radius: 16px; display: grid; place-items: center; background: var(--c); color: var(--ink); }
.why-ico svg { width: 30px; height: 30px; }
.why-name { font: 650 18px/1.25 var(--display); }
/* A: grid */
.why[data-variant="a"] ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.why[data-variant="a"] li { border-radius: 18px; padding: 22px; background: color-mix(in srgb, var(--c) 30%, var(--card-solid)); border: 1px solid color-mix(in srgb, var(--c) 70%, transparent); display: grid; gap: 18px; align-content: start; min-height: 170px; }

/* ---------- 10. stack ---------- */
/* Bubbles: one coloured container per category, masonry columns; the only layout kept (Daniil 30.10) */
.stack[data-variant="b"] .st-bubbles { columns: 3 300px; column-gap: 14px; }
.stack[data-variant="b"] .st-bubble { break-inside: avoid; margin-bottom: 14px; border-radius: 20px; padding: 16px 16px 18px; background: var(--c); color: var(--ink); }
.stack[data-variant="b"] .st-bubble h3 { font: 700 clamp(19px, 1.7vw, 22px)/1.2 var(--display); margin-bottom: 12px; }
/* Logos about half the earlier size (Sergii 30.10): three or four small tiles per row. */
.stack[data-variant="b"] .st-bubble ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 5px; }
.stack[data-variant="b"] .st-bubble li { height: 38px; border-radius: 9px; background: #fff; display: grid; place-items: center; }

/* ---------- 11. leadership ---------- */
.leaders { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.leader { display: grid; grid-template-columns: 150px 1fr; gap: 18px 26px; align-items: center; background: var(--card-solid); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; }
.portrait { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }
.leader h3 { font-size: 26px; }
.leader .role { color: var(--red); font-weight: 600; margin: 6px 0 12px; }
.socials { display: grid; gap: 8px; }
.socials a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 15px; font-weight: 500; }
.socials a:hover span { text-decoration: underline; }
.socials svg { width: 30px; height: 30px; flex: none; }
.leader .bio { grid-column: 1 / -1; margin: 6px 0 0; display: grid; gap: 12px; }
.leader .bio dt { font: 600 13.5px/1.3 var(--body); color: var(--muted); margin-bottom: 3px; }
.leader .bio dd { margin: 0; font-size: 15.5px; line-height: 1.55; }

/* ---------- 12. let's talk ---------- */
.talk-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.form { display: grid; gap: 16px; }
.field label { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 7px; }
.field input, .field textarea { width: 100%; background: var(--card-solid); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font-size: 17px; }
.field textarea { resize: vertical; min-height: 118px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(242, 49, 37, .18); }
.field [aria-invalid="true"] { border-color: #e5484d; }
.err { color: #e5484d; font-size: 14px; margin-top: 6px; }
.err:empty { display: none; }
.form .btn { justify-self: start; }
.form-status { font-size: 15px; color: #1a9b5b; font-weight: 600; }
/* Let's Talk: chat layout, the only one kept (Daniil 30.10) */

.site-footer { background: var(--bg-a); color: var(--muted); font-size: 17px; font-weight: 500; border-top: 1px solid var(--line); }
.footer-inner { display: flex; justify-content: space-between; gap: 16px; padding-top: 26px; padding-bottom: 26px; flex-wrap: wrap; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .svc[data-variant="b"] .svc-list { grid-template-columns: 1fr 1fr; }
  .why[data-variant="a"] ul { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .about-trio, .leaders, .talk-grid, .values[data-variant="b"] { grid-template-columns: 1fr; }
  .agents { grid-template-columns: 1fr 1fr; }
  .mk[data-variant="b"] .mk-groups { grid-template-columns: 1fr; }
  /* lifecycle: vertical Metro on phones */
  .lc-desktop { display: none; }
  .lc-mobile { display: block; }
}

@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .theme-tog button span { display: none; }
  .theme-tog button { padding: 7px 9px; }
  .lang-tog button { padding: 7px 8px; }
  .nav ul { display: none; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; padding: 8px var(--gutter) 20px; background: var(--bg-a); border-bottom: 1px solid var(--line); }
  .nav ul.open { display: flex; }
  .nav a { padding: 14px 0; font-size: 18px; border-radius: 0; }
  .nav a.nav-cta { border: 0; margin: 0; }
  .site-header:has(.nav ul.open) { background: var(--bg-a); }
  .hero-tools { top: auto; bottom: 72px; left: var(--gutter); right: auto; }
  .p-cat { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 720px) {
  .agents { grid-template-columns: 1fr; }
  .logos { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .logo-cell { height: 60px; }
  .values[data-variant="b"] ul { grid-template-columns: 1fr; }
  .svc[data-variant="b"] .svc-list { grid-template-columns: 1fr; }
  .svc[data-variant="b"] .s-top { min-height: 0; }
  .svc[data-variant="b"] .s-top .s-name { padding-bottom: 0; }
  .why[data-variant="a"] ul { grid-template-columns: 1fr; }
  .why[data-variant="a"] li { min-height: 0; display: flex; align-items: center; }
  .leader { grid-template-columns: 96px 1fr; gap: 14px 18px; padding: 20px; }
  .snake { grid-template-columns: 1fr; gap: 12px; }
  .snake .step { grid-column: auto !important; grid-row: auto !important; }
  .step::after, .step.to-right::after, .step.to-left::after, .step.to-down::after { left: 27px; right: auto; top: 100%; width: 16px; height: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 22'%3E%3Cpath d='M8 2V18M2 12l6 6 6-6' fill='none' stroke='%23F23125' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  .step.last::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* DialogBrain lockup inside the AI heading: brain mark + wordmark, as on dialogbrain.com. */
.db-logo { display: inline-flex; align-items: baseline; gap: .2em; white-space: nowrap; }
.db-logo img { width: .92em; height: .92em; align-self: center; }
/* Same cut as the dialogbrain.com header (Fraunces 500 at its text optical size). */
.db-logo span { font-family: "Fraunces", Georgia, serif; font-weight: 500; letter-spacing: -.025em; font-optical-sizing: none; font-variation-settings: "opsz" 20; }
/* Why Grid (Sergii 30.10): smaller icon tile, larger advantage names. */
.why[data-variant="a"] li { gap: 14px; min-height: 150px; }
.why[data-variant="a"] .why-ico { width: 42px; height: 42px; border-radius: 12px; }
.why[data-variant="a"] .why-ico svg { width: 23px; height: 23px; }
.why[data-variant="a"] .why-name { font: 700 clamp(19px, 1.75vw, 23px)/1.22 var(--display); letter-spacing: -0.01em; }
/* Services in lifecycle colours (Sergii 30.10): accent titles on a pale tint, accent outlines. */
.svc .s-card .s-name { color: var(--a); }
.svc[data-variant="b"] .s-top { color: var(--fg); border: 1px solid color-mix(in srgb, var(--a) 28%, transparent); }
.svc[data-variant="b"] .s-sub { border-color: color-mix(in srgb, var(--a) 45%, transparent); }
#how .sec-head { margin-bottom: clamp(20px, 2.4vw, 30px); }
#how .coop-title { margin-top: 32px; }
/* Founder bios fold out on demand (Sergii 30.10). */
.leaders { align-items: start; }
.leader .bio-more { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 12px; }
.leader .bio-more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1.2 var(--display); color: var(--fg); }
.leader .bio-more summary::-webkit-details-marker { display: none; }
.leader .bio-more summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.leader .bio-more[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.leader .bio-more .bio { margin-top: 14px; }
/* v4 (deco.js): thin ribbon bundles fading in and out in the side margins below the hero. */
[data-deco="on"] .sec:not(.hero) > .wrap { position: relative; z-index: 1; }
.deco-flow { position: absolute; left: 0; width: 100%; z-index: 0; pointer-events: none; overflow: hidden; opacity: .8; }
.deco-flow svg { display: block; }
.deco-flow .flow-dot { fill: var(--bg-a); stroke-width: 2.4; }
[data-theme="dark"] .deco-flow { opacity: .75; }
@media (max-width: 860px) { .deco-flow { opacity: .3; } }

/* ---------- footer socials (Daniil 30.10) ---------- */
.footer-inner { align-items: center; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); color: var(--fg); transition: background .2s, color .2s, border-color .2s; }
.footer-social a:hover { background: var(--fg); color: var(--bg-a); border-color: var(--fg); }
.footer-social svg { width: 17px; height: 17px; }

/* ---------- 11b. join (Daniil 30.10) ---------- */
.join-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.join-h { line-height: 1.1; } /* same size as the other section titles via .h2 (Daniil 31.10) */
.join-h span { color: var(--red); }
.join-btn { min-height: 58px; padding: 0 32px; font-size: 18px; }
.join-btn span { transition: transform .2s; }
.join-btn:hover span { transform: translateX(4px); }

/* ---------- careers subpage ---------- */
.careers-page main { padding-top: 72px; }
.careers-back { min-height: 40px; padding: 0 18px; font-size: 15px; white-space: nowrap; }
.careers-kicker, .talk-kicker { font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-bottom: 12px; }
.careers-hero .h2 { font-size: clamp(44px, 6.4vw, 84px); font-weight: 700; letter-spacing: -0.035em; }
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.role-card { background: var(--card-solid); border: 1px solid var(--line); border-top: 5px solid var(--a); border-radius: 20px; padding: clamp(22px, 3vw, 34px); }
.role-card .h3 { font-size: clamp(25px, 2.6vw, 32px); font-weight: 700; }
.role-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.role-tags li { font-size: 13.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--a) 14%, var(--card-solid)); }
.role-short { font-size: 16.5px; line-height: 1.6; }
.role-more { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.role-more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; font: 600 16px/1.2 var(--display); }
.role-more summary::-webkit-details-marker { display: none; }
.role-more summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.role-more[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.role-more .less, .role-more[open] .more { display: none; }
.role-more[open] .less { display: inline; }
.role-full { margin-top: 10px; }
.role-full h3 { font-size: 18px; font-weight: 700; margin: 22px 0 10px; }
.role-full p { font-size: 15.5px; margin-bottom: 10px; color: var(--fg); }
.role-full ul { display: grid; gap: 8px; }
.role-full li { position: relative; padding-left: 18px; font-size: 15.5px; line-height: 1.55; }
.role-full li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--a); }
@media (max-width: 980px) { .roles { grid-template-columns: 1fr; } }

/* ---------- 12. let's talk: form versions (Daniil 30.10) ---------- */
.talk-intro, .topics { display: none; }
.talk .talk-intro, .talk .topics { display: block; }
.topics { border: 0; padding: 0; margin: 0; }
.topics legend { font-size: 14.5px; font-weight: 600; margin-bottom: 10px; padding: 0; }
.topics label { display: inline-block; margin: 0 6px 8px 0; cursor: pointer; }
.topics input { position: absolute; opacity: 0; pointer-events: none; }
.topics span { display: inline-block; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card-solid); font-size: 15px; font-weight: 500; transition: background .15s, border-color .15s, color .15s; }
.topics label:hover span { border-color: var(--fg); }
.topics input:checked + span { background: var(--red-btn); border-color: var(--red-btn); color: #fff; }
.topics input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.talk-big { font: 700 clamp(30px, 3.6vw, 46px)/1.1 var(--display); letter-spacing: -0.025em; }
.talk-big em { font-style: normal; color: var(--red); }
.talk-points { display: grid; gap: 12px; margin-top: 26px; }
.talk-points li { display: flex; gap: 12px; align-items: center; font-size: 17px; font-weight: 500; }
.talk-points li::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* B · Brief: pitch on the left, a short three-field card on the right. */

/* C · Spotlight: one bold navy panel, the pitch across the top, a compact two-column form under it. */
.talk[data-variant="e"] .talk-grid { grid-template-columns: 1fr; max-width: 980px; margin: 0 auto; gap: clamp(22px, 3vw, 34px); padding: clamp(26px, 4.5vw, 56px); border-radius: 32px; background: #0F1E3D; color: #fff; position: relative; overflow: hidden; }
.talk[data-variant="e"] .talk-grid::before { content: ""; position: absolute; right: -120px; top: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 49, 37, .55), rgba(242, 49, 37, 0) 70%); pointer-events: none; }
.talk[data-variant="e"] .talk-grid > * { position: relative; }
.talk[data-variant="e"] .talk-kicker { color: var(--a3); font-size: 28px; letter-spacing: .1em; margin-bottom: 16px; } /* twice the size (Daniil 31.10) */
.talk[data-variant="e"] .talk-big em { color: #FF6A5E; }
.talk[data-variant="e"] .talk-points li { color: #DCE4F3; }
.talk[data-variant="e"] .topics legend, .talk[data-variant="e"] .field label { color: #fff; }
.talk[data-variant="e"] .topics span { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); color: #fff; }
.talk[data-variant="e"] .topics label:hover span { border-color: #fff; }
.talk[data-variant="e"] .topics input:checked + span { background: #fff; border-color: #fff; color: #0F1E3D; }
.talk[data-variant="e"] .field input, .talk[data-variant="e"] .field textarea { background: rgba(255, 255, 255, .96); border-color: transparent; color: #13213C; }
.talk[data-variant="e"] .field input::placeholder, .talk[data-variant="e"] .field textarea::placeholder { color: #7A869C; }
.talk[data-variant="e"] .talk-big { font-size: clamp(32px, 4.4vw, 56px); max-width: 15em; }
.talk[data-variant="e"] .talk-points { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 20px; }
.talk[data-variant="e"] .form { grid-template-columns: 1fr 1fr; gap: 14px 16px; padding-top: clamp(20px, 2.6vw, 28px); border-top: 1px solid rgba(255, 255, 255, .16); }
.talk[data-variant="e"] .form > .topics, .talk[data-variant="e"] .form > .field:has(textarea), .talk[data-variant="e"] .form > .btn, .talk[data-variant="e"] .form > .form-status { grid-column: 1 / -1; }
.talk[data-variant="e"] .field textarea { min-height: 96px; }
.talk[data-variant="e"] .form .btn { justify-self: start; padding: 0 40px; min-height: 56px; font-size: 17px; background: var(--red-btn); }
.talk[data-variant="e"] .form-status { color: #7CE0AE; }
.talk[data-variant="e"] .err { color: #FF9C94; }
@media (max-width: 980px) {
  .talk[data-variant="e"] .form { grid-template-columns: 1fr; }
  .talk[data-variant="e"] .form .btn { justify-self: stretch; }
}
@media (max-width: 720px) {
  .talk[data-variant="e"] .talk-kicker { font-size: 20px; }
  .join-btn { width: 100%; }
}

/* ---------- Hard offset shadows on every block (Sergii 31.10) ----------
   A solid plate shifted down-right, like a print offset. Coloured blocks get their own colour a tone or two darker,
   neutral cards get the dark navy ink (black in the dark theme). Border picks up the same tone. */
:root, [data-theme="light"] { --hs-ink: #0C1533; }
[data-theme="dark"] { --hs-ink: #000; }
:root { --hs: 6px; --hs-s: 4px; --hs-xs: 3px; }
.about-trio div, .agent, .step, .leader, .role-card, .values[data-variant="b"] li {
  border: 1.5px solid var(--hs-ink); box-shadow: var(--hs) var(--hs) 0 var(--hs-ink);
}
.role-card { border-top: 5px solid var(--a); box-shadow: var(--hs) var(--hs) 0 color-mix(in srgb, var(--a) 55%, var(--hs-ink)); }
.svc[data-variant="b"] .s-top, .stack[data-variant="b"] .st-bubble, .why[data-variant="a"] li {
  border: 1.5px solid color-mix(in srgb, var(--c) 45%, var(--hs-ink));
  box-shadow: var(--hs) var(--hs) 0 color-mix(in srgb, var(--c) 45%, var(--hs-ink));
}
.svc[data-variant="b"] .s-sub { box-shadow: var(--hs-s) var(--hs-s) 0 color-mix(in srgb, var(--c) 60%, var(--hs-ink)); transition: transform .15s, box-shadow .15s; }
@media (hover: hover) {
  .svc[data-variant="b"] .s-sub:hover { transform: translate(-2px, -2px); box-shadow: calc(var(--hs-s) + 2px) calc(var(--hs-s) + 2px) 0 color-mix(in srgb, var(--c) 60%, var(--hs-ink)); }
}
.mk[data-variant="b"] .mk-group { box-shadow: var(--hs) var(--hs) 0 color-mix(in srgb, var(--a) 55%, var(--hs-ink)); border-color: color-mix(in srgb, var(--a) 55%, var(--hs-ink)); }
.logo-cell { border-color: var(--hs-ink); box-shadow: var(--hs-s) var(--hs-s) 0 var(--hs-ink); }
.stack[data-variant="b"] .st-bubble li { box-shadow: var(--hs-xs) var(--hs-xs) 0 color-mix(in srgb, var(--c) 40%, var(--hs-ink)); }
.talk[data-variant="e"] .talk-grid { box-shadow: 10px 10px 0 var(--red); }
/* Leave room for the plates so they never touch the next row. */
.about-trio, .agents, .why[data-variant="a"] ul { padding: 0 var(--hs) var(--hs) 0; }
/* Services carry their own accent: plates use it a tone darker instead of the greyed tint. */
.svc[data-variant="b"] .s-top { border-color: color-mix(in srgb, var(--a) 75%, var(--hs-ink)); box-shadow: var(--hs) var(--hs) 0 color-mix(in srgb, var(--a) 75%, var(--hs-ink)); }
.svc[data-variant="b"] .s-sub { box-shadow: var(--hs-s) var(--hs-s) 0 color-mix(in srgb, var(--a) 75%, var(--hs-ink)); }
@media (hover: hover) {
  .svc[data-variant="b"] .s-sub:hover { box-shadow: calc(var(--hs-s) + 2px) calc(var(--hs-s) + 2px) 0 color-mix(in srgb, var(--a) 75%, var(--hs-ink)); }
}
/* Pastel blocks: a darker, more saturated shade of the same hue (OKLCH keeps the colour instead of greying it). */
.why[data-variant="a"] li, .stack[data-variant="b"] .st-bubble { --hs-c: color-mix(in oklch, var(--c) 55%, var(--hs-ink)); }
@supports (color: oklch(from red l c h)) {
  .why[data-variant="a"] li, .stack[data-variant="b"] .st-bubble { --hs-c: oklch(from var(--c) calc(l - 0.36) calc(c * 2.4 + 0.03) h); }
  [data-theme="dark"] .why[data-variant="a"] li, [data-theme="dark"] .stack[data-variant="b"] .st-bubble { --hs-c: oklch(from var(--c) calc(l - 0.55) calc(c * 1.6) h); }
}
.why[data-variant="a"] li, .stack[data-variant="b"] .st-bubble { border-color: var(--hs-c); box-shadow: var(--hs) var(--hs) 0 var(--hs-c); }
.stack[data-variant="b"] .st-bubble li { box-shadow: var(--hs-xs) var(--hs-xs) 0 var(--hs-c); }
/* Social and media icons beside the Contact Us title (Sergii 31.10): brand colours, same hard plate as the blocks. */
.talk-social { gap: 14px; }
.talk-social a { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--card-solid); border: 1.5px solid var(--hs-ink); box-shadow: var(--hs-s) var(--hs-s) 0 var(--hs-ink); transition: transform .15s, box-shadow .15s; }
.talk-social svg { width: 24px; height: 24px; }
.talk-social .s-li { color: #0A66C2; }
.talk-social .s-x, .talk-social .s-md { color: var(--fg); }
.talk-social .s-tg { color: #229ED9; }
@media (hover: hover) { .talk-social a:hover { transform: translate(-2px, -2px); box-shadow: calc(var(--hs-s) + 2px) calc(var(--hs-s) + 2px) 0 var(--hs-ink); } }
@media (max-width: 720px) { .talk-social { gap: 10px; } .talk-social a { width: 44px; height: 44px; } }
/* Partner logo plates: dark outline, shadow in the colour of the category title (Sergii 31.10). */
.p-cat .logo-cell { border-color: var(--hs-ink); box-shadow: var(--hs-s) var(--hs-s) 0 var(--pc, var(--hs-ink)); }
/* Icons end where the red plate of the form panel ends (panel max 980px, plate 10px) (Sergii 31.10). */
@media (min-width: 981px) { #contacts .talk-social { margin-right: calc((100% - 980px) / 2 - 10px); } }

/* Services: the "+" toggles are a touch larger, in a brighter tone of each column's colour, so it is clear they open (Sergii 01.11) */
:root, [data-theme="light"] { --p1: #1690C8; --p2: #D9306A; --p3: #F2B000; --p5: #7B57E6; }
[data-theme="dark"] { --p1: #4FD3EC; --p2: #FF7BA6; --p3: #FFD84D; --p5: #BBA4FF; }
.svc[data-variant="b"] .s-sub::after {
  content: "+"; right: 11px; top: 11px; width: 24px; height: 24px; display: grid; place-items: center;
  font: 700 20px/1 var(--body); color: var(--p);
  border: 1.5px solid var(--p); border-radius: 50%;
  background: color-mix(in srgb, var(--p) 14%, transparent);
}
.svc[data-variant="b"] .s-sub .s-sub-name { padding-right: 30px; }
.careers-page .lang-tog { margin-left: auto; }
/* Phones: flags only, tighter header so logo, menu and both switches fit (Daniil 03.11). */
@media (max-width: 520px) { .header-inner { gap: 8px; } .lang-tog button span { display: none; } .lang-tog button { padding: 7px 6px; } .theme-tog button { padding: 7px 6px; } .lang-tog, .theme-tog, .theme-tog svg { flex: none; } .careers-page .careers-back { padding: 0 14px; font-size: 14px; } }
/* Narrow desktops: switches show icons and flags only so the German menu stays on one line (Daniil 03.11). */
@media (min-width: 981px) and (max-width: 1240px) { .lang-tog button span, .theme-tog button span { display: none; } .lang-tog button, .theme-tog button { padding: 7px 8px; } .nav a { padding: 8px 11px; } }
/* Contact form: hidden honeypot and the error state of the status line (Daniil 04.11). */
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-status.is-error, .talk[data-variant="e"] .form-status.is-error { color: #F2A29B; }