:root {
      --ink: #102f4f;
      --ink-soft: #17466f;
      --paper: #fffaf4;
      --white: #ffffff;
      --lime: #ff6fae;
      --lime-dark: #eb4d98;
      --blue: #73d7ff;
      --yellow: #ffd95c;
      --purple: #a996ff;
      --mint: #85e2c1;
      --muted: #63727b;
      --line: rgba(8, 26, 40, .12);
      --radius: 20px;
      --shadow: 0 18px 48px rgba(8, 26, 40, .11);
  }

  * {
      box-sizing: border-box;
  }

  html {
      scroll-behavior: smooth;
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
      overflow-x: clip;
  }

  body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "DM Sans", sans-serif;
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
      overflow-x: clip;
  }

  body::before {
      content: "";
      position: fixed;
      z-index: -1;
      inset: 0;
      pointer-events: none;
      background:
          radial-gradient(circle at 8% 12%, rgba(255, 217, 92, .2), transparent 23%),
          radial-gradient(circle at 92% 33%, rgba(169, 150, 255, .14), transparent 24%),
          radial-gradient(circle at 20% 82%, rgba(115, 215, 255, .12), transparent 22%);
  }

  body.menu-open {
      overflow: hidden;
  }

  a {
      color: inherit;
      text-decoration: none;
  }

  [data-scroll-to] {
      cursor: pointer;
  }

  button,
  input,
  textarea,
  select {
      font: inherit;
  }

  button {
      cursor: pointer;
  }

  .container {
      width: min(1160px, calc(100% - 40px));
      margin-inline: auto;
  }

  .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: #46606f;
      font-size: .77rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
  }

  .eyebrow::before {
      content: "";
      width: 22px;
      height: 7px;
      border-radius: 99px;
      background: var(--lime-dark);
      transform: rotate(-5deg);
  }

  h1,
  h2,
  h3 {
      font-family: "Manrope", sans-serif;
      margin: 0;
      letter-spacing: -.045em;
  }

  h2 {
      font-size: clamp(2.15rem, 4.5vw, 4.15rem);
      line-height: 1.05;
  }

  p {
      line-height: 1.7;
  }

  .site-header {
      position: fixed;
      inset: 0 0 auto;
      z-index: 20;
      color: white;
      background: transparent;
      transition: .3s ease;
  }

  .header-wave {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
  }

  .header-wave-fill {
      fill: #102f4f;
      transition: fill .3s ease;
  }

  .header-wave-line {
      fill: none;
      stroke: #73d7ff;
      stroke-width: 2.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
  }

  .site-header.scrolled .header-wave {
      filter: drop-shadow(0 9px 14px rgba(16, 47, 79, .12));
  }

  .site-header.scrolled .header-wave-fill {
      fill: #0d2945;
  }

  .nav {
      height: 94px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      z-index: 1;
  }

  .logo {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      font: 800 1.3rem "Manrope", sans-serif;
      letter-spacing: -.045em;
  }

  .logo svg,
  .logo img {
      width: 43px;
      height: 43px;
      flex: 0 0 auto;
      object-fit: contain;
  }

  .logo-word {
      color: inherit;
  }

  footer .logo {
      color: var(--ink);
  }

  .nav-links {
      display: flex;
      align-items: center;
      gap: 32px;
      font-weight: 600;
      font-size: .91rem;
  }

  .nav-links>a:not(.button) {
      position: relative;
  }

  .nav-links>a:not(.button)::after {
      content: "";
      position: absolute;
      left: 0;
      right: 100%;
      bottom: -7px;
      height: 2px;
      background: #64a9ff;
      transition: .25s;
  }

  .nav-links>a:not(.button):hover::after {
      right: 0;
  }

  .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 48px;
      padding: 0 21px;
      border: 0;
      border-radius: 999px;
      background: var(--ink);
      color: white;
      font-weight: 700;
      transition: transform .2s, box-shadow .2s, background .2s;
  }

  .button:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(8, 26, 40, .15);
  }

  .button:focus-visible {
      outline: 3px solid rgba(115, 215, 255, .55);
      outline-offset: 3px;
  }

  .button.lime {
      background: var(--lime);
      color: var(--ink);
      box-shadow: 0 4px 0 #cf3d80;
  }

  .button.lime:hover {
      background: #ff86bb;
      box-shadow: 0 3px 0 #cf3d80, 0 10px 22px rgba(235, 77, 152, .18);
      transform: translateY(1px);
  }

  .button.outline {
      color: var(--ink);
      background: transparent;
      box-shadow: inset 0 0 0 1px var(--line);
  }

  .button.outline:hover {
      background: white;
  }

  .menu-toggle {
      display: none;
      width: 44px;
      height: 44px;
      border: 0;
      border-radius: 50%;
      background: var(--ink);
      color: white;
      font-size: 1.2rem;
  }

  .hero {
      min-height: 800px;
      padding: 155px 0 84px;
      position: relative;
      display: flex;
      align-items: center;
  }

  .hero::before {
      content: "";
      position: absolute;
      width: 650px;
      height: 650px;
      right: -250px;
      top: -260px;
      border-radius: 46% 54% 63% 37% / 39% 44% 56% 61%;
      border: 130px solid rgba(115, 215, 255, .22);
      animation: blobMorph 9s ease-in-out infinite;
  }

  .hero::after {
      content: "";
      position: absolute;
      left: 5%;
      top: 22%;
      width: 48px;
      height: 48px;
      opacity: .78;
      background: var(--purple);
      clip-path: polygon(50% 0%, 61% 34%, 85% 15%, 68% 39%, 100% 50%, 68% 61%, 85% 85%, 61% 66%, 50% 100%, 39% 66%, 15% 85%, 32% 61%, 0% 50%, 32% 39%, 15% 15%, 39% 34%);
      transform: rotate(-8deg);
      animation: starDrift 5.2s ease-in-out infinite;
  }

  .hero-grid {
      display: grid;
      grid-template-columns: .96fr 1.04fr;
      align-items: center;
      gap: 32px;
      position: relative;
      z-index: 1;
  }

  .hero h1 {
      font-size: clamp(3.15rem, 5.1vw, 4.75rem);
      line-height: 1.01;
      max-width: 650px;
  }

  .hero h1 .hero-line {
      display: block;
  }

  .hero h1 .highlight {
      position: relative;
      display: inline-block;
      z-index: 0;
  }

  .hero h1 .highlight::after {
      content: "";
      position: absolute;
      z-index: -1;
      height: 28%;
      left: -1%;
      right: -2%;
      bottom: 1%;
      border-radius: 50% 12% 45% 16%;
      background: var(--yellow);
      transform: rotate(-1.4deg);
  }

  .hero h1 .highlight {
      color: var(--lime-dark);
  }

  .hero h1 .highlight::after {
      background: rgba(255, 111, 174, .18);
  }

  .hero-copy>p {
      max-width: 590px;
      color: var(--muted);
      font-size: 1.13rem;
      margin: 28px 0 34px;
  }

  .hero-actions {
      display: flex;
      flex-wrap: nowrap;
      gap: 12px;
  }

  .hero-actions .button {
      white-space: nowrap;
  }

  .hero-proof {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 9px 18px;
      margin-top: 36px;
      color: var(--muted);
      font-size: .82rem;
      font-weight: 600;
  }

  .hero-proof span {
      display: inline-flex;
      align-items: center;
      gap: 8px;
  }

  .hero-proof span::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--blue);
      box-shadow: 0 0 0 4px rgba(115, 215, 255, .18);
  }

  .hero-proof span:nth-child(2)::before {
      background: var(--lime);
      box-shadow: 0 0 0 4px rgba(255, 111, 174, .15);
  }

  .hero-proof span:nth-child(3)::before {
      background: var(--mint);
      box-shadow: 0 0 0 4px rgba(133, 226, 193, .18);
  }

  .idea-card {
      width: min(540px, 100%);
      min-height: 470px;
      margin-inline: auto;
      padding: 24px;
      position: relative;
      border-radius: 26px;
      background: var(--ink);
      color: white;
      box-shadow: 10px 12px 0 rgba(169, 150, 255, .25), var(--shadow);
      transition: transform .3s ease, box-shadow .3s ease;
  }

  .idea-card:hover {
      transform: translateY(-4px);
      box-shadow: 8px 10px 0 rgba(255, 111, 174, .25), 0 24px 55px rgba(8, 26, 40, .16);
  }

  .idea-card::before {
      content: "";
      position: absolute;
      inset: 10px;
      border: 1px solid rgba(255, 255, 255, .09);
      border-radius: 18px;
      pointer-events: none;
  }

  .window-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #9cb0bc;
      font-size: .78rem;
  }

  .dots {
      display: flex;
      gap: 6px;
  }

  .dots i {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #405665;
  }

  .idea-canvas {
      position: absolute;
      inset: 78px 30px 30px;
  }

  .big-idea {
      position: absolute;
      z-index: 4;
      right: 8px;
      top: -12px;
      width: 96px;
      text-align: center;
      color: white;
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: .02em;
  }

  .big-idea-icon {
      width: 68px;
      height: 68px;
      margin: 0 auto 7px;
      display: grid;
      place-items: center;
      border-radius: 52% 48% 45% 55% / 48% 44% 56% 52%;
      color: var(--ink);
      background: var(--yellow);
      box-shadow: 0 0 0 8px rgba(255, 217, 92, .12), 0 0 30px rgba(255, 217, 92, .36);
      animation: bulbGlow 2.8s ease-in-out infinite;
  }

  .big-idea-icon svg {
      width: 43px;
      height: 43px;
      overflow: visible;
  }

  .big-idea-icon .ray {
      transform-box: fill-box;
      transform-origin: center;
      animation: rayBlink 1.8s ease-in-out infinite alternate;
  }

  .time-track {
      position: absolute;
      width: 230px;
      height: 230px;
      right: -62px;
      top: -22px;
      border-top: 2px dashed rgba(115, 215, 255, .5);
      border-right: 2px dashed rgba(115, 215, 255, .5);
      border-radius: 50%;
      transform: rotate(-18deg);
  }

  .time-track::before {
      content: "";
      position: absolute;
      width: 12px;
      height: 12px;
      top: 19px;
      right: 27px;
      border: 4px solid var(--ink);
      border-radius: 50%;
      background: var(--yellow);
      animation: timerPulse 2.2s ease-in-out infinite;
  }

  .time-track::after {
      content: "12:24";
      position: absolute;
      right: 38px;
      top: -8px;
      padding: 5px 9px;
      border-radius: 99px;
      color: var(--ink);
      background: var(--blue);
      font: 700 .66rem "DM Sans", sans-serif;
      letter-spacing: .08em;
  }

  .bubble {
      position: absolute;
      padding: 17px 19px;
      font-size: .86rem;
      box-shadow: 0 15px 35px rgba(0, 0, 0, .13);
  }

  .bubble.one {
      left: 0;
      top: 12px;
      width: 68%;
      background: #fff8cf;
      color: var(--ink);
  }

  .bubble.two {
      right: 0;
      top: 120px;
      width: 65%;
      background: var(--blue);
      color: var(--ink);
  }

  .bubble.three {
      left: 8%;
      bottom: 18px;
      width: 76%;
      background: var(--lime);
      color: var(--ink);
  }

  .bubble.one {
      border-radius: 30px 14px 28px 12px;
      transform: rotate(-.8deg);
  }

  .bubble.two {
      border-radius: 16px 34px 13px 30px;
      transform: rotate(.7deg);
  }

  .bubble.three {
      border-radius: 28px 13px 34px 16px;
      transform: rotate(-.5deg);
  }

  .bubble strong {
      display: block;
      margin-bottom: 5px;
      font: 700 1rem "Manrope", sans-serif;
  }

  .bubble-title {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 7px;
      font: 700 1rem "Manrope", sans-serif;
  }

  .connector {
      position: absolute;
      border-left: 2px dashed rgba(255, 255, 255, .28);
      height: 76px;
  }

  .connector.a {
      left: 30%;
      top: 80px;
      transform: rotate(-27deg);
  }

  .connector.b {
      right: 30%;
      top: 190px;
      transform: rotate(31deg);
  }

  .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 10px;
      border-radius: 99px;
      background: rgba(8, 26, 40, .09);
      font-size: .7rem;
      font-weight: 700;
      margin-top: 8px;
  }

  .status-pill i {
      width: 6px;
      height: 6px;
      background: #3da84a;
      border-radius: 50%;
  }

  .float-note {
      position: absolute;
      right: -30px;
      bottom: 34px;
      padding: 13px 16px;
      border-radius: 14px;
      background: white;
      color: var(--ink);
      box-shadow: var(--shadow);
      font-weight: 700;
      font-size: .82rem;
      transform: rotate(-4deg);
  }

  .float-note span {
      display: inline-block;
      margin-right: 7px;
      color: var(--lime-dark);
      animation: tickHand 3s steps(4, end) infinite;
  }

  .hero-app {
      width: min(730px, 120%);
      min-height: 555px;
      margin-left: auto;
      margin-right: -28px;
      padding: 0;
      display: grid;
      grid-template-columns: 150px 1fr;
      grid-template-rows: 65px 1fr;
      border-radius: 26px;
      background: #f7fbfe;
      color: var(--ink);
      box-shadow: 10px 12px 0 rgba(169, 150, 255, .22), var(--shadow);
      overflow: hidden;
      transform: rotate(.45deg);
  }

  .hero-app::before {
      display: none;
  }

  .hero-app:hover {
      transform: translateY(-4px) rotate(0);
  }

  .hero-app-header {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 8px 14px;
      color: white;
      background: #102f4f;
  }

  .hero-app-logo {
      display: flex;
      align-items: center;
      gap: 8px;
      font: 800 1rem "Manrope", sans-serif;
      letter-spacing: -.035em;
  }

  .hero-app-logo svg,
  .hero-app-logo img {
      width: 34px;
      height: 34px;
      object-fit: contain;
  }

  .hero-app-header-actions {
      display: flex;
      gap: 7px;
  }

  .hero-app-header-actions span {
      padding: 7px 10px;
      border: 1px solid rgba(115, 215, 255, .28);
      border-radius: 7px;
      background: #1b4773;
      font-size: .54rem;
      font-weight: 700;
  }

  .hero-app-side {
      padding: 20px 15px;
      color: white;
      background: var(--ink);
  }

  .hero-app-menu {
      display: grid;
      gap: 7px;
  }

  .hero-app-menu span {
      padding: 9px 10px;
      border-radius: 9px;
      color: #c1d0d9;
      font-size: .65rem;
      font-weight: 600;
  }

  .hero-app-menu span:first-child {
      color: var(--ink);
      background: var(--lime);
  }

  .hero-app-main {
      min-width: 0;
      padding: 18px;
  }

  .hero-app-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding-bottom: 15px;
      border-bottom: 1px solid #e2e9ed;
      color: #728691;
      font-size: .65rem;
  }

  .hero-app-search {
      width: 58%;
      padding: 8px 12px;
      border-radius: 8px;
      background: #edf3f7;
  }

  .hero-app-welcome {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin: 18px 0 13px;
  }

  .hero-app-welcome strong {
      display: block;
      font: 800 1.12rem "Manrope", sans-serif;
  }

  .hero-app-welcome span {
      color: #71838e;
      font-size: .62rem;
  }

  .hero-app-date {
      text-align: right;
  }

  .hero-app-cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
  }

  .hero-app-card {
      min-width: 0;
      padding: 13px 10px;
      border-radius: 11px;
      background: #e5f6fd;
  }

  .hero-app-card:nth-child(2) {
      background: #fff0f6;
  }

  .hero-app-card:nth-child(3) {
      background: #fff8d9;
  }

  .hero-app-card:nth-child(4) {
      background: #e2f8ef;
  }

  .hero-app-card b {
      display: block;
      font: 800 1.15rem "Manrope", sans-serif;
  }

  .hero-app-card span {
      display: block;
      margin-top: 3px;
      color: #647985;
      font-size: .52rem;
  }

  .hero-app-grid {
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 9px;
      margin-top: 10px;
  }

  .hero-app-panel {
      padding: 12px;
      border: 1px solid #e5ebef;
      border-radius: 11px;
      background: white;
  }

  .hero-app-panel-title {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      font-size: .62rem;
      font-weight: 800;
  }

  .hero-app-panel-title a {
      color: #438dcc;
      font-size: .52rem;
  }

  .hero-employee {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 7px;
      align-items: center;
      padding: 7px 0;
      border-bottom: 1px solid #edf1f3;
      font-size: .55rem;
  }

  .hero-employee:last-child {
      border: 0;
  }

  .hero-employee time {
      color: #627987;
  }

  .hero-employee i {
      padding: 4px 6px;
      border-radius: 99px;
      color: #28775c;
      background: #dff9ef;
      font-style: normal;
      font-size: .48rem;
  }

  .hero-chart {
      height: 86px;
      display: flex;
      align-items: end;
      gap: 9px;
      padding: 8px 5px 0;
      border-bottom: 1px solid #dde6eb;
  }

  .hero-chart i {
      flex: 1;
      height: 45%;
      border-radius: 4px 4px 0 0;
      background: var(--blue);
  }

  .hero-chart i:nth-child(2) {
      height: 66%;
  }

  .hero-chart i:nth-child(3) {
      height: 57%;
  }

  .hero-chart i:nth-child(4) {
      height: 82%;
  }

  .hero-chart i:nth-child(5) {
      height: 72%;
  }

  .hero-quick {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      margin-top: 9px;
  }

  .hero-quick span {
      padding: 9px 3px;
      border-radius: 8px;
      color: #526b7b;
      background: #edf5fa;
      text-align: center;
      font-size: .48rem;
      font-weight: 700;
  }

  .hero-th-title {
      margin: 20px 0 7px;
      font: 700 .78rem "Manrope", sans-serif;
  }

  .hero-th-title strong {
      display: block;
      margin-top: 3px;
      color: var(--lime-dark);
      font-size: 1.55rem;
      letter-spacing: -.04em;
  }

  .hero-th-copy {
      margin: 0 0 17px;
      color: #667b88;
      font-size: .65rem;
      line-height: 1.5;
  }

  .hero-modules {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 9px;
  }

  .hero-module {
      min-height: 92px;
      padding: 13px;
      border-radius: 12px;
      background: #e8f7fd;
  }

  .hero-module:nth-child(2) {
      background: #fff0f6;
  }

  .hero-module:nth-child(3) {
      background: #e2f8ef;
  }

  .hero-module:nth-child(4) {
      background: #fff8d9;
  }

  .hero-module i {
      display: grid;
      place-items: center;
      width: 27px;
      height: 27px;
      margin-bottom: 8px;
      border-radius: 8px;
      color: #2479b8;
      background: rgba(255, 255, 255, .72);
      font-style: normal;
  }

  .hero-module b {
      display: block;
      font-size: .68rem;
  }

  .hero-module span {
      display: block;
      margin-top: 4px;
      color: #617783;
      font-size: .54rem;
      line-height: 1.35;
  }

  .hero-th-summary {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      margin-top: 12px;
      padding: 13px 8px;
      border: 1px solid #e4ebef;
      border-radius: 12px;
      background: white;
  }

  .hero-th-stat {
      padding: 0 10px;
      border-right: 1px solid #e3e9ed;
  }

  .hero-th-stat:last-child {
      border: 0;
  }

  .hero-th-stat span {
      display: block;
      color: #617783;
      font-size: .5rem;
  }

  .hero-th-stat b {
      display: block;
      margin-top: 5px;
      font: 800 1rem "Manrope", sans-serif;
  }

  section {
      padding: 104px 0;
  }

  .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 48px;
      margin-bottom: 52px;
      padding-bottom: 30px;
      position: relative;
  }

  .section-head::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: min(360px, 52%);
      height: 8px;
      background: radial-gradient(circle, var(--yellow) 0 4px, transparent 4.5px) 0 0/28px 8px repeat-x;
  }

  .section-head::before {
      content: "";
      position: absolute;
      left: 14px;
      bottom: 0;
      width: min(360px, 52%);
      height: 8px;
      background: radial-gradient(circle, var(--lime) 0 2.5px, transparent 3px) 0 0/56px 8px repeat-x;
      z-index: 1;
  }

  .section-head h2 {
      max-width: 760px;
      margin-top: 14px;
  }

  .section-head p {
      max-width: 420px;
      color: var(--muted);
      margin: 0 0 4px;
  }

  .problem {
      background: white;
  }

  .problem .section-head {
      align-items: flex-start;
  }

  .problem .section-head h2 {
      width: 690px;
      max-width: 100%;
      font-size: clamp(2.15rem, 3.6vw, 3.35rem);
      line-height: 1.08;
  }

  .problem-title-line {
      display: block;
      white-space: nowrap;
  }

  .problem .section-head>p {
      align-self: flex-start;
      margin-top: 76px;
  }

  .problem .section-head::before,
  .problem .section-head::after {
      display: none;
  }

  .problem .section-head {
      padding-bottom: 0;
  }

  .problem-flow {
      display: grid;
      grid-template-columns: 1fr 70px 1fr;
      align-items: center;
      gap: 24px;
  }

  .problem-side {
      padding: 34px 34px 18px;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: var(--paper);
      box-shadow: 0 18px 46px rgba(16, 47, 79, .045);
  }

  .problem-side.solution {
      background: var(--ink);
      color: white;
  }

  .problem-side h3 {
      margin-bottom: 24px;
      font-size: 1.55rem;
  }

  .problem-items {
      display: grid;
      gap: 12px;
  }

  .problem-item {
      min-height: 54px;
      padding: 14px 17px;
      display: flex;
      align-items: center;
      border-radius: 13px;
      color: #5f7480;
      background: white;
      font-weight: 700;
  }

  .problem-side.solution .problem-item {
      color: var(--ink);
  }

  .problem-side.solution .problem-item:nth-child(1) {
      background: #e8f7fd;
  }

  .problem-side.solution .problem-item:nth-child(2) {
      background: #fff0f6;
  }

  .problem-side.solution .problem-item:nth-child(3) {
      background: #e2f8ef;
  }

  .problem-arrow {
      color: #eb4d98;
      font: 800 2.4rem "Manrope", sans-serif;
      text-align: center;
  }

  .process {
      background: #fff;
      position: relative;
      overflow: hidden;
  }

  .process::after {
      content: "";
      position: absolute;
      width: 180px;
      height: 180px;
      right: -75px;
      bottom: -75px;
      border: 28px solid var(--yellow);
      border-radius: 50%;
      opacity: .55;
  }

  .process .section-head {
      align-items: flex-start;
      padding-bottom: 0;
  }

  .process .section-head h2 {
      max-width: 720px;
      font-size: clamp(2.1rem, 3.45vw, 3.2rem);
      line-height: 1.08;
  }

  .process .section-head>p {
      align-self: flex-start;
      margin-top: 76px;
  }

  .process .section-head::before,
  .process .section-head::after {
      display: none;
  }

  .process-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      border-top: 1px solid var(--line);
      position: relative;
  }

  .process-item {
      min-height: 285px;
      padding: 30px 22px;
      border-right: 1px solid var(--line);
      position: relative;
      transition: .3s;
  }

  .process-item:not(:last-child)::after {
      content: "→";
      position: absolute;
      z-index: 3;
      right: 8px;
      top: 30px;
      color: rgba(235, 77, 152, .56);
      font: 700 1rem "Manrope", sans-serif;
  }

  .process-item:first-child {
      border-left: 1px solid var(--line);
  }

  .process-item:hover {
      color: var(--ink);
      background: #fff9dc;
      transform: translateY(-4px);
      border-color: var(--yellow);
      border-radius: 18px;
      box-shadow: 0 14px 30px rgba(16, 47, 79, .08);
      z-index: 1;
  }

  .process-number {
      color: var(--lime-dark);
      font: 800 1.1rem "Manrope", sans-serif;
      letter-spacing: .06em;
  }

  .process-icon {
      width: 49px;
      height: 49px;
      margin: 34px 0 28px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: var(--paper);
      color: var(--ink);
      font-size: 1.25rem;
  }

  .process-item h3 {
      font-size: 1.16rem;
      letter-spacing: -.02em;
  }

  .process-item p {
      color: #798b95;
      font-size: .85rem;
      line-height: 1.6;
      margin-bottom: 0;
  }

  .process-item:hover p,
  .process-item:hover .process-number {
      color: #526b7b;
  }

  .process-item:nth-child(2) .process-icon {
      background: #ebe6ff;
  }

  .process-item:nth-child(3) .process-icon {
      background: #dff9ef;
  }

  .process-item:nth-child(4) .process-icon {
      background: #ffe0ed;
  }

  .process-item:nth-child(5) .process-icon {
      background: #dff5ff;
  }

  #servicios {
      background: #eaf7ff;
  }

  #servicios .section-head::before,
  #servicios .section-head::after {
      display: none;
  }

  #servicios .section-head {
      padding-bottom: 0;
  }

  .services-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
  }

  .service-card {
      min-height: 142px;
      padding: 24px 30px;
      display: grid;
      grid-template-columns: 64px 82px minmax(280px, 1.15fr) minmax(300px, 1fr);
      gap: 22px;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: rgba(255, 255, 255, .74);
      transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
      position: relative;
      overflow: hidden;
  }

  .service-card:nth-child(2),
  .service-card:nth-child(3) {
      border-radius: 22px;
  }

  .service-card:not(.featured)::before {
      display: none;
  }

  .service-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 38px rgba(8, 26, 40, .08);
  }

  .service-card.featured {
      grid-row: span 2;
      min-height: 638px;
      border-radius: 24px;
      background: var(--ink);
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
      position: relative;
  }

  .service-card.featured::after {
      content: "</>";
      position: absolute;
      right: -15px;
      bottom: -70px;
      color: rgba(228, 0, 124, .12);
      font: 800 12rem "Manrope", sans-serif;
      letter-spacing: -.1em;
  }

  .service-top {
      position: relative;
      z-index: 1;
  }

  .service-index {
      color: var(--lime-dark);
      font: 800 1.65rem "Manrope", sans-serif;
  }

  .service-card h3,
  .service-card:not(.featured) h3 {
      margin: 0;
      font-size: 1.35rem;
  }

  .service-card:nth-child(1) {
      background: #fff2f7;
      border-color: #ffd0e3;
  }

  .service-card:nth-child(2) {
      background: #eee9ff;
      border-color: #cfc3ff;
  }

  .service-card:nth-child(3) {
      background: #fff8d9;
      border-color: #f4e6a8;
  }

  .service-card:nth-child(4) {
      background: #e8f8f1;
      border-color: #c8eddf;
  }

  .service-card p {
      max-width: 470px;
      color: #647985;
      margin: 7px 0 0;
      line-height: 1.5;
  }

  .service-icon {
      width: 78px;
      height: 78px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      color: var(--ink);
      background: rgba(255, 255, 255, .76);
      font: 800 2.05rem "Manrope", sans-serif;
      border: 1px solid rgba(16, 47, 79, .09);
  }

  .service-icon svg {
      width: 39px;
      height: 39px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
  }

  .service-copy {
      padding-left: 8px;
      border-left: 1px solid rgba(16, 47, 79, .12);
  }

  .service-labels {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 10px;
  }

  .service-labels span {
      padding: 9px 14px;
      border: 1px solid rgba(16, 47, 79, .08);
      border-radius: 10px;
      color: var(--ink);
      background: rgba(255, 255, 255, .88);
      box-shadow: 0 5px 14px rgba(16, 47, 79, .04);
      font-size: .76rem;
      font-weight: 700;
  }

  .service-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      position: relative;
      z-index: 1;
  }

  .service-tags span {
      padding: 8px 12px;
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 999px;
      color: #d8e1e5;
      font-size: .74rem;
  }

  .service-map {
      width: min(420px, 92%);
      margin: 38px 0 30px;
      position: relative;
      z-index: 1;
  }

  .service-map-line {
      position: absolute;
      left: 12%;
      right: 12%;
      top: 25px;
      height: 3px;
      background: repeating-linear-gradient(90deg, var(--blue) 0 10px, transparent 10px 17px);
  }

  .service-map-nodes {
      display: flex;
      justify-content: space-between;
      position: relative;
  }

  .map-node {
      width: 54px;
      text-align: center;
      color: #b9c8d1;
      font-size: .65rem;
  }

  .map-node i {
      width: 48px;
      height: 48px;
      margin: 0 auto 8px;
      display: grid;
      place-items: center;
      border: 3px solid var(--ink);
      border-radius: 16px;
      color: var(--ink);
      background: var(--blue);
      box-shadow: 0 0 0 2px var(--blue);
      font: 800 .9rem "Manrope", sans-serif;
  }

  .map-node:nth-child(2) i {
      background: var(--yellow);
      box-shadow: 0 0 0 2px var(--yellow);
  }

  .map-node:nth-child(3) i {
      background: var(--mint);
      box-shadow: 0 0 0 2px var(--mint);
  }

  .mini-infographic {
      height: 80px;
      margin-top: 26px;
      display: flex;
      align-items: end;
      gap: 9px;
  }

  .mini-infographic i {
      display: block;
      width: 26px;
      border-radius: 8px 8px 3px 3px;
      background: var(--blue);
      transition: height .35s ease;
  }

  .mini-infographic i:nth-child(1) {
      height: 34%;
  }

  .mini-infographic i:nth-child(2) {
      height: 58%;
      background: var(--purple);
  }

  .mini-infographic i:nth-child(3) {
      height: 82%;
      background: var(--lime);
  }

  .mini-infographic i:nth-child(4) {
      height: 100%;
      background: var(--mint);
  }

  .service-card:hover .mini-infographic i:nth-child(1) {
      height: 48%;
  }

  .service-card:hover .mini-infographic i:nth-child(2) {
      height: 70%;
  }

  .simple-flow {
      margin-top: 30px;
      display: flex;
      align-items: center;
      gap: 9px;
      color: #607887;
      font-size: .7rem;
      font-weight: 700;
  }

  .simple-flow span {
      padding: 9px 11px;
      border-radius: 10px;
      background: white;
      box-shadow: 0 6px 16px rgba(16, 47, 79, .08);
  }

  .simple-flow b {
      color: var(--lime-dark);
      font-size: 1.1rem;
  }

  #productos {
      background: var(--paper);
  }

  .product-shell {
      display: grid;
      grid-template-columns: .68fr 1.32fr;
      gap: 30px;
      align-items: center;
      padding: 48px;
      border-radius: 28px;
      color: white;
      background: var(--ink);
      box-shadow: 10px 12px 0 rgba(115, 215, 255, .22), var(--shadow);
      overflow: hidden;
      position: relative;
  }

  .product-shell::after {
      content: "";
      position: absolute;
      width: 280px;
      height: 280px;
      right: -110px;
      top: -130px;
      border: 48px solid rgba(255, 111, 174, .13);
      border-radius: 50%;
  }

  .product-copy,
  .product-dashboard {
      min-width: 0;
      position: relative;
      z-index: 1;
  }

  .product-copy .eyebrow {
      color: #b9cbd5;
  }

  .product-copy h2 {
      margin: 16px 0 20px;
      font-size: clamp(2.35rem, 4.2vw, 4rem);
  }

  .product-copy>p {
      max-width: 520px;
      color: #b9c8d1;
  }

  .product-features {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin: 28px 0 32px;
  }

  .product-features span {
      display: flex;
      align-items: center;
      gap: 9px;
      color: #e7eef2;
      font-size: .84rem;
      font-weight: 600;
  }

  .product-features span::before {
      content: "✓";
      width: 22px;
      height: 22px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border-radius: 7px;
      color: var(--ink);
      background: var(--mint);
      font-size: .72rem;
      font-weight: 800;
  }

  .product-dashboard {
      width: 100%;
      min-height: 425px;
      padding: 24px;
      border-radius: 22px;
      color: var(--ink);
      background: #f8fbfd;
      transform: rotate(.4deg);
      box-shadow: 0 24px 50px rgba(0, 0, 0, .2);
      overflow: hidden;
  }

  .product-dashboard-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 18px;
      border-bottom: 1px solid #dfe8ed;
      font-size: .72rem;
      font-weight: 700;
  }

  .product-dashboard-bar span:last-child {
      padding: 6px 9px;
      border-radius: 99px;
      background: #dff9ef;
      color: #28775c;
  }

  .attendance-list {
      margin-top: 20px;
      padding: 8px 14px;
      border: 1px solid #e2e9ed;
      border-radius: 14px;
      background: white;
      overflow-x: auto;
  }

  .attendance-table {
      min-width: 590px;
  }

  .attendance-head,
  .attendance-row {
      display: grid;
      grid-template-columns: 1.05fr .95fr .9fr .9fr .9fr .9fr 1.1fr 1.2fr;
      gap: 6px;
      align-items: center;
  }

  .attendance-head {
      padding: 5px 0 8px;
      color: #617682;
      font-size: .55rem;
      font-weight: 700;
      line-height: 1.25;
  }

  .attendance-row {
      padding: 12px 0;
      border-bottom: 1px solid #edf1f3;
      font-size: .7rem;
  }

  .attendance-row:last-child {
      border: 0;
  }

  .attendance-row time {
      color: #405965;
      font-weight: 600;
  }

  .attendance-employee {
      color: var(--ink);
      font-weight: 800;
  }

  .attendance-state {
      width: max-content;
      padding: 5px 8px;
      border-radius: 99px;
      color: #28775c;
      background: #dff9ef;
      font-size: .58rem;
      font-weight: 800;
  }

  .attendance-state.vacation {
      color: #6450aa;
      background: #ebe6ff;
  }

  .attendance-minutes {
      font-weight: 800;
      color: var(--ink);
      text-align: center;
  }

  .attendance-minutes.late {
      color: #c13b72;
  }

  .work {
      background: var(--paper);
  }

  .work-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
  }

  .work-card {
      border: 1px solid var(--line);
      border-radius: 22px;
      background: white;
      overflow: hidden;
      transition: transform .25s ease, box-shadow .25s ease;
  }

  .work-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 38px rgba(8, 26, 40, .08);
  }

  .work-preview {
      height: 230px;
      padding: 18px;
      background: #edf4f8;
  }

  .ui-window {
      height: 100%;
      border: 1px solid rgba(16, 47, 79, .12);
      border-radius: 14px;
      background: white;
      box-shadow: 0 10px 24px rgba(16, 47, 79, .09);
      overflow: hidden;
  }

  .ui-bar {
      height: 34px;
      padding: 0 12px;
      display: flex;
      align-items: center;
      gap: 5px;
      border-bottom: 1px solid #e7edf1;
  }

  .ui-bar i {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #c8d4db;
  }

  .ui-body {
      height: calc(100% - 34px);
      display: grid;
      grid-template-columns: 46px 1fr;
  }

  .ui-side {
      padding: 12px 9px;
      background: var(--ink);
  }

  .ui-side i {
      display: block;
      height: 5px;
      margin-bottom: 10px;
      border-radius: 4px;
      background: rgba(255, 255, 255, .28);
  }

  .ui-side i:first-child {
      background: var(--blue);
  }

  .ui-main {
      padding: 15px;
  }

  .ui-heading {
      width: 44%;
      height: 8px;
      margin-bottom: 15px;
      border-radius: 5px;
      background: #c8d5dd;
  }

  .ui-metrics {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 7px;
  }

  .ui-metrics i {
      height: 34px;
      border-radius: 7px;
      background: #e8f7fd;
      border: 1px solid #d3edf8;
  }

  .ui-metrics i:nth-child(2) {
      background: #fff3f8;
      border-color: #f8dce8;
  }

  .ui-metrics i:nth-child(3) {
      background: #f2efff;
      border-color: #e3ddfa;
  }

  .ui-chart {
      height: 58px;
      margin-top: 12px;
      display: flex;
      align-items: end;
      gap: 6px;
      border-bottom: 1px solid #dde6eb;
  }

  .ui-chart i {
      flex: 1;
      height: 45%;
      border-radius: 4px 4px 0 0;
      background: var(--blue);
  }

  .ui-chart i:nth-child(2) {
      height: 72%;
      background: var(--purple);
  }

  .ui-chart i:nth-child(3) {
      height: 56%;
      background: var(--lime);
  }

  .ui-chart i:nth-child(4) {
      height: 88%;
      background: var(--mint);
  }

  .ui-rows {
      margin-top: 10px;
  }

  .ui-rows i {
      display: block;
      height: 6px;
      margin-top: 7px;
      border-radius: 4px;
      background: #e4ebef;
  }

  .ui-rows i:nth-child(2) {
      width: 82%;
  }

  .ui-rows i:nth-child(3) {
      width: 67%;
  }

  .work-card:nth-child(2) .work-preview {
      background: #fff0f6;
  }

  .work-card:nth-child(3) .work-preview {
      background: #f1efff;
  }

  .work-copy {
      padding: 25px 25px 28px;
  }

  .work-copy span {
      color: #738792;
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
  }

  .work-copy h3 {
      margin-top: 10px;
      font-size: 1.25rem;
      letter-spacing: -.025em;
  }

  .work-copy p {
      margin: 9px 0 0;
      color: var(--muted);
      font-size: .88rem;
      line-height: 1.6;
  }

  .work-note {
      margin: 24px 0 0;
      color: var(--muted);
      font-size: .78rem;
      text-align: center;
  }

  .wave-divider {
      --wave-fill: var(--ink);
      height: 0;
      margin: 0;
      position: relative;
      z-index: 2;
      overflow: visible;
      line-height: 0;
      pointer-events: none;
  }

  .wave-divider svg {
      position: absolute;
      left: 0;
      top: -92px;
      width: 100%;
      height: 94px;
      display: block;
      overflow: visible;
  }

  .wave-divider .wave-line {
      fill: none;
      stroke: var(--blue);
      stroke-width: 2.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
  }

  .wave-divider .wave-fill {
      fill: var(--wave-fill);
  }

  .wave-paper {
      --wave-fill: var(--paper);
  }

  .wave-white {
      --wave-fill: #fff;
  }

  .wave-ink {
      --wave-fill: var(--ink);
  }

  .results {
      padding-top: 82px;
      color: white;
      background: var(--ink);
      position: relative;
      overflow: hidden;
  }

  .results::before {
      content: "";
      position: absolute;
      width: 520px;
      height: 520px;
      border-radius: 50%;
      border: 100px solid rgba(228, 0, 124, .08);
      right: -130px;
      top: -220px;
  }

  .results .eyebrow {
      color: #a9bbc5;
  }

  .results .section-head p {
      color: #a9bbc5;
  }

  .results .section-head::before,
  .results .section-head::after {
      display: none;
  }

  .results .section-head {
      padding-bottom: 0;
  }

  .stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border-top: 1px solid rgba(255, 255, 255, .14);
  }

  .stat {
      padding: 42px 30px 20px 0;
      border-right: 1px solid rgba(255, 255, 255, .14);
  }

  .stat:not(:first-child) {
      padding-left: 40px;
  }

  .stat:last-child {
      border: 0;
  }

  .stat strong {
      display: block;
      color: var(--lime);
      font: 700 clamp(3rem, 7vw, 5.4rem) "Manrope", sans-serif;
      letter-spacing: -.07em;
      line-height: 1;
  }

  .stat span {
      display: block;
      max-width: 220px;
      color: #9fb0ba;
      margin-top: 16px;
      line-height: 1.5;
  }

  .about-grid {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: 90px;
      align-items: start;
  }

  .about-title {
      position: sticky;
      top: 120px;
  }

  .about-title h2 {
      margin-top: 14px;
  }

  .about-content>p {
      margin: 0 0 45px;
      color: var(--muted);
      font-size: 1.13rem;
  }

  .principle {
      display: grid;
      grid-template-columns: 55px 1fr;
      gap: 20px;
      padding: 26px 0;
      border-top: 1px solid var(--line);
  }

  .principle:last-child {
      border-bottom: 1px solid var(--line);
  }

  .principle b {
      color: #91a0a8;
      font-size: .8rem;
  }

  .principle h3 {
      font-size: 1.22rem;
      letter-spacing: -.02em;
  }

  .principle p {
      margin: 7px 0 0;
      color: var(--muted);
      font-size: .9rem;
  }

  #nosotros {
      background: #f7fbff;
  }

  .contact {
      padding-bottom: 40px;
      background: #fff;
  }

  .contact-shell {
      padding: 68px;
      border-radius: 26px;
      color: var(--ink);
      background: #ffc5dd;
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 70px;
      box-shadow: 8px 10px 0 rgba(115, 215, 255, .18);
  }

  .contact-shell .eyebrow {
      color: var(--ink);
  }

  .contact-shell .eyebrow::before {
      background: var(--ink);
  }

  .contact-copy h2 {
      margin: 17px 0 22px;
      font-size: clamp(2.4rem, 4vw, 3.65rem);
      line-height: 1.06;
  }

  .contact-title-line {
      display: block;
      white-space: nowrap;
  }

  .contact-copy p {
      max-width: 410px;
  }

  .contact-meta {
      margin-top: 28px;
      color: var(--ink);
      font-size: .84rem;
      font-weight: 700;
  }

  .contact-form {
      padding: 42px 34px 34px;
      border-radius: 20px;
      background: white;
      box-shadow: 0 18px 42px rgba(16, 47, 79, .11);
      position: relative;
      overflow: hidden;
  }

  .contact-form::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 10px;
      background: radial-gradient(circle, var(--blue) 0 4px, transparent 4.5px) 0 1px/28px 9px repeat-x, linear-gradient(90deg, #e9f8ff, #fff2f7);
  }

  .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
  }

  .field {
      margin-bottom: 16px;
  }

  .field label {
      display: block;
      margin: 0 0 7px;
      color: #58705f;
      font-size: .75rem;
      font-weight: 700;
  }

  .field input,
  .field textarea,
  .field select {
      width: 100%;
      min-height: 48px;
      border: 1px solid #d8e2e8;
      border-radius: 10px;
      padding: 13px 14px;
      color: var(--ink);
      background: #fbfcfd;
      outline: none;
      transition: border-color .2s, box-shadow .2s, background .2s;
  }

  .field textarea {
      min-height: 112px;
      resize: vertical;
  }

  .field input:hover,
  .field textarea:hover,
  .field select:hover {
      border-color: #b9cbd5;
      background: white;
  }

  .field input:focus,
  .field textarea:focus,
  .field select:focus {
      border-color: #e4007c;
      background: white;
      box-shadow: 0 0 0 3px rgba(228, 0, 124, .12);
  }

  .field.has-error input,
  .field.has-error textarea,
  .field.has-error select {
      border-color: #c6284f;
      box-shadow: 0 0 0 3px rgba(198, 40, 79, .12);
  }

  .field-error {
      display: block;
      min-height: 18px;
      margin: 6px 4px 0;
      color: #a2183c;
      font-size: .72rem;
      font-weight: 700;
      line-height: 1.35;
  }

  .contact-form .button {
      width: 100%;
  }

  .form-note {
      margin: 11px 0 0;
      text-align: center;
      color: #7b8c82;
      font-size: .72rem;
  }

  .form-message {
      padding: 18px;
      margin-bottom: 18px;
      border-radius: 12px;
      font-weight: 700;
      line-height: 1.45;
  }

  .form-message.success {
      background: #eaf8ee;
      color: #27633a;
  }

  .form-message.error {
      background: #fff0f3;
      color: #a2183c;
  }

  .website-field {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
  }

  footer {
      margin-top: 0;
      padding: 78px 0 28px;
      color: white;
      background: var(--ink);
      position: relative;
      overflow: hidden;
  }

  footer::before {
      content: "";
      position: absolute;
      width: 280px;
      height: 280px;
      right: -90px;
      top: -130px;
      border: 42px solid rgba(115, 215, 255, .11);
      border-radius: 50%;
  }

  footer::after {
      content: "";
      position: absolute;
      left: 4%;
      bottom: 18%;
      width: 42px;
      height: 42px;
      opacity: .42;
      background: var(--yellow);
      clip-path: polygon(50% 0%, 61% 34%, 85% 15%, 68% 39%, 100% 50%, 68% 61%, 85% 85%, 61% 66%, 50% 100%, 39% 66%, 15% 85%, 32% 61%, 0% 50%, 32% 39%, 15% 15%, 39% 34%);
      transform: rotate(8deg);
      animation: starDriftReverse 6.4s ease-in-out infinite;
  }

  .footer-main {
      display: grid;
      grid-template-columns: 1.35fr .65fr;
      gap: 90px;
      padding-bottom: 22px;
      position: relative;
      z-index: 1;
  }

  footer .logo {
      color: white;
  }

  footer .logo {
      font-size: 1.5rem;
      gap: 13px;
  }

  footer .logo svg {
      width: 52px;
      height: 52px;
  }

  .footer-brand p {
      max-width: 440px;
      margin: 0 0 28px;
      color: #b8c9d6;
      font-size: 1rem;
  }

  .footer-email {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--blue);
      font-weight: 700;
      transition: color .2s;
  }

  .footer-email:hover {
      color: white;
  }

  .footer-email span {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: var(--ink);
      background: var(--blue);
  }

  .footer-location {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 14px 0 0;
      color: #a9bbc5;
      font-size: .86rem;
      font-weight: 600;
  }

  .footer-location span {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border-radius: 50%;
      color: var(--ink);
      background: var(--mint);
  }

  .email-modal {
      position: fixed;
      z-index: 100;
      inset: 0;
      display: none;
      place-items: center;
      padding: 20px;
      background: rgba(8, 26, 40, .72);
      backdrop-filter: blur(6px);
  }

  .email-modal.open {
      display: grid;
  }

  .email-modal-dialog {
      width: min(560px, 100%);
      padding: 34px;
      border-radius: 24px;
      background: var(--paper);
      box-shadow: 10px 12px 0 rgba(115, 215, 255, .3), 0 30px 80px rgba(0, 0, 0, .28);
      position: relative;
  }

  .email-modal-close {
      position: absolute;
      right: 18px;
      top: 18px;
      width: 38px;
      height: 38px;
      border: 0;
      border-radius: 50%;
      color: white;
      background: var(--ink);
      font-size: 1.35rem;
      line-height: 1;
  }

  .email-modal h2 {
      padding-right: 42px;
      font-size: clamp(2rem, 5vw, 3rem);
  }

  .email-modal-intro {
      margin: 10px 0 24px;
      color: var(--muted);
  }

  .email-modal .field {
      margin-bottom: 16px;
  }

  .email-modal textarea {
      min-height: 150px;
  }

  .field-limit {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: .68rem;
      text-align: right;
  }

  .field-limit.near-limit {
      color: #a2183c;
      font-weight: 700;
  }

  .email-modal-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-top: 8px;
  }

  .email-modal-note {
      margin: 0;
      color: var(--muted);
      font-size: .72rem;
  }

  .privacy-link {
      display: inline-block;
      margin-top: 28px;
      color: var(--blue);
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 4px;
  }

  .privacy-modal-copy {
      max-height: min(55vh, 520px);
      margin-top: 18px;
      padding-right: 8px;
      overflow-y: auto;
      color: var(--muted);
  }

  .privacy-modal-copy h3 {
      margin: 22px 0 6px;
      color: var(--ink);
      font-size: 1rem;
      letter-spacing: -.02em;
  }

  .privacy-modal-copy p {
      margin: 0 0 12px;
  }

  .cookie-banner {
      position: fixed;
      z-index: 90;
      left: 50%;
      bottom: 20px;
      width: min(920px, calc(100% - 32px));
      transform: translate(-50%, calc(100% + 50px));
      opacity: 0;
      visibility: hidden;
      transition: transform .35s ease, opacity .35s ease, visibility .35s;
  }

  .cookie-banner.visible {
      transform: translate(-50%, 0);
      opacity: 1;
      visibility: visible;
  }

  .cookie-banner-inner {
      display: flex;
      align-items: center;
      gap: 24px;
      padding: 18px 20px;
      border: 1px solid rgba(115, 215, 255, .45);
      border-radius: 18px;
      color: white;
      background: #0d2945;
      box-shadow: 0 18px 50px rgba(8, 26, 40, .3);
  }

  .cookie-banner p {
      flex: 1;
      margin: 0;
      font-size: .9rem;
      line-height: 1.55;
  }

  .cookie-banner a {
      color: var(--blue);
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 3px;
  }

  .cookie-banner .button {
      min-height: 42px;
      flex: 0 0 auto;
      color: var(--ink);
      background: var(--yellow);
  }

  .footer-column h3 {
      margin: 6px 0 24px;
      color: #7895aa;
      font: 700 .72rem "DM Sans", sans-serif;
      letter-spacing: .12em;
      text-transform: uppercase;
  }

  .footer-column h3::after {
      display: none;
  }

  .footer-links {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 15px;
      color: #dbe6ed;
      font-size: .9rem;
  }

  .footer-links a {
      transition: color .2s, transform .2s;
  }

  .footer-links a:hover {
      color: var(--lime);
      transform: translateX(4px);
  }

  .footer-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 4px;
      padding: 12px 16px;
      border-radius: 12px;
      color: var(--ink);
      background: var(--lime);
      box-shadow: 0 4px 0 #cf3d80;
      font-weight: 700;
      font-size: .85rem;
      transition: .2s;
  }

  .footer-cta:hover {
      transform: translateY(-3px);
      box-shadow: 0 9px 22px rgba(0, 0, 0, .18);
  }

  .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 30px;
      color: #8fa6b7;
      padding-top: 26px;
      border-top: 1px solid rgba(255, 255, 255, .12);
      font-size: .75rem;
      position: relative;
      z-index: 1;
  }

  .footer-bottom-links {
      display: flex;
      gap: 22px;
  }

  .footer-bottom a:hover {
      color: white;
  }

  .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .7s ease, transform .7s ease;
  }

  .reveal.visible {
      opacity: 1;
      transform: none;
  }

  @keyframes floaty {

      0%,
      100% {
          transform: translateY(0) rotate(0);
      }

      50% {
          transform: translateY(-9px) rotate(1deg);
      }
  }

  @keyframes blobMorph {

      0%,
      100% {
          border-radius: 46% 54% 63% 37% / 39% 44% 56% 61%;
          transform: rotate(0);
      }

      50% {
          border-radius: 62% 38% 42% 58% / 52% 61% 39% 48%;
          transform: rotate(8deg);
      }
  }

  @keyframes timerPulse {

      0%,
      100% {
          transform: scale(.8);
          box-shadow: 0 0 0 0 rgba(255, 217, 92, .35);
      }

      50% {
          transform: scale(1);
          box-shadow: 0 0 0 8px rgba(255, 217, 92, 0);
      }
  }

  @keyframes tickHand {
      0% {
          transform: rotate(0);
      }

      100% {
          transform: rotate(360deg);
      }
  }

  @keyframes progressTrip {

      0%,
      8% {
          left: 0;
          width: 10%;
      }

      45% {
          left: 38%;
          width: 25%;
      }

      92%,
      100% {
          left: 88%;
          width: 12%;
      }
  }

  @keyframes bulbGlow {

      0%,
      100% {
          transform: rotate(-3deg) scale(.96);
          box-shadow: 0 0 0 7px rgba(255, 217, 92, .1), 0 0 25px rgba(255, 217, 92, .3);
      }

      50% {
          transform: rotate(2deg) scale(1.04);
          box-shadow: 0 0 0 11px rgba(255, 217, 92, .14), 0 0 48px rgba(255, 217, 92, .58);
      }
  }

  @keyframes rayBlink {
      from {
          opacity: .45;
      }

      to {
          opacity: 1;
      }
  }

  @keyframes starDrift {

      0%,
      100% {
          transform: translate(0, 0) rotate(-10deg) scale(.92);
      }

      35% {
          transform: translate(14px, -13px) rotate(8deg) scale(1.08);
      }

      68% {
          transform: translate(-5px, 8px) rotate(18deg) scale(.98);
      }
  }

  @keyframes starDriftReverse {

      0%,
      100% {
          transform: translate(0, 0) rotate(8deg) scale(.95);
      }

      40% {
          transform: translate(-12px, -10px) rotate(-14deg) scale(1.1);
      }

      72% {
          transform: translate(8px, 5px) rotate(-3deg) scale(1);
      }
  }

  @media (max-width: 960px) {
      .menu-toggle {
          display: grid;
          place-items: center;
          z-index: 22;
      }

      .nav-links {
          position: fixed;
          inset: 0;
          padding: 120px 35px 50px;
          color: var(--ink);
          background: var(--paper);
          flex-direction: column;
          align-items: flex-start;
          font: 700 1.6rem "Manrope", sans-serif;
          transform: translateX(100%);
          transition: .35s;
      }

      .nav-links.open {
          transform: none;
      }

      .nav-links .button {
          margin-top: 12px;
          font: 700 .95rem "DM Sans", sans-serif;
      }

      .hero {
          padding-top: 140px;
      }

      .hero-grid {
          grid-template-columns: 1fr;
      }

      .hero-copy {
          text-align: center;
      }

      .hero-copy>p {
          margin-inline: auto;
      }

      .hero-actions,
      .hero-proof {
          justify-content: center;
      }

      .idea-card {
          width: min(600px, 100%);
          margin: auto;
      }

      .hero-app {
          width: min(650px, 100%);
          min-height: 470px;
          margin-inline: auto;
          grid-template-columns: 128px 1fr;
          grid-template-rows: 56px 1fr;
          transform: none;
      }

      .process-grid {
          grid-template-columns: repeat(2, 1fr);
      }

      .process-item:last-child {
          grid-column: span 2;
      }

      .process-item:not(:last-child)::after {
          display: none;
      }

      .work-grid {
          grid-template-columns: 1fr 1fr;
      }

      .work-card:last-child {
          grid-column: span 2;
      }

      .section-head {
          display: block;
      }

      .section-head p {
          margin-top: 20px;
      }

      .section-head::after,
      .section-head::before {
          width: 180px;
      }

      .contact-shell {
          padding: 50px 35px;
          grid-template-columns: 1fr;
          gap: 35px;
      }

      .product-shell {
          grid-template-columns: 1fr;
      }

      .problem-flow {
          grid-template-columns: 1fr;
      }

      .problem-arrow {
          transform: rotate(90deg);
      }

      .problem .section-head>p {
          margin-top: 20px;
      }

      .process .section-head>p {
          margin-top: 20px;
      }

      .problem-title-line {
          white-space: normal;
      }

      .stats {
          grid-template-columns: 1fr 1fr;
      }
  }

  @media (max-width: 680px) {
      .cookie-banner {
          bottom: 12px;
          width: calc(100% - 24px);
      }

      .cookie-banner-inner {
          align-items: stretch;
          flex-direction: column;
          gap: 14px;
          padding: 17px;
      }

      .cookie-banner .button {
          width: 100%;
      }

      .container {
          width: min(100% - 28px, 1160px);
      }

      .header-wave {
          bottom: 0;
      }

      section {
          padding: 78px 0;
      }

      .hero {
          min-height: auto;
          padding: 137px 0 65px;
      }

      .hero h1 {
          font-size: clamp(3rem, 15vw, 4.25rem);
      }

      .hero-copy>p {
          font-size: 1rem;
      }

      .hero-actions .button {
          width: 100%;
      }

      .hero-actions {
          flex-wrap: wrap;
      }

      .idea-card {
          min-height: 440px;
          max-width: calc(100vw - 36px);
          transform: none;
          box-shadow: 8px 10px 0 rgba(169, 150, 255, .3), 0 20px 45px rgba(8, 26, 40, .14);
      }

      .hero-app {
          min-height: 430px;
          grid-template-columns: 92px 1fr;
      }

      .hero-app-side {
          padding: 20px 9px;
      }

      .hero-app-menu span {
          padding: 8px 7px;
          font-size: .56rem;
      }

      .hero-app-main {
          padding: 12px;
      }

      .hero-app-cards {
          grid-template-columns: 1fr 1fr;
      }

      .hero-app-grid {
          grid-template-columns: 1fr;
      }

      .hero-app-grid .hero-app-panel:nth-child(2) {
          display: none;
      }

      .idea-canvas {
          inset: 64px 18px 18px;
      }

      .big-idea {
          width: 78px;
          right: -2px;
          top: -10px;
          font-size: .57rem;
      }

      .big-idea-icon {
          width: 56px;
          height: 56px;
          margin-bottom: 5px;
      }

      .big-idea-icon svg {
          width: 37px;
          height: 37px;
      }

      .bubble {
          font-size: .8rem;
      }

      .float-note {
          right: 6px;
          bottom: 18px;
      }

      .process-grid {
          grid-template-columns: 1fr;
      }

      .process-grid::before {
          display: none;
      }

      .process-item,
      .process-item:last-child {
          grid-column: auto;
          min-height: auto;
      }

      .process-icon {
          margin: 28px 0 20px;
      }

      .services-grid {
          grid-template-columns: 1fr;
      }

      .service-card {
          grid-template-columns: 52px 68px 1fr;
          gap: 16px;
      }

      .service-labels {
          grid-column: 3;
      }

      .product-shell {
          padding: 34px 22px;
          gap: 35px;
      }

      .product-features {
          grid-template-columns: 1fr;
      }

      .product-dashboard {
          min-height: 350px;
          padding: 16px;
          transform: none;
      }

      .attendance-list {
          padding-bottom: 12px;
      }

      .service-card.featured {
          grid-row: auto;
          min-height: 470px;
      }

      .service-card,
      .service-card:nth-child(2),
      .service-card:nth-child(3),
      .service-card.featured {
          transform: none;
          border-radius: 20px;
      }

      .service-card {
          grid-template-columns: 44px 58px 1fr;
          padding: 22px 18px;
          gap: 12px;
      }

      .service-icon {
          width: 56px;
          height: 56px;
          border-radius: 14px;
          font-size: 1.35rem;
      }

      .service-copy {
          padding-left: 0;
          border-left: 0;
      }

      .service-labels {
          grid-column: 1 / -1;
          padding-left: 0;
      }

      .work-grid {
          grid-template-columns: 1fr;
      }

      .work-card:last-child {
          grid-column: auto;
      }

      .work-preview {
          height: 210px;
      }

      .stats {
          grid-template-columns: 1fr;
      }

      .wave-divider {
          height: 0;
          margin: 0;
      }

      .wave-divider svg {
          width: 100%;
          transform: none;
      }

      .wave-divider .wave-line {
          stroke-width: 2.8;
      }

      .results {
          padding-top: 68px;
      }

      .stat,
      .stat:not(:first-child) {
          padding: 30px 0;
          border-right: 0;
          border-bottom: 1px solid rgba(255, 255, 255, .14);
      }

      .about-grid {
          grid-template-columns: 1fr;
          gap: 45px;
      }

      .about-title {
          position: static;
      }

      .contact-shell {
          max-width: calc(100vw - 28px);
          padding: 38px 18px;
          border-radius: 25px;
          box-shadow: 7px 9px 0 rgba(115, 215, 255, .22);
      }

      .contact-title-line {
          white-space: normal;
      }

      .contact-form {
          padding: 23px 18px;
          transform: none;
          border-radius: 18px;
      }

      .form-row {
          grid-template-columns: 1fr;
          gap: 0;
      }

      .footer-main {
          grid-template-columns: 1fr;
          gap: 45px;
      }

      .footer-brand {
          grid-column: auto;
      }

      .footer-bottom {
          align-items: flex-start;
          flex-direction: column;
          gap: 16px;
      }

      .footer-bottom-links {
          flex-wrap: wrap;
      }
  }

  @media (max-width: 420px) {
      .hero h1 {
          font-size: clamp(2.65rem, 13vw, 3.4rem);
      }

      .hero-copy>p {
          line-height: 1.62;
      }

      .idea-card {
          min-height: 455px;
      }

      .bubble.one {
          width: 78%;
      }

      .bubble.two {
          width: 72%;
          top: 128px;
      }

      .bubble.three {
          width: 84%;
          left: 3%;
      }

      .service-card,
      .work-copy {
          padding: 26px 22px;
      }

      .work-preview {
          height: 190px;
          padding: 14px;
      }
  }

  @media (prefers-reduced-motion: reduce) {
      html {
          scroll-behavior: auto;
      }

      .reveal,
      .bubble,
      .hero::before,
      .hero::after,
      footer::after,
      .time-track::before,
      .float-note span,
      .process-grid::before,
      .big-idea-icon,
      .big-idea-icon .ray {
          opacity: 1;
          transform: none;
          transition: none;
          animation: none;
      }
  }