@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/_next/static/media/caa3a2e1cccd8315-s.p.09~u27dqhyhd6.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --paper: #f7f6f2;
  --ink: #081120;
  --text: #535a64;
  --line: #ddded9;
  --cyan: #20d4bf;
  --violet: #8268ff;
  --coral: #ff815e;
  --rose: #d96491;
  --amber: #e8a24c;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 105px; }
body { margin: 0; background: var(--paper); color: var(--foreground, var(--ink)); font: 16px/1.6 "Geist", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
button { appearance: none; }
img, svg { display: block; max-width: 100%; }
svg { width: 24px; height: 24px; }
h1, h2, h3, p { margin: 0; }
ol, ul { list-style: none; margin: 0; padding: 0; }
[hidden] { display: none !important; }
::selection { color: var(--ink); background: var(--cyan); }
:focus-visible { outline: 3px solid #5945c8; outline-offset: 5px; }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.shell { width: min(1280px, calc(100% - 80px)); margin-inline: auto; }
.skip-link { position: fixed; top: 10px; left: 16px; z-index: 100; padding: 12px 20px; background: var(--ink); color: white; border-radius: 8px; transform: translateY(-160%); }
.skip-link:focus { transform: none; }

.site-header { position: sticky; top: 0; z-index: 30; background: rgb(247 246 242 / 94%); border-bottom: 1px solid rgb(8 17 32 / 8%); backdrop-filter: blur(16px); }
.header-inner { display: flex; align-items: center; gap: 24px; min-height: 84px; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; gap: 10px; min-height: 48px; margin-left: -13px; }
.brand img { width: 188px; height: 64px; object-fit: cover; filter: brightness(0); }
.brand > span { padding-left: 13px; border-left: 1px solid #c7c9c7; max-width: 95px; font-size: 10px; line-height: 1.5; }
.site-nav { order: 1; display: flex; align-items: center; gap: 28px; margin-left: auto; }
.site-nav a { display: inline-flex; align-items: center; gap: 16px; min-height: 46px; font-size: 13px; transition: color 180ms; }
.site-nav > a:not(.nav-contact):hover { color: #5840bd; }
.site-nav .nav-contact { padding: 0 20px; background: var(--ink); border-radius: 50px; color: white; }
.site-nav .nav-contact:hover { background: #303e51; }
.site-nav svg { width: 19px; height: 19px; transition: transform 240ms var(--ease); }
.site-nav .nav-contact:hover svg { transform: translateX(4px); }
.header-controls { order: 2; display: flex; align-items: center; gap: 10px; }
.theme-toggle, .language-toggle { position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; height: 44px; padding: 0; background: transparent; border: 1px solid #cdd0cf; border-radius: 30px; }
.theme-toggle { width: 44px; }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle:hover, .language-toggle:hover { background: #ece9df; }
.theme-sun, [data-theme="dark"] .theme-moon { display: none; }
[data-theme="dark"] .theme-sun { display: block; }
.language-toggle { width: 72px; padding: 4px; gap: 2px; font-size: 11px; font-weight: 600; isolation: isolate; }
.language-toggle::before { content: ""; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 10px) / 2); border-radius: 50%; background: var(--ink); transition: transform 180ms var(--ease); }
.language-toggle span { display: grid; place-items: center; width: 50%; height: 100%; }
[data-language="es"] .language-toggle span:first-child, [data-language="en"] .language-toggle span:last-child { color: white; }
[data-language="en"] .language-toggle::before { transform: translateX(calc(100% + 2px)); }
.motion-toggle { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; background: transparent; border: 1px solid #cdd0cf; border-radius: 50%; }
.motion-label { display: none; }
.motion-toggle:hover { background: #ece9df; }
.pause-icon { width: 12px; height: 14px; border-left: 3px solid; border-right: 3px solid; }
[data-motion="off"] .pause-icon { width: 0; height: 0; margin-left: 3px; border-left: 11px solid; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 0; }
.menu-toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 13px; border: 1px solid #cdd0cf; background: transparent; border-radius: 30px; font-size: 13px; }
.menu-icon { position: relative; width: 15px; height: 12px; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; top: 3px; width: 15px; height: 1px; background: currentColor; transition: transform 220ms; }
.menu-icon::after { top: 9px; }
.menu-toggle[aria-expanded="true"] .menu-icon::before { transform: translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon::after { transform: translateY(-3px) rotate(-45deg); }
.arrow-diagonal { rotate: -45deg; }
.arrow-down { rotate: 90deg; }
.arrow-up { rotate: -90deg; }
.arrow-left { rotate: 180deg; }

.hero { padding-top: 44px; }
.hero-copy { text-align: center; }
.eyebrow { font-size: 11px; font-weight: 550; letter-spacing: .09em; }
.hero .eyebrow { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 19px; }
.small-flower { width: 21px; height: 21px; flex-shrink: 0; color: #6550c8; animation: revolve 18s linear infinite; }
.hero h1 { font-size: clamp(70px, 7.55vw, 112px); line-height: 1.015; letter-spacing: -.072em; font-weight: 590; }
.hero h1 > span { display: block; }
.title-highlight { position: relative; display: inline-block; z-index: 1; }
.title-highlight svg { position: absolute; bottom: -7px; left: -6%; width: 114%; height: 35px; z-index: -1; overflow: visible; }
.title-highlight path { fill: none; stroke: var(--cyan); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 1100; animation: draw-stroke 1.6s var(--ease) both; }
.hero-lede { color: var(--text); font-size: 17px; line-height: 1.6; margin-top: 28px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 23px; min-height: 53px; padding: 12px 25px; background: var(--ink); color: white; border: 0; border-radius: 40px; font-size: 14px; font-weight: 550; transition: transform 250ms var(--ease), background 200ms, box-shadow 250ms; }
.button svg { width: 23px; height: 23px; transition: transform 250ms var(--ease); }
.button:hover { transform: translateY(-3px); box-shadow: 0 7px 0 var(--cyan); }
.button:hover svg { transform: translateX(4px); }
.hero-copy .button { margin-top: 25px; }

.playground { position: relative; height: 530px; margin-top: 47px; isolation: isolate; perspective: 1300px; --mx: 0px; --my: 0px; --rx: 0deg; --ry: 0deg; --window-rotation: -3deg; --flower-turn: 0deg; }
.playground-backdrop { position: absolute; inset: 27px 0 25px; background-color: #e4ddf8; background-image: linear-gradient(130deg, #ffffff38, #ffffff00); border-radius: 32px; z-index: -2; transition: background-color 600ms var(--ease); }
.playground[data-demo="dashboard"] .playground-backdrop { background-color: #bce9e2; }
.playground[data-demo="automation"] .playground-backdrop { background-color: #f4d2c5; }
.stage-orbit { position: absolute; left: 10%; top: 46%; width: 215px; height: 215px; border: 49px solid var(--cyan); border-radius: 50%; box-shadow: inset 8px -10px 13px #079a853f, 10px 17px 10px #3f277414; transform: rotate(-18deg); z-index: -1; animation: buoy 6s ease-in-out infinite alternate; }
.stage-window { position: absolute; width: 57%; height: 78%; left: 21%; top: 4%; z-index: 3; overflow: hidden; border-radius: 16px; border: 1px solid #ffffff; background: white; box-shadow: 0 24px 55px #37285d24, 0 3px 3px #37285d12; transform: translate3d(var(--mx), var(--my), 0) rotate(var(--window-rotation)) rotateY(var(--ry)) rotateX(var(--rx)); transition: transform 700ms var(--ease), left 850ms var(--ease); animation: buoy 7s ease-in-out infinite alternate; }
.window-topbar { display: flex; align-items: center; justify-content: space-between; height: 37px; padding: 0 17px; background: #fff; border-bottom: 1px solid #e9e9e7; color: #59606b; font-size: 10px; }
.window-dots { display: flex; gap: 4px; }
.window-dots i { width: 5px; height: 5px; background: #dedfe3; border-radius: 50%; }
.window-dots i:first-child { background: var(--coral); }
.window-dots i:nth-child(2) { background: var(--cyan); }
.window-mark { color: var(--ink); width: 16px; height: 16px; }
.demo-panel { height: calc(100% - 63px); animation: panel-in 420ms var(--ease) both; }
.demo-app { display: grid; grid-template-columns: 55px 1fr; background: #fbfaf7; }
.app-sidebar { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 24px; border-right: 1px solid #e2e2de; background: #f0eee8; }
.app-sidebar svg { width: 24px; height: 24px; color: #6850db; margin-bottom: 17px; }
.app-sidebar i { width: 17px; height: 5px; background: #c3c6c8; border-radius: 5px; }
.app-sidebar i:nth-child(2) { background: #6850db; }
.app-content { padding: 20px 25px; }
.app-topline { display: flex; justify-content: space-between; align-items: center; font-size: 8px; letter-spacing: .1em; font-weight: 600; }
.app-avatar { display: grid; place-items: center; width: 23px; height: 23px; background: var(--cyan); border-radius: 50%; font-size: 10px; }
.app-title { font-size: clamp(28px, 3.2vw, 44px); font-weight: 540; letter-spacing: -.05em; line-height: 1.08; margin-top: 12px; }
.app-tiles { display: grid; grid-template-columns: .9fr 1.3fr; gap: 13px; height: 105px; margin-top: 20px; }
.app-tile { display: grid; place-items: center; border-radius: 10px; background: var(--violet); overflow: hidden; }
.app-tile > svg { width: 66px; height: 66px; color: #eae0ff; animation: revolve 25s linear infinite; }
.tile-cyan { display: flex; align-items: end; justify-content: space-between; padding: 16px; color: var(--ink); background: #bdf1e6; font-size: 15px; font-weight: 520; line-height: 1.15; }
.tile-cyan > svg { width: 25px; height: 25px; color: var(--ink); animation: none; rotate: -35deg; }
.window-bottom { height: 26px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; background: white; color: #61636a; border-top: 1px solid #e9e9e7; font-size: 8px; }
.window-bottom-dot { width: 5px; height: 5px; background: var(--cyan); border-radius: 50%; }
.demo-dashboard { background: #faf8ff; padding: 21px 28px 12px; }
.demo-dashboard-header { display: flex; justify-content: space-between; font-size: 9px; }
.demo-dashboard .app-title { margin-top: 15px; font-size: 31px; }
.demo-chart { display: flex; align-items: flex-end; gap: 14px; height: 110px; border-bottom: 1px solid #cfcad9; margin-top: 14px; }
.demo-chart i { flex: 1; background: var(--violet); height: var(--bar); border-radius: 7px 7px 0 0; transform-origin: bottom; animation: grow-bar 650ms var(--ease) both; }
.demo-chart i:nth-child(2n) { background: var(--cyan); animation-delay: 90ms; }
.demo-chart i:nth-child(3n) { background: var(--rose); animation-delay: 180ms; }
.demo-small { font-size: 10px; margin-top: 13px; color: #57516a; }
.demo-automation { padding: 28px 30px; background: var(--ink); color: white; }
.demo-overline { color: #c6c0df; font-size: 9px; letter-spacing: .05em; }
.demo-automation .app-title { margin-top: 22px; font-size: 39px; }
.flow-visual { display: flex; align-items: center; margin-top: 36px; }
.flow-node { width: 62px; height: 62px; display: grid; place-items: center; background: #242f43; color: var(--cyan); border: 1px solid #4b5573; border-radius: 15px; flex-shrink: 0; }
.flow-node svg { width: 28px; height: 28px; }
.flow-middle { background: var(--violet); color: var(--ink); }
.flow-connection { position: relative; flex: 1; height: 1px; background: #63758a; }
.flow-connection i { position: absolute; top: -3px; left: 0; width: 7px; height: 7px; background: var(--cyan); border-radius: 50%; animation: follow-flow 2s ease-in-out infinite; }
.flow-connection:nth-child(4) i { animation-delay: 1s; }
.flow-labels { display: flex; justify-content: space-between; color: #c5c9d6; font-size: 9px; margin-top: 12px; }
.floating-object { animation: buoy 5.5s ease-in-out infinite alternate; }
.code-object { position: absolute; width: 161px; min-height: 186px; left: 5%; top: 22%; z-index: 5; padding: 24px; background: var(--ink); color: white; border-radius: 16px; box-shadow: 8px 15px 25px #36296324; rotate: -10deg; transition: left 850ms var(--ease), rotate 850ms var(--ease), top 850ms var(--ease); animation-delay: -2s; }
.code-object > svg { width: 54px; height: 54px; color: var(--cyan); }
.code-object p { margin-top: 17px; font-size: 15px; line-height: 1.4; font-weight: 400; }
.object-pin { position: absolute; width: 9px; height: 9px; top: 15px; right: 15px; background: #45506a; border-radius: 50%; }
.mobile-object { position: absolute; right: 8%; top: 21%; z-index: 6; width: 151px; height: 284px; padding: 9px; background: #fff; border: 1px solid #fff; border-radius: 25px; box-shadow: 7px 19px 30px #4c376126; rotate: 9deg; transition: right 850ms var(--ease), rotate 850ms var(--ease), top 850ms var(--ease); animation-delay: -1s; }
.phone-speaker { display: block; width: 30px; height: 4px; margin: 2px auto 8px; background: #a4a6ad; border-radius: 8px; }
.phone-screen { height: 233px; padding: 17px 12px; background: #bce9e2; border-radius: 13px; }
.phone-screen > span { display: block; font-size: 21px; font-weight: 560; line-height: 1.03; letter-spacing: -.045em; }
.phone-flower { width: 100%; height: 105px; display: grid; place-items: center; }
.phone-flower svg { width: 78px; height: 78px; color: #08695c; animation: revolve 22s linear infinite reverse; }
.phone-line { width: 75%; height: 5px; border-radius: 5px; background: #76b6a9; margin-top: 6px; }
.phone-line.short { width: 45%; }
.phone-home { display: block; width: 40px; height: 3px; background: #a4a6ad; margin: 7px auto 0; border-radius: 5px; }
.you-cursor { position: absolute; top: 45%; left: 69%; z-index: 9; display: block; pointer-events: none; color: var(--coral); transform: translate(calc(var(--mx) * 2), calc(var(--my) * 2)); transition: transform 700ms var(--ease); animation: cursor-drift 9s ease-in-out infinite; }
.you-cursor > svg { width: 33px; height: 38px; }
.you-cursor > span { display: block; margin: -6px 0 0 19px; padding: 4px 12px; background: var(--coral); color: var(--ink); font-size: 12px; border: 1px solid var(--ink); border-radius: 5px; }
.support-sticker { position: absolute; top: 76%; right: 4%; z-index: 7; display: flex; align-items: center; gap: 13px; padding: 15px 20px; background: var(--amber); color: var(--ink); border-radius: 13px; box-shadow: 4px 10px 14px #674b671c; rotate: 6deg; transition: rotate 850ms var(--ease), right 850ms var(--ease); animation-delay: -3s; }
.support-sticker svg { width: 48px; height: 48px; }
.support-sticker span { font-size: 12px; line-height: 1.35; }
.flower-toy { position: absolute; right: 4%; top: 1%; z-index: 8; width: 113px; height: 113px; padding: 0; border: 0; background: none; color: var(--coral); }
.flower-toy > svg { width: 100%; height: 100%; filter: drop-shadow(4px 8px 0 #d36b4e); transform: rotate(var(--flower-turn)); transition: transform 850ms cubic-bezier(.34,1.5,.45,1), filter 300ms; }
.flower-toy > span { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink); font-size: 33px; }
.flower-toy > span svg { width: 28%; height: 28%; }
.flower-toy:hover > svg { filter: drop-shadow(6px 12px 0 #d36b4e); }
.demo-controls { position: absolute; left: 50%; bottom: 25px; z-index: 10; display: flex; align-items: center; gap: 4px; background: #fff; padding: 5px; border-radius: 40px; transform: translateX(-50%); box-shadow: 0 5px 18px #20113313; }
.demo-controls button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 30px; background: transparent; font-size: 12px; transition: color 180ms, background 180ms; }
.demo-controls button[aria-pressed="true"] { color: white; background: var(--ink); }
.demo-controls button:not([aria-pressed="true"]):hover { background: #eae6f9; }
.shuffle-scene { position: absolute; left: 4%; bottom: 34px; z-index: 8; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 13px; background: transparent; border: 0; color: #403650; font-size: 11px; }
.shuffle-scene > svg { width: 19px; height: 19px; flex-shrink: 0; transition: rotate 500ms var(--ease); }
.shuffle-scene:hover > svg { rotate: 90deg; }
.playground[data-layout="1"] { --window-rotation: 2deg; }
.playground[data-layout="1"] .stage-window { left: 19%; }
.playground[data-layout="1"] .code-object { left: 7%; top: 17%; rotate: 8deg; }
.playground[data-layout="1"] .mobile-object { right: 7%; top: 23%; rotate: -7deg; }
.playground[data-layout="1"] .support-sticker { right: 7%; rotate: -5deg; }
.playground[data-layout="2"] { --window-rotation: -1deg; }
.playground[data-layout="2"] .stage-window { left: 23%; }
.playground[data-layout="2"] .code-object { left: 4%; top: 29%; rotate: -17deg; }
.playground[data-layout="2"] .mobile-object { right: 5%; top: 16%; rotate: 15deg; }
.playground[data-layout="2"] .support-sticker { right: 3%; rotate: 9deg; }
.hero-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; font-size: 11px; color: #626575; }
.hero-foot strong { color: var(--ink); font-weight: 550; }
.hero-foot a { display: inline-flex; align-items: center; gap: 13px; min-height: 44px; color: var(--ink); }
.hero-foot a:hover svg { transform: translateX(4px); }
.hero-foot a svg { width: 17px; height: 17px; transition: transform 250ms; }

.ticker-wrap { overflow: clip; padding-block: 27px; margin-block: 15px 0; }
.ticker { background: var(--cyan); width: 100%; padding-block: 14px; overflow: hidden; }
.ticker-track { display: flex; width: max-content; }
.ticker-track[data-loop-ready] { animation: ticker-travel var(--ticker-duration, 36s) linear infinite; }
.ticker-track > span { display: inline-flex; flex-shrink: 0; align-items: center; gap: 31px; padding-right: 31px; white-space: nowrap; font-size: 27px; font-weight: 470; letter-spacing: -.025em; }
.ticker-track > span > svg { width: 27px; height: 27px; flex-shrink: 0; }
.section-space { padding-block: 116px; }
.services { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 100px; }
.services-copy h2, .approach h2 { font-size: clamp(40px, 4.5vw, 63px); font-weight: 510; line-height: 1.08; letter-spacing: -.055em; margin-top: 24px; }
.services-copy em, .approach h2 em { font-family: Georgia, serif; font-weight: 400; }
.section-description { margin-top: 28px; font-size: 16px; color: var(--text); line-height: 1.75; }
.service-options { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 33px; }
.service-options button { display: inline-flex; align-items: center; gap: 10px; min-height: 47px; padding: 9px 20px; background: transparent; border: 1px solid #bfc1bd; border-radius: 30px; font-size: 14px; transition: color 180ms, background 180ms, border-color 180ms, transform 250ms var(--ease); }
.service-options button:hover { background: #e7e0fb; border-color: #a895df; transform: translateY(-3px) rotate(-2deg); }
.service-options button[aria-pressed="true"] { background: var(--ink); color: white; border-color: var(--ink); }
.service-options button:disabled { cursor: default; }
.service-options .service-maintenance { border-color: #b77a31; }
.service-maintenance svg { width: 17px; height: 17px; }
.service-options .service-maintenance:hover { background: #f0cc9a; }
.service-options .service-maintenance[aria-pressed="true"] { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.service-preview { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 510px; padding: 30px; overflow: hidden; background: var(--plate); color: var(--plate-ink); border-radius: 29px; transition: background 550ms var(--ease), color 350ms; }
.service-preview::before { content: ""; position: absolute; width: 280px; height: 280px; top: 74px; left: 50%; background: #ffffff29; border-radius: 50%; transform: translateX(-50%); }
.service-preview-top { position: relative; display: flex; justify-content: space-between; font-size: 11px; }
.service-position { font-variant-numeric: tabular-nums; }
.service-sculpture { position: absolute; width: 170px; height: 170px; top: 117px; left: calc(50% - 85px); color: var(--plate-ink); rotate: -9deg; transition: rotate 750ms var(--ease), transform 750ms var(--ease); }
.service-sculpture > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sculpture-back { translate: 13px 15px; opacity: .15; }
.sculpture-shadow { position: absolute; width: 160px; height: 30px; border-radius: 50%; background: #08112024; filter: blur(13px); bottom: -40px; left: 5px; rotate: 9deg; }
.service-preview:hover .service-sculpture { rotate: 7deg; transform: translateY(-12px); }
.service-preview.is-changing .service-sculpture { animation: sculpture-in 650ms var(--ease) both; }
.service-preview-bottom { position: relative; margin-top: 300px; }
.service-preview-bottom h3 { font-size: clamp(32px, 3.2vw, 46px); font-weight: 510; letter-spacing: -.045em; line-height: 1.1; overflow-wrap: anywhere; }
.service-preview-bottom p { margin-top: 12px; max-width: 390px; padding-right: 72px; min-height: 54px; font-size: 14px; line-height: 1.6; }
.service-preview-bottom > a { position: absolute; bottom: 0; right: 0; display: grid; place-items: center; width: 54px; height: 54px; background: var(--plate-ink); color: var(--plate); border-radius: 50%; transition: rotate 250ms, transform 250ms; }
.service-preview-bottom > a svg { width: 23px; height: 23px; rotate: -35deg; }
.service-preview-bottom > a:hover { rotate: 35deg; transform: scale(1.1); }

.approach { padding-top: 23px; padding-bottom: 102px; }
.approach-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 47px; }
.approach-controls { padding-bottom: 5px; }
.approach-controls > p { font-size: 14px; color: var(--text); line-height: 1.65; }
.carousel-controls { display: flex; align-items: center; gap: 20px; margin-top: 22px; }
.carousel-controls button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; background: var(--ink); color: white; border: 1px solid var(--ink); border-radius: 50%; transition: background 180ms; }
.carousel-controls button:disabled { background: transparent; border-color: #c7c9c7; color: #92969c; cursor: default; }
.carousel-controls button:not(:disabled):hover { background: #5642ae; }
.carousel-prev svg { rotate: 180deg; }
.carousel-controls svg { width: 20px; height: 20px; }
.principles-track { overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-inline: max(40px, calc((100vw - 1280px) / 2)); padding: 12px max(40px, calc((100vw - 1280px) / 2)) 24px; }
.principles-track::-webkit-scrollbar { display: none; }
.principles-track.is-draggable { cursor: grab; }
.principles-track.is-dragging { scroll-snap-type: none; scroll-behavior: auto !important; }
.principles-track.is-dragging, .principles-track.is-dragging * { cursor: grabbing; user-select: none; }
.principles-track.is-dragging .principle { transform: none; }
.principles { display: flex; gap: 20px; width: max-content; align-items: stretch; }
.principle { display: flex; flex-direction: column; width: clamp(330px, 32vw, 440px); min-height: 465px; padding: 30px; border-radius: 22px; scroll-snap-align: start; transition: transform 350ms var(--ease); --plate: #d4f0e8; }
.principle:hover { transform: translateY(-7px); }
.principle-cyan { background: #cef0e7; }
.principle-violet { background: #e4ddfa; }
.principle-support { background: var(--amber); }
.principle-ink { background: var(--ink); color: #f7f6f2; }
.principle-rose { background: #f1dbe4; --plate: #f1dbe4; }
.principle-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 39px; }
.principle-top > span { font-size: 58px; font-weight: 340; letter-spacing: -.065em; line-height: 1; }
.principle-top > svg { width: 55px; height: 55px; transition: rotate 550ms var(--ease); }
.principle:hover .principle-top > svg { rotate: 15deg; }
.principle h3 { font-size: 31px; line-height: 1.12; font-weight: 530; letter-spacing: -.04em; }
.principle p { font-size: 15px; line-height: 1.75; margin-top: 20px; }
.principle-ink p { color: #c5cbd7; }
.principle-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 34px; font-size: 11px; }
.principle-foot > svg { width: 20px; height: 20px; flex-shrink: 0; }
.carousel-hint { display: flex; align-items: center; justify-content: space-between; margin-top: 3px; font-size: 11px; color: var(--text); }
.carousel-hint-arrows { display: flex; gap: 12px; margin-left: 12px; }
.carousel-hint-arrows svg { width: 18px; height: 18px; }
.contact { position: relative; background: #e7e1f8; overflow: clip; }
.contact-inner { display: grid; grid-template-columns: 1.8fr 1fr; align-items: center; gap: 72px; padding-block: 94px 102px; }
.contact h2 { margin-top: 29px; font-size: clamp(47px, 5.3vw, 76px); font-weight: 540; line-height: 1.06; letter-spacing: -.055em; }
.contact h2 > span { display: inline-block; position: relative; z-index: 1; }
.contact h2 > .contact-title-line { display: inline; }
.contact h2 > span svg { position: absolute; width: 107%; height: 30px; left: -3%; bottom: -10px; z-index: -1; overflow: visible; }
.contact h2 path { fill: none; stroke: var(--violet); stroke-width: 9; stroke-linecap: round; }
.contact address { margin-top: 35px; font-style: normal; display: flex; align-items: start; flex-direction: column; }
.contact-email { display: inline-flex; align-items: center; gap: 18px; min-height: 53px; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.025em; border-bottom: 1px solid var(--ink); transition: gap 250ms; }
.contact-email svg { width: 25px; height: 25px; rotate: -35deg; }
.contact-email:hover { gap: 30px; }
.contact-phone { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; font-size: 16px; }
.contact-phone:hover { text-decoration: underline; text-underline-offset: 5px; }
.contact-orbit { position: relative; display: grid; place-items: center; width: min(100%, 285px); aspect-ratio: 1; justify-self: center; }
.contact-flower { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--violet); animation: revolve 35s linear infinite; transition: scale 550ms var(--ease); }
.contact-arrow { position: relative; width: 105px; height: 105px; color: white; rotate: -38deg; transition: rotate 550ms var(--ease); }
.contact-orbit:hover .contact-flower { scale: 1.09; }
.contact-orbit:hover .contact-arrow { rotate: 0deg; }
.orbit-ring { position: absolute; top: calc(100% + 24px); left: 0; right: 0; text-align: center; font-size: 9px; letter-spacing: .12em; }
.site-footer { background: var(--paper); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 138px; }
.footer-inner > p { color: var(--text); font-size: 11px; line-height: 1.8; }
.footer-inner > p span { color: #656a72; }
.back-top { display: inline-flex; align-items: center; gap: 18px; min-height: 44px; font-size: 12px; }
.back-top-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #c2c6c4; border-radius: 50%; transition: transform 250ms; }
.back-top-icon svg { width: 19px; height: 19px; }
.back-top:hover .back-top-icon { transform: translateY(-5px); }

/* Keep brand colors stable on illustrations and cards; theme only the homepage surfaces. */
html[data-page="home"][data-theme="dark"] {
  color-scheme: dark;
  --paper: #081120;
  --foreground: #f7f6f2;
  --text: #b6bfce;
  --line: #364157;
}
[data-page="home"][data-theme="dark"] :focus-visible { outline-color: #b4a3ff; }
[data-page="home"][data-theme="dark"] .site-header { background: rgb(8 17 32 / 94%); border-bottom-color: var(--line); }
[data-page="home"][data-theme="dark"] .brand img { filter: none; }
[data-page="home"][data-theme="dark"] .brand > span { border-color: var(--line); }
[data-page="home"][data-theme="dark"] :is(.theme-toggle, .language-toggle, .menu-toggle, .motion-toggle, .service-options button, .back-top-icon) { border-color: #637087; }
[data-page="home"][data-theme="dark"] :is(.theme-toggle, .language-toggle, .motion-toggle):hover { background: #1b2940; }
[data-page="home"][data-theme="dark"] :is(.button-dark, .nav-contact, .carousel-controls button:not(:disabled), .service-options button[aria-pressed="true"]) { background: #f7f6f2; color: var(--ink); }
[data-page="home"][data-theme="dark"] .language-toggle::before { background: #f7f6f2; }
[data-page="home"][data-theme="dark"] .language-toggle span { color: var(--foreground); }
[data-page="home"][data-theme="dark"][data-language="es"] .language-toggle span:first-child,
[data-page="home"][data-theme="dark"][data-language="en"] .language-toggle span:last-child { color: var(--ink); }
[data-page="home"][data-theme="dark"] :is(.small-flower, .site-nav > a:not(.nav-contact):hover) { color: #b4a3ff; }
[data-page="home"][data-theme="dark"] :is(.hero-foot, .hero-foot strong, .hero-foot a, .footer-inner > p span) { color: var(--text); }
[data-page="home"][data-theme="dark"] .playground-backdrop { background-color: #2a2545; background-image: none; }
[data-page="home"][data-theme="dark"] .playground[data-demo="dashboard"] .playground-backdrop { background-color: #143d3b; }
[data-page="home"][data-theme="dark"] .playground[data-demo="automation"] .playground-backdrop { background-color: #49302c; }
[data-page="home"][data-theme="dark"] .stage-window { background: #142136; border-color: #445068; box-shadow: 0 24px 55px #0004; }
[data-page="home"][data-theme="dark"] :is(.window-topbar, .window-bottom, .app-sidebar) { background: #101b2d; border-color: var(--line); color: var(--text); }
[data-page="home"][data-theme="dark"] .window-mark { color: var(--foreground); }
[data-page="home"][data-theme="dark"] .demo-app { background: #19263c; }
[data-page="home"][data-theme="dark"] .demo-dashboard { background: #222139; }
[data-page="home"][data-theme="dark"] .demo-small { color: #c7c0df; }
[data-page="home"][data-theme="dark"] .demo-chart { border-color: #736d88; }
[data-page="home"][data-theme="dark"] .app-sidebar svg { color: #ad98ff; }
[data-page="home"][data-theme="dark"] :is(.app-avatar, .mobile-object, .ticker, .principle:not(.principle-ink)) { color: var(--ink); }
[data-page="home"][data-theme="dark"] :is(.mobile-object, .code-object) { border: 1px solid #536078; background: #142136; }
[data-page="home"][data-theme="dark"] .demo-controls { background: #17243a; border: 1px solid #637087; }
[data-page="home"][data-theme="dark"] .demo-controls button[aria-pressed="true"] { background: #f7f6f2; color: var(--ink); }
[data-page="home"][data-theme="dark"] .demo-controls button:not([aria-pressed="true"]):hover { background: #35425b; }
[data-page="home"][data-theme="dark"] .shuffle-scene { color: #e8e2f7; }
[data-page="home"][data-theme="dark"] .service-options button:hover { background: #302951; }
[data-page="home"][data-theme="dark"] .service-options button[aria-pressed="true"]:hover { background: #e4ddfa; }
[data-page="home"][data-theme="dark"] .service-options .service-maintenance[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); }
[data-page="home"][data-theme="dark"] :is(.service-preview[data-service="automatizaciones"], .principle-ink) { box-shadow: inset 0 0 0 1px #536078; }
[data-page="home"][data-theme="dark"] .carousel-controls button:disabled { border-color: #536078; color: #8794a9; }
[data-page="home"][data-theme="dark"] .carousel-controls button:not(:disabled):hover { background: #b4a3ff; }
[data-page="home"][data-theme="dark"] .contact { background: #242039; }
[data-page="home"][data-theme="dark"] .contact-email { border-color: #b6bfce; }

.will-reveal { opacity: 0; transform: translateY(28px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
.will-reveal.is-visible { opacity: 1; transform: none; }
.utility-page { min-height: 100svh; display: grid; place-items: center; padding: 40px 24px; }
.utility-content { width: min(100%, 560px); }
.utility-content h1 { margin: 28px 0 20px; font-size: clamp(36px, 6vw, 56px); font-weight: 520; line-height: 1.1; letter-spacing: -.04em; }
.utility-content > p { color: var(--text); }
.utility-content .button { margin-top: 28px; }

@keyframes revolve { to { rotate: 360deg; } }
@keyframes buoy { from { translate: 0 4px; } to { translate: 0 -9px; } }
@keyframes cursor-drift { 0%,100% { translate: 0 0; } 40% { translate: -12px -20px; } 75% { translate: 6px -9px; } }
@keyframes draw-stroke { from { stroke-dashoffset: 1100; } to { stroke-dashoffset: 0; } }
@keyframes ticker-travel { to { transform: translateX(calc(-1 * var(--ticker-step, 0px))); } }
@keyframes panel-in { from { opacity: 0; translate: 0 9px; } to { opacity: 1; translate: 0 0; } }
@keyframes grow-bar { from { transform: scaleY(.1); } to { transform: scaleY(1); } }
@keyframes follow-flow { from { left: 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } to { left: 100%; opacity: 0; } }
@keyframes sculpture-in { from { opacity: .2; transform: translateY(20px) rotate(-10deg) scale(.88); } to { opacity: 1; transform: none; } }

@media (max-width: 1160px) {
  .brand > span { display: none; }
  .shell { width: calc(100% - 64px); }
  .site-nav { gap: 23px; }
  .playground { height: 480px; }
  .stage-window { width: 60%; left: 18%; height: 79%; }
  .code-object { width: 133px; padding: 20px; min-height: 160px; left: 2%; }
  .code-object > svg { width: 43px; height: 43px; }
  .code-object p { font-size: 13px; }
  .mobile-object { width: 135px; height: 257px; right: 4%; }
  .phone-screen { height: 207px; }
  .phone-screen > span { font-size: 18px; }
  .phone-flower { height: 88px; }
  .flower-toy { width: 95px; height: 95px; }
  .support-sticker { padding: 12px 15px; top: 77%; right: 1%; }
  .support-sticker svg { width: 34px; height: 34px; }
  .support-sticker span { font-size: 10px; }
  .app-content { padding: 16px 20px; }
  .app-tiles { height: 95px; margin-top: 18px; }
  .services { gap: 55px; }
  .service-preview { min-height: 495px; padding: 25px; }
  .service-preview-bottom p { font-size: 13px; }
  .service-preview-bottom > a { width: 48px; height: 48px; }
  .principles-track { padding-inline: 32px; scroll-padding-inline: 32px; }
  .contact-inner { gap: 40px; }
}

@media (max-width: 850px) {
  .header-inner { gap: 18px; }
  .site-nav { gap: 18px; }
  .site-nav a { font-size: 12px; }
  .brand img { width: 164px; }
  .playground { height: 455px; }
  .stage-window { width: 70%; left: 15%; height: 78%; }
  .code-object { left: -1%; top: 34%; width: 105px; min-height: 145px; padding: 15px; }
  .code-object p { font-size: 11px; }
  .mobile-object { right: 1%; width: 109px; height: 217px; top: 31%; }
  .phone-screen { height: 171px; padding: 12px 8px; }
  .phone-screen > span { font-size: 15px; }
  .phone-flower { height: 69px; }
  .phone-flower svg { width: 56px; height: 56px; }
  .support-sticker { display: none; }
  .flower-toy { right: 1%; top: 1%; width: 80px; height: 80px; }
  .you-cursor { left: 73%; }
  .demo-controls { bottom: 23px; }
  .shuffle-scene { bottom: 76px; left: 1%; font-size: 10px; }
  .hero-foot > span:nth-child(2) { display: none; }
  .services { gap: 32px; }
  .section-space { padding-block: 85px; }
  .services-copy h2, .approach h2 { font-size: 43px; }
  .service-options { gap: 8px; }
  .service-options button { min-height: 45px; padding: 8px 15px; font-size: 12px; }
  .service-preview { min-height: 484px; padding: 22px; }
  .service-preview::before { width: 230px; height: 230px; }
  .service-sculpture { width: 150px; height: 150px; left: calc(50% - 75px); }
  .service-preview-bottom { margin-top: 280px; }
  .service-preview-bottom h3 { font-size: 32px; }
  .service-preview-bottom > a { width: 44px; height: 44px; }
  .approach { padding-top: 10px; }
  .contact h2 { font-size: 53px; }
  .contact-orbit { width: 215px; }
  .contact-arrow { width: 83px; height: 83px; }
  .contact-inner { gap: 30px; }
  .contact-email { font-size: 23px; }
}

@media (max-width: 980px) {
  [data-page="home"] .header-inner { min-height: 74px; flex-wrap: wrap; gap: 0 12px; }
  [data-page="home"] .header-controls { margin-left: auto; gap: 6px; }
  [data-page="home"] .menu-toggle { width: 44px; height: 44px; padding: 0; justify-content: center; }
  [data-page="home"] .site-nav { order: 3; width: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding-bottom: 16px; margin: 0; }
  [data-page="home"] .site-nav a { min-height: 49px; font-size: 15px; padding-inline: 12px; }
  [data-page="home"] .site-nav .nav-contact { justify-content: space-between; margin-top: 4px; padding-inline: 18px; }
  [data-page="home"] .motion-toggle { display: flex; align-items: center; gap: 14px; width: 100%; padding: 0 18px; margin-top: 10px; border-radius: 30px; font-size: 13px; }
  [data-page="home"] .motion-label { display: inline; }
}

@media (max-width: 760px) {
  .shell { width: calc(100% - 40px); }
  html { scroll-padding-top: 92px; }
  .header-inner { min-height: 74px; flex-wrap: wrap; gap: 0 12px; }
  .brand img { width: 173px; height: 62px; }
  [data-page="home"] .site-header .brand img { width: 144px; }
  .site-header { position: relative; }
  .site-header:has(.menu-toggle:not([hidden])) { position: sticky; }
  .header-controls { margin-left: auto; }
  .motion-toggle { width: 44px; height: 44px; }
  .site-nav { order: 3; width: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding-bottom: 16px; margin: 0; }
  .site-nav a { min-height: 49px; font-size: 15px; padding-inline: 12px; }
  .site-nav .nav-contact { justify-content: space-between; margin-top: 4px; padding-inline: 18px; }
  .hero { padding-top: 39px; }
  .hero .eyebrow { font-size: 9px; letter-spacing: .045em; gap: 7px; margin-bottom: 23px; }
  .small-flower { width: 16px; height: 16px; }
  .hero h1 { font-size: clamp(40px, 11.5vw, 82px); letter-spacing: -.065em; line-height: 1.065; }
  .title-highlight svg { height: 22px; bottom: -8px; }
  .hero-lede { max-width: 450px; font-size: 15px; margin: 24px auto 0; }
  .hero-lede br { display: none; }
  .hero-copy .button { min-height: 52px; margin-top: 23px; font-size: 13px; gap: 17px; }
  .playground { height: 445px; margin-top: 31px; }
  .playground-backdrop { inset: 12px 0 0; border-radius: 25px; }
  .stage-window { left: 7%; top: 28px; width: 86%; height: 293px; border-radius: 12px; }
  .window-topbar { height: 30px; padding-inline: 11px; font-size: 8px; }
  .window-dots { gap: 3px; }
  .window-dots i { width: 4px; height: 4px; }
  .window-bottom { height: 23px; padding-inline: 11px; font-size: 7px; }
  .demo-panel { height: calc(100% - 53px); }
  .demo-app { grid-template-columns: 35px 1fr; }
  .app-sidebar { padding-top: 18px; gap: 16px; }
  .app-sidebar svg { width: 18px; height: 18px; margin-bottom: 7px; }
  .app-sidebar i { width: 13px; height: 4px; }
  .app-content { padding: 16px; }
  .app-topline { font-size: 6px; }
  .app-avatar { width: 18px; height: 18px; font-size: 8px; }
  .app-title { font-size: 28px; margin-top: 10px; }
  .app-tiles { gap: 8px; height: 79px; margin-top: 17px; }
  .app-tile > svg { width: 49px; height: 49px; }
  .tile-cyan { padding: 10px; font-size: 12px; }
  .tile-cyan > svg { width: 20px; height: 20px; }
  .stage-orbit { width: 128px; height: 128px; border-width: 29px; left: -3%; top: 20%; }
  .code-object, .mobile-object { display: none; }
  .flower-toy { width: 83px; height: 83px; right: -3px; top: 226px; }
  .flower-toy > span { font-size: 26px; }
  .you-cursor { top: 49%; left: 75%; }
  .you-cursor > svg { width: 25px; height: 29px; }
  .you-cursor > span { font-size: 9px; padding: 2px 9px; margin-left: 14px; }
  .demo-controls { bottom: 66px; padding: 4px; gap: 1px; }
  .demo-controls button { min-height: 44px; padding: 0 14px; font-size: 10px; }
  .shuffle-scene { bottom: 12px; left: 50%; transform: translateX(-50%); min-width: 165px; justify-content: center; font-size: 11px; }
  .playground[data-layout="1"] .stage-window { left: 5%; }
  .playground[data-layout="2"] .stage-window { left: 9%; }
  .demo-dashboard { padding: 17px; }
  .demo-dashboard-header { font-size: 7px; }
  .demo-dashboard .app-title { font-size: 26px; margin-top: 12px; }
  .demo-chart { margin-top: 9px; height: 75px; gap: 8px; }
  .demo-chart i { border-radius: 4px 4px 0 0; }
  .demo-small { font-size: 7px; margin-top: 9px; }
  .demo-automation { padding: 22px 17px; }
  .demo-overline { font-size: 6px; }
  .demo-automation .app-title { font-size: 28px; margin-top: 16px; }
  .flow-visual { margin-top: 27px; }
  .flow-node { width: 43px; height: 43px; border-radius: 11px; }
  .flow-node svg { width: 21px; height: 21px; }
  .flow-labels { font-size: 6px; }
  .hero-foot { font-size: 10px; min-height: 72px; }
  .ticker-wrap { margin-top: 0; padding-block: 18px; }
  .ticker { padding-block: 11px; }
  .ticker-track > span { gap: 23px; padding-right: 23px; font-size: 23px; }
  .ticker-track > span > svg { width: 24px; height: 24px; }
  .services { grid-template-columns: 1fr; gap: 37px; padding-block: 70px 76px; }
  .services-copy { max-width: 560px; }
  .services-copy h2 { font-size: clamp(39px, 8.5vw, 58px); margin-top: 20px; }
  .section-description { margin-top: 21px; font-size: 15px; }
  .service-options { margin-top: 25px; gap: 8px; }
  .service-options button { font-size: 13px; padding-inline: 18px; min-height: 46px; }
  .service-preview { min-height: 466px; padding: 25px; border-radius: 24px; }
  .service-preview::before { top: 62px; width: 265px; height: 265px; }
  .service-sculpture { top: 103px; width: 163px; height: 163px; left: calc(50% - 81.5px); }
  .service-preview-bottom { margin-top: 280px; }
  .service-preview-bottom h3 { font-size: 36px; }
  .service-preview[data-service="automatizaciones"] h3 { font-size: clamp(26px, 7.6vw, 36px); }
  .service-preview[data-service="mantenimiento"] h3 { font-size: clamp(29px, 8vw, 36px); }
  .service-preview-bottom p { font-size: 13px; max-width: 370px; }
  .service-preview-bottom > a { width: 49px; height: 49px; }
  .approach { padding-top: 0; padding-bottom: 65px; }
  .approach-heading { align-items: start; flex-direction: column; gap: 24px; margin-bottom: 27px; }
  .approach h2 { font-size: clamp(37px, 8.5vw, 58px); margin-top: 18px; }
  .approach-controls { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 10px; padding: 0; }
  .approach-controls > p { font-size: 12px; }
  .carousel-controls { gap: 11px; margin-top: 0; }
  .carousel-controls button { width: 44px; height: 44px; }
  .principles-track { padding-inline: 20px; scroll-padding-inline: 20px; }
  .principles { gap: 14px; }
  .principle { width: min(83vw, 385px); min-height: 460px; padding: 27px; border-radius: 20px; }
  .principle h3 { font-size: 29px; }
  .principle p { font-size: 14px; }
  .principle-top { margin-bottom: 33px; }
  .principle-top > span { font-size: 53px; }
  .principle-top > svg { width: 48px; height: 48px; }
  .principle-foot { font-size: 10px; }
  .carousel-hint { font-size: 10px; }
  .contact-inner { grid-template-columns: 1fr; gap: 50px; padding-block: 62px 72px; }
  .contact h2 { font-size: clamp(40px, 9vw, 64px); margin-top: 22px; }
  .contact address { margin-top: 29px; }
  .contact-email { font-size: clamp(21px, 5.8vw, 29px); gap: 14px; min-height: 50px; }
  .contact-phone { font-size: 15px; margin-top: 9px; }
  .contact-orbit { width: 160px; justify-self: end; margin-top: -7px; margin-right: 15px; }
  .contact-arrow { width: 62px; height: 62px; }
  .orbit-ring { font-size: 7px; letter-spacing: .055em; top: calc(100% + 18px); }
  .footer-inner { flex-wrap: wrap; gap: 5px 20px; padding-block: 23px; }
  .footer-inner .brand { width: 100%; }
  .footer-inner .brand > span { display: block; max-width: none; font-size: 10px; }
  .footer-inner > p { font-size: 10px; }
  .back-top { margin-left: auto; font-size: 10px; gap: 9px; }
}
@media (max-width: 360px) {
  .shell { width: calc(100% - 32px); }
  .brand img { width: 144px; }
  [data-page="home"] .header-inner { column-gap: 8px; }
  [data-page="home"] .site-header .brand img { width: 128px; }
  [data-page="home"] .language-toggle { width: 62px; }
  .header-controls { gap: 7px; }
  .menu-toggle { padding-inline: 10px; }
  .hero .eyebrow { font-size: 8px; }
  .app-content { padding: 14px 12px; }
  .app-title { font-size: 25px; }
  .demo-controls button { padding-inline: 12px; }
  .principle { padding: 23px; }
  .principle h3 { font-size: 27px; }
  .principles-track { padding-inline: 16px; scroll-padding-inline: 16px; }
  .approach-controls > p { font-size: 11px; }
  .carousel-controls { gap: 8px; }
  .service-preview-bottom h3 { font-size: 31px; }
}
[data-motion="off"], [data-motion="off"] * { scroll-behavior: auto !important; }
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after { animation-play-state: paused !important; transition: none !important; }
[data-motion="off"] .title-highlight path { animation: none; stroke-dashoffset: 0; }
[data-motion="off"] .demo-panel, [data-motion="off"] .demo-chart i, [data-motion="off"] .service-preview.is-changing .service-sculpture { animation: none; }
[data-motion="off"] .will-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) { scroll-behavior: auto; }
  html:not([data-motion="on"]) *, html:not([data-motion="on"]) *::before, html:not([data-motion="on"]) *::after { animation: none !important; transition: none !important; }
  html:not([data-motion="on"]) .will-reveal { opacity: 1; transform: none; }
}