/* ============
   YOKIS SOFTWARE WEBSITE - STYLES

   HOW TO CHANGE THE LOOK
   1. All colors, corners, shadows, spaces and letter sizes are in block 1.
      Change a value there and it changes on the whole site.
   2. Each kind of part has one block below, with its name in a comment:
        2 BASE          page, text, headlines
        3 LAYOUT        .wrap .section
        4 BUTTONS       .btn  .btn--second  .btn--blue  .btn--big  .btn--small
        5 MENU          .top  .brand  .pill  .menu__item  .menu__chip  (the pill and the floating menu buttons)
        6 CARDS         .card  .card--problem  .card--tint
        7 CHIPS         .chip            (choice buttons)
        8 SWITCH        .switch          (Before / With Yokis)
        9 LISTS         .ticks
       10 PICTURES      .pic  .clip
       11 RIBBON        .ribbon
       12 CONTACT BUTTON   .contact         (the liquid button at the bottom right)
       13 CHAT          .bubble  .chat   (Ask AI window)
       14 to 24         one block for each part of the page. 22a = the moving "One system" picture beside the questions (there is no block 19: the "Our work" part was taken out)
   ============ */


/* 1. DESIGN VALUES ============ */
:root {
  /* Colors */
  --blue: #12324A;          /* headlines, menu, main parts */
  --green: #0F7B6C;         /* main buttons, "With Yokis", good things */
  --yellow: #F2A900;        /* small bright details, numbers */
  --red: #D9654B;           /* only "Before" and the problems */
  --white: #FFFFFF;         /* the page background, always */

  --green-dark: #0B6456;    /* green button when the mouse is on it */
  --blue-dark: #0C2434;     /* blue button when the mouse is on it */
  --text: #1C2630;          /* normal text */
  --muted: #5A6A78;         /* small grey text */
  --line: #DFE5EA;          /* thin lines and card borders */

  --tint: #F4F7F9;          /* very light grey-blue box */
  --tint-green: #E6F3EF;
  --tint-yellow: #FFF3D1;
  --tint-red: #FBECE8;
  --tint-blue: #E7EEF3;

  /* The ribbon behind the first and last screen. Use 6-letter codes here. */
  --ribbon-1: #0F7B6C;
  --ribbon-2: #F2A900;
  --ribbon-3: #12324A;
  --ribbon-strength: .9;    /* 0 = no ribbon, 1 = strong */


  /* Letters */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-hero: clamp(2.4rem, 1rem + 4.4vw, 4.5rem);
  --fs-h2: clamp(1.75rem, 1.15rem + 2.4vw, 3rem);
  --fs-h3: clamp(1.1rem, 1.02rem + .3vw, 1.3rem);
  --fs-lead: clamp(1.05rem, 1rem + .4vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-small: .9rem;
  --fs-stat: clamp(3.4rem, 1.8rem + 7vw, 6.5rem);          /* the big "1 month" */
  --fs-stat-label: clamp(1.2rem, .9rem + 1.5vw, 2rem);    /* "to your first delivery" */
  --weight-bold: 800;       /* headlines and buttons */

  /* Corners */
  --r-s: 10px;
  --r-m: 18px;
  --r-l: 28px;
  --r-pill: 999px;
  --r-btn: var(--r-pill);   /* all buttons */
  --r-card: 22px;           /* all cards */
  --r-chip: var(--r-pill);  /* all choice buttons */

  /* Shadows */
  --shadow-s: 0 1px 2px rgba(18, 50, 74, .06), 0 2px 8px rgba(18, 50, 74, .05);
  --shadow-m: 0 2px 6px rgba(18, 50, 74, .07), 0 12px 28px rgba(18, 50, 74, .10);
  --shadow-l: 0 6px 14px rgba(18, 50, 74, .12), 0 24px 48px rgba(18, 50, 74, .18);

  /* Spaces */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 72px;
  --space-section: clamp(64px, 9vw, 128px);   /* space between the parts */
  --gutter: 16px;                             /* space at the left and right edge */
  --wrap: 1180px;                             /* widest content */

  /* Movement */
  --fast: .2s;
  --slow: .6s;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* The menu pill at the bottom middle */
  --pill-bg: var(--blue);
  --pill-height: 56px;
  --pill-bottom: 16px;      /* space under the pill */
  --menu-time: .35s;        /* how fast the page dims */

  /* The floating menu buttons (their places are in block 5, "THE SLOTS") */
  --menu-chip-bg: var(--white);
  --menu-chip-text: var(--blue);
  --menu-talk-bg: var(--green);                   /* the "Talk to us" button */
  --menu-talk-text: var(--white);
  --menu-font: clamp(22px, 15px + 2vw, 27px);     /* the smallest words. Each button multiplies it by its --size */
  --menu-fly: .55s;         /* how long a button flies out of the pill */
  --menu-wait: 80ms;        /* each button starts this much after the one before */
  --menu-back: .3s;         /* how long it flies back when the menu closes */
  --menu-back-wait: 30ms;
  --menu-ease: cubic-bezier(.34, 1.56, .64, 1);   /* goes a bit too far, then settles */
  --menu-drift: 5px;        /* how far a button drifts around its place */
  --menu-sway: 1.5deg;      /* how much extra it leans while drifting */
  --menu-zone: calc(100vh - var(--pill-bottom) - var(--pill-height));   /* the height of the area above the pill */

  /* The liquid contact button at the bottom right */
  --contact-main: var(--blue);
  --contact-wa: #25D366;    /* WhatsApp */
  --contact-tg: #229ED9;    /* Telegram */
  --contact-ai: var(--yellow);
  --contact-size: 60px;     /* the main button */
  --contact-child: 50px;    /* the three drops */
  --contact-right: 16px;
  --contact-bottom: 16px;
  --contact-reach: 92px;    /* wide screen: how far the drops go (arc) */
  --contact-step: 68px;     /* phone: space between the drops (column) */
  --contact-time: .5s;      /* how long a drop travels */
  --contact-wait: 80ms;     /* each drop starts this much after the one before */
  --contact-out: cubic-bezier(.34, 1.56, .64, 1);    /* opening: goes a bit too far, then settles */
  --contact-in: cubic-bezier(.36, 0, .66, -.56);     /* closing: the same, backwards */
  --page-bottom: 300px;     /* empty space under the footer, so the pill and the drops never cover it */

  /* The phone on the first screen: 1 = full size of the picture */
  --phone-s: .37;
}
@media (min-width: 768px) { :root { --gutter: 24px; --phone-s: .42; } }
@media (min-width: 800px) { :root { --page-bottom: 190px; --menu-drift: 7px; --menu-sway: 2deg; } }
@supports (height: 100dvh) { :root { --menu-zone: calc(100dvh - var(--pill-bottom) - var(--pill-height)); } }
@media (min-width: 1100px) { :root { --gutter: 32px; --phone-s: .56; } }


/* 2. BASE ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-x: hidden;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: var(--green); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

h1, h2, h3 { color: var(--blue); font-weight: var(--weight-bold); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: var(--fs-hero); line-height: 1.03; letter-spacing: -.03em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.01em; }
.lead { font-size: var(--fs-lead); color: var(--muted); }
.small-line { font-size: var(--fs-small); color: var(--muted); }
.strong-line { font-size: var(--fs-lead); font-weight: 700; color: var(--blue); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }


/* 3. LAYOUT ============ */
/* .wrap keeps the content in the middle. .section is one part of the page. */
.wrap { position: relative; width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: calc(var(--space-section) / 2); }
.section__head { max-width: 820px; margin-bottom: var(--s6); }
.section__foot { margin-top: var(--s6); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }


/* 4. BUTTONS ============ */
/* .btn is the main green button. Add a second class to change it. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 50px; padding: 12px 24px;
  border: 2px solid var(--green); border-radius: var(--r-btn);
  background: var(--green); color: var(--white);
  font-weight: var(--weight-bold); font-size: 1rem; line-height: 1.2; text-align: center; text-decoration: none;
  box-shadow: 0 6px 16px rgba(15, 123, 108, .28);
  transition: transform var(--fast) var(--ease), background var(--fast), border-color var(--fast), box-shadow var(--fast);
}
.btn:hover { background: var(--green-dark); border-color: var(--green-dark); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(15, 123, 108, .32); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.25em; height: 1.25em; flex: none; }
/* second button: white with a line */
.btn--second { background: var(--white); color: var(--blue); border-color: var(--blue); box-shadow: none; }
.btn--second:hover { background: var(--blue); border-color: var(--blue); color: var(--white); box-shadow: var(--shadow-m); }
/* dark blue button */
.btn--blue { background: var(--blue); border-color: var(--blue); box-shadow: 0 6px 16px rgba(18, 50, 74, .25); }
.btn--blue:hover { background: var(--blue-dark); border-color: var(--blue-dark); box-shadow: 0 10px 22px rgba(18, 50, 74, .3); }
/* sizes */
.btn--big { min-height: 60px; padding: 16px 30px; font-size: 1.125rem; }
.btn--small { min-height: 40px; padding: 8px 16px; font-size: .9375rem; box-shadow: none; }
/* a text link that looks like a link, used in small lines */
.link { color: var(--green); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--green-dark); }


/* 5. MENU ============ */
/* .top         = the name at the very top of the page. It scrolls away.
   .pill        = the dark rounded pill fixed at the bottom middle, with the Menu button.
   .menu__shade = the dim and blur over the page while the menu is open.
   .menu__item  = one floating menu button. There are five. Each one has its own place,
                  size and tilt. All of that is in "THE SLOTS" below.
   .menu__chip  = the look of a menu button (white pill, bold blue words). It is also the part that drifts.
   Colors, sizes and times are the --pill-* and --menu-* values in block 1. */
.top { position: absolute; z-index: 3; top: 0; left: 0; right: 0; padding-top: var(--s5); }
.brand { display: inline-flex; align-items: baseline; gap: 3px; color: var(--blue); font-weight: var(--weight-bold); font-size: 1.0625rem; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.brand__dot { width: .42em; height: .42em; border-radius: 50%; background: var(--yellow); }
.brand--light { color: var(--white); }

.pill {
  position: fixed; z-index: 82; left: 50%; bottom: var(--pill-bottom); transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--s4);
  height: var(--pill-height); padding: 6px;
  background: var(--pill-bg); color: var(--white);
  border-radius: var(--r-pill); box-shadow: var(--shadow-l);
  transition: opacity .25s, visibility 0s;
}
.pill__brand { display: none; padding-left: var(--s4); }
@media (min-width: 800px) { .pill__brand { display: inline-flex; } }
.pill__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 100%; padding: 0 18px 0 22px;
  border-radius: var(--r-pill); background: rgba(255, 255, 255, .13); color: var(--white);
  font-weight: var(--weight-bold); font-size: 1rem;
  transition: background var(--fast);
}
.pill__btn:hover { background: rgba(255, 255, 255, .22); }
.pill__label { min-width: 2.9em; text-align: left; }
.pill__dots { display: grid; grid-template-columns: repeat(2, 4px); gap: 4px; transition: transform var(--menu-time) var(--ease); }
.pill__dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--yellow); }
.menu.is-open .pill__dots { transform: rotate(135deg); }

.menu__shade {
  position: fixed; z-index: 80; inset: 0;
  background: rgba(18, 50, 74, .34); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--menu-time), visibility 0s linear var(--menu-time);
}
.menu.is-open .menu__shade { opacity: 1; visibility: visible; transition: opacity var(--menu-time), visibility 0s; }

/* The area above the pill where the six buttons float. A tap between the buttons goes through to the shade. */
.menu__stage { position: fixed; z-index: 81; left: 0; right: 0; top: 0; height: var(--menu-zone); pointer-events: none; }

/* One button. Closed: small, blurred and see-through, at the place of the pill.
   Closing is quick and in reverse order (the last button goes first). */
.menu__item {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  pointer-events: auto; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transform: translate(var(--ax), -50%) translate(calc((50 - var(--x)) * 1vw), calc(var(--menu-zone) * (100 - var(--y)) / 100 + var(--pill-height) / 2)) scale(.3);
  opacity: 0; filter: blur(8px); visibility: hidden;
  transition:
    transform var(--menu-back) cubic-bezier(.5, 0, .9, .45) calc((4 - var(--i)) * var(--menu-back-wait)),
    opacity var(--menu-back) ease calc((4 - var(--i)) * var(--menu-back-wait)),
    filter var(--menu-back) ease calc((4 - var(--i)) * var(--menu-back-wait)),
    visibility 0s linear calc(var(--menu-back) + 4 * var(--menu-back-wait));
}
/* Open: it flies to its slot, a bit too far and back, and goes from blurred to sharp. One after the other. */
.menu.is-open .menu__item {
  transform: translate(var(--ax), -50%) rotate(var(--tilt));
  opacity: 1; filter: none; visibility: visible;
  transition:
    transform var(--menu-fly) var(--menu-ease) calc(var(--i) * var(--menu-wait)),
    opacity .3s ease calc(var(--i) * var(--menu-wait)),
    filter .45s ease calc(var(--i) * var(--menu-wait)),
    visibility 0s;
}
.menu__item:focus-visible { outline: none; }
.menu__item:focus-visible .menu__chip { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* The look of a button */
.menu__chip {
  display: inline-flex; align-items: center; gap: .4em;
  min-height: 48px; padding: .4em 1em;
  background: var(--menu-chip-bg); color: var(--menu-chip-text);
  border-radius: var(--r-pill); box-shadow: var(--shadow-l);
  font-size: calc(var(--menu-font) * var(--size)); font-weight: 900; line-height: 1.1; letter-spacing: -.02em; white-space: nowrap;
  scale: 1; transition: scale var(--fast) var(--ease);
}
.menu__chip svg { width: 1.1em; height: 1.1em; flex: none; }
.menu__item--talk .menu__chip { background: var(--menu-talk-bg); color: var(--menu-talk-text); }

/* THE DRIFT: after landing, each button moves slowly around its slot, at its own speed (--t).
   How far: --menu-drift. How much extra tilt: --menu-sway. Both are in block 1. */
.menu.is-open .menu__chip { animation: menu-drift var(--t) ease-in-out calc(var(--menu-fly) + var(--i) * var(--menu-wait)) infinite; }
.menu__item:nth-of-type(even) .menu__chip { animation-direction: reverse; }
@keyframes menu-drift {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  25% { translate: var(--menu-drift) calc(var(--menu-drift) * -.6); rotate: var(--menu-sway); }
  50% { translate: calc(var(--menu-drift) * -.4) var(--menu-drift); rotate: calc(var(--menu-sway) * -.5); }
  75% { translate: calc(var(--menu-drift) * -1) calc(var(--menu-drift) * -.3); rotate: calc(var(--menu-sway) * -1); }
}
/* Easy to tap: under the mouse, with keyboard focus or under a finger it stands still and grows a little. */
.menu__item:hover .menu__chip, .menu__item:focus-visible .menu__chip, .menu__item:active .menu__chip { animation-play-state: paused; scale: 1.06; }

/* THE SLOTS: one line for each button.
     --x  --y   the place, in percent of the area above the pill (0 0 = top left)
     --ax       which point of the button sits on --x:  0% = its left edge, -50% = its middle, -100% = its right edge
     --size     how big the words are (1 = the smallest)
     --tilt     how much it leans
     --t        how long one slow drift loop takes
   Keep the order from top to bottom, and keep clear space around each one.
   Phone: a zigzag column, left, right, left ... and "Talk to us" in the middle at the bottom. */
.menu__item--1 { --i: 0; --x: 6;  --y: 11;   --ax: 0%;    --size: 1.1;  --tilt: -3deg;   --t: 7s; }
.menu__item--2 { --i: 1; --x: 94; --y: 30.5; --ax: -100%; --size: 1;    --tilt: 2.5deg;  --t: 5.6s; }
.menu__item--3 { --i: 2; --x: 10; --y: 50;   --ax: 0%;    --size: 1.15; --tilt: 3deg;    --t: 8.4s; }
.menu__item--4 { --i: 3; --x: 92; --y: 69.5; --ax: -100%; --size: 1.2;  --tilt: -2.5deg; --t: 6.3s; }
.menu__item--5 { --i: 4; --x: 50; --y: 89;   --ax: -50%;  --size: 1.26; --tilt: -1.5deg; --t: 5s; }
/* Wide screen: spread across the width, loosely staggered. */
@media (min-width: 800px) {
  .menu__item--1 { --x: 24; --y: 15; --ax: -50%; --tilt: -4deg; }
  .menu__item--2 { --x: 68; --y: 30; --ax: -50%; --tilt: 3deg; }
  .menu__item--3 { --x: 34; --y: 48; --ax: -50%; --tilt: -2.5deg; }
  .menu__item--4 { --x: 72; --y: 65; --ax: -50%; --tilt: 3.5deg; }
  .menu__item--5 { --x: 50; --y: 88; --ax: -50%; --tilt: 2deg; }
}
/* while the Ask AI window is open, the pill and the contact button step back */
.chat-open .pill, .chat-open .contact { opacity: 0; visibility: hidden; pointer-events: none; }


/* 6. CARDS ============ */
/* .card is the white box used everywhere. */
.card {
  position: relative;
  padding: var(--s5);
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-s);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast);
}
.card h3 { margin-bottom: var(--s2); }
.card p { color: var(--muted); }
.card--lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); }
/* problem card: a small soft red line at the top */
.card--problem::before { content: ""; display: block; width: 36px; height: 5px; margin-bottom: var(--s4); border-radius: var(--r-pill); background: var(--red); }
/* card with a light color inside */
.card--tint { background: var(--tint); border-color: transparent; box-shadow: none; }
.card--green { background: var(--tint-green); border-color: transparent; box-shadow: none; }


/* 7. CHIPS ============ */
/* The rounded choice buttons (kinds of company, topics, ready questions). */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  min-height: 44px; padding: 9px 16px;
  border: 1.5px solid var(--line); border-radius: var(--r-chip);
  background: var(--white); color: var(--blue);
  font-weight: 600; font-size: .9375rem; line-height: 1.2;
  transition: background var(--fast), border-color var(--fast), color var(--fast), transform var(--fast) var(--ease);
}
.chip:hover { border-color: var(--blue); transform: translateY(-1px); }
.chip.is-on { background: var(--blue); border-color: var(--blue); color: var(--white); box-shadow: var(--shadow-s); }
.chip--small { min-height: 38px; padding: 7px 13px; font-size: .875rem; text-align: left; }


/* 8. SWITCH ============ */
/* The switch with two sides: soft red "Before", green "With Yokis". */
.switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 5px; background: var(--tint); border: 1px solid var(--line); border-radius: var(--r-pill); }
.switch__thumb { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: var(--r-pill); background: var(--red); box-shadow: var(--shadow-s); transition: transform .45s var(--ease), background .45s; }
.switch__opt { position: relative; min-height: 46px; padding: 8px 22px; border-radius: var(--r-pill); color: var(--muted); font-weight: var(--weight-bold); white-space: nowrap; transition: color .3s; }
.switch__opt.is-on { color: var(--white); }
.is-after .switch__thumb { transform: translateX(100%); background: var(--green); }


/* 9. LISTS ============ */
/* List with a green tick before each line. */
.ticks { display: grid; gap: var(--s3); }
.ticks li { position: relative; padding-left: 34px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .15em; width: 22px; height: 22px; border-radius: 50%; background: var(--green); }
.ticks li::after { content: ""; position: absolute; left: 7px; top: calc(.15em + 6px); width: 8px; height: 5px; border-left: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: rotate(-45deg); }


/* 10. PICTURES AND VIDEOS ============ */
/* .pic  = an object picture with a white background. "multiply" hides the white box.
   The pictures are a tiny bit off-white, so they are also made a little brighter.
   .clip = a video. Its white is not perfect, so the edges fade out softly. */
.pic, .phone__stage img { filter: brightness(1.03); }   /* makes an almost-white background fully white */
.pic { mix-blend-mode: multiply; }
.clip {
  width: 100%; mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}


/* 11. RIBBON ============ */
/* The soft moving color ribbon. main.js draws it. Colors are in block 1. */
.ribbon { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; filter: blur(7px); transition: opacity 1.4s; }
.ribbon.is-on { opacity: var(--ribbon-strength); }
/* on the first screen the ribbon fades out before the row of big numbers */
.hero .ribbon { -webkit-mask-image: linear-gradient(#000 52%, transparent 76%); mask-image: linear-gradient(#000 52%, transparent 76%); }
.last .ribbon.is-on { opacity: calc(var(--ribbon-strength) * .6); }


/* 12. CONTACT BUTTON ============ */
/* One round button at the bottom right. WhatsApp, Telegram and Ask AI flow out of it like drops.
   It has two layers:
     .contact__goo   = only plain colored circles (.contact__drop). The "goo" filter in index.html
                       makes them stretch and melt together.
     .contact__item  = the real buttons with icon and label, on top, with no filter, so they stay sharp.
   A drop and its button share one place class (.contact__slot--1, --2, --3), so they move together.
   Colors, sizes, distances and times are the --contact-* values in block 1. */
.contact { position: fixed; z-index: 60; right: var(--contact-right); bottom: var(--contact-bottom); width: var(--contact-size); height: var(--contact-size); transition: opacity .25s, visibility 0s; }
.contact__filter { position: absolute; }

/* where each drop goes when open. Phone: a column going up. */
.contact__slot--1 { --i: 0; --x: 0px; --y: calc(-1 * var(--contact-step) - 4px); }
.contact__slot--2 { --i: 1; --x: 0px; --y: calc(-2 * var(--contact-step) - 4px); }
.contact__slot--3 { --i: 2; --x: 0px; --y: calc(-3 * var(--contact-step) - 4px); }
/* wide screen: an arc. One straight up, one up-left, one left. */
@media (min-width: 800px) {
  .contact__slot--1 { --y: calc(-1 * var(--contact-reach)); --label-up: -22px; }
  .contact__slot--2 { --x: calc(-.707 * var(--contact-reach)); --y: calc(-.707 * var(--contact-reach)); }
  .contact__slot--3 { --x: calc(-1 * var(--contact-reach)); --y: 0px; }
}

/* layer 1: the liquid circles */
.contact__goo { position: absolute; right: -24px; bottom: -24px; width: 300px; height: 340px; pointer-events: none; filter: url(#goo) drop-shadow(0 6px 14px rgba(18, 50, 74, .24)); }
.contact__drop, .contact__item {
  position: absolute; right: calc((var(--contact-size) - var(--contact-child)) / 2); bottom: calc((var(--contact-size) - var(--contact-child)) / 2);
  width: var(--contact-child); height: var(--contact-child); border-radius: 50%;
  transform: translate(var(--x), var(--y));
  transition: transform var(--contact-time) var(--contact-out) calc(var(--i) * var(--contact-wait));
}
.contact__drop { margin: 24px; background: var(--c); }
.contact__drop--main { right: 0; bottom: 0; width: var(--contact-size); height: var(--contact-size); background: var(--contact-main); transform: none; }
.contact__drop--wa { --c: var(--contact-wa); }
.contact__drop--tg { --c: var(--contact-tg); }
.contact__drop--ai { --c: var(--contact-ai); }

/* layer 2: the real buttons, sharp */
.contact__item { display: grid; place-items: center; color: var(--white); text-decoration: none; transition: transform var(--contact-time) var(--contact-out) calc(var(--i) * var(--contact-wait)), opacity .2s ease calc(var(--i) * var(--contact-wait)), visibility 0s; }
.contact__item svg { width: 26px; height: 26px; }
.contact__item--ai { color: var(--blue); }
.contact__label {
  position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(calc(-50% + var(--label-up, 0px)));
  padding: 4px 12px; background: var(--white); color: var(--blue);
  border: 1px solid var(--line); border-radius: var(--r-pill); box-shadow: var(--shadow-m);
  font-size: .8125rem; font-weight: 700; line-height: 1.4; white-space: nowrap;
  transition: opacity .25s ease calc(var(--contact-time) + var(--i) * var(--contact-wait));   /* after the drop arrives */
}

/* the main button: a chat picture that turns into a cross */
.contact__main { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; color: var(--white); }
.contact__icon { grid-area: 1 / 1; width: 28px; height: 28px; transition: transform .4s var(--ease), opacity .25s; }
.contact.is-open .contact__icon--chat, .contact:not(.is-open) .contact__icon--close { opacity: 0; transform: rotate(90deg) scale(.4); }

/* closed: every drop sits under the main button. Closing plays the opening backwards. */
.js .contact:not(.is-open) .contact__drop:not(.contact__drop--main) { transform: translate(0, 0) scale(.85); transition: transform var(--contact-time) var(--contact-in) calc((2 - var(--i)) * var(--contact-wait)); }
.js .contact:not(.is-open) .contact__item { transform: translate(0, 0) scale(.6); opacity: 0; visibility: hidden; pointer-events: none; transition: transform var(--contact-time) var(--contact-in) calc((2 - var(--i)) * var(--contact-wait)), opacity .25s ease calc((2 - var(--i)) * var(--contact-wait) + .15s), visibility 0s linear .7s; }
.js .contact:not(.is-open) .contact__label { opacity: 0; transition: opacity .12s; }


/* 13. CHAT ============ */
/* Message bubbles. Used in the small chat film (Part 5) and in the Ask AI window. */
.bubble { max-width: 86%; padding: 10px 14px; border-radius: 18px; font-size: .9375rem; line-height: 1.45; align-self: flex-start; background: var(--tint); color: var(--text); border-bottom-left-radius: 6px; }
.bubble--out { align-self: flex-end; background: var(--green); color: var(--white); border-bottom-left-radius: 18px; border-bottom-right-radius: 6px; }
.bubble--ai { background: var(--tint-yellow); }
/* an AI answer: lines, a simple list, and the small WhatsApp button under it */
.bubble__line { display: block; }
.bubble__line + .bubble__line, .bubble__list + .bubble__line { margin-top: .4em; }
.bubble__list { margin: .3em 0; padding-left: 1.2em; list-style: disc; }
.bubble__list li + li { margin-top: .15em; }
.bubble__actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.bubble__actions .btn { min-height: 34px; margin-top: 0; padding: 6px 12px; font-size: .8125rem; }
.bubble__again { background: var(--white); }
.bubble__page { display: inline-block; margin-top: 6px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--white); color: var(--blue); font-size: .8125rem; font-weight: 700; }
.dots { display: inline-flex; gap: 4px; padding: 4px 0; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .35; animation: dot 1s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* The Ask AI window */
.chat {
  position: fixed; z-index: 70; right: var(--s3); bottom: var(--s3);
  display: flex; flex-direction: column;
  width: min(390px, calc(100vw - 2 * var(--s3))); height: min(600px, calc(100vh - 2 * var(--s3))); height: min(600px, calc(100dvh - 2 * var(--s3)));
  overflow: hidden; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-l);
  transform-origin: bottom right; animation: chat-open .25s var(--ease);
}
@keyframes chat-open { from { opacity: 0; transform: scale(.85); } }
.chat__head { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--blue); color: var(--white); }
.chat__face { width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--white); object-fit: cover; }
.chat__name { margin-right: auto; font-weight: var(--weight-bold); line-height: 1.2; }
.chat__close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--white); font-size: 1.6rem; line-height: 1; }
.chat__close:hover { background: rgba(255, 255, 255, .15); }
.chat__body { flex: 1; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); overflow-y: auto; overscroll-behavior: contain; }
.chat__ready { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s1) 0; }
.chat__form { display: flex; gap: var(--s2); padding: var(--s3) var(--s3) var(--s2); border-top: 1px solid var(--line); }
.chat__note { padding: 0 var(--s4) var(--s3); color: var(--muted); font-size: .75rem; line-height: 1.35; text-align: center; }
.chat__input { flex: 1; min-width: 0; min-height: 46px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: var(--r-pill); background: var(--white); font-size: 1rem; }
.chat__input:focus { outline: none; border-color: var(--green); }
.chat__send { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--green); color: var(--white); }
.chat__send:hover { background: var(--green-dark); }
/* while an answer is on its way, nothing new can be sent */
.chat__send:disabled, .chat__ready .chip:disabled { opacity: .45; cursor: default; }
.chat__send:disabled:hover { background: var(--green); }
.chat__send svg { width: 22px; height: 22px; }


/* 14. PART 1: THE FIRST SCREEN ============ */
.hero { position: relative; padding-top: 88px; padding-bottom: var(--s6); overflow: hidden; }
.hero__grid { display: grid; gap: var(--s6); align-items: center; }
.hero__text { display: grid; gap: var(--s5); justify-items: start; }
.hero__text .lead { max-width: 34em; }
@media (min-width: 768px) {
  .hero { padding-top: 116px; }
  .hero__grid { grid-template-columns: 1.1fr .9fr; }
}
@media (min-width: 1100px) {
  .hero__grid { grid-template-columns: 1.15fr .85fr; gap: var(--s7); min-height: min(640px, calc(100vh - 300px)); }
}

/* The phone picture. The owner's page is bent onto its screen with matrix3d.
   The numbers were measured on the phone picture (A1-phone.webp). */
.hero__stage { position: relative; width: 100%; max-width: 480px; margin-inline: auto; height: calc(1020px * var(--phone-s) + 24px); }
.phone { position: absolute; left: 50%; top: 12px; width: calc(610px * var(--phone-s)); height: calc(1020px * var(--phone-s)); margin-left: calc(-305px * var(--phone-s)); overflow: hidden; mix-blend-mode: multiply; }
.phone--back { mix-blend-mode: normal; }          /* a white sheet behind the screen, so the ribbon does not show through it */
.phone__stage { position: absolute; left: calc(-730px * var(--phone-s)); top: calc(-40px * var(--phone-s)); width: 2000px; height: 1125px; transform: scale(var(--phone-s)); transform-origin: 0 0; }
.phone__stage img { position: absolute; inset: 0; width: 2000px; height: 1125px; max-width: none; }
.ps {
  position: absolute; left: 0; top: 0; width: 360px; height: 800px; padding: 50px 20px 0;
  transform-origin: 0 0; transform: matrix3d(1.136853, .05418687, 0, .0001704682, .1484267, 1.107879, 0, -.00003105378, 0, 0, 1, 0, 806, 79.2, 0, 1);
  border-radius: 42px; overflow: hidden; background: #fff; color: #12324a; mix-blend-mode: multiply;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.6; letter-spacing: 0;
}
.ps--back { mix-blend-mode: normal; }
.is-loaded .phone { animation: phone-float 7s ease-in-out infinite; }
@keyframes phone-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(-.8deg); } }

/* The owner's page inside the phone (fixed sizes, it is scaled as one picture) */
.ps p { margin: 0; }
.ps-status { position: absolute; top: 14px; left: 30px; right: 30px; display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; }
.ps-hello { font-size: 14px; color: #5a6a78; }
.ps-title { font-size: 27px; font-weight: 700; line-height: 1.1; margin: 2px 0 14px !important; letter-spacing: -.01em; }
.ps-card { border-radius: 20px; padding: 16px 18px; margin-bottom: 12px; }
.ps-navy { background: #12324a; color: #fff; }
.ps-label { font-size: 13px; font-weight: 600; opacity: .8; margin: 0 0 2px; }
.ps-big { font-size: 46px; font-weight: 800; line-height: 1; }
.ps-big small { font-size: 16px; font-weight: 600; opacity: .85; margin-left: 6px; }
.ps-bar { height: 9px; border-radius: 9px; background: rgba(255, 255, 255, .22); margin: 12px 0 8px; overflow: hidden; display: flex; }
.ps-bar i { display: block; height: 100%; }
.ps-legend { display: flex; gap: 14px; font-size: 13px; font-weight: 600; }
.ps-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; background: var(--c); }
.ps-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.ps-tile { border-radius: 20px; padding: 14px 16px; background: #eef3f6; }
.ps-num { font-size: 25px; font-weight: 800; line-height: 1.1; }
.ps-unit { font-size: 12px; font-weight: 600; color: #5a6a78; }
.ps-in .ps-num { color: #0f7b6c; }
.ps-alert { background: #fff3d1; border-left: 7px solid #f2a900; }
.ps-alert b, .ps-ask b { display: block; font-size: 17px; line-height: 1.2; }
.ps-alert span, .ps-ask span { font-size: 13px; color: #5a6a78; font-weight: 600; }
.ps-ask { background: #e3f4ee; border-left: 7px solid #0f7b6c; }
.ps-btns { display: flex; gap: 10px; margin-top: 12px; }
.ps-btns div { flex: 1; text-align: center; font-size: 15px; font-weight: 800; padding: 10px 0; border-radius: 99px; }
.ps-yes { background: #0f7b6c; color: #fff; }
.ps-no { background: #fff; color: #12324a; border: 2px solid #c9d5dd; }
.ps-jobs { background: #eef3f6; padding: 13px 18px; }
.ps-jobs .ps-row { display: flex; justify-content: space-between; align-items: baseline; }
.ps-jobs b { font-size: 16px; }
.ps-jobs span { font-size: 13px; font-weight: 600; color: #5a6a78; }
.ps-jobs .ps-bar { background: #d5dde4; margin: 9px 0 0; }
.ps-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 74px; background: #fff; border-top: 2px solid #e3e9ee; display: flex; justify-content: space-around; align-items: flex-start; padding-top: 12px; font-size: 12px; font-weight: 700; color: #8a98a5; }
.ps-nav div { text-align: center; }
.ps-nav i { display: block; width: 26px; height: 26px; border-radius: 9px; background: #d5dde4; margin: 0 auto 4px; }
.ps-nav .ps-on { color: #12324a; }
.ps-nav .ps-on i { background: #f2a900; }

/* The three small floating cards around the phone */
.float-card {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: var(--s2);
  padding: 9px 14px 9px 9px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow-m);
  color: var(--blue); font-weight: 700; font-size: .8125rem; line-height: 1.25; white-space: nowrap;
}
.float-card__icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 10px; background: var(--c); color: var(--white); }
.float-card__icon svg { width: 17px; height: 17px; }
.float-card--1 { --c: var(--green); left: 0; top: 60%; }
.float-card--2 { --c: var(--yellow); right: 0; top: 9%; }
.float-card--3 { --c: var(--blue); right: 3%; bottom: 0; }
/* wide screen: the third card sits at the bottom left, clear of the contact button at the bottom right */
@media (min-width: 768px) { .float-card--3 { right: auto; left: 2%; } }
@media (min-width: 1100px) {
  .float-card { padding: 11px 18px 11px 11px; font-size: .9375rem; }
  .float-card__icon { width: 36px; height: 36px; border-radius: 12px; }
  .float-card--1 { left: -4%; }
  .float-card--2 { right: -6%; }
}
/* they slide in one by one after the page has loaded, then float */
.js .float-card { opacity: 0; }
.js.is-loaded .float-card { opacity: 1; animation: card-in .8s var(--ease) backwards, card-float 5s ease-in-out infinite; }
.js.is-loaded .float-card--1 { --from: -60px 0; animation-delay: .5s, 1.3s; animation-duration: .8s, 5.2s; }
.js.is-loaded .float-card--2 { --from: 60px 0; animation-delay: .9s, 1.7s; animation-duration: .8s, 6.1s; }
.js.is-loaded .float-card--3 { --from: 0 60px; animation-delay: 1.3s, 2.1s; animation-duration: .8s, 4.6s; }
@keyframes card-in { from { opacity: 0; translate: var(--from); } }
@keyframes card-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* The one big line under the first screen: "1 month to your first delivery" */
.stats { display: flex; justify-content: center; margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--line); }
.stat { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: var(--s1) var(--s4); text-align: center; }
.stat__num { color: var(--blue); font-size: var(--fs-stat); font-weight: 900; line-height: .95; letter-spacing: -.04em; white-space: nowrap; }
.stat__num small { font-size: .34em; font-weight: var(--weight-bold); letter-spacing: -.01em; margin-left: .2em; }
.stat__label { color: var(--muted); font-size: var(--fs-stat-label); font-weight: 700; line-height: 1.2; }


/* 15. PART 2: THE PROBLEMS ============ */
.problems__grid { display: grid; gap: var(--s5); align-items: center; }
.problems__clip { max-width: 460px; margin-inline: auto; width: 100%; }
.cards { display: grid; gap: var(--s4); }
@media (min-width: 620px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) {
  .problems__grid { grid-template-columns: 1.5fr 1fr; gap: var(--s6); }
  .problems__clip { order: 2; max-width: none; }
}


/* 16. PART 3: CHOOSE YOUR KIND OF COMPANY ============ */
.kind { display: grid; gap: var(--s5); margin-top: var(--s5); padding: var(--s5); }
.kind__pic { display: grid; place-items: center; border-radius: var(--r-m); background: radial-gradient(closest-side, var(--tint-green), rgba(230, 243, 239, 0) 100%); }
.kind__pic img { width: min(100%, 250px); animation: fade-in .45s var(--ease); }
.kind__text { display: grid; gap: var(--s4); align-content: start; justify-items: start; }
.kind__text p { color: var(--text); }
.kind__text h3 { margin: 0; }
.kind__label { display: block; margin-bottom: var(--s1); color: var(--blue) !important; font-size: var(--fs-h3); font-weight: var(--weight-bold); letter-spacing: -.01em; }
.kind__extra { font-weight: 700; color: var(--green) !important; }
@keyframes fade-in { from { opacity: 0; transform: scale(.94); } }
@media (min-width: 768px) {
  .kind { grid-template-columns: .8fr 1.2fr; gap: var(--s6); padding: var(--s6); align-items: center; }
  .kind__pic img { width: min(100%, 400px); }
}


/* 17. PART 4: BEFORE AND AFTER ============ */
.ba__grid { display: grid; gap: var(--s4); margin-top: var(--s5); align-items: center; }
/* phone: switch, picture, text, button. Wide screen: text on the left, picture on the right. */
.ba__side { display: contents; }
.ba .switch { order: 1; justify-self: start; }
.ba__pic { order: 2; }
.ba__text { order: 3; }
.ba__side .btn { order: 4; justify-self: start; }
.ba__text { width: 100%; min-height: 15.5em; padding: var(--s5); border-left: 6px solid var(--red); background: var(--tint-red); border-radius: var(--r-m); transition: background .45s, border-color .45s; }
.ba__text h3 { margin-bottom: var(--s2); }
.ba__text p { color: var(--text); }
.ba__after { display: none; }
.is-after .ba__text { border-color: var(--green); background: var(--tint-green); }
.is-after .ba__before { display: none; }
.is-after .ba__after { display: block; }
/* the picture: messy desk, then clean desk. The loose papers fly into the phone. */
.ba__pic { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-card); border: 1px solid var(--line); box-shadow: var(--shadow-m); background: var(--white); }
.ba__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .7s ease .15s, transform .9s var(--ease); }
.ba__img-after { opacity: 0; transform: scale(1.08); }
.is-after .ba__img-before { opacity: 0; transform: scale(1.08); }
.is-after .ba__img-after { opacity: 1; transform: none; }
.paper {
  position: absolute; left: 44.5%; top: 37%; width: 11%; aspect-ratio: 3 / 4;
  background: linear-gradient(#fff 14%, transparent 14%), repeating-linear-gradient(#fff 0 10%, #e9edf0 10% 12.5%) 50% 0 / 72% 78% no-repeat, #fff; border-radius: 2px; box-shadow: 0 3px 10px rgba(18, 50, 74, .25);
  transform: translate(var(--x), var(--y)) rotate(var(--r));
  transition: transform .9s cubic-bezier(.6, 0, .25, 1), opacity .35s ease .55s;
}
.is-after .paper { transform: translate(0, 0) rotate(calc(var(--r) * -4)) scale(.3); opacity: 0; }
@media (min-width: 1000px) {
  .ba__grid { grid-template-columns: 1fr 1.15fr; gap: var(--s7); }
  .ba__side { display: grid; gap: var(--s4); justify-items: start; align-content: start; }
  .ba__text { min-height: 14em; }
}


/* 18. PART 5: INSIDE EVERY SYSTEM ============ */
.inside__grid { display: grid; gap: var(--s5); align-items: stretch; }
.feature { display: flex; flex-direction: column; gap: var(--s4); }
.feature > img { width: 150px; margin: -10px 0 -14px -14px; }
.feature p, .feature li { color: var(--text); }
.feature h3 { font-size: calc(var(--fs-h3) * 1.2); margin: 0; }
.feature__example { padding: var(--s3) var(--s4); border-radius: var(--r-s); background: var(--tint-yellow); }
/* the small chat film inside a phone frame */
/* The two small phone screens (one talk each). The head always says who the talk is with.
   The one who holds the phone is on the right, in green. The other side is on the left, with a small round face. */
.demo { width: 100%; max-width: 320px; margin: auto auto 0; border: 9px solid var(--blue); border-radius: 38px; background: var(--white); box-shadow: var(--shadow-l); overflow: hidden; }
.demo__head { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); color: var(--blue); line-height: 1.25; }
.demo__head b { display: block; font-weight: var(--weight-bold); }
.demo__head small { color: var(--muted); font-size: .75rem; }
.demo__face { display: grid; place-items: center; flex: none; width: 26px; height: 26px; margin: 0; border-radius: 50%; background: var(--blue); color: var(--white); font-size: .75rem; font-weight: var(--weight-bold); object-fit: cover; }
img.demo__face { background: var(--tint); }
.demo__head .demo__face { width: 38px; height: 38px; font-size: 1rem; }
.demo__body { display: flex; flex-direction: column; gap: var(--s2); height: 236px; padding: var(--s3); transition: opacity .45s; }
.demo__body.is-fading { opacity: 0; }
.demo__row { display: flex; align-items: flex-end; gap: 6px; align-self: flex-start; max-width: 94%; }
.demo__row .bubble { max-width: none; }
.demo .bubble { color: var(--text); font-size: .875rem; }
.demo .bubble--out { color: var(--white); }
.demo__body > * { animation: pop .3s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.try { display: grid; gap: var(--s4); justify-items: start; margin-top: var(--s5); padding: var(--s5); }
.try h3 { font-size: calc(var(--fs-h3) * 1.2); }
.try p { color: var(--text); font-size: var(--fs-lead); }
@media (min-width: 700px) {
  .try { grid-template-columns: 1fr auto; align-items: center; padding: var(--s5) var(--s6); }
}
@media (min-width: 1000px) {
  .inside__grid { grid-template-columns: 1fr 1fr; gap: var(--s6); }
  .feature { padding: var(--s6); }
}


/* 20. PART 7: HOW WE WORK ============ */
/* Each step lights up when it comes on the screen (main.js adds "is-on"). */
.steps { display: grid; }
.step { position: relative; display: grid; grid-template-columns: 56px 1fr; align-content: start; gap: var(--s4); padding-bottom: var(--s6); }
.step:last-child { padding-bottom: 0; }
.step__num { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--line); background: var(--white); color: var(--muted); font-size: 1.4rem; font-weight: 900; transition: background var(--slow), border-color var(--slow), color var(--slow), transform var(--slow) var(--ease), box-shadow var(--slow); }
.step::before, .step::after { content: ""; position: absolute; left: 27px; top: 56px; bottom: 0; width: 2px; background: var(--line); }
.step::after { background: var(--green); transform: scaleY(0); transform-origin: top; transition: transform .8s ease .2s; }
.step:last-child::before, .step:last-child::after { display: none; }
.step__text { padding-top: 6px; }
.step__text h3 { margin-bottom: var(--s1); }
.step__text p { color: var(--muted); }
.js .step__text { opacity: .4; transition: opacity var(--slow); }
.step.is-on .step__num { background: var(--green); border-color: var(--green); color: var(--white); transform: scale(1.06); box-shadow: 0 0 0 7px var(--tint-green); }
.step.is-on::after { transform: scaleY(1); }
.step.is-on .step__text { opacity: 1; }
@media (min-width: 1000px) {
  .steps { grid-template-columns: repeat(5, 1fr); gap: var(--s5); }
  .step { grid-template-columns: 1fr; padding-bottom: 0; }
  .step::before, .step::after { left: 56px; right: calc(-1 * var(--s5)); top: 27px; bottom: auto; width: auto; height: 2px; }
  .step::after { transform: scaleX(0); transform-origin: left; }
  .step.is-on::after { transform: scaleX(1); }
}


/* 21. PART 8: OUR PROMISE ============ */
.promise__grid { display: grid; gap: var(--s4); grid-auto-flow: dense; }
.promise__big { display: grid; gap: var(--s3); align-content: center; }
.promise__big h3 { font-size: calc(var(--fs-h3) * 1.3); }
.promise__big p { color: var(--text); font-size: var(--fs-lead); }
@media (min-width: 620px) {
  .promise__grid { grid-template-columns: 1fr 1fr; }
  .promise__big { grid-column: 1 / -1; grid-template-columns: 1.2fr 1fr; align-items: center; }
  .promise__big .clip { grid-row: 1 / 3; }
  .promise__big h3 { align-self: end; }
  .promise__big p { align-self: start; }
}
@media (min-width: 1000px) {
  .promise__grid { grid-template-columns: repeat(3, 1fr); }
  .promise__big { grid-column: 3; grid-row: 1 / 4; grid-template-columns: 1fr; align-content: center; }
  .promise__big .clip { grid-row: auto; }
}


/* 22. PART 9: QUESTIONS ============ */
/* A simple list that opens. No effects. */
.faq { max-width: 860px; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { position: relative; padding: 20px 44px 20px 0; color: var(--blue); font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: var(--green); font-size: 1.7rem; font-weight: 400; line-height: 1; }
.faq__item[open] summary::after { content: "\2212"; }
.faq__item p { padding: 0 44px 22px 0; color: var(--text); }


/* 22a. PART 9: THE "ONE SYSTEM" PICTURE ============ */
/* The looping picture beside the questions: three dashed rings, the core "Your system",
   the devices around it, and a small chip that travels between them. main.js plays the stories.
   Everything that can be changed is in the values below:
     --flow-h      height of the stage            --flow-cy    how high the core sits
     --flow-core   size of the core               --flow-u     size of all devices (1 = normal)
   and for each ring:    --d (size)  --rx --ry (how it is tilted)  --t (seconds for one turn)
   and for each device:  --x --y (place)  --w (width)  --s (size: near ones bigger)
                         --z (depth: how much it moves with the mouse)  --t (seconds of one float) */
#questions { overflow-x: clip; }       /* the turning rings may reach past the edge of the screen: they are cut there */
.questions { display: grid; gap: var(--s6); }
.questions__list { min-width: 0; }
.flow { --flow-h: 210px; --flow-cy: 38%; --flow-core: 66px; --flow-u: .9; min-width: 0; }
.flow__title { margin-bottom: var(--s2); color: var(--blue); font-size: var(--fs-h3); font-weight: var(--weight-bold); letter-spacing: -.01em; text-align: center; }
.flow__stage { position: relative; height: var(--flow-h); max-width: 520px; margin-inline: auto; }
.flow__caption { min-height: 2.9em; margin-top: var(--s2); color: var(--muted); font-weight: 600; line-height: 1.45; text-align: center; }

/* the three rings: thin dashes, tilted like orbits seen from above, each turning at its own speed */
.flow__rings { position: absolute; inset: 0; perspective: 900px; transform: rotateX(calc(var(--py, 0) * -5deg)) rotateY(calc(var(--px, 0) * 6deg)); transition: transform .5s ease-out; }
.flow__ring { position: absolute; left: 50%; top: var(--flow-cy); width: var(--d); aspect-ratio: 1; transform: translate(-50%, -50%) rotateX(var(--rx)) rotateY(var(--ry)); }
.flow__ring svg { display: block; width: 100%; height: 100%; overflow: visible; animation: flow-spin var(--t) linear infinite; }
.flow__ring circle { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-dasharray: 3 7; }
.flow__ring--1 { --d: 100%; --rx: 66deg; --ry: 0deg;  --t: 110s; color: var(--blue);   opacity: .4; }
.flow__ring--2 { --d: 76%;  --rx: 70deg; --ry: 9deg;  --t: 80s;  color: var(--green);  opacity: .55; }
.flow__ring--3 { --d: 50%;  --rx: 62deg; --ry: -8deg; --t: 60s;  color: var(--yellow); opacity: .8; }
.flow__ring--2 svg { animation-direction: reverse; }
@keyframes flow-spin { to { transform: rotate(360deg); } }

/* the thin tracks from each device to the core (main.js draws them) */
.flow__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow__lines path { fill: none; stroke: var(--blue); stroke-width: 1; stroke-dasharray: 2 5; opacity: .22; }
.flow__lines marker path { fill: var(--blue); stroke: none; opacity: 1; }

/* the core */
.flow__core {
  position: absolute; z-index: 2; left: 50%; top: var(--flow-cy); transform: translate(-50%, -50%);
  display: grid; place-items: center; align-content: center; gap: 4px;
  width: var(--flow-core); height: var(--flow-core); padding: 0 6px;
  border-radius: 28%; background: var(--blue); color: var(--white);
  font-size: calc(var(--flow-core) * .15); font-weight: var(--weight-bold); line-height: 1.1; text-align: center;
  box-shadow: 0 0 0 8px rgba(18, 50, 74, .06), 0 0 0 18px rgba(18, 50, 74, .04), 0 14px 34px rgba(18, 50, 74, .35);
}
.flow__core::before { content: ""; width: .62em; height: .62em; border-radius: 50%; background: var(--yellow); }
.flow__core.is-pulse { animation: flow-pulse .6s var(--ease); }
@keyframes flow-pulse { 40% { transform: translate(-50%, -50%) scale(1.09); box-shadow: 0 0 0 12px rgba(242, 169, 0, .2), 0 0 0 26px rgba(15, 123, 108, .08), 0 14px 34px rgba(18, 50, 74, .4); } }

/* the devices: upright, facing the visitor. Near ones are bigger, far ones smaller and lighter. */
.flow__device {
  position: absolute; z-index: 3; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  translate: calc(var(--px, 0) * var(--z) * 9px) calc(var(--py, 0) * var(--z) * 7px); transition: translate .5s ease-out;
  display: grid; justify-items: center; gap: 4px; opacity: var(--o, 1);
  color: var(--blue); font-size: calc(.75rem * var(--s)); font-weight: 700; line-height: 1.1; white-space: nowrap;
  animation: flow-float var(--t) ease-in-out infinite;
}
.flow__device svg { display: block; width: calc(var(--w) * var(--s) * var(--flow-u)); aspect-ratio: var(--r); filter: drop-shadow(0 6px 8px rgba(18, 50, 74, .22)); }
@keyframes flow-float { 50% { transform: translate(-50%, calc(-50% - 4px)); } }
.fd { fill: var(--blue); }
.fh { fill: var(--blue-dark); }
.fs { fill: var(--flow-screen, #fff); transition: fill .3s; }
.fb { fill: var(--tint-blue); }
.fg { fill: var(--green); }
.fy { fill: var(--yellow); }
.flow__device.is-lit { --flow-screen: #CDEBDF; }          /* its screen lights up when something arrives */
/* phone: a small column of three. The other two devices are shown on wide screens only. */
.flow__device--store      { --x: 12%; --y: 42%; --w: 34px; --r: 36 / 62; --s: 1;    --z: .6;  --t: 5.5s; }
.flow__device--boss       { --x: 88%; --y: 36%; --w: 34px; --r: 36 / 62; --s: .9;   --z: -.5; --t: 6.5s; --o: .86; }
.flow__device--worker     { --x: 50%; --y: 86%; --w: 58px; --r: 68 / 60; --s: 1;    --z: 1;   --t: 5s; }
.flow__device--foreman    { --x: 17%; --y: 17%; --w: 62px; --r: 70 / 52; --s: .88;  --z: -.6; --t: 7s; --o: .84; display: none; }
.flow__device--accountant { --x: 87%; --y: 68%; --w: 76px; --r: 84 / 56; --s: 1.05; --z: .7;  --t: 6s; display: none; }

/* the chip that travels */
.flow__chip { position: absolute; z-index: 4; left: 0; top: 0; padding: 2px 10px; border: 1.5px solid var(--blue); border-radius: var(--r-pill); background: var(--white); color: var(--blue); font-size: .75rem; font-weight: var(--weight-bold); line-height: 1.5; white-space: nowrap; box-shadow: var(--shadow-m); opacity: 0; pointer-events: none; }
.flow__chip--yes { border-color: var(--green); background: var(--green); color: var(--white); }
.flow__chip--ai { border-color: var(--yellow); background: var(--yellow); }
/* when the picture is not on the screen, everything in it stands still */
.flow.is-paused .flow__ring svg, .flow.is-paused .flow__device { animation-play-state: paused; }

@media (min-width: 900px) {
  .questions { grid-template-columns: 45fr 55fr; gap: var(--s7); align-items: start; }
  .flow { --flow-h: 430px; --flow-cy: 45%; --flow-core: 92px; --flow-u: 1; position: sticky; top: var(--s5); }
  .flow__device--store      { --x: 12%; --y: 65%; --s: 1.08; --z: .7; }
  .flow__device--boss       { --x: 83%; --y: 16%; --s: .88;  --z: -.6; }
  .flow__device--worker     { --x: 50%; --y: 87%; --s: 1.12; }
  .flow__device--foreman, .flow__device--accountant { display: grid; }
}
/* less movement: a still picture with thin arrows, and the four stories as a short list */
@media (prefers-reduced-motion: reduce) {
  .flow__caption { display: none; }
  .flow__list.visually-hidden { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; margin-top: var(--s3); padding-left: 1.3em; list-style: decimal; color: var(--muted); font-weight: 600; }
  .flow__lines path { opacity: .45; }
}


/* 23. PART 10: THE LAST SCREEN ============ */
.last { position: relative; overflow: hidden; padding-block: var(--space-section); text-align: center; }
.last__box { display: grid; gap: var(--s5); justify-items: center; max-width: 900px; }
.last h2 { font-size: clamp(2rem, 1.2rem + 3.6vw, 3.8rem); }
.last .btn-row { justify-content: center; width: 100%; }
@media (max-width: 560px) { .last .btn-row .btn { width: 100%; } }


/* 24. FOOTER ============ */
.footer { padding: var(--s5) 0 var(--page-bottom); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-small); text-align: center; }
.footer a { color: inherit; text-decoration: none; white-space: nowrap; }
.footer a:hover { text-decoration: underline; }


/* 25. NO MOVEMENT ============ */
/* For visitors who ask their phone for less movement: everything stands still. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .float-card { opacity: 1; }
  .js .step__text { opacity: 1; }
  /* menu: no flying, no drift, no tilt. The buttons simply fade in at their places. */
  .menu__shade { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menu__item { transform: translate(var(--ax), -50%) !important; filter: none !important; }
  .menu__shade, .menu__item { transition: opacity .2s, visibility 0s linear .2s !important; }
  .menu.is-open .menu__shade, .menu.is-open .menu__item { transition: opacity .2s, visibility 0s !important; }
  /* contact button: no liquid, the three buttons are simply shown */
  .contact__goo { filter: none; }
  .contact__drop { box-shadow: var(--shadow-m); }
}