/* ==========================================================================
   Fully Ups — core stylesheet
   1. Tokens          6. Navigation        11. Why / editorial list
   2. Reset & base    7. Hero + ecosystem  12. Rising path (process, journey)
   3. Typography      8. Intro / values    13. CTA + footer
   4. Layout          9. Service cards     14. Inner pages (about, services, detail)
   5. Buttons, links  10. Illustrations    15. Contact form
   Breakpoints live in responsive.css
   ========================================================================== */

/* 1. Tokens --------------------------------------------------------------- */
:root {
  --navy: #131A42;
  --navy-2: #1B2456;
  --navy-deep: #0E1434;
  --green: #28AB0E;
  --green-ink: #1C7D09;      /* brand green darkened for small text on light backgrounds */
  --green-tint: #EAF6E7;
  --charcoal: #595959;
  --off: #FAFAFA;
  --white: #FFFFFF;

  --line: rgba(19, 26, 66, .12);
  --line-strong: rgba(19, 26, 66, .24);
  --line-inv: rgba(255, 255, 255, .14);

  --text: var(--navy);
  --text-soft: var(--charcoal);
  --surface: var(--white);

  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --max: 1320px;
  --section: clamp(5rem, 11vw, 10rem);
  --nav-h: 84px;
  --radius: 6px;
  --radius-lg: 10px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* 2. Reset & base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1rem); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--off);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--green); color: var(--navy); }

.skip-link {
  position: fixed; left: 1rem; top: -4rem; z-index: 300;
  padding: .75rem 1rem; background: var(--navy); color: var(--white); border-radius: var(--radius);
  transition: top .2s;
}
.skip-link:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 3. Typography ----------------------------------------------------------- */
.display, .h1, .h2, .h3 { font-weight: 800; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
.display { font-size: clamp(2.75rem, 7vw, 6rem); font-style: italic; letter-spacing: -.045em; line-height: .98; }
.h1 { font-size: clamp(2.5rem, 6vw, 5.25rem); }
.h2 { font-size: clamp(2rem, 4.3vw, 3.75rem); line-height: 1.05; }
.h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.lead { font-size: clamp(1.125rem, 1.55vw, 1.375rem); line-height: 1.5; color: var(--text); font-weight: 500; }
.body { color: var(--text-soft); max-width: 62ch; }
.body + .body { margin-top: 1.1em; }
.green { color: var(--green); }
.num { font-style: italic; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--green-ink); }
.kicker { font-size: .9375rem; font-weight: 600; color: var(--green-ink); }

/* 4. Layout --------------------------------------------------------------- */
.container { width: min(100% - (var(--gutter) * 2), var(--max)); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; }
.section--white { background: var(--white); }
.section--line { border-top: 1px solid var(--line); }
.section--navy {
  background: var(--navy); color: var(--white);
  --text: var(--white);
  --text-soft: rgba(255, 255, 255, .72);
  --line: var(--line-inv);
  --line-strong: rgba(255, 255, 255, .3);
  --surface: var(--navy-2);
  --green-ink: var(--green);
}
.section--navy::after {            /* subtle noise */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../assets/images/noise.png"); opacity: .5; mix-blend-mode: overlay;
}
.section--navy > * { position: relative; z-index: 1; }

.split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.split--wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
.section-head { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(1.5rem, 5vw, 5rem); align-items: end; margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.section-head .body { justify-self: end; }

/* Reveal defaults: content is visible unless motion is enabled (html.js-anim) */
html.js-anim [data-reveal], html.js-anim [data-split], html.js-anim [data-stagger] > *,
html.js-anim [data-hero], html.js-anim [data-hero-title],
html.js-anim .eco__piece, html.js-anim .eco__link, html.js-anim .eco__node { visibility: hidden; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .09em .16em .02em; margin: -.08em -.09em -.16em -.02em; }
.wi { display: inline-block; will-change: transform; }

/* 5. Buttons & links ------------------------------------------------------ */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  min-height: 3.25rem; padding: .85rem 1.5rem;
  font-weight: 700; font-size: 1rem; line-height: 1; letter-spacing: -.005em;
  border-radius: var(--radius); border: 1px solid transparent;
  overflow: hidden; isolation: isolate; white-space: nowrap;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  transform: translateY(101%); transition: transform .45s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn__icon { width: 1rem; height: 1rem; flex: none; overflow: hidden; position: relative; }
.btn__icon svg { width: 100%; height: 100%; transition: transform .45s var(--ease); }
.btn:hover .btn__icon svg, .btn:focus-visible .btn__icon svg { transform: translate(3px, -3px); }

.btn--primary { background: var(--green); color: var(--navy); }
.btn--primary::before { background: var(--navy); }
.btn--primary:hover, .btn--primary:focus-visible { color: var(--white); }
.section--navy .btn--primary::before, .menu .btn--primary::before { background: var(--white); }
.section--navy .btn--primary:hover, .section--navy .btn--primary:focus-visible,
.menu .btn--primary:hover { color: var(--navy); }

.btn--ghost { border-color: var(--line-strong); color: var(--text); }
.btn--ghost::before { background: var(--navy); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--white); border-color: var(--navy); }
.section--navy .btn--ghost::before { background: var(--white); }
.section--navy .btn--ghost:hover, .section--navy .btn--ghost:focus-visible { color: var(--navy); border-color: var(--white); }

.btn--sm { min-height: 2.75rem; padding: .7rem 1.15rem; font-size: .9375rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .875rem; }

.link {
  display: inline-flex; align-items: center; gap: .55rem; font-weight: 700;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat,
              linear-gradient(var(--green), var(--green)) 0 100% / 0 2px no-repeat;
  padding-bottom: .3rem;
  transition: background-size .5s var(--ease);
}
.link:hover, a:hover > .link, a:focus-visible > .link, .link:focus-visible { background-size: 100% 1px, 100% 2px; }
.link svg { width: .875rem; height: .875rem; transition: transform .45s var(--ease); }
.link:hover svg, a:hover > .link svg { transform: translate(3px, -3px); }

.text-link { text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: .22em; font-weight: 600; }
.text-link:hover { text-decoration-color: currentColor; }

/* 6. Navigation ----------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: height .45s var(--ease), background-color .35s, border-color .35s;
}
.nav.is-scrolled, .nav.is-menu-open {
  background: rgba(250, 250, 250, .9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav.is-scrolled { height: 64px; }
.nav.is-menu-open { background: var(--off); }
.nav__inner { display: flex; align-items: center; gap: 2rem; }
.nav__logo { flex: none; display: block; margin-right: auto; }
.nav__logo img { height: 34px; width: auto; transition: height .45s var(--ease); }
.nav.is-scrolled .nav__logo img { height: 28px; }
.nav__links { position: relative; display: flex; gap: .25rem; }
.nav__link { display: block; padding: .6rem 1rem; font-weight: 600; font-size: .9688rem; color: var(--navy); opacity: .72; transition: opacity .25s; }
.nav__link:hover, .nav__link[aria-current] { opacity: 1; }
.nav__indicator { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--green); pointer-events: none; opacity: 0; }
.nav__links:not(.has-indicator) .nav__link[aria-current] { box-shadow: inset 0 -2px 0 var(--green); }

.nav__toggle { display: none; width: 44px; height: 44px; position: relative; margin-right: -10px; }
.nav__toggle span { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--navy); transition: transform .45s var(--ease), top .45s var(--ease); }
.nav__toggle span:nth-child(1) { top: 17px; }
.nav__toggle span:nth-child(2) { top: 25px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

/* Mobile menu */
.menu {
  position: fixed; inset: 0; z-index: 90; background: var(--navy); color: var(--white);
  padding: calc(var(--nav-h) + 1.5rem) var(--gutter) 2rem;
  display: flex; flex-direction: column; overflow-y: auto;
  visibility: hidden; clip-path: inset(0 0 100% 0);
}
.menu.is-open { visibility: visible; clip-path: inset(0 0 0 0); }
.menu__links { display: grid; gap: .25rem; }
.menu__link { display: flex; align-items: baseline; justify-content: space-between; padding: .7rem 0; font-size: clamp(2rem, 9vw, 3rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; border-bottom: 1px solid var(--line-inv); }
.menu__link[aria-current] { color: var(--green); }
.menu__sub { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; margin-top: 1.75rem; font-size: .9688rem; color: rgba(255, 255, 255, .72); }
.menu__sub a { padding: .35rem 0; }
.menu__foot { margin-top: auto; padding-top: 2rem; display: grid; gap: 1rem; }
.menu__foot .btn { width: 100%; }
.menu__mail { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; color: rgba(255, 255, 255, .72); font-size: .9688rem; }

/* Custom cursor (fine pointers only, enabled from JS) */
.cursor, .cursor-ring { position: fixed; left: 0; top: 0; z-index: 250; pointer-events: none; border-radius: 50%; opacity: 0; }
.cursor { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--green); }
.cursor-ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid rgba(19, 26, 66, .45); transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background-color .3s, border-color .3s; }
.cursor-ring.is-link { width: 62px; height: 62px; margin: -31px 0 0 -31px; background: rgba(40, 171, 14, .14); border-color: var(--green); }
.cursor-ring.is-dark { border-color: rgba(255, 255, 255, .6); }
html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor label { cursor: none; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: auto; }

/* Page transition wipe */
.wipe { position: fixed; inset: 0; z-index: 200; background: var(--navy); pointer-events: none; transform: translateY(100%); border-top: 3px solid var(--green); }
html.js-anim .wipe { transform: none; }

/* 7. Hero + ecosystem ----------------------------------------------------- */
.hero { position: relative; padding-top: calc(var(--nav-h) + clamp(2rem, 5vw, 4.5rem)); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; position: relative; }
.hero__copy { padding-block: 1rem 2rem; }
.hero__title { text-wrap: nowrap; }
.hero__title > span { display: block; }
.hero__lead { margin-top: 1.75rem; max-width: 24ch; }
.hero__body { margin-top: 1rem; max-width: 46ch; }
.hero .btn-row { margin-top: 2.25rem; }

.hero__services { margin-top: clamp(2.5rem, 6vw, 5rem); border-top: 1px solid var(--line); position: relative; }
.hero__services ul { display: grid; grid-template-columns: repeat(4, 1fr); }
.hero__services li:not(:nth-child(4n + 1)) { border-left: 1px solid var(--line); }
.hero__services li:nth-child(n + 5) { border-top: 1px solid var(--line); }
.hero__services a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.35rem 1.5rem; font-weight: 700; font-size: 1rem; transition: background-color .3s, color .3s; }
.hero__services li:nth-child(4n + 1) a { padding-left: 0; }
.hero__services a svg { width: .875rem; height: .875rem; color: var(--green); transition: transform .45s var(--ease); flex: none; }
.hero__services a:hover { color: var(--green-ink); }
.hero__services a:hover svg { transform: translate(3px, -3px); }

/* Ecosystem composition — everything is sized in em; 1em = 1/60 of the stage width */
.eco { container-type: inline-size; width: 100%; }
.eco__stage { position: relative; width: 60em; height: 57em; font-size: 10px; font-size: calc(100cqw / 60); line-height: 1.2; }
.eco__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.eco__link { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 5; }
.eco__node { fill: var(--off); stroke: var(--navy); stroke-width: 1.25; }
.eco__arrow { stroke: var(--green); stroke-width: 2.5; stroke-linejoin: miter; }
.eco__arrowhead { fill: var(--green); }

.eco__piece { position: absolute; will-change: transform; }
.eco__browser { left: 0; top: 5em; width: 37em; height: 25em; background: var(--white); border: 1px solid var(--line-strong); border-radius: .8em; overflow: hidden; }
.eco__bar { height: 2.6em; display: flex; align-items: center; gap: .5em; padding-inline: 1em; border-bottom: 1px solid var(--line); }
.eco__bar i { width: .7em; height: .7em; border-radius: 50%; background: var(--line-strong); }
.eco__bar b { margin-left: 1.2em; flex: 1; max-width: 16em; height: 1.2em; border-radius: 1em; background: rgba(19, 26, 66, .06); }
.eco__site { padding: 1.4em 1.8em; }
.eco__sitenav { display: flex; align-items: center; gap: 1.2em; }
.eco__sitenav u { width: 1.4em; height: 1.4em; background: var(--green); border-radius: .25em; margin-right: auto; }
.eco__sitenav s { width: 3em; height: .5em; border-radius: 1em; background: var(--line-strong); }
.eco__sitenav em { width: 5em; height: 1.7em; border-radius: .35em; background: var(--navy); }
.eco__sitehero { display: grid; grid-template-columns: 1fr 12em; gap: 1.6em; margin-top: 2em; }
.bar { display: block; height: .6em; border-radius: 1em; background: rgba(19, 26, 66, .14); }
.bar--ink { height: 1.4em; border-radius: .25em; background: var(--navy); }
.bar--btn { width: 6.5em; height: 2.1em; border-radius: .35em; background: var(--green); }
.eco__sitehero .bar { margin-bottom: .6em; }
.eco__sitehero figure { height: 10em; border-radius: .5em; background: var(--green-tint); position: relative; overflow: hidden; }
.eco__sitehero figure svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.eco__dash { left: 21em; top: 21.5em; width: 39em; height: 26em; background: var(--navy); color: var(--white); border-radius: .8em; display: grid; grid-template-columns: 4.6em 1fr; overflow: hidden; box-shadow: 0 2.4em 4em -2.4em rgba(19, 26, 66, .55); }
.eco__side { border-right: 1px solid var(--line-inv); padding: 1.4em 0; display: grid; gap: 1.1em; align-content: start; justify-items: center; }
.eco__side i { width: 1.6em; height: 1.6em; border-radius: .35em; background: rgba(255, 255, 255, .14); }
.eco__side i:first-child { background: var(--green); }
.eco__main { padding: 1.5em 1.7em; min-width: 0; display: flex; flex-direction: column; }
.eco__dashhead { display: flex; justify-content: space-between; align-items: center; font-size: 1.15em; font-weight: 700; }
.eco__dashhead span { font-size: .78em; font-weight: 600; padding: .35em .8em; border-radius: 2em; border: 1px solid var(--line-inv); color: rgba(255, 255, 255, .7); }
.eco__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9em; margin-top: 1.2em; }
.eco__stat { border: 1px solid var(--line-inv); border-radius: .5em; padding: .8em .9em; }
.eco__stat small { display: block; font-size: .85em; color: rgba(255, 255, 255, .62); }
.eco__stat strong { display: block; margin-top: .25em; font-size: 1.55em; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.eco__stat:last-child strong { color: var(--green); }
.eco__chart { margin-top: 1.1em; flex: 1; min-height: 0; border: 1px solid var(--line-inv); border-radius: .5em; position: relative; overflow: hidden; }
.eco__chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.eco__phone { left: 5em; top: 24em; width: 15.5em; height: 30.5em; background: var(--white); border: .4em solid var(--navy); border-radius: 2.4em; padding: 1.6em 1.1em 1.1em; display: flex; flex-direction: column; gap: .9em; box-shadow: 0 2.4em 3.4em -2em rgba(19, 26, 66, .5); }
.eco__phone::before { content: ""; position: absolute; top: .6em; left: 50%; width: 4.4em; height: .5em; margin-left: -2.2em; border-radius: 1em; background: var(--navy); }
.eco__phone header { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 1.2em; color: var(--navy); letter-spacing: -.02em; }
.eco__phone header i { width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--green-tint); border: 1px solid var(--green); }
.eco__card { background: var(--navy); color: var(--white); border-radius: .9em; padding: 1em; }
.eco__card small { font-size: .85em; opacity: .7; display: block; }
.eco__card strong { font-size: 1.8em; font-weight: 800; letter-spacing: -.02em; display: block; margin-top: .15em; }
.eco__card span { display: block; height: .4em; border-radius: 1em; background: rgba(255, 255, 255, .18); margin-top: .8em; overflow: hidden; }
.eco__card span b { display: block; height: 100%; width: 72%; background: var(--green); border-radius: inherit; transform-origin: left; }
.eco__list { display: grid; gap: .7em; }
.eco__list li { display: grid; grid-template-columns: 2.2em 1fr auto; gap: .7em; align-items: center; }
.eco__list i { width: 2.2em; height: 2.2em; border-radius: .5em; background: rgba(19, 26, 66, .08); }
.eco__list li:first-child i { background: var(--green-tint); }
.eco__list .bar + .bar { margin-top: .45em; width: 60%; }
.eco__list em { width: 1.8em; height: .6em; border-radius: 1em; background: var(--navy); }
.eco__tabs { margin-top: auto; display: flex; justify-content: space-around; padding-top: .9em; border-top: 1px solid var(--line); }
.eco__tabs i { width: 1.3em; height: 1.3em; border-radius: .35em; background: rgba(19, 26, 66, .14); }
.eco__tabs i:first-child { background: var(--green); }

.eco__chip { background: var(--white); border: 1px solid var(--line-strong); border-radius: .7em; color: var(--navy); box-shadow: 0 1.4em 2.4em -1.6em rgba(19, 26, 66, .45); }
.eco__chip--perf { left: 25em; top: 0; width: 17em; padding: 1.1em 1.2em; display: grid; grid-template-columns: 4.4em 1fr; gap: 1em; align-items: center; }
.eco__chip--perf svg { width: 4.4em; height: 4.4em; }
.eco__chip--perf small { display: block; font-size: .95em; color: var(--charcoal); }
.eco__chip--perf strong { display: block; font-size: 2.1em; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-top: .1em; font-variant-numeric: tabular-nums; }
.eco__chip--deploy { left: 1.5em; top: .6em; padding: .8em 1.1em; display: flex; align-items: center; gap: .7em; font-size: 1em; font-weight: 700; border-radius: 3em; }
.eco__chip--deploy span { font-size: 1.05em; }
.eco__chip--deploy i { width: .75em; height: .75em; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 .3em rgba(40, 171, 14, .2); }
.eco__chip--code { left: 31em; top: 49.5em; width: 21em; padding: 1em 1.2em; display: grid; gap: .55em; }
.eco__chip--code p { display: flex; gap: .5em; }
.eco__chip--code p:nth-child(2), .eco__chip--code p:nth-child(3) { padding-left: 1.4em; }
.eco__chip--code b { height: .6em; border-radius: 1em; background: rgba(19, 26, 66, .16); }
.eco__chip--code b.g { background: var(--green); }
.eco__chip--code b.n { background: var(--navy); }

/* 8. Intro / values ------------------------------------------------------- */
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(3rem, 7vw, 6rem); border-top: 1px solid var(--line); }
.steps3__item { padding: 2rem 2rem 0 0; }
.steps3__item + .steps3__item { padding-left: 2rem; border-left: 1px solid var(--line); }
.steps3__item .num { font-size: 1rem; }
.steps3__item .h3 { margin-top: 2.5rem; }
.steps3__item p { margin-top: .75rem; color: var(--text-soft); max-width: 34ch; }

/* 9. Service cards (home) ------------------------------------------------- */
.track-section { overflow: hidden; }
.track { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.track__intro { grid-column: 1 / -1; max-width: 46rem; margin-bottom: 1.5rem; }
.track__intro .body { margin-top: 1.25rem; }
.track__intro .link { margin-top: 1.75rem; }
.track__progress { display: none; }

.track-section.is-horizontal { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--nav-h) + 1rem) 2.5rem; }
.is-horizontal .track { display: flex; flex-wrap: nowrap; gap: 1.5rem; width: max-content; will-change: transform; }
.is-horizontal .track__intro { flex: none; width: min(30rem, 34vw); margin: 0 clamp(1rem, 4vw, 4rem) 0 0; align-self: center; }
.is-horizontal .svc-card { flex: none; width: min(30rem, 38vw); height: min(72vh, 39rem); }
.is-horizontal .track__progress { display: block; height: 1px; background: var(--line-inv); margin-top: 2rem; }
.track__progress span { display: block; height: 3px; margin-top: -1px; background: var(--green); transform: scaleX(0); transform-origin: left; }

.svc-card {
  position: relative; display: flex; flex-direction: column; min-height: 30rem;
  padding: 1.75rem; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); overflow: hidden; isolation: isolate;
  transition: border-color .4s;
}
.svc-card::before {            /* cursor-following glow */
  content: ""; position: absolute; z-index: -1; left: var(--mx, 50%); top: var(--my, 0%);
  width: 26rem; height: 26rem; margin: -13rem 0 0 -13rem; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 171, 14, .22), transparent);
  opacity: 0; transition: opacity .5s;
}
.svc-card:hover, .svc-card:focus-within { border-color: var(--green); }
.svc-card:hover::before { opacity: 1; }
.svc-card__top { display: flex; justify-content: space-between; align-items: center; }
.svc-card__top .num { font-size: 1.125rem; }
.svc-card__icon { width: 2.5rem; height: 2.5rem; color: var(--green); }
.svc-card__art { flex: 1; min-height: 0; display: grid; place-items: center; padding-block: 1rem; }
.svc-card__art .ill { width: 100%; height: 100%; max-height: 17rem; }
.svc-card .h3 { font-size: clamp(1.5rem, 2.1vw, 1.875rem); }
.svc-card p { margin-top: .6rem; color: var(--text-soft); max-width: 44ch; }
.is-horizontal .svc-card p { min-height: 4.95em; }
.svc-card .link { margin-top: 1.4rem; align-self: flex-start; }
.svc-card__hit::after { content: ""; position: absolute; inset: 0; }   /* whole card is the link target */

/* 10. Illustrations ------------------------------------------------------- */
.ill { --i-surface: var(--surface); --i-stroke: var(--line-strong); --i-ink: var(--text); --i-muted: var(--line-strong); overflow: visible; }
.ill .s { fill: var(--i-surface); stroke: var(--i-stroke); }
.ill .l { stroke: var(--i-stroke); }
.ill .ink { fill: var(--i-ink); }
.ill .m { fill: var(--i-muted); }
.ill .m2 { fill: var(--i-muted); opacity: .45; }
.ill .a { fill: var(--green); }
.ill .al { stroke: var(--green); }
.ill .dash { stroke: var(--i-stroke); stroke-dasharray: 3 5; }
.ill text { fill: var(--i-ink); font-family: var(--font); font-weight: 800; }
.ill [data-depth] { will-change: transform; }

/* 11. Why / editorial list ------------------------------------------------ */
.why__head { position: sticky; top: calc(var(--nav-h) + 2rem); }
.why__head .body { margin-top: 1.5rem; max-width: 38ch; }
.why__list { border-bottom: 1px solid var(--line); }
.why__item { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1rem 2.5rem; align-items: baseline; padding: clamp(1.5rem, 3vw, 2.25rem) 0; }
.why__item::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform-origin: left; transform: scaleX(var(--rule, 1)); }
.why__item h3 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; transition: transform .5s var(--ease), color .3s; }
.why__item p { color: var(--text-soft); }
.why__item:hover h3 { transform: translateX(.75rem); color: var(--green-ink); }

/* 12. Rising path (process + journey) ------------------------------------- */
.rise { position: relative; --rise-step: 2.75rem; margin-top: 1.5rem; }
.rise__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rise__track { stroke: var(--line); stroke-width: 2; fill: none; }
.rise__line { stroke: var(--green); stroke-width: 2.5; fill: none; stroke-linejoin: round; }
.rise__head { fill: var(--green); }
.rise__steps { position: relative; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 1.5rem; align-items: start; counter-reset: none; }
.rise__step { padding-top: calc((var(--n, 5) - 1 - var(--i, 0)) * var(--rise-step)); transition: opacity .5s; }
html.js-anim .rise__step { opacity: .32; }
html.js-anim .rise__step.is-active { opacity: 1; }
.rise__node { display: block; width: 15px; height: 15px; border-radius: 50%; background: var(--off); border: 2px solid var(--line-strong); transition: background-color .4s, border-color .4s, transform .5s var(--ease); }
.section--white .rise__node { background: var(--white); }
.section--navy .rise__node { background: var(--navy); }
.rise__step.is-active .rise__node, html:not(.js-anim) .rise__node { background: var(--green); border-color: var(--green); transform: scale(1.15); }
.rise__step .num { display: block; margin-top: 1.5rem; font-size: 1rem; }
.rise__step .h3 { margin-top: .5rem; }
.rise__step p { margin-top: .6rem; color: var(--text-soft); font-size: 1rem; max-width: 26ch; }
.rise__icon { width: 2.25rem; height: 2.25rem; margin-top: 1.5rem; color: var(--green); }
.rise__icon + .h3 { margin-top: 1rem; }

/* 13. CTA + footer -------------------------------------------------------- */
.cta { overflow: hidden; padding-block: clamp(5rem, 12vw, 11rem); }
.cta__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cta__bg svg { position: absolute; right: 0; bottom: 0; width: min(78rem, 120%); height: 100%; }
.cta__bg path { fill: none; stroke: rgba(255, 255, 255, .13); stroke-width: 1.25; }
.cta__bg path.is-green { stroke: var(--green); stroke-width: 2.5; }
.cta__bg polygon { fill: var(--green); }
.glow { position: absolute; left: 0; top: 0; z-index: 0; width: 40rem; height: 40rem; margin: -20rem 0 0 -20rem; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(closest-side, rgba(40, 171, 14, .2), transparent); }
.cta__inner { max-width: 46rem; }
.cta__inner .lead { margin-top: 1.75rem; color: var(--text-soft); font-weight: 400; max-width: 34rem; }
.cta__inner .btn-row { margin-top: 2.5rem; }

.footer { background: var(--white); padding-block: clamp(3.5rem, 7vw, 6rem) 6.5rem; border-top: 1px solid var(--line); }
.footer__top { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: 3rem 2rem; }
.footer__logo img { height: 38px; width: auto; }
.footer__tag { margin-top: 1.75rem; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; font-style: italic; letter-spacing: -.04em; line-height: 1.05; }
.footer__blurb { margin-top: 1rem; color: var(--charcoal); max-width: 34ch; font-size: 1rem; }
.footer h2 { font-size: .9375rem; font-weight: 700; color: var(--charcoal); margin-bottom: 1.1rem; letter-spacing: 0; }
.footer__col ul { display: grid; gap: .65rem; }
.footer__place { color: var(--charcoal); font-size: 1rem; }
.footer__col a { font-weight: 600; font-size: 1rem; background: linear-gradient(var(--green), var(--green)) 0 100% / 0 2px no-repeat; padding-bottom: .15rem; transition: background-size .45s var(--ease); }
.footer__col a:hover { background-size: 100% 2px; }
.footer__bottom { margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .9375rem; color: var(--charcoal); }
.footer__social { display: flex; gap: .5rem; }
.footer__social a { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--navy); transition: background-color .3s, color .3s, border-color .3s; }
.footer__social a:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
.footer__social svg { width: 1.125rem; height: 1.125rem; }

/* 14. Inner pages --------------------------------------------------------- */
.page-hero { position: relative; padding-top: calc(var(--nav-h) + clamp(3.5rem, 9vw, 8rem)); padding-bottom: clamp(3.5rem, 8vw, 7rem); overflow: hidden; }
.page-hero__inner { position: relative; }
.page-hero .h1 { max-width: 15ch; }
.page-hero__lead { margin-top: 2rem; max-width: 40rem; }
.page-hero .btn-row { margin-top: 2.25rem; }
.page-hero--split .page-hero__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.page-hero--split .h1 { font-size: clamp(2.5rem, 5.2vw, 4.5rem); max-width: 14ch; }
.page-hero__art .ill { width: 100%; height: auto; }
.crumbs { display: flex; gap: .6rem; align-items: center; font-size: .9375rem; font-weight: 600; margin-bottom: 1.75rem; color: var(--charcoal); }
.crumbs a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .25em; }
.crumbs a:hover { text-decoration-color: var(--green); }
.crumbs span[aria-hidden] { color: var(--line-strong); }

/* About: story rows */
.story { border-bottom: 1px solid var(--line); }
.story__row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 1.5rem clamp(2rem, 6vw, 6rem); padding-block: clamp(2.5rem, 5vw, 4.5rem); border-top: 1px solid var(--line); }
.story__row h2 { font-size: clamp(1.625rem, 2.8vw, 2.5rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; }
.story__row .lead + .body { margin-top: 1.25rem; }

/* About: values */
.values { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); }
.value { position: relative; padding: 1.75rem 1.5rem; display: flex; flex-direction: column; isolation: isolate; transition: color .45s var(--ease); }
.value + .value { border-left: 1px solid var(--line); }
.value::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--navy); transform: translateY(101%); transition: transform .6s var(--ease); }
.value:hover { color: var(--white); }
.value:hover::before { transform: none; }
.value svg { width: 2.25rem; height: 2.25rem; color: var(--green); }
.value h3 { margin-top: clamp(4rem, 8vw, 7.5rem); min-height: 2.3em; display: flex; align-items: flex-end; font-size: clamp(1.25rem, 1.7vw, 1.5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.value p { margin-top: .75rem; font-size: .9688rem; line-height: 1.55; color: var(--charcoal); transition: color .45s var(--ease); }
.value:hover p { color: rgba(255, 255, 255, .76); }

/* Counters */
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.figure { padding: 2.25rem 1.5rem 0 0; }
.figure + .figure { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.figure strong { display: block; font-size: clamp(3rem, 6vw, 5rem); font-weight: 800; font-style: italic; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.figure span { display: block; margin-top: 1rem; color: var(--text-soft); max-width: 22ch; font-size: 1rem; }

/* Services overview */
.svc-list { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.svc-rows { border-bottom: 1px solid var(--line); }
.svc-row { position: relative; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: 1rem 1.5rem; padding: clamp(1.75rem, 3.5vw, 2.75rem) 0; border-top: 1px solid var(--line); transition: padding .5s var(--ease); }
.svc-row .num { font-size: 1.0625rem; padding-top: .55rem; }
.svc-row h2 { font-size: clamp(1.75rem, 3.4vw, 3rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; transition: color .3s; }
.svc-row p { margin-top: .9rem; color: var(--text-soft); max-width: 52ch; }
.svc-row__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.svc-row__tags li { font-size: .875rem; font-weight: 600; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 2rem; color: var(--charcoal); background: var(--white); }
.svc-row__go { width: 3rem; height: 3rem; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; transition: background-color .35s, border-color .35s, color .35s, transform .5s var(--ease); align-self: start; }
.svc-row__go svg { width: 1rem; height: 1rem; }
.svc-row__art { display: none; grid-column: 1 / -1; }
.svc-row:hover, .svc-row.is-active { padding-left: .75rem; }
.svc-row:hover h2, .svc-row.is-active h2 { color: var(--green-ink); }
.svc-row:hover .svc-row__go, .svc-row.is-active .svc-row__go { background: var(--green); border-color: var(--green); color: var(--navy); transform: rotate(45deg); }
.svc-preview { position: sticky; top: calc(var(--nav-h) + 2rem); aspect-ratio: 5 / 5.2; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); overflow: hidden; }
.svc-preview__item { position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s, transform .7s var(--ease); transform: translateY(1.5rem) scale(.97); }
.svc-preview__item.is-active { opacity: 1; visibility: visible; transform: none; }
.svc-preview__item .ill { width: 100%; height: auto; }

.chooser { border-bottom: 1px solid var(--line); }
.chooser a { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) auto; gap: 1rem 2rem; align-items: center; padding: 1.5rem 0; border-top: 1px solid var(--line); transition: padding .5s var(--ease); }
.chooser a:hover { padding-inline: .75rem; }
.chooser__need { font-size: clamp(1.125rem, 1.7vw, 1.375rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.35; }
.chooser__svc { font-weight: 700; color: var(--green); }
.chooser svg { width: 1rem; height: 1rem; color: var(--green); transition: transform .45s var(--ease); }
.chooser a:hover svg { transform: translate(3px, -3px); }

/* Service detail */
.statement { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.22; max-width: 26ch; text-wrap: balance; }
.includes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.include { padding: 1.75rem 1.5rem 2rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); position: relative; transition: background-color .4s; }
.include::before { content: ""; position: absolute; left: -1px; top: -1px; width: 0; height: 2px; background: var(--green); transition: width .6s var(--ease); }
.include:hover::before { width: calc(100% + 1px); }
.include svg { width: 1.125rem; height: 1.125rem; color: var(--green); }
.include h3 { margin-top: 1.5rem; font-size: 1.1875rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.include p { margin-top: .5rem; font-size: .9688rem; line-height: 1.55; color: var(--charcoal); }
.platforms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.platform { display: flex; flex-direction: column; justify-content: space-between; gap: 1.75rem; min-height: 10rem; padding: 1.75rem; background: var(--white); color: var(--navy); border-radius: var(--radius-lg); }
.platform__logo { display: flex; align-items: center; min-height: 2.5rem; font-size: clamp(1.375rem, 2.1vw, 1.75rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.platform__logo img { height: 2.25rem; width: auto; max-width: 11rem; object-fit: contain; }
.platform p { font-size: .9688rem; line-height: 1.5; color: var(--charcoal); }
.platforms__note { margin-top: 1.75rem; max-width: 60ch; font-size: .875rem; color: var(--text-soft); }
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.feature { --pad: clamp(1.5rem, 3vw, 2.5rem); padding: var(--pad); background: var(--white); color: var(--navy); border-radius: var(--radius-lg); overflow: hidden; }
.feature__media { margin: calc(var(--pad) * -1) calc(var(--pad) * -1) var(--pad); aspect-ratio: 4 / 3; overflow: hidden; background: var(--green-tint); }
.feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.feature:hover .feature__media img { transform: scale(1.04); }
.feature__icon { width: 2.75rem; height: 2.75rem; color: var(--green); }
.feature h3 { margin-top: 1.5rem; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.feature > p { margin-top: .6rem; max-width: 46ch; color: var(--charcoal); }
.feature ul { display: grid; gap: .65rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(19, 26, 66, .12); }
.feature li { display: grid; grid-template-columns: 1.125rem 1fr; gap: .7rem; align-items: start; font-size: .9688rem; font-weight: 600; line-height: 1.45; }
.feature li svg { width: 1.125rem; height: 1.125rem; margin-top: .15rem; color: var(--green); }
.outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.outcome { padding: 2rem 2rem 0 0; }
.outcome + .outcome { padding-left: 2rem; border-left: 1px solid var(--line); }
.outcome h3 { font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.outcome p { margin-top: .9rem; color: var(--text-soft); }
.next { display: block; border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 6vw, 5rem); background: var(--white); transition: background-color .5s, color .5s; }
.next__inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.next small { display: block; font-size: 1rem; font-weight: 600; color: var(--charcoal); margin-bottom: .75rem; transition: color .5s; }
.next strong { display: block; font-size: clamp(1.875rem, 5vw, 4.25rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; }
.next svg { width: clamp(2.5rem, 6vw, 5rem); height: clamp(2.5rem, 6vw, 5rem); color: var(--green); flex: none; transition: transform .6s var(--ease); }
.next:hover { background: var(--navy); color: var(--white); }
.next:hover small { color: rgba(255, 255, 255, .7); }
.next:hover svg { transform: translate(.5rem, -.5rem); }

/* 15. Contact ------------------------------------------------------------- */
.contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 1.5rem; }
.field { display: grid; gap: .5rem; position: relative; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 700; font-size: .9688rem; }
.field label span { font-weight: 500; color: var(--charcoal); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3.25rem; padding: .8rem 1rem;
  background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color .25s, box-shadow .25s;
  -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 10rem; resize: vertical; line-height: 1.55; }
.field select { padding-right: 2.75rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23131A42' stroke-width='1.8'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem; }
.field input::placeholder, .field textarea::placeholder { color: #8a8d9b; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--navy); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(40, 171, 14, .2); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #B3261E; box-shadow: 0 0 0 3px rgba(179, 38, 30, .12); }
.field__error { font-size: .9063rem; font-weight: 600; color: #B3261E; min-height: 0; }
.field__error:empty { display: none; }
.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.form__note { font-size: .9375rem; color: var(--charcoal); max-width: 34ch; }
.form__alert { grid-column: 1 / -1; padding: 1rem 1.25rem; border: 1px solid #B3261E; border-left-width: 4px; border-radius: var(--radius); background: #FDF3F2; color: #7A1A14; font-weight: 500; }
.form__alert[hidden] { display: none; }
.btn[disabled] { opacity: .6; pointer-events: none; }

.form-success { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); padding: clamp(2rem, 5vw, 3.5rem); }
.form-success[hidden] { display: none; }
.form-success svg { width: 4rem; height: 4rem; }
.form-success circle { stroke: var(--green); stroke-width: 2; fill: var(--green-tint); }
.form-success path { stroke: var(--green-ink); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.form-success h2 { margin-top: 1.5rem; }
.form-success p { margin-top: 1rem; color: var(--charcoal); max-width: 46ch; }
.form-success .btn-row { margin-top: 2rem; }

.contact__aside { display: grid; gap: 0; border-top: 1px solid var(--line); }
.contact__block { padding-block: 1.75rem; border-bottom: 1px solid var(--line); }
.contact__block h2 { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.contact__block p { margin-top: .5rem; color: var(--charcoal); font-size: 1rem; }
.contact__block .link { margin-top: 1rem; font-size: 1.0625rem; }
.contact__links { display: flex; flex-direction: column; align-items: flex-start; }
.contact__next { margin-top: 2.5rem; counter-reset: n; display: grid; gap: 1.1rem; }
.contact__next li { display: grid; grid-template-columns: 2rem 1fr; gap: .75rem; font-size: 1rem; color: var(--charcoal); }
.contact__next li::before { counter-increment: n; content: "0" counter(n); font-weight: 800; font-style: italic; color: var(--green-ink); }
.contact__next-title { margin-top: 2.5rem; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.contact__next-title + .contact__next { margin-top: 1.25rem; }

/* 16. WhatsApp chat ---------------------------------------------------- */
.wa { position: fixed; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem); z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: .875rem; pointer-events: none; }
.wa > * { pointer-events: auto; }
.wa__btn { position: relative; width: 3.5rem; height: 3.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: var(--navy); box-shadow: 0 .75rem 1.75rem -.5rem rgba(19, 26, 66, .5); transition: background-color .3s, color .3s; }
.wa__btn:hover, .wa__btn:focus-visible, .wa.is-open .wa__btn { background: var(--navy); color: var(--white); }
.wa__btn svg { grid-area: 1 / 1; transition: opacity .25s, transform .45s var(--ease); }
.wa__chat { width: 1.75rem; height: 1.75rem; }
.wa__x { width: 1.125rem; height: 1.125rem; opacity: 0; transform: rotate(-45deg) scale(.6); }
.wa.is-open .wa__chat { opacity: 0; transform: rotate(45deg) scale(.6); }
.wa.is-open .wa__x { opacity: 1; transform: none; }
html.js-anim .wa__btn { visibility: hidden; }

.wa__panel { width: min(22.5rem, calc(100vw - 2rem)); background: var(--white); border: 1px solid var(--line-strong); border-radius: 14px; overflow: hidden; box-shadow: 0 1.75rem 3.5rem -1.25rem rgba(19, 26, 66, .45); transform-origin: 100% 100%; }
.wa__head { display: flex; align-items: center; gap: .75rem; padding: .9rem .75rem .9rem 1rem; background: var(--navy); color: var(--white); }
.wa__avatar { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--off); }
.wa__avatar img { width: 1.6rem; height: 1.6rem; }
.wa__head strong { display: block; font-size: 1rem; font-weight: 700; line-height: 1.25; }
.wa__head div span { display: block; font-size: .8125rem; line-height: 1.3; color: rgba(255, 255, 255, .72); }
.wa__close { margin-left: auto; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; color: var(--white); transition: background-color .25s; }
.wa__close:hover { background: rgba(255, 255, 255, .14); }
.wa__close svg { width: 1rem; height: 1rem; }
.wa__body { padding: 1.1rem 1rem 1.4rem; background: var(--off); }
.wa__bubble { max-width: 90%; padding: .7rem .9rem; background: var(--white); border: 1px solid var(--line); border-radius: 4px 14px 14px 14px; font-size: .9375rem; line-height: 1.5; color: var(--navy); }
.wa__form { display: flex; align-items: flex-end; gap: .5rem; padding: .75rem .75rem .5rem; border-top: 1px solid var(--line); }
.wa__form textarea { flex: 1; min-width: 0; height: 2.75rem; max-height: 7rem; resize: none; padding: .62rem .8rem; background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: 1rem; line-height: 1.4; transition: border-color .25s, box-shadow .25s; }
.wa__form textarea::placeholder { color: #8a8d9b; }
.wa__form textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(40, 171, 14, .2); }
.wa__send { flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: var(--radius); background: var(--green); color: var(--navy); transition: background-color .3s, color .3s; }
.wa__send:hover, .wa__send:focus-visible { background: var(--navy); color: var(--white); }
.wa__send svg { width: 1.25rem; height: 1.25rem; }
.wa__note { padding: 0 .75rem .75rem; font-size: .8125rem; color: var(--charcoal); }

/* Motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .wipe { display: none; }
}