/* fonts are served from our own domain (Poppins and Caveat, SIL Open Font License) */
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/caveat-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/caveat-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/poppins-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/poppins-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/poppins-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/poppins-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/poppins-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/poppins-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/poppins-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/poppins-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #f4f3f1;
  --surface: #ffffff;
  --ink: #1b1e24;
  --ink-2: #5a5f69;
  --line: #dcd9d4;
  --dark: #1b1e24;
  --dark-2: #a9adb5;
  --mark: #ffe45c;
  --max: 1120px;
  /* palette: "mix" (default) */
  --accent: #5b3bff;
  --btn: #ff8c1a;
  --t1: #e62bd4; --t2: #5b3bff; --t3: #ffffff;
  --glow: #19d3c5;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.15rem; line-height: 1.3; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
section { padding: 88px 0; scroll-margin-top: 60px; }
.label { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 14px; }
.lead { font-size: 1.12rem; color: var(--ink-2); max-width: 58ch; }
.todo { background: var(--mark); color: #1b1e24; padding: 0 .25em; }
.btn { display: inline-block; font: 600 1rem "Poppins", sans-serif; background: var(--btn); color: var(--ink); padding: 13px 24px; text-decoration: none; border: 2px solid var(--btn); border-radius: 999px; cursor: pointer; }
.btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.line { background: transparent; border-color: currentColor; }
.more { font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
.more:hover { color: var(--accent); }
.stack > * + * { margin-top: 18px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; gap: 36px; } }

/* prototype bar */
.proto { background: var(--mark); font-size: .82rem; padding: 6px 0; }

/* header */
header.site { position: sticky; top: 0; z-index: 10; background: rgba(244, 243, 241, .94); backdrop-filter: blur(8px); }
.nav { display: flex; align-items: center; gap: 24px; height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 1.3rem; }
.logo img { height: 38px; width: auto; }
.logo i { font-style: normal; color: #f57c00; }
.nav ul { display: flex; gap: 22px; list-style: none; margin-left: auto; font-size: .93rem; }
.nav ul a { text-decoration: none; color: var(--ink-2); }
.nav ul a:hover { color: var(--ink); }
.langs { display: flex; gap: 4px; font-size: .78rem; font-weight: 600; }
.langs a { padding: 2px 6px; color: var(--ink-2); text-decoration: none; }
.langs a:hover { color: var(--ink); }
.langs .on { color: var(--ink); border-bottom: 2px solid var(--accent); }
.nav .btn { padding: 8px 18px; font-size: .9rem; }
@media (max-width: 980px) { .nav ul { display: none; } .langs { margin-left: auto; } }
@media (max-width: 520px) { .nav { gap: 10px; } .logo { font-size: 1.1rem; gap: 7px; } .logo img { height: 32px; } .nav .btn { padding: 8px 12px; font-size: .82rem; white-space: nowrap; } }

/* hero */
.hero { padding: 0 16px; }
.hero-in { background: var(--dark); color: #fff; border-radius: 28px; position: relative; overflow: hidden; max-width: 1400px; margin: 0 auto; padding: 96px 0 0; }
.hero .wrap { position: relative; z-index: 1; }
.hero h1, .hero .h1 { max-width: 19ch; font-size: clamp(2.1rem, 4.4vw, 3.3rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.rot { display: grid; }
.slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s; }
.slide.on { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .slide { transition: none; } }
.dots { display: flex; gap: 8px; margin-top: 26px; }
.dots button { width: 34px; height: 22px; background: none; border: 0; padding: 0; cursor: pointer; position: relative; }
.dots button::after { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 4px; background: #4b505a; }
.dots button[aria-pressed="true"]::after { background: #fff; }
.hero .label { color: var(--dark-2); }
.hero .lead { margin-top: 22px; color: #c9ccd2; max-width: 52ch; }
.cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.hero .btn.line { color: #fff; }
.hero .btn:hover { background: #fff; border-color: #fff; color: var(--ink); }
.tubes { position: absolute; top: 0; right: 0; width: 42%; height: 100%; }
.tubes path { fill: none; stroke-width: 5; stroke-linecap: round; }
.tubes .a { stroke: var(--t1); } .tubes .b { stroke: var(--t2); } .tubes .c { stroke: var(--t3); }
.proof { list-style: none; display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 12px 56px; margin-top: 80px; padding: 26px 0 30px; border-top: 2px solid var(--glow); }
.proof b { display: block; font-size: 1.45rem; font-weight: 600; line-height: 1.2; }
.proof span { color: var(--dark-2); font-size: .88rem; }
@media (max-width: 900px) { .hero-in { padding-top: 64px; border-radius: 20px; } .tubes { width: 100%; opacity: .25; } .proof { grid-template-columns: 1fr 1fr; margin-top: 56px; } }

/* stages */
.stages { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 56px; position: relative; }
.stages::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--t2), var(--t1)); opacity: .55; }
.stages li { position: relative; padding-top: 40px; }
.stages li::before { content: ""; position: absolute; top: 0; left: 0; width: 21px; height: 21px; border-radius: 50%; background: var(--bg); border: 3px solid var(--accent); }
.stages q { display: block; quotes: "„" "“"; color: var(--ink-2); font-style: italic; margin: 10px 0 14px; font-size: .97rem; }
.stages p { font-size: .97rem; margin-bottom: 14px; }
@media (max-width: 900px) {
  .stages { grid-template-columns: 1fr; gap: 36px; }
  .stages::before { left: 9px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; background: linear-gradient(180deg, var(--t2), var(--t1)); }
  .stages li { padding: 0 0 0 44px; }
}

/* services */
.svc { list-style: none; margin-top: 8px; }
.svc li { display: grid; grid-template-columns: 240px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.svc li:last-child { border-bottom: 0; }
.svc span { color: var(--ink-2); }
@media (max-width: 700px) { .svc li { grid-template-columns: 1fr; gap: 4px; } }

.techline { font-size: 1.12rem; font-weight: 600; line-height: 2; word-spacing: .2em; max-width: 60ch; }

.promo { background: var(--dark); color: #fff; border-radius: 24px; padding: 30px 32px; margin-top: 36px !important; }
.promo .label { color: var(--glow); margin-bottom: 10px; }
.promo h3 { font-size: 1.5rem; }
.promo p { color: #c9ccd2; margin-top: 12px; font-size: .97rem; }
.promo ul { list-style: none; display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 18px; font-size: .93rem; font-weight: 500; }
.promo li { padding-left: 18px; position: relative; }
.promo li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--t1); }
.promo a { color: #fff; }
.promo { position: relative; }
.promo .promo-tag { position: absolute; top: 14px; right: 18px; margin: 0; font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--dark-2); }
.collage { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 12px; margin: 18px 0 26px; }
.collage img { width: 100%; height: 150px; object-fit: cover; border: 3px solid #fff; border-radius: 10px; box-shadow: 0 8px 18px rgba(0, 0, 0, .35); }
.collage img:nth-child(1) { transform: rotate(-2deg); }
.collage img:nth-child(2) { transform: rotate(1.5deg) translateY(-6px); }
.collage img:nth-child(3) { transform: rotate(-1deg) translateY(4px); }
.promo .expert { border-left: 3px solid var(--t1); padding-left: 12px; color: #fff; margin-top: 18px; }
@media (max-width: 480px) { .collage img { height: 110px; } }
.promo .more:hover { color: var(--glow); }
@media (max-width: 480px) { .promo ul { grid-template-columns: 1fr; } }

/* story */
.story { padding: 0 16px; }
.story-in { background: var(--dark); color: #fff; border-radius: 28px; max-width: 1400px; margin: 0 auto; padding: 80px 0; }
.story .label { color: var(--dark-2); }
.story h2 { max-width: 26ch; }
.nums { list-style: none; display: flex; flex-wrap: wrap; gap: 16px 64px; margin-top: 36px; }
.nums b { display: block; font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.nums span { color: var(--dark-2); font-size: .9rem; }
.beats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 40px; }
.beats b { display: block; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--glow); margin-bottom: 10px; }
.beats p { color: #e4e5e8; }
.story small { display: block; margin-top: 32px; color: var(--dark-2); font-size: .88rem; }
@media (max-width: 800px) { .beats { grid-template-columns: 1fr; } .story-in { border-radius: 20px; } }

/* check */
.check label { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; font-size: .97rem; }
.check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--accent); flex: none; }
.check .btn { margin-top: 22px; }
.result { margin-top: 18px; font-weight: 500; }
.check #evalcta { margin-top: 16px; }
[hidden] { display: none !important; }

/* steps + price */
.steps { list-style: none; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(s); font-weight: 600; color: var(--accent); grid-row: span 2; }
.steps b { font-weight: 600; }
.steps span { color: var(--ink-2); font-size: .95rem; }
.price { background: var(--surface); border-radius: 24px; padding: 36px; box-shadow: 0 20px 50px rgba(27, 30, 36, .07); }
.price .amt { white-space: nowrap; font-size: clamp(1.55rem, 6.2vw, 2.8rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.price .amt small { display: block; white-space: normal; font-size: 1rem; font-weight: 400; color: var(--ink-2); letter-spacing: 0; margin-top: 4px; }
.price ul { list-style: none; margin-top: 18px; }
.price li { padding: 11px 0; border-top: 1px solid var(--line); font-size: .97rem; }

/* about */
.about { display: grid; grid-template-columns: 250px 1fr; gap: 48px; align-items: start; }
.about img {
  width: 250px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 62% 18%;
  -webkit-mask-image: radial-gradient(ellipse 62% 60% at 50% 44%, #000 58%, transparent 100%);
          mask-image: radial-gradient(ellipse 62% 60% at 50% 44%, #000 58%, transparent 100%);
}
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { font-size: .82rem; border: 1px solid var(--line); padding: 4px 12px; border-radius: 999px; color: var(--ink-2); }
@media (max-width: 760px) { .about { grid-template-columns: 1fr; gap: 12px; } .about img { width: 190px; } }

/* join */
.join { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 64px; margin-top: 48px; }
.join p { color: var(--ink-2); margin: 8px 0 12px; }
@media (max-width: 800px) { .join { grid-template-columns: 1fr; } }

/* contact */
form { background: var(--surface); border-radius: 24px; padding: 32px; display: grid; gap: 16px; box-shadow: 0 20px 50px rgba(27, 30, 36, .07); }
.field { display: grid; gap: 6px; }
label, legend { font-weight: 500; font-size: .93rem; }
input[type=text], input[type=email], textarea { font: inherit; padding: 11px 14px; border: 1px solid #b5b1aa; border-radius: 10px; background: #fff; color: var(--ink); width: 100%; }
fieldset { border: 0; padding: 0; margin: 0; }
.radios { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 6px; }
.radios label { font-weight: 400; display: flex; gap: 8px; align-items: center; }
.radios input { accent-color: var(--accent); width: 18px; height: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; }
.chips span { display: inline-block; border: 1px solid #b5b1aa; border-radius: 999px; padding: 7px 15px; font-size: .92rem; font-weight: 400; cursor: pointer; }
.chips span:hover { border-color: var(--ink); }
.chips input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chips input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.hint { font-size: .88rem; color: var(--ink-2); }
form .btn { justify-self: start; }
#sent { display: none; } #sent.show { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.place { display: grid; grid-template-columns: 1fr 1.5fr; gap: 14px; margin-top: 28px; }
.place img { width: 100%; height: 170px; object-fit: cover; border-radius: 16px; }
.addr { font-size: .88rem; color: var(--ink-2); text-align: center; margin-top: 8px !important; letter-spacing: .02em; }
.hand { font-family: "Caveat", cursive; font-weight: 700; font-size: clamp(1rem, 5vw, 2.7rem); line-height: 1.15; letter-spacing: .01em; display: table; margin: 72px auto 0; text-align: center; transform: rotate(-2deg);
  background: linear-gradient(90deg, var(--t2), var(--t1) 70%, #ff8c1a); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 6px 4px; }
.place figcaption { font-size: .82rem; color: var(--ink-2); margin-top: 6px; }

footer { padding: 32px 0 40px; font-size: .88rem; color: var(--ink-2); }
footer p + p { margin-top: 8px; font-size: .8rem; }
footer a:hover, .hint a:hover { color: var(--ink); }
/* text pages: privacy, not found */
.legal { max-width: 760px; margin: 0 auto; padding: 56px 24px 40px; }
.legal h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.legal h2 { font-size: 1.3rem; margin-top: 40px; }
.legal p, .legal ul { margin-top: 14px; }
.legal ul { padding-left: 22px; }
.legal li + li { margin-top: 8px; }
.legal .lead { margin-top: 16px; }

/* robot on the line above the hero numbers: one short scene per hero message */
.proof { position: relative; }
.proof.flash { animation: line-flash .8s; }
@keyframes line-flash { 0%, 50%, 100% { border-top-color: var(--glow); } 25%, 75% { border-top-color: #fff; } }
.botclip { position: absolute; left: 0; right: 0; bottom: calc(100% + 2px); height: 168px; overflow: hidden; pointer-events: none; --x0: 58%; --d: 110px; }
.bot { position: absolute; left: var(--x0); bottom: 0; width: 66px; height: 78px; transform: translate(0, 110px); }
.bot.in { animation: bot-climb .9s ease-out both; }
.bot.up { transform: none; }
.bot svg { display: block; overflow: visible; width: 100%; height: 100%; }
.bot .ln { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bot .thin { stroke-width: 1.8; }
.bot .glow { stroke: var(--glow); }
.bot .box { fill: var(--dark); stroke: #fff; stroke-width: 2.4; }
.bot .dot { fill: #ff8c1a; }
.bot .papers rect { fill: #fff; stroke: var(--dark); stroke-width: 1; }
.bot .cup { fill: var(--dark); stroke: #ff8c1a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bot .nofill { fill: none; }
.bot .okc { fill: var(--dark); stroke: #3ddc84; stroke-width: 2.4; }
.bot .okt { fill: none; stroke: #3ddc84; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.bot .bolt rect { fill: var(--dark); stroke: var(--glow); stroke-width: 2; }
.bot .crate, .bot .bolt, .bot .check, .bot .papers, .bot .mug, .bot .wrench { opacity: 0; }
.bot .leg-l { transform-origin: 18px 42px; } .bot .leg-r { transform-origin: 26px 42px; }
.bot .arm-l { transform-origin: 12px 31px; } .bot .arm-r { transform-origin: 32px 31px; }
.bot .rb { transform-origin: 22px 50px; }
.bot .eye-l { transform-origin: 17px 17px; } .bot .eye-r { transform-origin: 27px 17px; }
.bot .papers { transform-origin: 38px 33px; } .bot .check { transform-origin: 60px 38px; }
.bot .eye { animation: bot-blink 5.5s infinite; }
.bot .say { position: absolute; left: 50%; bottom: 88px; transform: translateX(-50%) rotate(-3deg); opacity: 0; white-space: nowrap; background: #fff; color: var(--ink); font: 700 1.5rem/1 "Caveat", cursive; letter-spacing: .03em; padding: 6px 12px 7px; border-radius: 12px; }
.bot .say::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: #fff; border-bottom: 0; }
@keyframes bot-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes bot-climb { 0% { transform: translate(0, 110px); } 75% { transform: translate(0, -7px); } 100% { transform: none; } }
@keyframes bot-step { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }

/* scene 1: carries a stack of papers, throws it away, a tick comes back */
.bot.s1 svg { animation: s1-move 4.2s linear both; }
.bot.s1 .leg-l { animation: bot-step .28s .25s 5 alternate ease-in-out, bot-step .28s 3.36s 3 alternate ease-in-out; }
.bot.s1 .leg-r { animation: bot-step .28s .25s 5 alternate-reverse ease-in-out, bot-step .28s 3.36s 3 alternate-reverse ease-in-out; }
.bot.s1 .papers { animation: s1-papers 4.2s linear both; }
.bot.s1 .arm-r { animation: s1-armr 4.2s linear both; }
.bot.s1 .arm-l { animation: s1-arml 4.2s linear both; }
.bot.s1 .check { animation: s1-check 4.2s linear both; }
@keyframes s1-move { 0%, 6% { transform: none; } 40%, 80% { transform: translateX(var(--d)); } 100% { transform: none; } }
@keyframes s1-papers { 0% { opacity: 0; transform: none; } 5% { opacity: 1; transform: rotate(-4deg); } 15% { transform: rotate(4deg); } 25% { transform: rotate(-4deg); } 35% { transform: rotate(4deg); } 44% { opacity: 1; transform: none; } 50% { opacity: 1; transform: translate(14px, -12px) rotate(25deg); } 58% { opacity: 1; transform: translate(30px, 46px) rotate(80deg); } 59%, 100% { opacity: 0; transform: translate(30px, 46px); } }
@keyframes s1-armr { 0% { transform: none; } 5%, 44% { transform: rotate(-38deg); } 50% { transform: rotate(-110deg); } 62%, 100% { transform: none; } }
@keyframes s1-arml { 0% { transform: none; } 5%, 44% { transform: rotate(-105deg); } 50% { transform: rotate(-160deg); } 62%, 100% { transform: none; } }
@keyframes s1-check { 0%, 60% { opacity: 0; transform: translateY(26px) scale(.5); } 67% { opacity: 1; transform: translateY(-3px) scale(1.1); } 70%, 82% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; transform: scale(.8); } }

/* scene 2: sits down on the line with a cup of coffee */
.bot.s2 .rb { animation: s2-sit 4.2s ease-in-out both; }
.bot.s2 .leg-l { animation: s2-lega 4.2s ease-in-out both; }
.bot.s2 .leg-r { animation: s2-legb 4.2s ease-in-out both; }
.bot.s2 .mug { animation: s2-mug 4.2s ease-in-out both; }
.bot.s2 .arm-r { animation: s2-armr 4.2s ease-in-out both; }
.bot.s2 .steam { animation: s2-steam .8s 1.1s 3 alternate both; }
@keyframes s2-sit { 0%, 8% { transform: none; } 18%, 84% { transform: translateY(9px); } 92%, 100% { transform: none; } }
@keyframes s2-lega { 0%, 8% { transform: none; } 18% { transform: rotate(-80deg); } 30% { transform: rotate(-66deg); } 42% { transform: rotate(-86deg); } 54% { transform: rotate(-66deg); } 66% { transform: rotate(-86deg); } 78%, 84% { transform: rotate(-80deg); } 92%, 100% { transform: none; } }
@keyframes s2-legb { 0%, 8% { transform: none; } 18% { transform: rotate(-80deg); } 30% { transform: rotate(-86deg); } 42% { transform: rotate(-66deg); } 54% { transform: rotate(-86deg); } 66% { transform: rotate(-66deg); } 78%, 84% { transform: rotate(-80deg); } 92%, 100% { transform: none; } }
@keyframes s2-mug { 0%, 20% { opacity: 0; transform: none; } 26%, 44% { opacity: 1; transform: none; } 54%, 66% { opacity: 1; transform: translate(4px, -9px); } 74%, 80% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; transform: none; } }
@keyframes s2-armr { 0%, 44% { transform: none; } 54%, 66% { transform: rotate(-50deg); } 74%, 100% { transform: none; } }
@keyframes s2-steam { from { opacity: .2; transform: translateY(1px); } to { opacity: 1; transform: translateY(-1px); } }

/* scene 3: pushes a crate that will not move, until it does */
.bot.s3 .crate { animation: s3-crate 4.2s linear both; }
.bot.s3 .rb { animation: s3-lean 4.2s ease-in-out both; }
.bot.s3 .arm-r { animation: s3-armr 4.2s ease-in-out both; }
.bot.s3 .arm-l { animation: s3-arml 4.2s ease-in-out both; }
.bot.s3 .leg-l { animation: bot-step .28s .9s 5 alternate ease-in-out; }
.bot.s3 .leg-r { animation: bot-step .28s .9s 5 alternate-reverse ease-in-out; }
@keyframes s3-crate { 0% { opacity: 1; transform: translateY(-90px); animation-timing-function: ease-in; } 8% { opacity: 1; transform: none; } 11% { transform: translateY(-4px); } 14% { transform: none; } 25% { transform: translateX(1px); } 35% { transform: none; } 45% { transform: translateX(1px); } 60% { opacity: 1; transform: none; animation-timing-function: ease-in; } 84% { opacity: 1; transform: translateX(560px); } 85%, 100% { opacity: 0; transform: translateX(560px); } }
@keyframes s3-lean { 0%, 14% { transform: none; } 22%, 52% { transform: rotate(13deg); } 58% { transform: rotate(-7deg); } 64%, 70% { transform: rotate(18deg); } 80%, 100% { transform: none; } }
@keyframes s3-armr { 0%, 14% { transform: none; } 22%, 70% { transform: rotate(-40deg); } 80%, 100% { transform: none; } }
@keyframes s3-arml { 0%, 14% { transform: none; } 22%, 70% { transform: rotate(-105deg); } 80%, 100% { transform: none; } }

/* scene 4: tightens a bolt on the line, the line flashes, then waves and says its line */
.bot.s4 .bolt { animation: s4-bolt 6.4s linear both; }
.bot.s4 .wrench { animation: s4-wrench 6.4s linear both; }
.bot.s4 .arm-r { animation: s4-arm 6.4s ease-in-out both; }
.bot.s4 .rb { animation: s4-bend 6.4s ease-in-out both; }
.bot.s4 .say { animation: s4-say 6.4s linear both; }
@keyframes s4-bolt { 0% { opacity: 0; transform: translateY(-14px); } 4%, 10% { opacity: 1; transform: translateY(-6px); } 13%, 17% { transform: translateY(-4.5px); } 20%, 24% { transform: translateY(-3px); } 27%, 31% { transform: translateY(-1.5px); } 34%, 46% { opacity: 1; transform: none; } 52%, 100% { opacity: 0; transform: none; } }
@keyframes s4-wrench { 0%, 3% { opacity: 0; } 6%, 36% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes s4-arm { 0%, 8% { transform: none; } 11% { transform: rotate(-16deg); } 14% { transform: none; } 18% { transform: rotate(-16deg); } 21% { transform: none; } 25% { transform: rotate(-16deg); } 28% { transform: none; } 32% { transform: rotate(-16deg); } 35%, 42% { transform: none; } 48% { transform: rotate(-118deg); } 53% { transform: rotate(-60deg); } 58% { transform: rotate(-118deg); } 63% { transform: rotate(-60deg); } 68% { transform: rotate(-118deg); } 73% { transform: rotate(-60deg); } 78% { transform: rotate(-118deg); } 83% { transform: rotate(-60deg); } 88% { transform: rotate(-118deg); } 94%, 100% { transform: none; } }
@keyframes s4-bend { 0%, 5% { transform: none; } 9%, 36% { transform: rotate(7deg); } 42%, 100% { transform: none; } }
@keyframes s4-say { 0%, 46% { opacity: 0; transform: translateX(-50%) rotate(-3deg) scale(.6); } 50%, 88% { opacity: 1; transform: translateX(-50%) rotate(-3deg) scale(1); } 92%, 100% { opacity: 0; transform: translateX(-50%) rotate(-3deg) scale(.8); } }

@media (max-width: 900px) { .proof { margin-top: 112px; } .botclip { --x0: 50%; --d: 26px; height: 110px; } .bot { width: 54px; height: 64px; } .bot .say { font-size: 1.15rem; bottom: 72px; } }

/* cookie consent bar (shown only when Google Tag Manager is configured) */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 920px; margin: 0 auto; background: var(--dark); color: #fff; border-radius: 18px; padding: 18px 22px; display: flex; gap: 16px 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); font-size: .93rem; }
.consent p { flex: 1 1 340px; color: #e4e5e8; }
.consent a { color: #fff; }
.consent div { display: flex; gap: 10px; }
.consent .btn { padding: 9px 18px; font-size: .9rem; }
.consent .btn.line { color: #fff; }
.consent .btn:hover { background: #fff; border-color: #fff; color: var(--ink); }

/* news slot with several items */
.pslides { display: grid; }
.pslide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
.pslide.on { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .pslide { transition: none; } }
.promo .dots { margin-top: 20px; }
.pixels { display: block; width: 100%; height: auto; margin: 18px 0 26px; }
/* EDU page */
.legal.wide { max-width: 1120px; }
.edu-top { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
.edu-top form { margin-top: 8px; }
.edu-list { list-style: none; padding: 0 !important; margin-top: 20px; border-top: 2px solid var(--ink); }
.edu-list li { padding: 12px 0; border-bottom: 1px solid var(--line); margin: 0 !important; }
.edu-list b { font-weight: 600; }
.fine { font-size: .8rem; color: var(--ink-2); margin-top: 40px !important; }
@media (max-width: 900px) { .edu-top { grid-template-columns: 1fr; gap: 32px; } }

/* EDU band on the home page */
.nav ul .edu-link { color: var(--accent); font-weight: 600; }
.eduband { padding-left: 16px; padding-right: 16px; }
.eduband-in { background: var(--accent); color: #fff; border-radius: 28px; max-width: 1400px; margin: 0 auto; padding: 72px 0 150px; position: relative; overflow: hidden; }
.eduband .label { color: #d9d2ff; }
.eduband h2 { max-width: 22ch; }
.eduband .lead { color: #ece8ff; margin-top: 16px; }
.eduband .tags { margin-top: 20px; }
.eduband .tags li { border-color: rgba(255, 255, 255, .5); color: #fff; }
.eduband p + p, .eduband .tags + p { margin-top: 26px; }
.eduband .btn:hover { background: #fff; border-color: #fff; color: var(--ink); }
.eduband .wrap { position: relative; z-index: 1; }
.terrain { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 130px; }
@media (max-width: 800px) { .eduband-in { border-radius: 20px; padding: 56px 0 120px; } .terrain { height: 96px; } }