/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-emerald-600: oklch(59.6% 0.145 163.225);
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-xl: 36rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --tracking-wide: 0.025em;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-canvas: #f8f9fc;
    --color-ink: #121728;
    --color-secondary: #5c6477;
    --color-muted: #7d879b;
    --color-line: #e5e9f1;
    --color-brand: #4c54e8;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .z-10 {
    z-index: 10;
  }
  .z-50 {
    z-index: 50;
  }
  .col-span-full {
    grid-column: 1 / -1;
  }
  .mx-auto {
    margin-inline: auto;
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-7 {
    margin-top: calc(var(--spacing) * 7);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }
  .mt-11 {
    margin-top: calc(var(--spacing) * 11);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-7 {
    margin-bottom: calc(var(--spacing) * 7);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-16 {
    margin-bottom: calc(var(--spacing) * 16);
  }
  .ml-auto {
    margin-left: auto;
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline-flex {
    display: inline-flex;
  }
  .h-\[82px\] {
    height: 82px;
  }
  .w-fit {
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .max-w-\[330px\] {
    max-width: 330px;
  }
  .max-w-\[470px\] {
    max-width: 470px;
  }
  .max-w-\[545px\] {
    max-width: 545px;
  }
  .max-w-\[555px\] {
    max-width: 555px;
  }
  .max-w-\[680px\] {
    max-width: 680px;
  }
  .max-w-\[720px\] {
    max-width: 720px;
  }
  .max-w-xl {
    max-width: var(--container-xl);
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .justify-between {
    justify-content: space-between;
  }
  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .gap-9 {
    gap: calc(var(--spacing) * 9);
  }
  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }
  .gap-12 {
    gap: calc(var(--spacing) * 12);
  }
  .gap-14 {
    gap: calc(var(--spacing) * 14);
  }
  .gap-\[5px\] {
    gap: 5px;
  }
  .space-y-7 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 7) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 7) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .gap-x-7 {
    column-gap: calc(var(--spacing) * 7);
  }
  .gap-y-3 {
    row-gap: calc(var(--spacing) * 3);
  }
  .gap-y-4 {
    row-gap: calc(var(--spacing) * 4);
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .border-y {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-line {
    border-color: var(--color-line);
  }
  .bg-canvas {
    background-color: var(--color-canvas);
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-14 {
    padding-block: calc(var(--spacing) * 14);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }
  .pt-\[135px\] {
    padding-top: 135px;
  }
  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }
  .pb-20 {
    padding-bottom: calc(var(--spacing) * 20);
  }
  .text-center {
    text-align: center;
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[9px\] {
    font-size: 9px;
  }
  .text-\[12px\] {
    font-size: 12px;
  }
  .text-\[16px\] {
    font-size: 16px;
  }
  .text-\[17px\] {
    font-size: 17px;
  }
  .text-\[20px\] {
    font-size: 20px;
  }
  .leading-7 {
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
  }
  .leading-8 {
    --tw-leading: calc(var(--spacing) * 8);
    line-height: calc(var(--spacing) * 8);
  }
  .leading-\[1\.85\] {
    --tw-leading: 1.85;
    line-height: 1.85;
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-extrabold {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-\[-0\.07em\] {
    --tw-tracking: -0.07em;
    letter-spacing: -0.07em;
  }
  .tracking-\[0\.16em\] {
    --tw-tracking: 0.16em;
    letter-spacing: 0.16em;
  }
  .tracking-\[0\.31em\] {
    --tw-tracking: 0.31em;
    letter-spacing: 0.31em;
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .text-brand {
    color: var(--color-brand);
  }
  .text-emerald-600 {
    color: var(--color-emerald-600);
  }
  .text-ink {
    color: var(--color-ink);
  }
  .text-muted {
    color: var(--color-muted);
  }
  .text-secondary {
    color: var(--color-secondary);
  }
  .text-white\/65 {
    color: color-mix(in srgb, #fff 65%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 65%, transparent);
    }
  }
  .text-white\/75 {
    color: color-mix(in srgb, #fff 75%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 75%, transparent);
    }
  }
  .uppercase {
    text-transform: uppercase;
  }
  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .hover\:underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .sm\:block {
    @media (width >= 40rem) {
      display: block;
    }
  }
  .sm\:inline {
    @media (width >= 40rem) {
      display: inline;
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .sm\:gap-4 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .sm\:pt-\[154px\] {
    @media (width >= 40rem) {
      padding-top: 154px;
    }
  }
  .sm\:pb-28 {
    @media (width >= 40rem) {
      padding-bottom: calc(var(--spacing) * 28);
    }
  }
  .sm\:text-\[19px\] {
    @media (width >= 40rem) {
      font-size: 19px;
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-\[1\.4fr_0\.8fr_0\.8fr\] {
    @media (width >= 48rem) {
      grid-template-columns: 1.4fr 0.8fr 0.8fr;
    }
  }
  .md\:grid-cols-\[1fr_3fr\] {
    @media (width >= 48rem) {
      grid-template-columns: 1fr 3fr;
    }
  }
  .md\:items-center {
    @media (width >= 48rem) {
      align-items: center;
    }
  }
  .md\:gap-20 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 20);
    }
  }
  .lg\:ml-0 {
    @media (width >= 64rem) {
      margin-left: calc(var(--spacing) * 0);
    }
  }
  .lg\:flex {
    @media (width >= 64rem) {
      display: flex;
    }
  }
  .lg\:hidden {
    @media (width >= 64rem) {
      display: none;
    }
  }
  .lg\:grid-cols-3 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-\[0\.8fr_1\.2fr\] {
    @media (width >= 64rem) {
      grid-template-columns: 0.8fr 1.2fr;
    }
  }
  .lg\:grid-cols-\[0\.92fr_1\.08fr\] {
    @media (width >= 64rem) {
      grid-template-columns: 0.92fr 1.08fr;
    }
  }
  .lg\:grid-cols-\[0\.95fr_1\.05fr\] {
    @media (width >= 64rem) {
      grid-template-columns: 0.95fr 1.05fr;
    }
  }
  .lg\:grid-cols-\[1fr_1fr\] {
    @media (width >= 64rem) {
      grid-template-columns: 1fr 1fr;
    }
  }
  .lg\:gap-10 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 10);
    }
  }
  .lg\:gap-16 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 16);
    }
  }
  .lg\:gap-24 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 24);
    }
  }
  .lg\:pt-\[172px\] {
    @media (width >= 64rem) {
      padding-top: 172px;
    }
  }
  .lg\:pb-28 {
    @media (width >= 64rem) {
      padding-bottom: calc(var(--spacing) * 28);
    }
  }
  .xl\:grid-cols-3 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .xl\:gap-24 {
    @media (width >= 80rem) {
      gap: calc(var(--spacing) * 24);
    }
  }
}
:root {
  color-scheme: light;
  scroll-behavior: smooth;
}
*, *::before, *::after {
  box-sizing: border-box;
}
body {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -0.009em;
  overflow-x: hidden;
}
::selection {
  background: #d5d7fc;
  color: #191d46;
}
:focus-visible {
  outline: 3px solid #767efe;
  outline-offset: 4px;
}
section[id] {
  scroll-margin-top: 100px;
}
.container-wide {
  width: min(100% - 48px, 1240px);
  margin-inline: auto;
}
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-small {
  width: 16px;
  height: 16px;
}
.icon-tiny {
  width: 12px;
  height: 12px;
}
.icon-lg {
  width: 24px;
  height: 24px;
}
.icon-feature {
  width: 26px;
  height: 26px;
}
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 16px;
  color: white;
  background: #22265c;
  transform: translateY(-160%);
  border-radius: 10px;
}
.skip-link:focus {
  transform: translateY(0);
}
.site-header {
  background: rgba(248, 249, 252, .88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled, .site-header.menu-open {
  border-bottom-color: #e9ebf1;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 35px rgba(35,48,80,.035);
}
.brand-mark {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 11px;
  background: #4c54e8;
  transform: rotate(-7deg);
  box-shadow: 0 5px 11px #4c54e829;
}
.brand-mark span {
  color: white;
  font-weight: 900;
  font-size: 32px;
  line-height: 1;
  margin-top: -8px;
  margin-left: -1px;
  font-family: Georgia, serif;
  font-style: italic;
  transform: rotate(7deg);
}
.brand-mark i {
  width: 15px;
  height: 4px;
  background: #afbdff;
  position: absolute;
  right: -3px;
  top: 11px;
  transform: rotate(45deg);
  border-radius: 3px;
}
.nav-link {
  color: #4c5263;
  font-size: 13px;
  font-weight: 650;
  transition: color .2s;
}
.nav-link:hover {
  color: #4c54e8;
}
.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4bc793;
  box-shadow: 0 0 0 4px #4bc79320;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 53px;
  padding: 0 22px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: -.01em;
  border: 1px solid transparent;
  transition: transform .2s, box-shadow .2s, color .2s, background .2s, border-color .2s;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}
.btn .icon {
  width: 16px;
  height: 16px;
}
.btn-sm {
  min-height: 43px;
  padding-inline: 19px;
  border-radius: 9px;
}
.btn-primary {
  color: white;
  background: #4c54e8;
  box-shadow: 0 9px 22px #4c54e82c;
}
.btn-primary:hover {
  background: #323bc9;
  box-shadow: 0 14px 28px #4c54e83c;
}
.btn-dark {
  background: #141929;
  color: white;
}
.btn-dark:hover {
  background: #303754;
}
.btn-outline {
  color: #262d3f;
  background: #fff;
  border-color: #dce1ec;
}
.btn-outline:hover {
  border-color: #a5aef7;
  box-shadow: 0 9px 22px #151e4620;
}
.menu-toggle {
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  border: 1px solid #e2e6ee;
  border-radius: 11px;
  color: #252b3c;
  background: white;
  cursor: pointer;
}
.mobile-menu {
  box-shadow: 0 20px 35px #20294213;
  background: #fff;
  border-top: 1px solid #f0f1f6;
}
.mobile-menu:not(.hidden) {
  display: block;
}
.mobile-link {
  padding: 12px 7px;
  font-size: 15px;
  font-weight: 650;
  color: #3d4455;
}
.mobile-link-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #4c54e8;
  margin-top: 6px;
  border-top: 1px solid #e6e9f0;
}
.hero {
  background: radial-gradient(ellipse 55% 65% at 100% 47%,#e9e9fd 0%, transparent 75%), radial-gradient(ellipse 50% 50% at -10% 9%,#f0f2ff 0%,transparent 70%), #f8f9fc;
}
.hero-grain {
  position: absolute;
  inset: 0;
  opacity: .15;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
}
.eyebrow {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #5f65a7;
}
.eyebrow-icon {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  color: #4c54e8;
  background: #e5e7ff;
}
.eyebrow-icon .icon {
  width: 13px;
  height: 13px;
}
.hero-title {
  font-size: clamp(2.85rem, 5vw, 5.4rem);
  line-height: 1.085;
  font-weight: 810;
  letter-spacing: -.075em;
  max-width: 700px;
}
.headline-highlight {
  color: #4c54e8;
  position: relative;
}
.highlight-star {
  display: inline-block;
  vertical-align: top;
  font-size: .23em;
  transform: translate(4px,0);
  color: #a2a6f9;
}
.hero-bottom-line {
  height: 3px;
  background: linear-gradient(90deg, #555de7, #a5b0fc 35%, #dce4ff 70%, transparent);
}
.hero-showcase {
  isolation: isolate;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.showcase-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid #cad0eea8;
  z-index: -2;
}
.orbit-1 {
  width: 95%;
  aspect-ratio: 1;
  left: 7%;
  top: -10%;
}
.orbit-2 {
  width: 73%;
  aspect-ratio: 1;
  left: 18%;
  top: 0;
}
.showcase-dots {
  position: absolute;
  width: 88px;
  height: 92px;
  background-image: radial-gradient(#a2a9e5 1.15px,transparent 1.15px);
  background-size: 13px 13px;
  opacity: .53;
}
.dots-left {
  left: -1%;
  bottom: 5%;
}
.dots-right {
  right: -1%;
  top: 8%;
}
.browser-window {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 605px;
  margin: 12px 25px 0 8px;
  overflow: hidden;
  border: 1px solid #dfe2ef;
  background: white;
  border-radius: 16px;
  box-shadow: 0 46px 85px #252b7040,0 4px 15px #252b7010;
  transform: rotate(-2.2deg);
  animation: window-rise .85s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes window-rise {
  from {
    opacity: 0;
    transform: translateY(28px) rotate(-2deg) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(-2.2deg) scale(1);
  }
}
.browser-bar {
  display: flex;
  height: 37px;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  background: #f7f8fa;
  border-bottom: 1px solid #eaecef;
}
.browser-dot {
  width: 7px;
  height: 7px;
  background: #d6dbe4;
  border-radius: 50%;
}
.browser-dot:first-child {
  background: #efaaa7;
}
.browser-dot:nth-child(2) {
  background: #efd69a;
}
.browser-dot:nth-child(3) {
  background: #addfbe;
}
.browser-address {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1px solid #ecedf0;
  color: #8b91a0;
  border-radius: 4px;
  padding: 3px 23px;
  font-size: 8px;
}
.browser-bar-action {
  font-size: 13px;
  color: #9399a6;
}
.concept-page {
  background: #fff9ed;
  color: #46301f;
}
.concept-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 23px;
  gap: 10px;
  font-size: 8px;
  color: #89735f;
}
.concept-nav strong {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.1em;
  color: #563b2c;
}
.concept-nav strong span {
  color: #c98f63;
}
.concept-pill {
  background: #573d2e;
  color: white;
  border-radius: 5px;
  font-weight: 700;
  padding: 8px 11px;
}
.concept-body {
  display: grid;
  grid-template-columns: 53% 47%;
  padding: 21px 15px 30px 29px;
  min-height: 280px;
}
.concept-copy {
  position: relative;
  z-index: 1;
  padding: 12px 0 0 3px;
}
.concept-kicker {
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .14em;
  color: #ae825c;
}
.concept-copy h2 {
  font-family: Georgia,serif;
  font-weight: 700;
  font-size: clamp(29px,3.3vw,48px);
  line-height: 1.05;
  letter-spacing: -.06em;
  margin-top: 11px;
}
.concept-copy h2 span {
  color: #d89567;
}
.concept-copy p {
  font-size: 9px;
  max-width: 175px;
  color: #8c7667;
  line-height: 1.8;
  margin-top: 12px;
}
.concept-btn {
  display: inline-flex;
  gap: 15px;
  padding: 10px 12px;
  border-radius: 5px;
  color: #fff;
  background: #644432;
  margin-top: 16px;
  font-size: 9px;
  font-weight: 700;
}
.concept-bottom {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 26px;
  font-size: 8px;
  color: #a58a76;
}
.concept-bottom span {
  font-size: 16px;
  color: #bd8865;
}
.concept-features {
  display: flex;
  justify-content: space-around;
  gap: 7px;
  padding: 13px 9px;
  border-top: 1px solid #e8dbc9;
  background: #f9efdd;
  font-size: 8px;
  color: #8f7863;
}
.coffee-art {
  position: relative;
  min-height: 255px;
  margin: -15px 0 0 -7px;
  border-radius: 50%;
  background: radial-gradient(circle,#f2d9b9 0%, #ebc7a5 56%, #f3e1c8 56%, #f3e1c800 68%);
}
.coffee-shadow {
  position: absolute;
  width: 75%;
  height: 35%;
  bottom: 17px;
  left: 13%;
  border-radius: 50%;
  background: #a75a2e39;
  filter: blur(15px);
}
.coffee-plate {
  position: absolute;
  width: 79%;
  aspect-ratio: 1;
  top: 7%;
  left: 10%;
  background: linear-gradient(130deg,#fff6e6,#e8cab4);
  border: 10px solid #fbebd7;
  border-radius: 50%;
  box-shadow: 12px 18px 20px #884b2d49, inset 0 3px 7px #ad684029;
  display: grid;
  place-items: center;
}
.coffee-cup {
  position: relative;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: #fdf7ee;
  padding: 7px;
  box-shadow: inset 0 2px 7px #c2a48e,5px 8px 9px #66462d3b;
  z-index: 2;
}
.coffee-top {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 48% 44%,#d8a47b,#9d5128 74%);
  box-shadow: inset 0 2px 10px #6a3518;
}
.latte-swirl {
  position: absolute;
  background: #f8dfbc;
  border-radius: 60% 10% 60% 30%;
  transform: rotate(45deg);
}
.swirl-1 {
  height: 65%;
  width: 28%;
  left: 38%;
  top: 16%;
}
.swirl-2 {
  height: 34%;
  width: 33%;
  left: 20%;
  top: 39%;
  transform: rotate(-35deg);
}
.swirl-3 {
  height: 32%;
  width: 33%;
  right: 15%;
  top: 40%;
  transform: rotate(120deg);
}
.coffee-handle {
  position: absolute;
  border: 13px solid #f1e2d0;
  border-radius: 50%;
  width: 66px;
  height: 73px;
  top: 43%;
  right: 1%;
  transform: rotate(-18deg);
  box-shadow: 4px 3px 6px #81553145;
}
.bean {
  position: absolute;
  width: 16px;
  height: 27px;
  border-radius: 50%;
  background: #835035;
  box-shadow: 2px 4px 4px #66432844;
}
.bean::after {
  content: "";
  position: absolute;
  height: 19px;
  width: 2px;
  background: #b68560;
  top: 4px;
  left: 7px;
  transform: rotate(14deg);
  border-radius: 50%;
}
.bean-1 {
  right: 9%;
  bottom: 5%;
  transform: rotate(32deg);
}
.bean-2 {
  right: 1%;
  bottom: 15%;
  transform: rotate(-32deg);
}
.leaf-art {
  position: absolute;
  width: 21px;
  height: 51px;
  background: #85966d;
  border-radius: 80% 0 80% 0;
  z-index: 2;
}
.leaf-1 {
  left: 1%;
  bottom: 10%;
  transform: rotate(-40deg);
}
.leaf-2 {
  left: 8%;
  bottom: 0%;
  transform: rotate(38deg);
  background: #9ca579;
}
.float-label {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 15px 10px 10px;
  background: #fff;
  box-shadow: 0 14px 35px #27296622;
  border: 1px solid #e9eaf5;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
  color: #1f2843;
}
.float-label small {
  display: block;
  font-size: 9px;
  font-weight: 500;
  color: #8c94a7;
  margin-top: 3px;
}
.float-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #5861e6;
  background: #e9eaff;
}
.float-icon-green {
  color: #179e7b;
  background: #dff7ee;
}
.label-top {
  top: 5%;
  right: -2%;
  transform: rotate(6deg);
  animation: float 6s ease-in-out infinite;
}
.label-bottom {
  bottom: 10%;
  left: -3%;
  transform: rotate(3deg);
  animation: float 7s ease-in-out 1.5s infinite;
}
@keyframes float {
  50% {
    translate: 0 -9px;
  }
}
.mini-mobile {
  width: 119px;
  height: 215px;
  position: absolute;
  right: 0;
  bottom: -2%;
  z-index: 2;
  padding: 5px;
  background: #f2f0f7;
  border: 3px solid #d7d8e7;
  border-radius: 20px;
  box-shadow: 0 17px 40px #20274d3c;
  transform: rotate(11deg);
  overflow: hidden;
}
.mini-mobile-notch {
  position: absolute;
  z-index: 2;
  top: 6px;
  left: 34%;
  height: 8px;
  width: 32%;
  border-radius: 6px;
  background: #d0ced7;
}
.mini-mobile-content {
  height: 100%;
  background: #fff7ee;
  padding: 17px 8px 8px;
  border-radius: 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mini-logo {
  font-weight: 900;
  font-size: 10px;
  letter-spacing: -.08em;
  color: #603b28;
}
.mini-photo {
  height: 85px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle,#d7af85,#a56a40);
}
.mini-mug {
  width: 43px;
  height: 40px;
  border-radius: 0 0 17px 17px;
  background: linear-gradient(90deg,#f2e0c9,#fff);
  box-shadow: 2px 4px 4px #5c321958;
  position: relative;
}
.mini-mug:before {
  content: "";
  width: 17px;
  height: 20px;
  position: absolute;
  border: 6px solid #e9d5bc;
  right: -12px;
  top: 4px;
  border-radius: 50%;
}
.mini-mug:after {
  content: "";
  width: 41px;
  height: 8px;
  position: absolute;
  border-radius: 50%;
  top: -4px;
  left: 1px;
  background: radial-gradient(circle,#bb8056 50%,#f2e0c9 55%);
}
.mini-mobile-content strong {
  font-family: Georgia,serif;
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: -.04em;
}
.mini-button {
  background: #674733;
  color: white;
  text-align: center;
  font-size: 7px;
  padding: 6px;
  border-radius: 4px;
}
.industry-item {
  color: #6c7482;
  letter-spacing: -.02em;
}
.section-space {
  padding-block: 110px;
}
.section-kicker {
  font-size: 11px;
  text-transform: uppercase;
  color: #4c54e8;
  font-weight: 800;
  letter-spacing: .18em;
  margin-bottom: 21px;
}
.section-title {
  font-size: clamp(2.1rem,3.8vw,3.4rem);
  font-weight: 790;
  letter-spacing: -.065em;
  line-height: 1.16;
  color: #151b2b;
}
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 35px;
  margin-bottom: 47px;
}
.section-intro {
  color: #687185;
  font-size: 15px;
  line-height: 1.9;
  max-width: 390px;
  padding-bottom: 5px;
}
.service-card {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 33px 30px 28px;
  min-height: 402px;
  background: #fff;
  border: 1px solid #e7eaf2;
  border-radius: 17px;
  transition: transform .25s,box-shadow .25s,border-color .25s;
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 44px #21275111;
  border-color: #cdd1f9;
}
.service-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
}
.service-icon.violet {
  background: #ecebff;
  color: #5358d9;
}
.service-icon.peach {
  background: #fff0e7;
  color: #d18147;
}
.service-icon.mint {
  background: #e5f8f1;
  color: #309f7b;
}
.service-number {
  position: absolute;
  right: 30px;
  top: 40px;
  font-size: 11px;
  font-weight: 800;
  color: #bac0ce;
  letter-spacing: .15em;
}
.service-card h3 {
  font-size: 22px;
  letter-spacing: -.045em;
  font-weight: 750;
  margin-top: 28px;
}
.service-card p {
  color: #6f778a;
  font-size: 13px;
  line-height: 1.85;
  margin-top: 12px;
}
.service-card ul {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 22px 0 28px;
  color: #4d586d;
  font-size: 12px;
  font-weight: 620;
}
.service-card li {
  display: flex;
  gap: 9px;
  align-items: center;
}
.service-card li:before {
  content: "✓";
  color: #515ce0;
  font-weight: 900;
}
.card-link {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: #4c54e8;
  font-weight: 780;
}
.card-link .icon {
  width: 14px;
  height: 14px;
  transition: translate .2s;
}
.card-link:hover .icon {
  translate: 4px 0;
}
.benefits-art {
  position: relative;
  min-height: 470px;
  border-radius: 26px;
  background: linear-gradient(145deg,#ececff,#e1e6fa 53%,#d7e8f3);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.benefits-grid {
  position: absolute;
  inset: 0;
  background: linear-gradient(#fff8 1px,transparent 1px),linear-gradient(90deg,#fff8 1px,transparent 1px);
  background-size: 37px 37px;
  mask-image: linear-gradient(to bottom,#0008,transparent);
}
.benefit-sheet {
  position: relative;
  width: 70%;
  min-height: 320px;
  background: #fff;
  transform: rotate(-6deg);
  border-radius: 14px;
  box-shadow: 0 30px 48px #353d7770;
  overflow: hidden;
}
.benefit-sheet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #ebeff5;
  color: #303958;
  font-weight: 750;
  font-size: 11px;
}
.fake-logo {
  width: 13px;
  height: 13px;
  background: #535cea;
  border-radius: 4px;
}
.sheet-content {
  padding: 27px 18px 17px;
}
.sheet-eyebrow,.sheet-line,.sheet-button {
  display: block;
  border-radius: 5px;
}
.sheet-eyebrow {
  width: 25%;
  height: 6px;
  background: #a2a7f5;
}
.sheet-line {
  height: 13px;
  background: #bfc6da;
  margin-top: 11px;
}
.sheet-line.long {
  width: 81%;
  height: 19px;
  margin-top: 20px;
  background: #2a344a;
}
.sheet-line.medium {
  width: 67%;
  height: 19px;
  background: #2a344a;
  margin-top: 5px;
}
.sheet-line.short {
  width: 46%;
  height: 8px;
  background: #c4cbd8;
  margin-top: 20px;
}
.sheet-button {
  width: 31%;
  height: 29px;
  background: #5058e9;
  margin-top: 24px;
}
.sheet-photo {
  position: absolute;
  right: 0;
  top: 72px;
  width: 37%;
  height: 235px;
  background: #f6bb90;
  overflow: hidden;
}
.photo-sun {
  width: 95px;
  height: 95px;
  position: absolute;
  top: 20px;
  right: 10px;
  border-radius: 50%;
  background: #fde6b4;
}
.photo-hill {
  position: absolute;
  width: 240px;
  height: 230px;
  border-radius: 50%;
  bottom: -156px;
  left: -60px;
  background: #dc8d71;
}
.photo-hill.hill-2 {
  left: 30px;
  bottom: -155px;
  background: #8aa89e;
}
.benefit-badge {
  position: absolute;
  z-index: 2;
  padding: 12px 17px;
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 800;
  font-size: 12px;
  background: #fff;
  border-radius: 9px;
  box-shadow: 0 15px 30px #2d36603d;
}
.benefit-badge-1 {
  left: 1%;
  top: 13%;
  transform: rotate(5deg);
}
.benefit-badge-2 {
  right: 2%;
  bottom: 14%;
  transform: rotate(-5deg);
}
.benefit-row {
  display: flex;
  gap: 18px;
}
.benefit-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #eff0ff;
  color: #4c54e8;
}
.benefit-row h3 {
  font-size: 16px;
  font-weight: 760;
  letter-spacing: -.025em;
}
.benefit-row p {
  font-size: 13px;
  line-height: 1.85;
  color: #788092;
  margin-top: 7px;
  max-width: 430px;
}
.process-bg {
  background: linear-gradient(180deg,#f4f6fe 0%,#f8f9fc 100%);
}
.process-card {
  position: relative;
  border: 1px solid #e3e7f4;
  background: #fff;
  border-radius: 16px;
  padding: 29px 30px 32px;
  min-height: 230px;
}
.process-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #aab1bf;
  font-size: 15px;
  font-weight: 750;
}
.process-card h3 {
  font-size: 20px;
  font-weight: 760;
  margin-top: 45px;
  letter-spacing: -.04em;
}
.process-card p {
  font-size: 13px;
  line-height: 1.8;
  margin-top: 10px;
  color: #747d8f;
  max-width: 310px;
}
.process-card:not(:last-child):after {
  content: "→";
  position: absolute;
  right: -22px;
  top: 38px;
  border: 1px solid #dfe3f1;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #7b82d8;
  background: white;
  z-index: 2;
}
.plan-card {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 35px 30px 28px;
  border: 1px solid #e6e9f1;
  border-radius: 16px;
  background: #fff;
  min-height: 500px;
}
.plan-featured {
  border-color: #6b6fe9;
  box-shadow: 0 23px 50px #5660cc19;
}
.recommended-tag {
  position: absolute;
  top: -15px;
  left: 27px;
  padding: 9px 13px;
  background: #5058ea;
  color: white;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 830;
  letter-spacing: .11em;
}
.plan-heading>span {
  font-size: 10px;
  letter-spacing: .13em;
  font-weight: 800;
  color: #757dc2;
}
.plan-heading h3 {
  margin-top: 17px;
  font-size: 25px;
  font-weight: 780;
  letter-spacing: -.052em;
}
.plan-heading p {
  font-size: 13px;
  line-height: 1.8;
  color: #717b8f;
  margin-top: 9px;
  min-height: 47px;
}
.plan-divider {
  height: 1px;
  background: #e9ebf1;
  margin: 24px 0;
}
.plan-label {
  font-size: 10px;
  letter-spacing: .14em;
  color: #a1a8b5;
  font-weight: 840;
}
.plan-example {
  font-size: 13px;
  line-height: 1.6;
  font-weight: 700;
  margin-top: 7px;
  color: #384055;
}
.plan-card ul {
  margin: 26px 0 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: #626a7e;
  font-size: 12px;
}
.plan-card li {
  position: relative;
  padding-left: 25px;
  line-height: 1.45;
}
.plan-card li:before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #4c54e8;
  font-weight: 850;
}
.btn-plan {
  margin-top: auto;
  background: #f1f2fe;
  color: #424bc9;
  border-color: #e3e5fa;
  width: 100%;
}
.btn-plan:hover {
  background: #e5e8ff;
}
.btn-block {
  width: 100%;
  margin-top: auto;
}
.principles-grid .principle {
  background: white;
  border: 1px solid #e7eaf3;
  border-radius: 13px;
  padding: 26px 24px;
  min-height: 180px;
}
.principle>.icon {
  color: #5058e9;
  width: 23px;
  height: 23px;
}
.principle h3 {
  margin-top: 19px;
  font-size: 15px;
  font-weight: 780;
}
.principle p {
  font-size: 12px;
  line-height: 1.8;
  color: #7a8293;
  margin-top: 7px;
}
.faq-item {
  border-bottom: 1px solid #e9ebf2;
}
.faq-item:first-child {
  border-top: 1px solid #e9ebf2;
}
.faq-item summary {
  display: flex;
  gap: 15px;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  padding: 25px 1px;
  font-size: 15px;
  font-weight: 730;
  letter-spacing: -.02em;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-plus {
  color: #747cf0;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #f1f2ff;
  font-size: 21px;
  font-weight: 400;
  transition: transform .2s;
}
.faq-item[open] .faq-plus {
  transform: rotate(45deg);
}
.faq-item p {
  color: #6f7889;
  font-size: 13px;
  line-height: 1.85;
  max-width: 620px;
  padding: 0 30px 24px 1px;
}
.contact-panel {
  padding: 65px 70px;
  background: #171d39;
  border-radius: 22px;
  color: #fff;
  isolation: isolate;
}
.contact-glow {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(2px);
}
.glow-1 {
  width: 480px;
  height: 480px;
  right: -190px;
  top: -250px;
  background: radial-gradient(circle,#666ae15b,transparent 67%);
}
.glow-2 {
  width: 450px;
  height: 450px;
  left: 5%;
  bottom: -300px;
  background: radial-gradient(circle,#5d5baf3a,transparent 67%);
}
.contact-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
  color: #b5b9e5;
}
.contact-panel h2 {
  font-size: clamp(2.6rem,4.5vw,4.25rem);
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: 1.1;
  margin-top: 28px;
}
.contact-panel h2 em {
  font-style: normal;
  color: #989eff;
}
.contact-direct {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 380px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ffffff24;
  transition: color .2s;
}
.contact-direct:hover {
  color: #fff;
}
.contact-direct-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #ffffff16;
  color: #c4c8ff;
  display: grid;
  place-items: center;
  font-weight: 800;
}
.contact-direct .icon {
  width: 16px;
  height: 16px;
}
.contact-form {
  border-radius: 17px;
  background: #fff;
  color: #1f2637;
  padding: 33px;
  box-shadow: 0 20px 50px #0a0e202f;
}
.form-label-top {
  font-size: 10px;
  letter-spacing: .16em;
  font-weight: 830;
  color: #565ed9;
}
.contact-form h3 {
  font-size: 25px;
  font-weight: 780;
  letter-spacing: -.045em;
  margin-top: 10px;
}
.contact-form p {
  color: #8c94a2;
  font-size: 12px;
  margin-top: 6px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 13px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-field label {
  font-size: 11px;
  font-weight: 760;
  color: #333b50;
}
.form-field label span {
  color: #d1685b;
}
.form-field input,.form-field select,.form-field textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid #e1e5ed;
  background: #fff;
  border-radius: 8px;
  padding: 12px 13px;
  color: #263049;
  font-size: 12px;
  outline: none;
  transition: border-color .2s,box-shadow .2s;
}
.form-field textarea {
  resize: vertical;
  min-height: 95px;
}
.form-field input::placeholder,.form-field textarea::placeholder {
  color: #a1a8b5;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus {
  border-color: #7177ee;
  box-shadow: 0 0 0 3px #777ff522;
}
.form-field [aria-invalid="true"] {
  border-color: #db5e62;
}
.field-error {
  font-size: 11px;
  color: #c03946;
  min-height: 0;
}
.contact-form .form-note {
  line-height: 1.6;
  font-size: 10px;
  text-align: center;
  margin-top: 12px;
  color: #939bac;
}
.footer {
  background: #fff;
  border-top: 1px solid #e9edf5;
}
.footer-title {
  font-size: 12px;
  font-weight: 800;
  color: #21283d;
}
.footer nav a,.footer div>div>a:not(.brand) {
  font-size: 13px;
  color: #6c7487;
  transition: color .2s;
}
.footer nav a:hover,.footer div>div>a:not(.brand):hover {
  color: #4c54e8;
}
.whatsapp-float {
  position: fixed;
  z-index: 45;
  bottom: 25px;
  right: 25px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 17px;
  background: #207e65;
  color: #fff;
  border: 1px solid #ffffff2e;
  border-radius: 40px;
  box-shadow: 0 12px 30px #186d5680;
  font-size: 12px;
  font-weight: 780;
  transition: transform .2s,background .2s;
}
.whatsapp-float:hover {
  transform: translateY(-3px);
  background: #196951;
}
.has-js .reveal {
  opacity: 0;
  transform: translateY(17px);
  transition: opacity .65s ease,transform .65s ease;
}
.has-js .reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 1180px) {
  .mini-mobile {
    right: -1%;
  }
  .label-top {
    right: 0;
  }
  .label-bottom {
    left: 0;
  }
  .concept-copy h2 {
    font-size: 39px;
  }
}
@media (max-width: 1023px) {
  .hero-showcase {
    max-width: 670px;
  }
  .hero-title {
    max-width: 680px;
  }
  .hero .container-wide {
    padding-bottom: 85px;
  }
  .section-heading {
    align-items: start;
    flex-direction: column;
    gap: 20px;
  }
  .section-intro {
    max-width: 600px;
  }
  .contact-panel {
    padding: 55px 42px;
  }
  .contact-panel h2 {
    max-width: 480px;
  }
  .process-card:not(:last-child):after {
    display: none;
  }
}
@media (max-width: 767px) {
  .container-wide {
    width: min(100% - 34px,1240px);
  }
  .site-header .container-wide {
    height: 72px;
  }
  .hero {
    padding-top: 117px;
  }
  .hero-title {
    font-size: clamp(2.85rem,10vw,4.3rem);
  }
  .hero-showcase {
    min-height: 400px;
    margin-top: 3px;
  }
  .browser-window {
    margin-inline: 0 14px;
  }
  .label-top {
    top: 0;
  }
  .label-bottom {
    bottom: 4%;
    left: 0;
  }
  .mini-mobile {
    right: 0;
    bottom: -4%;
  }
  .section-space {
    padding-block: 76px;
  }
  .section-title {
    font-size: clamp(2rem,7vw,3rem);
  }
  .section-heading {
    margin-bottom: 34px;
  }
  .benefits-art {
    min-height: 385px;
  }
  .benefit-sheet {
    min-height: 280px;
  }
  .sheet-photo {
    height: 190px;
  }
  .contact-panel {
    padding: 40px 22px;
    border-radius: 17px;
  }
  .contact-form {
    padding: 25px;
  }
  .whatsapp-float {
    bottom: 16px;
    right: 16px;
  }
  .plan-card {
    min-height: 0;
  }
  .service-card {
    min-height: 0;
  }
  .plan-heading p {
    min-height: 0;
  }
}
@media (max-width: 490px) {
  .hero .container-wide {
    gap: 10px;
    padding-bottom: 72px;
  }
  .hero-title {
    font-size: clamp(2.8rem,11.7vw,3.75rem);
  }
  .hero .btn {
    width: 100%;
  }
  .hero-showcase {
    min-height: 327px;
  }
  .browser-window {
    width: 100%;
    margin-right: 10px;
  }
  .browser-bar {
    height: 30px;
  }
  .concept-nav {
    padding: 9px 11px;
  }
  .concept-nav strong {
    font-size: 13px;
  }
  .concept-nav>span:nth-child(2) {
    font-size: 6px;
  }
  .concept-pill {
    padding: 5px 7px;
    font-size: 6px;
  }
  .concept-body {
    padding: 12px 6px 18px 15px;
    min-height: 192px;
  }
  .concept-copy {
    padding-top: 4px;
  }
  .concept-kicker {
    font-size: 5px;
  }
  .concept-copy h2 {
    font-size: 27px;
    margin-top: 8px;
  }
  .concept-copy p {
    font-size: 7px;
    margin-top: 8px;
  }
  .concept-btn {
    font-size: 6px;
    padding: 7px 8px;
    margin-top: 10px;
    gap: 5px;
  }
  .concept-bottom {
    font-size: 6px;
    margin-top: 14px;
  }
  .coffee-art {
    min-height: 185px;
  }
  .coffee-plate {
    border-width: 7px;
  }
  .coffee-cup {
    padding: 5px;
  }
  .coffee-handle {
    width: 41px;
    height: 47px;
    border-width: 9px;
  }
  .concept-features {
    font-size: 6px;
    padding: 9px 2px;
  }
  .float-label {
    padding: 7px;
    gap: 6px;
    font-size: 8px;
  }
  .float-label small {
    font-size: 7px;
  }
  .float-icon {
    width: 26px;
    height: 26px;
  }
  .float-icon .icon {
    width: 14px;
    height: 14px;
  }
  .label-top {
    top: 1%;
    right: 0;
  }
  .label-bottom {
    bottom: 0;
  }
  .mini-mobile {
    width: 79px;
    height: 145px;
    border-radius: 14px;
    right: -5px;
    bottom: -3%;
    padding: 3px;
  }
  .mini-mobile-content {
    padding: 11px 5px 5px;
    gap: 4px;
  }
  .mini-photo {
    height: 50px;
  }
  .mini-mug {
    transform: scale(.6);
  }
  .mini-mobile-content strong {
    font-size: 7px;
  }
  .mini-logo {
    font-size: 8px;
  }
  .mini-button {
    font-size: 6px;
    padding: 4px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .contact-panel h2 {
    font-size: 2.65rem;
  }
  .section-title {
    font-size: 2.15rem;
  }
  .service-card {
    padding: 26px;
  }
  .benefits-art {
    min-height: 310px;
  }
  .benefit-sheet {
    min-height: 220px;
  }
  .sheet-content {
    padding: 15px 12px;
  }
  .sheet-line.long,.sheet-line.medium {
    height: 11px;
  }
  .sheet-photo {
    height: 145px;
    top: 55px;
  }
  .benefit-badge {
    font-size: 9px;
    padding: 8px;
  }
  .whatsapp-float {
    padding: 13px;
  }
  .whatsapp-float .icon {
    width: 21px;
    height: 21px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .has-js .reveal {
    opacity: 1;
    transform: none;
  }
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-duration: initial;
    }
  }
}

/* Retail boutique mockup: replaces the previous coffee-themed hero on desktop and mobile. */
.concept-page { background: #f6f5ef; color: #26352b; }
.concept-nav { color: #647064; }
.concept-nav strong { color: #2e3b32; letter-spacing: -.085em; }
.concept-nav strong span { color: #8c997f; }
.concept-pill { background: #30483c; color: #fff; }
.concept-body { grid-template-columns: 51% 49%; background: radial-gradient(ellipse at 95% 32%,#e9ece4 0%,transparent 63%); }
.concept-kicker { color: #688471; }
.concept-copy h2 { color: #263b31; }
.concept-copy h2 span { color: #90a286; }
.concept-copy p { color: #788178; }
.concept-btn { background: #344e41; }
.concept-bottom { color: #8b958b; }
.concept-bottom span { color: #8aa88e; }
.concept-features { border-color: #e4e5db; background: #e9ebdf; color: #576e5e; }
.boutique-art { position:relative; margin:-5px 7px -13px -3px; min-height:265px; border-radius:100px 100px 10px 10px; overflow:hidden; background:#dfe5dd; border:6px solid #ebeee6; box-shadow: 8px 15px 25px #374f3a27; }
.boutique-art img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center 28%; }
.boutique-art::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 14px #fff6; }
.mini-mobile-content { background: #f4f5ed; }
.mini-logo { color:#344e41; }
.mini-photo { display:block; overflow:hidden; background:#dfebe0; }
.mini-photo img { width:100%; height:100%; object-fit:cover; object-position:center 35%; }
.mini-button { background:#385847; }
@media(max-width:490px) { .boutique-art { min-height:184px; margin:-6px 2px -7px -1px; border-width:3px; border-radius:65px 65px 6px 6px; } }