/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@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-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-content: "";
      --tw-animation-delay: 0s;
      --tw-animation-direction: normal;
      --tw-animation-duration: initial;
      --tw-animation-fill-mode: none;
      --tw-animation-iteration-count: 1;
      --tw-enter-blur: 0;
      --tw-enter-opacity: 1;
      --tw-enter-rotate: 0;
      --tw-enter-scale: 1;
      --tw-enter-translate-x: 0;
      --tw-enter-translate-y: 0;
      --tw-exit-blur: 0;
      --tw-exit-opacity: 1;
      --tw-exit-rotate: 0;
      --tw-exit-scale: 1;
      --tw-exit-translate-x: 0;
      --tw-exit-translate-y: 0
    }
  }
}

@layer theme {

  :root,
  :host {
    --font-sans: "DM Sans", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --color-black: #000;
    --spacing: .25rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tight: -.025em;
    --tracking-widest: .1em;
    --leading-relaxed: 1.625;
    --radius-sm: .25rem;
    --radius-xl: .75rem;
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --aspect-video: 16 / 9;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: "DM Sans", sans-serif;
    --default-mono-font-family: var(--font-mono);
    --font-display: "Manrope", sans-serif;
    --color-border: var(--border)
  }
}

@layer base {

  *,
  :after,
  :before,
  ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0
  }

  html,
  :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, 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;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: 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 {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative
  }

  sub {
    bottom: -.25em
  }

  sup {
    top: -.5em
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse
  }

  :-moz-focusring:where(:not(iframe)) {
    outline: auto
  }

  progress {
    vertical-align: baseline
  }

  summary {
    display: list-item
  }

  ol,
  ul,
  menu {
    list-style: none
  }

  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    vertical-align: middle;
    display: block
  }

  img,
  video {
    max-width: 100%;
    height: auto
  }

  button,
  input,
  select,
  optgroup,
  textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0
  }

  :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)) {
      ::placeholder {
        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 {
    padding-block: 0
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1
  }

  :-moz-ui-invalid {
    box-shadow: none
  }

  button,
  input:where([type=button], [type=reset], [type=submit]) {
    appearance: button
  }

  ::file-selector-button {
    appearance: button
  }

  ::-webkit-inner-spin-button {
    height: auto
  }

  ::-webkit-outer-spin-button {
    height: auto
  }

  [hidden]:where(:not([hidden=until-found])) {
    display: none !important
  }

  * {
    border-color: var(--border)
  }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: 105px
  }

  body {
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    margin: 0
  }

  h1,
  h2,
  h3 {
    font-family: var(--font-display);
    letter-spacing: 0;
    font-weight: 500
  }

  a {
    text-decoration: none
  }

  ::selection {
    background: var(--mint);
    color: var(--foreground)
  }
}

@layer components;

@layer utilities {
  .pointer-events-none {
    pointer-events: none
  }

  .invisible {
    visibility: hidden
  }

  .visible {
    visibility: visible
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden
  }

  .absolute {
    position: absolute
  }

  .fixed {
    position: fixed
  }

  .relative {
    position: relative
  }

  .inset-0 {
    inset: 0
  }

  .inset-x-0 {
    inset-inline: 0
  }

  .inset-y-0 {
    inset-block: 0
  }

  .-top-12 {
    top: calc(var(--spacing) * -12)
  }

  .top-0 {
    top: 0
  }

  .top-1\.5 {
    top: calc(var(--spacing) * 1.5)
  }

  .top-1\/2 {
    top: 50%
  }

  .top-3\.5 {
    top: calc(var(--spacing) * 3.5)
  }

  .top-4 {
    top: calc(var(--spacing) * 4)
  }

  .top-\[1px\] {
    top: 1px
  }

  .top-\[50\%\] {
    top: 50%
  }

  .top-\[60\%\] {
    top: 60%
  }

  .top-full {
    top: 100%
  }

  .-right-12 {
    right: calc(var(--spacing) * -12)
  }

  .right-0 {
    right: 0
  }

  .right-1 {
    right: var(--spacing)
  }

  .right-2 {
    right: calc(var(--spacing) * 2)
  }

  .right-3 {
    right: calc(var(--spacing) * 3)
  }

  .right-4 {
    right: calc(var(--spacing) * 4)
  }

  .-bottom-12 {
    bottom: calc(var(--spacing) * -12)
  }

  .bottom-0 {
    bottom: 0
  }

  .-left-12 {
    left: calc(var(--spacing) * -12)
  }

  .left-0 {
    left: 0
  }

  .left-1\/2 {
    left: 50%
  }

  .left-2 {
    left: calc(var(--spacing) * 2)
  }

  .left-\[50\%\] {
    left: 50%
  }

  .z-10 {
    z-index: 10
  }

  .z-20 {
    z-index: 20
  }

  .z-50 {
    z-index: 50
  }

  .z-\[1\] {
    z-index: 1
  }

  .-mx-1 {
    margin-inline: calc(var(--spacing) * -1)
  }

  .mx-2 {
    margin-inline: calc(var(--spacing) * 2)
  }

  .mx-3\.5 {
    margin-inline: calc(var(--spacing) * 3.5)
  }

  .mx-auto {
    margin-inline: auto
  }

  .my-0\.5 {
    margin-block: calc(var(--spacing) * .5)
  }

  .my-1 {
    margin-block: var(--spacing)
  }

  .-mt-4 {
    margin-top: calc(var(--spacing) * -4)
  }

  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5)
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2)
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4)
  }

  .mt-6 {
    margin-top: calc(var(--spacing) * 6)
  }

  .mt-24 {
    margin-top: calc(var(--spacing) * 24)
  }

  .mt-auto {
    margin-top: auto
  }

  .mr-2 {
    margin-right: calc(var(--spacing) * 2)
  }

  .mb-1 {
    margin-bottom: var(--spacing)
  }

  .-ml-4 {
    margin-left: calc(var(--spacing) * -4)
  }

  .ml-1 {
    margin-left: var(--spacing)
  }

  .ml-2 {
    margin-left: calc(var(--spacing) * 2)
  }

  .ml-auto {
    margin-left: auto
  }

  .block {
    display: block
  }

  .flex {
    display: flex
  }

  .grid {
    display: grid
  }

  .hidden {
    display: none
  }

  .inline {
    display: inline
  }

  .inline-flex {
    display: inline-flex
  }

  .table {
    display: table
  }

  .aspect-square {
    aspect-ratio: 1
  }

  .aspect-video {
    aspect-ratio: var(--aspect-video)
  }

  .size-\(--cell-size\) {
    width: var(--cell-size);
    height: var(--cell-size)
  }

  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4)
  }

  .h-\(--cell-size\) {
    height: var(--cell-size)
  }

  .h-1\.5 {
    height: calc(var(--spacing) * 1.5)
  }

  .h-2 {
    height: calc(var(--spacing) * 2)
  }

  .h-2\.5 {
    height: calc(var(--spacing) * 2.5)
  }

  .h-3 {
    height: calc(var(--spacing) * 3)
  }

  .h-3\.5 {
    height: calc(var(--spacing) * 3.5)
  }

  .h-4 {
    height: calc(var(--spacing) * 4)
  }

  .h-5 {
    height: calc(var(--spacing) * 5)
  }

  .h-7 {
    height: calc(var(--spacing) * 7)
  }

  .h-8 {
    height: calc(var(--spacing) * 8)
  }

  .h-9 {
    height: calc(var(--spacing) * 9)
  }

  .h-10 {
    height: calc(var(--spacing) * 10)
  }

  .h-12 {
    height: calc(var(--spacing) * 12)
  }

  .h-\[1px\] {
    height: 1px
  }

  .h-\[var\(--radix-navigation-menu-viewport-height\)\] {
    height: var(--radix-navigation-menu-viewport-height)
  }

  .h-\[var\(--radix-select-trigger-height\)\] {
    height: var(--radix-select-trigger-height)
  }

  .h-auto {
    height: auto
  }

  .h-full {
    height: 100%
  }

  .h-px {
    height: 1px
  }

  .h-svh {
    height: 100svh
  }

  .max-h-\(--radix-context-menu-content-available-height\) {
    max-height: var(--radix-context-menu-content-available-height)
  }

  .max-h-\(--radix-select-content-available-height\) {
    max-height: var(--radix-select-content-available-height)
  }

  .max-h-\[300px\] {
    max-height: 300px
  }

  .max-h-\[var\(--radix-dropdown-menu-content-available-height\)\] {
    max-height: var(--radix-dropdown-menu-content-available-height)
  }

  .min-h-0 {
    min-height: 0
  }

  .min-h-\[60px\] {
    min-height: 60px
  }

  .min-h-screen {
    min-height: 100vh
  }

  .min-h-svh {
    min-height: 100svh
  }

  .w-\(--cell-size\) {
    width: var(--cell-size)
  }

  .w-\(--sidebar-width\) {
    width: var(--sidebar-width)
  }

  .w-0 {
    width: 0
  }

  .w-1 {
    width: var(--spacing)
  }

  .w-2 {
    width: calc(var(--spacing) * 2)
  }

  .w-2\.5 {
    width: calc(var(--spacing) * 2.5)
  }

  .w-3 {
    width: calc(var(--spacing) * 3)
  }

  .w-3\.5 {
    width: calc(var(--spacing) * 3.5)
  }

  .w-3\/4 {
    width: 75%
  }

  .w-4 {
    width: calc(var(--spacing) * 4)
  }

  .w-5 {
    width: calc(var(--spacing) * 5)
  }

  .w-7 {
    width: calc(var(--spacing) * 7)
  }

  .w-8 {
    width: calc(var(--spacing) * 8)
  }

  .w-9 {
    width: calc(var(--spacing) * 9)
  }

  .w-10 {
    width: calc(var(--spacing) * 10)
  }

  .w-64 {
    width: calc(var(--spacing) * 64)
  }

  .w-72 {
    width: calc(var(--spacing) * 72)
  }

  .w-\[1px\] {
    width: 1px
  }

  .w-\[100px\] {
    width: 100px
  }

  .w-auto {
    width: auto
  }

  .w-fit {
    width: fit-content
  }

  .w-full {
    width: 100%
  }

  .w-max {
    width: max-content
  }

  .w-px {
    width: 1px
  }

  .max-w-\(--skeleton-width\) {
    max-width: var(--skeleton-width)
  }

  .max-w-lg {
    max-width: var(--container-lg)
  }

  .max-w-max {
    max-width: max-content
  }

  .max-w-md {
    max-width: var(--container-md)
  }

  .min-w-\(--cell-size\) {
    min-width: var(--cell-size)
  }

  .min-w-0 {
    min-width: 0
  }

  .min-w-5 {
    min-width: calc(var(--spacing) * 5)
  }

  .min-w-8 {
    min-width: calc(var(--spacing) * 8)
  }

  .min-w-9 {
    min-width: calc(var(--spacing) * 9)
  }

  .min-w-10 {
    min-width: calc(var(--spacing) * 10)
  }

  .min-w-\[8rem\] {
    min-width: 8rem
  }

  .min-w-\[12rem\] {
    min-width: 12rem
  }

  .min-w-\[var\(--radix-select-trigger-width\)\] {
    min-width: var(--radix-select-trigger-width)
  }

  .flex-1 {
    flex: 1
  }

  .shrink-0 {
    flex-shrink: 0
  }

  .grow {
    flex-grow: 1
  }

  .grow-0 {
    flex-grow: 0
  }

  .basis-full {
    flex-basis: 100%
  }

  .caption-bottom {
    caption-side: bottom
  }

  .border-collapse {
    border-collapse: collapse
  }

  .origin-\(--radix-context-menu-content-transform-origin\) {
    transform-origin: var(--radix-context-menu-content-transform-origin)
  }

  .origin-\(--radix-dropdown-menu-content-transform-origin\) {
    transform-origin: var(--radix-dropdown-menu-content-transform-origin)
  }

  .origin-\(--radix-hover-card-content-transform-origin\) {
    transform-origin: var(--radix-hover-card-content-transform-origin)
  }

  .origin-\(--radix-menubar-content-transform-origin\) {
    transform-origin: var(--radix-menubar-content-transform-origin)
  }

  .origin-\(--radix-popover-content-transform-origin\) {
    transform-origin: var(--radix-popover-content-transform-origin)
  }

  .origin-\(--radix-select-content-transform-origin\) {
    transform-origin: var(--radix-select-content-transform-origin)
  }

  .origin-\(--radix-tooltip-content-transform-origin\) {
    transform-origin: var(--radix-tooltip-content-transform-origin)
  }

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y)
  }

  .-translate-x-px {
    --tw-translate-x: -1px;
    translate: var(--tw-translate-x) var(--tw-translate-y)
  }

  .translate-x-\[-50\%\] {
    --tw-translate-x: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y)
  }

  .translate-x-px {
    --tw-translate-x: 1px;
    translate: var(--tw-translate-x) var(--tw-translate-y)
  }

  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y)
  }

  .translate-y-\[-50\%\] {
    --tw-translate-y: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y)
  }

  .rotate-45 {
    rotate: 45deg
  }

  .rotate-90 {
    rotate: 90deg
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, )
  }

  .animate-caret-blink {
    animation: 1.25s ease-out infinite caret-blink
  }

  .animate-in {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none)
  }

  .animate-pulse {
    animation: var(--animate-pulse)
  }

  .cursor-default {
    cursor: default
  }

  .cursor-pointer {
    cursor: pointer
  }

  .touch-none {
    touch-action: none
  }

  .resize {
    resize: both
  }

  .list-none {
    list-style-type: none
  }

  .flex-col {
    flex-direction: column
  }

  .flex-col-reverse {
    flex-direction: column-reverse
  }

  .flex-row {
    flex-direction: row
  }

  .flex-wrap {
    flex-wrap: wrap
  }

  .place-content-center {
    place-content: center
  }

  .items-center {
    align-items: center
  }

  .items-end {
    align-items: flex-end
  }

  .items-start {
    align-items: flex-start
  }

  .items-stretch {
    align-items: stretch
  }

  .justify-between {
    justify-content: space-between
  }

  .justify-center {
    justify-content: center
  }

  .gap-1 {
    gap: var(--spacing)
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5)
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2)
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3)
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4)
  }

  :where(.space-y-1\.5>:not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)))
  }

  :where(.space-y-2>:not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))
  }

  :where(.space-x-1>:not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(var(--spacing) * var(--tw-space-x-reverse));
    margin-inline-end: calc(var(--spacing) * calc(1 - var(--tw-space-x-reverse)))
  }

  .overflow-auto {
    overflow: auto
  }

  .overflow-hidden {
    overflow: hidden
  }

  .overflow-x-hidden {
    overflow-x: hidden
  }

  .overflow-y-auto {
    overflow-y: auto
  }

  .rounded-\[2px\] {
    border-radius: 2px
  }

  .rounded-\[inherit\] {
    border-radius: inherit
  }

  .rounded-full {
    border-radius: 2147483647px
  }

  .rounded-lg {
    border-radius: 8px
  }

  .rounded-md {
    border-radius: 6px
  }

  .rounded-none {
    border-radius: 0
  }

  .rounded-sm {
    border-radius: var(--radius-sm)
  }

  .rounded-xl {
    border-radius: var(--radius-xl)
  }

  .rounded-t-\[10px\] {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px
  }

  .rounded-l-md {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px
  }

  .rounded-tl-sm {
    border-top-left-radius: var(--radius-sm)
  }

  .rounded-r-md {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px
  }

  .border-\[1\.5px\] {
    border-style: var(--tw-border-style);
    border-width: 1.5px
  }

  .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-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px
  }

  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px
  }

  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed
  }

  .border-\(--color-border\) {
    border-color: var(--color-border)
  }

  .border-border\/50 {
    border-color: var(--border)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .border-border\/50 {
      border-color: color-mix(in oklab, var(--border) 50%, transparent)
    }
  }

  .border-destructive\/50 {
    border-color: var(--primary)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .border-destructive\/50 {
      border-color: color-mix(in oklab, var(--primary) 50%, transparent)
    }
  }

  .border-input {
    border-color: var(--border)
  }

  .border-primary,
  .border-primary\/50 {
    border-color: var(--primary)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .border-primary\/50 {
      border-color: color-mix(in oklab, var(--primary) 50%, transparent)
    }
  }

  .border-transparent {
    border-color: #0000
  }

  .border-t-transparent {
    border-top-color: #0000
  }

  .border-l-transparent {
    border-left-color: #0000
  }

  .bg-\(--color-bg\) {
    background-color: var(--color-bg)
  }

  .bg-accent {
    background-color: var(--accent)
  }

  .bg-background {
    background-color: var(--background)
  }

  .bg-black\/80 {
    background-color: #000c
  }

  @supports (color:color-mix(in lab, red, red)) {
    .bg-black\/80 {
      background-color: color-mix(in oklab, var(--color-black) 80%, transparent)
    }
  }

  .bg-border {
    background-color: var(--border)
  }

  .bg-card {
    background-color: var(--card)
  }

  .bg-destructive {
    background-color: var(--primary)
  }

  .bg-foreground {
    background-color: var(--foreground)
  }

  .bg-muted,
  .bg-muted\/50 {
    background-color: var(--muted)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .bg-muted\/50 {
      background-color: color-mix(in oklab, var(--muted) 50%, transparent)
    }
  }

  .bg-popover {
    background-color: var(--background)
  }

  .bg-primary,
  .bg-primary\/10 {
    background-color: var(--primary)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .bg-primary\/10 {
      background-color: color-mix(in oklab, var(--primary) 10%, transparent)
    }
  }

  .bg-primary\/20 {
    background-color: var(--primary)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .bg-primary\/20 {
      background-color: color-mix(in oklab, var(--primary) 20%, transparent)
    }
  }

  .bg-secondary {
    background-color: var(--secondary)
  }

  .bg-transparent {
    background-color: #0000
  }

  .fill-current {
    fill: currentColor
  }

  .fill-primary {
    fill: var(--primary)
  }

  .p-0 {
    padding: 0
  }

  .p-1 {
    padding: var(--spacing)
  }

  .p-2 {
    padding: calc(var(--spacing) * 2)
  }

  .p-3 {
    padding: calc(var(--spacing) * 3)
  }

  .p-4 {
    padding: calc(var(--spacing) * 4)
  }

  .p-6 {
    padding: calc(var(--spacing) * 6)
  }

  .p-\[1px\] {
    padding: 1px
  }

  .px-\(--cell-size\) {
    padding-inline: var(--cell-size)
  }

  .px-1 {
    padding-inline: var(--spacing)
  }

  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5)
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2)
  }

  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5)
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3)
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4)
  }

  .px-8 {
    padding-inline: calc(var(--spacing) * 8)
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5)
  }

  .py-1 {
    padding-block: var(--spacing)
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5)
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2)
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3)
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4)
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6)
  }

  .pt-0 {
    padding-top: 0
  }

  .pt-3 {
    padding-top: calc(var(--spacing) * 3)
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4)
  }

  .pr-1 {
    padding-right: var(--spacing)
  }

  .pr-2 {
    padding-right: calc(var(--spacing) * 2)
  }

  .pr-2\.5 {
    padding-right: calc(var(--spacing) * 2.5)
  }

  .pr-8 {
    padding-right: calc(var(--spacing) * 8)
  }

  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3)
  }

  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4)
  }

  .pl-2 {
    padding-left: calc(var(--spacing) * 2)
  }

  .pl-2\.5 {
    padding-left: calc(var(--spacing) * 2.5)
  }

  .pl-4 {
    padding-left: calc(var(--spacing) * 4)
  }

  .pl-8 {
    padding-left: calc(var(--spacing) * 8)
  }

  .text-center {
    text-align: center
  }

  .text-left {
    text-align: left
  }

  .align-middle {
    vertical-align: middle
  }

  .font-mono {
    font-family: var(--font-mono)
  }

  .text-7xl {
    font-size: var(--text-7xl);
    line-height: var(--tw-leading, var(--text-7xl--line-height))
  }

  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height))
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height))
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height))
  }

  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height))
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height))
  }

  .text-\[0\.8rem\] {
    font-size: .8rem
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold)
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium)
  }

  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal)
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold)
  }

  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight)
  }

  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest)
  }

  .break-words {
    overflow-wrap: break-word
  }

  .whitespace-nowrap {
    white-space: nowrap
  }

  .text-accent-foreground,
  .text-card-foreground {
    color: var(--foreground)
  }

  .text-current {
    color: currentColor
  }

  .text-destructive {
    color: var(--text-green)
  }

  .text-foreground {
    color: var(--foreground)
  }

  .text-muted-foreground {
    color: var(--muted-foreground)
  }

  .text-popover-foreground {
    color: var(--foreground)
  }

  .text-primary {
    color: var(--text-green)
  }

  .text-primary-foreground {
    color: var(--primary-foreground)
  }

  .text-secondary-foreground {
    color: var(--foreground)
  }

  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, )
  }

  .underline-offset-4 {
    text-underline-offset: 4px
  }

  .opacity-0 {
    opacity: 0
  }

  .opacity-50 {
    opacity: .5
  }

  .opacity-60 {
    opacity: .6
  }

  .opacity-70 {
    opacity: .7
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  .shadow-\[0_0_0_1px_var\(--sidebar-border\)\] {
    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--sidebar-border));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  .shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  .shadow-xs {
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  .ring-0 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  .ring-ring {
    --tw-ring-color: var(--primary)
  }

  .ring-offset-background {
    --tw-ring-offset-color: var(--background)
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration))
  }

  .transition-\[left\,right\,width\] {
    transition-property: left, right, width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration))
  }

  .transition-\[margin\,opacity\] {
    transition-property: margin, opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration))
  }

  .transition-\[width\,height\,padding\] {
    transition-property: width, height, padding;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration))
  }

  .transition-\[width\] {
    transition-property: width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration))
  }

  .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))
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration))
  }

  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration))
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration))
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s
  }

  .duration-300 {
    --tw-duration: .3s;
    transition-duration: .3s
  }

  .duration-1000 {
    --tw-duration: 1s;
    transition-duration: 1s
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out)
  }

  .ease-linear {
    --tw-ease: linear;
    transition-timing-function: linear
  }

  .fade-in-0 {
    --tw-enter-opacity: 0
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none
  }

  .zoom-in-95 {
    --tw-enter-scale: .95
  }

  .\[--cell-size\:2rem\] {
    --cell-size: 2rem
  }

  .running {
    animation-play-state: running
  }

  .group-focus-within\/menu-item\:opacity-100:is(:where(.group\/menu-item):focus-within *) {
    opacity: 1
  }

  @media (hover:hover) {
    .group-hover\/menu-item\:opacity-100:is(:where(.group\/menu-item):hover *) {
      opacity: 1
    }
  }

  .group-has-\[\[data-sidebar\=menu-action\]\]\/menu-item\:pr-8:is(:where(.group\/menu-item):has([data-sidebar=menu-action]) *) {
    padding-right: calc(var(--spacing) * 8)
  }

  .group-data-\[collapsible\=icon\]\:-mt-8:is(:where(.group)[data-collapsible=icon] *) {
    margin-top: calc(var(--spacing) * -8)
  }

  .group-data-\[collapsible\=icon\]\:hidden:is(:where(.group)[data-collapsible=icon] *) {
    display: none
  }

  .group-data-\[collapsible\=icon\]\:\!size-8:is(:where(.group)[data-collapsible=icon] *) {
    width: calc(var(--spacing) * 8) !important;
    height: calc(var(--spacing) * 8) !important
  }

  .group-data-\[collapsible\=icon\]\:w-\(--sidebar-width-icon\):is(:where(.group)[data-collapsible=icon] *) {
    width: var(--sidebar-width-icon)
  }

  .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\]:is(:where(.group)[data-collapsible=icon] *) {
    width: calc(var(--sidebar-width-icon) + 1rem)
  }

  .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\]:is(:where(.group)[data-collapsible=icon] *) {
    width: calc(var(--sidebar-width-icon) + 1rem + 2px)
  }

  .group-data-\[collapsible\=icon\]\:overflow-hidden:is(:where(.group)[data-collapsible=icon] *) {
    overflow: hidden
  }

  .group-data-\[collapsible\=icon\]\:\!p-0:is(:where(.group)[data-collapsible=icon] *) {
    padding: 0 !important
  }

  .group-data-\[collapsible\=icon\]\:\!p-2:is(:where(.group)[data-collapsible=icon] *) {
    padding: calc(var(--spacing) * 2) !important
  }

  .group-data-\[collapsible\=icon\]\:opacity-0:is(:where(.group)[data-collapsible=icon] *) {
    opacity: 0
  }

  .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.group)[data-collapsible=offcanvas] *) {
    right: calc(var(--sidebar-width) * -1)
  }

  .group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.group)[data-collapsible=offcanvas] *) {
    left: calc(var(--sidebar-width) * -1)
  }

  .group-data-\[collapsible\=offcanvas\]\:w-0:is(:where(.group)[data-collapsible=offcanvas] *) {
    width: 0
  }

  .group-data-\[collapsible\=offcanvas\]\:translate-x-0:is(:where(.group)[data-collapsible=offcanvas] *) {
    --tw-translate-x: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y)
  }

  .group-data-\[focused\=true\]\/day\:relative:is(:where(.group\/day)[data-focused=true] *) {
    position: relative
  }

  .group-data-\[focused\=true\]\/day\:z-10:is(:where(.group\/day)[data-focused=true] *) {
    z-index: 10
  }

  .group-data-\[focused\=true\]\/day\:border-ring:is(:where(.group\/day)[data-focused=true] *) {
    border-color: var(--primary)
  }

  .group-data-\[focused\=true\]\/day\:ring-\[3px\]:is(:where(.group\/day)[data-focused=true] *) {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  .group-data-\[focused\=true\]\/day\:ring-ring\/50:is(:where(.group\/day)[data-focused=true] *) {
    --tw-ring-color: var(--primary)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .group-data-\[focused\=true\]\/day\:ring-ring\/50:is(:where(.group\/day)[data-focused=true] *) {
      --tw-ring-color: color-mix(in oklab, var(--primary) 50%, transparent)
    }
  }

  .group-data-\[side\=left\]\:-right-4:is(:where(.group)[data-side=left] *) {
    right: calc(var(--spacing) * -4)
  }

  .group-data-\[side\=left\]\:border-r:is(:where(.group)[data-side=left] *) {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px
  }

  .group-data-\[side\=right\]\:left-0:is(:where(.group)[data-side=right] *) {
    left: 0
  }

  .group-data-\[side\=right\]\:rotate-180:is(:where(.group)[data-side=right] *) {
    rotate: 180deg
  }

  .group-data-\[side\=right\]\:border-l:is(:where(.group)[data-side=right] *) {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px
  }

  .group-data-\[state\=open\]\:rotate-180:is(:where(.group)[data-state=open] *) {
    rotate: 180deg
  }

  .group-data-\[variant\=floating\]\:rounded-lg:is(:where(.group)[data-variant=floating] *) {
    border-radius: 8px
  }

  .group-data-\[variant\=floating\]\:border:is(:where(.group)[data-variant=floating] *) {
    border-style: var(--tw-border-style);
    border-width: 1px
  }

  .group-data-\[variant\=floating\]\:shadow:is(:where(.group)[data-variant=floating] *) {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  .group-\[\.toast\]\:bg-muted:is(:where(.group).toast *) {
    background-color: var(--muted)
  }

  .group-\[\.toast\]\:bg-primary:is(:where(.group).toast *) {
    background-color: var(--primary)
  }

  .group-\[\.toast\]\:text-muted-foreground:is(:where(.group).toast *) {
    color: var(--muted-foreground)
  }

  .group-\[\.toast\]\:text-primary-foreground:is(:where(.group).toast *) {
    color: var(--primary-foreground)
  }

  .group-\[\.toaster\]\:border-border:is(:where(.group).toaster *) {
    border-color: var(--border)
  }

  .group-\[\.toaster\]\:bg-background:is(:where(.group).toaster *) {
    background-color: var(--background)
  }

  .group-\[\.toaster\]\:text-foreground:is(:where(.group).toaster *) {
    color: var(--foreground)
  }

  .group-\[\.toaster\]\:shadow-lg:is(:where(.group).toaster *) {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  .peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled~*) {
    cursor: not-allowed
  }

  .peer-disabled\:opacity-70:is(:where(.peer):disabled~*) {
    opacity: .7
  }

  .peer-data-\[size\=default\]\/menu-button\:top-1\.5:is(:where(.peer\/menu-button)[data-size=default]~*) {
    top: calc(var(--spacing) * 1.5)
  }

  .peer-data-\[size\=lg\]\/menu-button\:top-2\.5:is(:where(.peer\/menu-button)[data-size=lg]~*) {
    top: calc(var(--spacing) * 2.5)
  }

  .peer-data-\[size\=sm\]\/menu-button\:top-1:is(:where(.peer\/menu-button)[data-size=sm]~*) {
    top: var(--spacing)
  }

  .file\:border-0::file-selector-button {
    border-style: var(--tw-border-style);
    border-width: 0
  }

  .file\:bg-transparent::file-selector-button {
    background-color: #0000
  }

  .file\:text-sm::file-selector-button {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height))
  }

  .file\:font-medium::file-selector-button {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium)
  }

  .file\:text-foreground::file-selector-button {
    color: var(--foreground)
  }

  .placeholder\:text-muted-foreground::placeholder {
    color: var(--muted-foreground)
  }

  .after\:absolute:after {
    content: var(--tw-content);
    position: absolute
  }

  .after\:-inset-2:after {
    content: var(--tw-content);
    inset: calc(var(--spacing) * -2)
  }

  .after\:inset-y-0:after {
    content: var(--tw-content);
    inset-block: 0
  }

  .after\:left-1\/2:after {
    content: var(--tw-content);
    left: 50%
  }

  .after\:w-1:after {
    content: var(--tw-content);
    width: var(--spacing)
  }

  .after\:w-\[2px\]:after {
    content: var(--tw-content);
    width: 2px
  }

  .after\:-translate-x-1\/2:after {
    content: var(--tw-content);
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y)
  }

  .group-data-\[collapsible\=offcanvas\]\:after\:left-full:is(:where(.group)[data-collapsible=offcanvas] *):after {
    content: var(--tw-content);
    left: 100%
  }

  .first\:rounded-l-md:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px
  }

  .first\:border-l:first-child {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px
  }

  .last\:rounded-r-md:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px
  }

  @media (hover:hover) {
    .hover\:bg-accent:hover {
      background-color: var(--accent)
    }

    .hover\:bg-destructive\/80:hover {
      background-color: var(--primary)
    }

    @supports (color:color-mix(in lab, red, red)) {
      .hover\:bg-destructive\/80:hover {
        background-color: color-mix(in oklab, var(--primary) 80%, transparent)
      }
    }

    .hover\:bg-destructive\/90:hover {
      background-color: var(--primary)
    }

    @supports (color:color-mix(in lab, red, red)) {
      .hover\:bg-destructive\/90:hover {
        background-color: color-mix(in oklab, var(--primary) 90%, transparent)
      }
    }

    .hover\:bg-muted:hover,
    .hover\:bg-muted\/50:hover {
      background-color: var(--muted)
    }

    @supports (color:color-mix(in lab, red, red)) {
      .hover\:bg-muted\/50:hover {
        background-color: color-mix(in oklab, var(--muted) 50%, transparent)
      }
    }

    .hover\:bg-primary\/80:hover {
      background-color: var(--primary)
    }

    @supports (color:color-mix(in lab, red, red)) {
      .hover\:bg-primary\/80:hover {
        background-color: color-mix(in oklab, var(--primary) 80%, transparent)
      }
    }

    .hover\:bg-primary\/90:hover {
      background-color: var(--primary)
    }

    @supports (color:color-mix(in lab, red, red)) {
      .hover\:bg-primary\/90:hover {
        background-color: color-mix(in oklab, var(--primary) 90%, transparent)
      }
    }

    .hover\:bg-secondary\/80:hover {
      background-color: var(--secondary)
    }

    @supports (color:color-mix(in lab, red, red)) {
      .hover\:bg-secondary\/80:hover {
        background-color: color-mix(in oklab, var(--secondary) 80%, transparent)
      }
    }

    .hover\:text-accent-foreground:hover,
    .hover\:text-foreground:hover {
      color: var(--foreground)
    }

    .hover\:text-muted-foreground:hover {
      color: var(--muted-foreground)
    }

    .hover\:underline:hover {
      text-decoration-line: underline
    }

    .hover\:opacity-100:hover {
      opacity: 1
    }

    .hover\:shadow-\[0_0_0_1px_var\(--sidebar-accent\)\]:hover {
      --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--sidebar-accent));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }
  }

  .focus\:bg-accent:focus {
    background-color: var(--accent)
  }

  .focus\:text-accent-foreground:focus {
    color: var(--foreground)
  }

  .focus\:ring-1:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  .focus\:ring-2:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  .focus\:ring-ring:focus {
    --tw-ring-color: var(--primary)
  }

  .focus\:ring-offset-2:focus {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
  }

  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none
  }

  .focus-visible\:ring-1:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  .focus-visible\:ring-2:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  .focus-visible\:ring-ring:focus-visible {
    --tw-ring-color: var(--primary)
  }

  .focus-visible\:ring-offset-1:focus-visible {
    --tw-ring-offset-width: 1px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
  }

  .focus-visible\:ring-offset-2:focus-visible {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)
  }

  .focus-visible\:ring-offset-background:focus-visible {
    --tw-ring-offset-color: var(--background)
  }

  .focus-visible\:outline-none:focus-visible {
    --tw-outline-style: none;
    outline-style: none
  }

  .disabled\:pointer-events-none:disabled {
    pointer-events: none
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed
  }

  .disabled\:opacity-50:disabled {
    opacity: .5
  }

  .has-focus\:border-ring:has(:focus) {
    border-color: var(--primary)
  }

  .has-focus\:ring-\[3px\]:has(:focus) {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  .has-focus\:ring-ring\/50:has(:focus) {
    --tw-ring-color: var(--primary)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .has-focus\:ring-ring\/50:has(:focus) {
      --tw-ring-color: color-mix(in oklab, var(--primary) 50%, transparent)
    }
  }

  .has-\[\:disabled\]\:opacity-50:has(:disabled) {
    opacity: .5
  }

  .aria-disabled\:pointer-events-none[aria-disabled=true] {
    pointer-events: none
  }

  .aria-disabled\:opacity-50[aria-disabled=true] {
    opacity: .5
  }

  .aria-selected\:text-muted-foreground[aria-selected=true] {
    color: var(--muted-foreground)
  }

  .data-\[active\=true\]\:font-medium[data-active=true] {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium)
  }

  .data-\[disabled\]\:pointer-events-none[data-disabled] {
    pointer-events: none
  }

  .data-\[disabled\]\:opacity-50[data-disabled] {
    opacity: .5
  }

  .data-\[disabled\=true\]\:pointer-events-none[data-disabled=true] {
    pointer-events: none
  }

  .data-\[disabled\=true\]\:opacity-50[data-disabled=true] {
    opacity: .5
  }

  .data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion=from-end] {
    --tw-enter-translate-x: calc(52*var(--spacing))
  }

  .data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion=from-start] {
    --tw-enter-translate-x: calc(52*var(--spacing)*-1)
  }

  .data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion=to-end] {
    --tw-exit-translate-x: calc(52*var(--spacing))
  }

  .data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion=to-start] {
    --tw-exit-translate-x: calc(52*var(--spacing)*-1)
  }

  .data-\[motion\^\=from-\]\:animate-in[data-motion^=from-] {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none)
  }

  .data-\[motion\^\=from-\]\:fade-in[data-motion^=from-] {
    --tw-enter-opacity: 0
  }

  .data-\[motion\^\=to-\]\:animate-out[data-motion^=to-] {
    animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none)
  }

  .data-\[motion\^\=to-\]\:fade-out[data-motion^=to-] {
    --tw-exit-opacity: 0
  }

  .data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction=vertical] {
    height: 1px
  }

  .data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction=vertical] {
    width: 100%
  }

  .data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction=vertical] {
    flex-direction: column
  }

  .data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction=vertical]:after {
    content: var(--tw-content);
    left: 0
  }

  .data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction=vertical]:after {
    content: var(--tw-content);
    height: var(--spacing)
  }

  .data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction=vertical]:after {
    content: var(--tw-content);
    width: 100%
  }

  .data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction=vertical]:after {
    content: var(--tw-content);
    --tw-translate-x: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y)
  }

  .data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction=vertical]:after {
    content: var(--tw-content);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y)
  }

  .data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
    color: var(--muted-foreground)
  }

  .data-\[range-end\=true\]\:rounded-md[data-range-end=true] {
    border-radius: 6px
  }

  .data-\[range-end\=true\]\:bg-primary[data-range-end=true] {
    background-color: var(--primary)
  }

  .data-\[range-end\=true\]\:text-primary-foreground[data-range-end=true] {
    color: var(--primary-foreground)
  }

  .data-\[range-middle\=true\]\:rounded-none[data-range-middle=true] {
    border-radius: 0
  }

  .data-\[range-middle\=true\]\:bg-accent[data-range-middle=true] {
    background-color: var(--accent)
  }

  .data-\[range-middle\=true\]\:text-accent-foreground[data-range-middle=true] {
    color: var(--foreground)
  }

  .data-\[range-start\=true\]\:rounded-md[data-range-start=true] {
    border-radius: 6px
  }

  .data-\[range-start\=true\]\:bg-primary[data-range-start=true] {
    background-color: var(--primary)
  }

  .data-\[range-start\=true\]\:text-primary-foreground[data-range-start=true] {
    color: var(--primary-foreground)
  }

  .data-\[selected-single\=true\]\:bg-primary[data-selected-single=true] {
    background-color: var(--primary)
  }

  .data-\[selected-single\=true\]\:text-primary-foreground[data-selected-single=true] {
    color: var(--primary-foreground)
  }

  .data-\[selected\=true\]\:rounded-none[data-selected=true] {
    border-radius: 0
  }

  .data-\[selected\=true\]\:bg-accent[data-selected=true] {
    background-color: var(--accent)
  }

  .data-\[selected\=true\]\:text-accent-foreground[data-selected=true] {
    color: var(--foreground)
  }

  .data-\[side\=bottom\]\:translate-y-1[data-side=bottom] {
    --tw-translate-y: var(--spacing);
    translate: var(--tw-translate-x) var(--tw-translate-y)
  }

  .data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom] {
    --tw-enter-translate-y: calc(2*var(--spacing)*-1)
  }

  .data-\[side\=left\]\:-translate-x-1[data-side=left] {
    --tw-translate-x: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y)
  }

  .data-\[side\=left\]\:slide-in-from-right-2[data-side=left] {
    --tw-enter-translate-x: calc(2*var(--spacing))
  }

  .data-\[side\=right\]\:translate-x-1[data-side=right] {
    --tw-translate-x: var(--spacing);
    translate: var(--tw-translate-x) var(--tw-translate-y)
  }

  .data-\[side\=right\]\:slide-in-from-left-2[data-side=right] {
    --tw-enter-translate-x: calc(2*var(--spacing)*-1)
  }

  .data-\[side\=top\]\:-translate-y-1[data-side=top] {
    --tw-translate-y: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y)
  }

  .data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top] {
    --tw-enter-translate-y: calc(2*var(--spacing))
  }

  .data-\[state\=active\]\:bg-background[data-state=active] {
    background-color: var(--background)
  }

  .data-\[state\=active\]\:text-foreground[data-state=active] {
    color: var(--foreground)
  }

  .data-\[state\=active\]\:shadow[data-state=active] {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  .data-\[state\=checked\]\:translate-x-4[data-state=checked] {
    --tw-translate-x: calc(var(--spacing) * 4);
    translate: var(--tw-translate-x) var(--tw-translate-y)
  }

  .data-\[state\=checked\]\:bg-primary[data-state=checked] {
    background-color: var(--primary)
  }

  .data-\[state\=checked\]\:text-primary-foreground[data-state=checked] {
    color: var(--primary-foreground)
  }

  .data-\[state\=closed\]\:animate-accordion-up[data-state=closed] {
    animation: accordion-up var(--tw-animation-duration, var(--tw-duration, .2s))var(--tw-ease, ease-out)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none)
  }

  .data-\[state\=closed\]\:animate-out[data-state=closed] {
    animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none)
  }

  .data-\[state\=closed\]\:duration-300[data-state=closed] {
    --tw-duration: .3s;
    transition-duration: .3s
  }

  .data-\[state\=closed\]\:fade-out-0[data-state=closed] {
    --tw-exit-opacity: 0
  }

  .data-\[state\=closed\]\:zoom-out-95[data-state=closed] {
    --tw-exit-scale: .95
  }

  .data-\[state\=closed\]\:slide-out-to-bottom[data-state=closed] {
    --tw-exit-translate-y: 100%
  }

  .data-\[state\=closed\]\:slide-out-to-left[data-state=closed] {
    --tw-exit-translate-x: -100%
  }

  .data-\[state\=closed\]\:slide-out-to-right[data-state=closed] {
    --tw-exit-translate-x: 100%
  }

  .data-\[state\=closed\]\:slide-out-to-top[data-state=closed] {
    --tw-exit-translate-y: -100%
  }

  .data-\[state\=hidden\]\:animate-out[data-state=hidden] {
    animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none)
  }

  .data-\[state\=hidden\]\:fade-out[data-state=hidden] {
    --tw-exit-opacity: 0
  }

  .data-\[state\=on\]\:bg-accent[data-state=on] {
    background-color: var(--accent)
  }

  .data-\[state\=on\]\:text-accent-foreground[data-state=on] {
    color: var(--foreground)
  }

  .data-\[state\=open\]\:animate-accordion-down[data-state=open] {
    animation: accordion-down var(--tw-animation-duration, var(--tw-duration, .2s))var(--tw-ease, ease-out)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none)
  }

  .data-\[state\=open\]\:animate-in[data-state=open] {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none)
  }

  .data-\[state\=open\]\:bg-accent[data-state=open],
  .data-\[state\=open\]\:bg-accent\/50[data-state=open] {
    background-color: var(--accent)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .data-\[state\=open\]\:bg-accent\/50[data-state=open] {
      background-color: color-mix(in oklab, var(--accent) 50%, transparent)
    }
  }

  .data-\[state\=open\]\:bg-secondary[data-state=open] {
    background-color: var(--secondary)
  }

  .data-\[state\=open\]\:text-accent-foreground[data-state=open] {
    color: var(--foreground)
  }

  .data-\[state\=open\]\:text-muted-foreground[data-state=open] {
    color: var(--muted-foreground)
  }

  .data-\[state\=open\]\:opacity-100[data-state=open] {
    opacity: 1
  }

  .data-\[state\=open\]\:duration-500[data-state=open] {
    --tw-duration: .5s;
    transition-duration: .5s
  }

  .data-\[state\=open\]\:fade-in-0[data-state=open] {
    --tw-enter-opacity: 0
  }

  .data-\[state\=open\]\:zoom-in-90[data-state=open] {
    --tw-enter-scale: .9
  }

  .data-\[state\=open\]\:zoom-in-95[data-state=open] {
    --tw-enter-scale: .95
  }

  .data-\[state\=open\]\:slide-in-from-bottom[data-state=open] {
    --tw-enter-translate-y: 100%
  }

  .data-\[state\=open\]\:slide-in-from-left[data-state=open] {
    --tw-enter-translate-x: -100%
  }

  .data-\[state\=open\]\:slide-in-from-right[data-state=open] {
    --tw-enter-translate-x: 100%
  }

  .data-\[state\=open\]\:slide-in-from-top[data-state=open] {
    --tw-enter-translate-y: -100%
  }

  @media (hover:hover) {
    .data-\[state\=open\]\:hover\:bg-accent[data-state=open]:hover {
      background-color: var(--accent)
    }
  }

  .data-\[state\=open\]\:focus\:bg-accent[data-state=open]:focus {
    background-color: var(--accent)
  }

  .data-\[state\=selected\]\:bg-muted[data-state=selected] {
    background-color: var(--muted)
  }

  .data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked] {
    --tw-translate-x: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y)
  }

  .data-\[state\=unchecked\]\:bg-input[data-state=unchecked] {
    background-color: var(--border)
  }

  .data-\[state\=visible\]\:animate-in[data-state=visible] {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none)
  }

  .data-\[state\=visible\]\:fade-in[data-state=visible] {
    --tw-enter-opacity: 0
  }

  @media (width>=40rem) {
    .sm\:mt-0 {
      margin-top: 0
    }

    .sm\:flex {
      display: flex
    }

    .sm\:max-w-sm {
      max-width: var(--container-sm)
    }

    .sm\:flex-row {
      flex-direction: row
    }

    .sm\:justify-end {
      justify-content: flex-end
    }

    .sm\:gap-2\.5 {
      gap: calc(var(--spacing) * 2.5)
    }

    :where(.sm\:space-x-2>:not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)))
    }

    .sm\:rounded-lg {
      border-radius: 8px
    }

    .sm\:text-left {
      text-align: left
    }
  }

  @media (width>=48rem) {
    .md\:absolute {
      position: absolute
    }

    .md\:block {
      display: block
    }

    .md\:flex {
      display: flex
    }

    .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
      width: var(--radix-navigation-menu-viewport-width)
    }

    .md\:w-auto {
      width: auto
    }

    .md\:flex-row {
      flex-direction: row
    }

    .md\:text-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height))
    }

    .md\:opacity-0 {
      opacity: 0
    }

    .md\:peer-data-\[variant\=inset\]\:m-2:is(:where(.peer)[data-variant=inset]~*) {
      margin: calc(var(--spacing) * 2)
    }

    .md\:peer-data-\[variant\=inset\]\:ml-0:is(:where(.peer)[data-variant=inset]~*) {
      margin-left: 0
    }

    .md\:peer-data-\[variant\=inset\]\:rounded-xl:is(:where(.peer)[data-variant=inset]~*) {
      border-radius: var(--radius-xl)
    }

    .md\:peer-data-\[variant\=inset\]\:shadow:is(:where(.peer)[data-variant=inset]~*) {
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .md\:peer-data-\[state\=collapsed\]\:peer-data-\[variant\=inset\]\:ml-2:is(:where(.peer)[data-state=collapsed]~*):is(:where(.peer)[data-variant=inset]~*) {
      margin-left: calc(var(--spacing) * 2)
    }
  }

  .after\:md\:hidden:after {
    content: var(--tw-content)
  }

  @media (width>=48rem) {
    .after\:md\:hidden:after {
      display: none
    }
  }

  .dark\:border-destructive:is(.dark *) {
    border-color: var(--primary)
  }

  .\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text {
    fill: var(--muted-foreground)
  }

  .\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 .recharts-cartesian-grid line[stroke=\#ccc] {
    stroke: var(--border)
  }

  @supports (color:color-mix(in lab, red, red)) {
    .\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 .recharts-cartesian-grid line[stroke=\#ccc] {
      stroke: color-mix(in oklab, var(--border) 50%, transparent)
    }
  }

  .\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border .recharts-curve.recharts-tooltip-cursor {
    stroke: var(--border)
  }

  .\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke=\#fff] {
    stroke: #0000
  }

  .\[\&_\.recharts-layer\]\:outline-none .recharts-layer {
    --tw-outline-style: none;
    outline-style: none
  }

  .\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-polar-grid [stroke=\#ccc] {
    stroke: var(--border)
  }

  .\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector,
  .\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor {
    fill: var(--muted)
  }

  .\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke=\#ccc] {
    stroke: var(--border)
  }

  .\[\&_\.recharts-sector\]\:outline-none .recharts-sector {
    --tw-outline-style: none;
    outline-style: none
  }

  .\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke=\#fff] {
    stroke: #0000
  }

  .\[\&_\.recharts-surface\]\:outline-none .recharts-surface {
    --tw-outline-style: none;
    outline-style: none
  }

  .\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
    padding-inline: calc(var(--spacing) * 2)
  }

  .\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
    padding-block: calc(var(--spacing) * 1.5)
  }

  .\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height))
  }

  .\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium)
  }

  .\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] {
    color: var(--muted-foreground)
  }

  .\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
    padding-inline: calc(var(--spacing) * 2)
  }

  .\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden])~[cmdk-group] {
    padding-top: 0
  }

  .\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
    height: calc(var(--spacing) * 5)
  }

  .\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
    width: calc(var(--spacing) * 5)
  }

  .\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
    height: calc(var(--spacing) * 12)
  }

  .\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
    padding-inline: calc(var(--spacing) * 2)
  }

  .\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
    padding-block: calc(var(--spacing) * 3)
  }

  .\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
    height: calc(var(--spacing) * 5)
  }

  .\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
    width: calc(var(--spacing) * 5)
  }

  .\[\&_p\]\:leading-relaxed p {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed)
  }

  .\[\&_svg\]\:pointer-events-none svg {
    pointer-events: none
  }

  .\[\&_svg\]\:size-4 svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4)
  }

  .\[\&_svg\]\:shrink-0 svg {
    flex-shrink: 0
  }

  .\[\&_tr\]\:border-b tr {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px
  }

  .\[\&_tr\:last-child\]\:border-0 tr:last-child {
    border-style: var(--tw-border-style);
    border-width: 0
  }

  .\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected=true] button {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px
  }

  .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
    padding-right: 0
  }

  :is(.rtl\:\*\*\:\[\.rdp-button\\_next\>svg\]\:rotate-180:where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)), [dir=rtl], [dir=rtl] *) *):is(.rdp-button_next>svg),
  :is(.rtl\:\*\*\:\[\.rdp-button\\_previous\>svg\]\:rotate-180:where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)), [dir=rtl], [dir=rtl] *) *):is(.rdp-button_previous>svg) {
    rotate: 180deg
  }

  .\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md:last-child[data-selected=true] button {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px
  }

  .\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox] {
    --tw-translate-y: 2px;
    translate: var(--tw-translate-x) var(--tw-translate-y)
  }

  .\[\&\>button\]\:hidden>button {
    display: none
  }

  .\[\&\>span\]\:line-clamp-1>span {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
  }

  .\[\&\>span\]\:text-xs>span {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height))
  }

  .\[\&\>span\]\:opacity-70>span {
    opacity: .7
  }

  .\[\&\>span\:last-child\]\:truncate>span:last-child {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
  }

  .\[\&\>svg\]\:absolute>svg {
    position: absolute
  }

  .\[\&\>svg\]\:top-4>svg {
    top: calc(var(--spacing) * 4)
  }

  .\[\&\>svg\]\:left-4>svg {
    left: calc(var(--spacing) * 4)
  }

  .\[\&\>svg\]\:size-3\.5>svg {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5)
  }

  .\[\&\>svg\]\:size-4>svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4)
  }

  .\[\&\>svg\]\:h-2\.5>svg {
    height: calc(var(--spacing) * 2.5)
  }

  .\[\&\>svg\]\:h-3>svg {
    height: calc(var(--spacing) * 3)
  }

  .\[\&\>svg\]\:h-3\.5>svg {
    height: calc(var(--spacing) * 3.5)
  }

  .\[\&\>svg\]\:w-2\.5>svg {
    width: calc(var(--spacing) * 2.5)
  }

  .\[\&\>svg\]\:w-3>svg {
    width: calc(var(--spacing) * 3)
  }

  .\[\&\>svg\]\:w-3\.5>svg {
    width: calc(var(--spacing) * 3.5)
  }

  .\[\&\>svg\]\:shrink-0>svg {
    flex-shrink: 0
  }

  .\[\&\>svg\]\:text-destructive>svg {
    color: var(--text-green)
  }

  .\[\&\>svg\]\:text-foreground>svg {
    color: var(--foreground)
  }

  .\[\&\>svg\]\:text-muted-foreground>svg {
    color: var(--muted-foreground)
  }

  .\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div {
    --tw-translate-y: -3px;
    translate: var(--tw-translate-x) var(--tw-translate-y)
  }

  .\[\&\>svg\~\*\]\:pl-7>svg~* {
    padding-left: calc(var(--spacing) * 7)
  }

  .\[\&\>tr\]\:last\:border-b-0>tr:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0
  }

  .\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div {
    rotate: 90deg
  }

  .\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
    rotate: 180deg
  }

  [data-side=left] .\[\[data-side\=left\]_\&\]\:cursor-w-resize {
    cursor: w-resize
  }

  [data-side=left][data-collapsible=offcanvas] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2 {
    right: calc(var(--spacing) * -2)
  }

  [data-side=left][data-state=collapsed] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize,
  [data-side=right] .\[\[data-side\=right\]_\&\]\:cursor-e-resize {
    cursor: e-resize
  }

  [data-side=right][data-collapsible=offcanvas] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2 {
    left: calc(var(--spacing) * -2)
  }

  [data-side=right][data-state=collapsed] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize {
    cursor: w-resize
  }

  [data-slot=card-content] .\[\[data-slot\=card-content\]_\&\]\:bg-transparent,
  [data-slot=popover-content] .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent {
    background-color: #0000
  }
}

@property --tw-animation-delay {
  syntax: "*";
  inherits: false;
  initial-value: 0s
}

@property --tw-animation-direction {
  syntax: "*";
  inherits: false;
  initial-value: normal
}

@property --tw-animation-duration {
  syntax: "*";
  inherits: false
}

@property --tw-animation-fill-mode {
  syntax: "*";
  inherits: false;
  initial-value: none
}

@property --tw-animation-iteration-count {
  syntax: "*";
  inherits: false;
  initial-value: 1
}

@property --tw-enter-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0
}

@property --tw-enter-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1
}

@property --tw-enter-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0
}

@property --tw-enter-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1
}

@property --tw-enter-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0
}

@property --tw-enter-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0
}

@property --tw-exit-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0
}

@property --tw-exit-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1
}

@property --tw-exit-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0
}

@property --tw-exit-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1
}

@property --tw-exit-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0
}

@property --tw-exit-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0
}

:root {
  --background: oklch(15.7889% .001666 196.987);
  --foreground: oklch(100% 0 89.876);
  --card: oklch(18.7383% .006572 214.473);
  --primary: #2ac20f;
  --primary-light: #41d70f;
  --primary-deep: #088e1b;
  --primary-dark: #00771e;
  --primary-foreground: #041a06;
  --primary-gradient: linear-gradient(135deg, #41d70f 0%, #20b019 50%, #088e1b 100%);
  --primary-gradient-h: linear-gradient(90deg, #32cd14 0%, #1ab819 50%, #007d20 100%);
  --secondary: oklch(18.7383% .006572 214.473);
  --muted: oklch(18.7383% .006572 214.473);
  --muted-foreground: oklch(71.366% .019176 261.325);
  --accent: #119b1c;
  --border: oklch(24.0641% .022821 284.556);
  --mint: #2ac20f;
  --scene-primary: #2ac20f;
  --scene-ink: oklch(71.366% .019176 261.325);
  --scene-paper: oklch(26.3491% .009394 219.839);
  --scene-metal: oklch(71.366% .019176 261.325);
  --scene-line: oklch(42.2321% .014412 209.809);
  --scene-accent: #088e1b;
  --shadow-soft: 0 12px 40px oklch(0% 0 0/.24);
}

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--background);
  z-index: 20;
  justify-content: space-between;
  align-items: center;
  height: 88px;
  padding: 0 max(5%, 50% - 720px);
  display: flex;
  position: relative
}

.brand {
  color: var(--foreground);
  align-items: center;
  gap: 11px;
  display: flex
}

.brand-logo {
  object-fit: contain;
  object-position: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: block;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 750;
  line-height: 1.15;
  color: var(--foreground);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.brand-name small {
  font-family: var(--font-sans);
  letter-spacing: 1.5px;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted-foreground);
  display: block;
}

.desktop-nav {
  align-items: center;
  gap: 34px;
  font-size: 15px;
  font-weight: 500;
  display: flex;
}

.desktop-nav a {
  color: var(--muted-foreground);
  transition: color .2s;
  padding: 6px 0;
}

.desktop-nav a:hover {
  color: var(--text-green);
}

.mobile-toggle {
  display: none;
}

.action-button {
  height: 44px;
  box-shadow: 0 4px 14px rgba(42, 194, 15, 0.25);
  border-radius: 8px;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.25s ease;
}

.action-button.bg-primary {
  background: var(--primary-gradient-h) !important;
  color: var(--primary-foreground) !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 18px rgba(34, 185, 22, 0.35);
}

.action-button.bg-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 24px rgba(42, 194, 15, 0.5);
  transform: translateY(-2px);
}

.hero-track {
  height: calc(200svh + max(720px, 92svh));
  position: relative
}

.hero {
  isolation: isolate;
  height: 92svh;
  min-height: 720px;
  position: sticky;
  top: 0;
  overflow: hidden
}

.hero-heading {
  text-align: center;
  pointer-events: none;
  padding: 58px 20px 0;
  position: relative;
  min-height: 170px;
}

.stage-heading {
  position: absolute;
  top: 58px;
  left: 20px;
  right: 20px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.hero-track[data-stage="1"] .stage-heading-1,
.hero-track[data-stage="2"] .stage-heading-2,
.hero-track[data-stage="3"] .stage-heading-3,
.hero-track[data-stage="4"] .stage-heading-4,
.hero-track[data-stage="5"] .stage-heading-5 {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hero-track[data-stage="5"] .cta-default {
  display: none !important;
}

.hero-track[data-stage="5"] .cta-final {
  display: inline !important;
}

.hero-scene {
  z-index: -1;
  position: absolute;
  inset: 175px 0 25px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 1.8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 600;
  display: flex
}

.status-dot {
  background: var(--primary-gradient);
  border-radius: 50%;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 10px rgba(42, 194, 15, 0.7);
}

.hero h1 {
  margin: 16px 0 11px;
  font-size: 58px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.hero h1 span {
  background: var(--primary-gradient-h);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.hero-subtitle {
  color: var(--muted-foreground);
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.65;
  max-width: 580px;
}

.hero-trust-strip {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 8;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.hero-track[data-stage="5"] .hero-trust-strip {
  opacity: 0;
  transform: translate(-50%, -10px);
}

.hero-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(14, 20, 15, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(42, 194, 15, 0.22);
  border-radius: 9999px;
  padding: 7px 16px;
  font-size: 11.5px;
  color: var(--muted-foreground);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
  letter-spacing: -0.01em;
}

.hero-trust-pill strong {
  color: var(--foreground);
  font-weight: 650;
}

.trust-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-gradient);
  box-shadow: 0 0 8px rgba(42, 194, 15, 0.6);
  flex-shrink: 0;
}

.hero-cta {
  white-space: nowrap;
  align-items: center;
  gap: 12px;
  display: flex;
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translate(-50%, 16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
}

.hero-track[data-stage="5"] .hero-cta {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

@media (max-width: 820px) {
  .hero-trust-strip {
    flex-direction: column;
    gap: 8px;
    bottom: 24px;
  }

  .hero-trust-pill:nth-child(n+3) {
    display: none;
  }
}

.service-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--card);
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  padding: 30px max(5%, 50% - 720px);
  display: flex;
  position: relative;
  z-index: 10;
}

.service-strip span {
  color: var(--muted-foreground);
  white-space: nowrap;
  font-size: 12px
}

.service-strip .strip-symbol {
  color: var(--text-green);
  font-size: 20px
}

.section {
  padding: 88px max(5%, 50% - 720px)
}

.section-intro {
  justify-content: space-between;
  align-items: flex-end;
  gap: 45px;
  margin-bottom: 48px;
  display: flex
}

.section-kicker {
  text-transform: uppercase;
  letter-spacing: 1.8px;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
}

.section-kicker:before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-gradient);
  box-shadow: 0 0 0 0 rgba(42, 194, 15, 0.7), 0 0 10px rgba(42, 194, 15, 0.4);
  animation: kickerPulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  flex-shrink: 0;
}

@keyframes kickerPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(42, 194, 15, 0.7), 0 0 8px rgba(42, 194, 15, 0.4);
    transform: scale(0.95);
  }

  70% {
    box-shadow: 0 0 0 6px rgba(42, 194, 15, 0), 0 0 14px rgba(42, 194, 15, 0.6);
    transform: scale(1.05);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(42, 194, 15, 0), 0 0 8px rgba(42, 194, 15, 0.4);
    transform: scale(0.95);
  }
}

.section h2 {
  margin: 0;
  font-size: 46px;
  line-height: 1.2
}

.section h2 em {
  background: var(--primary-gradient-h);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: normal;
  display: inline-block;
}

.section-description {
  max-width: 300px;
  color: var(--muted-foreground);
  margin: 0 0 5px;
  font-size: 13px;
  line-height: 1.8
}

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

.service-card {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 6px;
  flex-direction: column;
  min-height: 290px;
  padding: 30px;
  transition: transform .3s, box-shadow .3s, border-color .3s;
  display: flex
}

.service-card:hover {
  box-shadow: var(--shadow-soft);
  border-color: var(--primary);
  transform: translateY(-5px)
}

.service-card-top {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 36px;
  display: flex
}

.service-icon {
  color: var(--text-green);
  stroke-width: 1.3px;
  width: 30px;
  height: 30px
}

.service-number {
  color: var(--muted-foreground);
  font-size: 10px
}

.service-card h3 {
  margin: 0 0 12px;
  font-size: 20px
}

.service-card p {
  color: var(--muted-foreground);
  margin: 0 0 24px;
  font-size: 13px;
  line-height: 1.8
}

.service-card a {
  color: var(--foreground);
  border-top: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 17px;
  font-size: 11px;
  display: flex
}

.about-section {
  background: radial-gradient(circle at 10% 20%, rgba(42, 194, 15, 0.05) 0%, transparent 45%),
    radial-gradient(circle at 90% 80%, rgba(8, 142, 27, 0.04) 0%, transparent 40%),
    var(--secondary);
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  display: grid;
  align-items: center;
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.about-left {
  display: flex;
  flex-direction: column;
}

.about-highlights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 36px;
}

.about-stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0.25) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(42, 194, 15, 0.35);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), 0 0 18px rgba(42, 194, 15, 0.12);
}

.about-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(42, 194, 15, 0.12);
  border: 1px solid rgba(42, 194, 15, 0.25);
  color: var(--text-green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.about-stat-card:hover .about-stat-icon {
  background: var(--primary-gradient);
  color: var(--primary-foreground);
  box-shadow: 0 0 16px rgba(42, 194, 15, 0.45);
}

.about-stat-info strong {
  color: #ffffff;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  display: block;
  letter-spacing: -0.02em;
}

.about-stat-info > span {
  color: var(--muted-foreground);
  margin-top: 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  display: block;
}

.about-lead {
  font-size: 17px !important;
  color: var(--foreground) !important;
  font-weight: 400;
  line-height: 1.7 !important;
}

.about-check-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.about-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--muted-foreground);
  line-height: 1.55;
}

.about-check-list li span:last-child {
  color: var(--foreground);
}

.check-bullet {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(42, 194, 15, 0.12);
  border: 1px solid rgba(42, 194, 15, 0.3);
  color: var(--text-green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.about-cta-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.about-ghost-link {
  color: var(--muted-foreground);
  font-size: 13.5px;
  font-weight: 500;
  transition: all 0.2s ease;
  padding: 10px 14px;
  border-radius: 8px;
}

.about-ghost-link:hover {
  color: var(--text-green);
  transform: translateX(3px);
}

.about-copy {
  color: var(--muted-foreground);
  margin: 0;
  font-size: 15px;
  line-height: 1.85
}

.about-principles {
  margin-top: 30px
}

.principle {
  border-top: 1px solid var(--border);
  gap: 18px;
  padding: 17px 0;
  font-size: 13px;
  display: flex
}

.principle svg {
  color: var(--text-green);
  width: 18px
}

.process-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 55px;
  margin-top: 54px;
  display: grid
}

.process-step {
  border-top: 1px solid var(--border);
  padding-top: 25px
}

.process-step>span {
  color: var(--text-green);
  font-size: 11px
}

.process-step h3 {
  margin: 25px 0 12px;
  font-size: 23px
}

.process-step p {
  color: var(--muted-foreground);
  font-size: 13px;
  line-height: 1.8
}

.contact-section {
  background: var(--secondary);
  color: var(--foreground);
  justify-content: space-between;
  align-items: center;
  gap: 60px;
  display: flex
}

.contact-section h2 {
  font-size: 52px
}

.contact-section h2 span {
  color: var(--text-green)
}

.contact-section p {
  color: var(--muted-foreground);
  margin-top: 22px;
  font-size: 13px
}

.contact-actions {
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  display: flex
}

.contact-actions>a {
  color: var(--foreground);
  border-bottom: 1px solid var(--muted-foreground);
  padding-bottom: 8px;
  font-size: 13px
}



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

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0)
}

.service-features {
  gap: 11px;
  margin: 0 0 25px;
  padding: 0;
  list-style: none;
  display: grid
}

.service-features li {
  color: var(--muted-foreground);
  align-items: flex-start;
  gap: 9px;
  font-size: 12px;
  display: flex
}

.service-features svg {
  color: var(--text-green);
  flex-shrink: 0;
  margin-top: 2px
}

.company-copy p {
  color: var(--muted-foreground);
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.85
}

.faq-layout {
  grid-template-columns: 1fr 1.5fr;
  gap: 80px;
  display: grid
}

.faq-answer {
  color: var(--muted-foreground);
  font-size: 14px;
  line-height: 1.8
}

.stats-band {
  border-bottom: 1px solid var(--border);
  background: var(--secondary);
  grid-template-columns: repeat(4, 1fr);
  padding: 42px 5%;
  display: grid
}

.stat {
  border-left: 1px solid var(--border);
  padding-left: 25px
}

.stat strong {
  color: var(--text-green);
  font-size: 42px;
  font-family: var(--font-display);
  font-weight: 500;
  display: block
}

.stat span {
  color: var(--muted-foreground);
  margin-top: 10px;
  font-size: 12px;
  display: block
}

.contact-address {
  max-width: 380px;
  color: var(--muted-foreground);
  font-size: 14px;
  line-height: 1.8
}

.social-links {
  flex-wrap: wrap;
  gap: 18px;
  display: flex
}

.social-links a {
  color: var(--muted-foreground);
  font-size: 12px
}

@media (width>=1500px) {
  .hero h1 {
    font-size: 88px
  }

  .hero-heading {
    padding-top: 60px
  }
}

@media (width<=900px) {
  .hero h1 {
    font-size: 56px
  }

  .desktop-nav {
    gap: 18px
  }

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

  .about-section {
    gap: 40px
  }

  .section h2 {
    font-size: 37px
  }

  .service-strip {
    overflow: hidden
  }

  .label-growth {
    left: 8%
  }

  .label-tech {
    right: 7%
  }
}

@media (width<=640px) {
  .site-header {
    height: 74px;
    padding: 0 6%
  }

  .brand-name {
    font-size: 20px
  }

  .desktop-nav,
  .header-cta {
    display: none
  }

  .mobile-toggle {
    display: inline-flex
  }

  .mobile-nav {
    background: var(--background);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
    flex-direction: column;
    gap: 22px;
    padding: 25px 6%;
    display: flex;
    position: absolute;
    top: 74px;
    left: 0;
    right: 0
  }

  .mobile-nav a {
    color: var(--foreground);
    font-size: 16px;
    font-weight: 500;
  }

  .hero-track {
    height: calc(200svh + 740px)
  }

  .hero {
    height: 740px;
    min-height: 0
  }

  .hero-heading {
    padding-top: 40px
  }

  .hero h1 {
    max-width: 350px;
    margin: 19px auto 16px;
    font-size: 42px
  }

  .hero-subtitle {
    max-width: 300px;
    margin: auto;
    font-size: 13px
  }

  .journey-progress {
    bottom: 149px;
    left: 5%;
    right: 5%
  }

  .brand-logo {
    width: 150px;
    height: 46px
  }

  .values-grid,
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 30px
  }

  .stats-band {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px
  }

  .stat strong {
    font-size: 34px
  }

  .eyebrow {
    letter-spacing: 1.3px;
    font-size: 8px
  }

  .hero-scene {
    inset: 240px -12px 175px
  }

  .scene-journey {
    bottom: 160px;
    left: 5%;
    right: 5%
  }

  .scene-journey span {
    font-size: 9px
  }

  .hero-cta {
    gap: 8px;
    bottom: 80px
  }

  .action-button {
    padding: 0 15px;
    font-size: 11px
  }

  .hero-note {
    font-size: 9px;
    bottom: 28px;
    left: 6%;
    right: 6%
  }

  .hero-note>span {
    max-width: 130px;
    line-height: 1.6
  }

  .scene-label {
    display: none
  }

  .service-strip {
    gap: 22px;
    padding: 20px 6%
  }

  .service-strip span {
    font-size: 10px
  }

  .section {
    padding: 65px 6%
  }

  .section-intro {
    margin-bottom: 30px;
    display: block
  }

  .section h2 {
    font-size: 34px
  }

  .section-description {
    margin-top: 22px
  }

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

  .service-card {
    min-height: 270px;
    padding: 26px
  }

  .service-card-top {
    margin-bottom: 25px
  }

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

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

  .about-copy {
    font-size: 14px;
  }

  .process-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 35px
  }

  .process-step h3 {
    margin-top: 16px
  }

  .contact-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px
  }

  .contact-section h2 {
    font-size: 38px
  }

  .footer {
    flex-wrap: wrap;
    gap: 25px;
    padding: 30px 6%
  }

  .footer-links {
    gap: 18px
  }

  .footer p {
    order: 3;
    width: 100%;
    margin: 0
  }
}

@media (prefers-reduced-motion:reduce) {
  .hero-track {
    height: auto
  }

  .hero {
    position: relative
  }

  html {
    scroll-behavior: auto
  }

  *,
  :before,
  :after {
    transition: none !important
  }

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

.brand-logo {
  width: 46px;
  height: 56px
}

.hero h1 {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  font-size: 64px
}

.hero-subtitle {
  max-width: 650px;
  margin: 0 auto;
  padding: 0 15px
}

.hero-heading {
  padding-top: 44px
}

.hero-scene {
  inset: 250px 0 155px
}

.about-highlights {
  gap: 55px;
  margin-top: 40px;
  display: flex
}

.about-highlights strong {
  color: var(--text-green);
  font-size: 38px;
  font-weight: 500;
  display: block
}

.about-highlights span {
  color: var(--muted-foreground);
  margin-top: 7px;
  font-size: 11px;
  display: block
}

.values-section {
  padding-top: 42px;
  padding-bottom: 42px
}

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

.value-item {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(20, 24, 22, 0.6) 100%);
  border-radius: 12px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.value-item:hover {
  border-color: rgba(42, 194, 15, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4), 0 0 24px rgba(42, 194, 15, 0.12);
}

.value-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.value-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(42, 194, 15, 0.12);
  border: 1px solid rgba(42, 194, 15, 0.25);
  color: var(--text-green);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.value-item:hover .value-icon-box {
  background: var(--primary-gradient);
  color: var(--primary-foreground);
  box-shadow: 0 0 18px rgba(42, 194, 15, 0.45);
}

.value-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-foreground);
  opacity: 0.6;
}

.value-item h3 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--foreground);
}

.value-item p {
  color: var(--muted-foreground);
  font-size: 14px;
  line-height: 1.75;
  margin: 0 0 20px;
  flex-grow: 1;
}

.value-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-green);
  background: rgba(42, 194, 15, 0.1);
  border: 1px solid rgba(42, 194, 15, 0.24);
  border-radius: 9999px;
  padding: 4px 12px;
}

.pricing-section {
  background: var(--secondary)
}

.plan-group {
  margin-top: 55px;
}

.plan-group-title {
  margin: 0 0 28px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.plan-card {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(18, 24, 19, 0.65) 100%);
  border-radius: 12px;
  flex-direction: column;
  padding: 34px 28px;
  display: flex;
  position: relative;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.plan-card:hover {
  border-color: rgba(42, 194, 15, 0.45);
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45), 0 0 28px rgba(42, 194, 15, 0.15);
}

/* Accent highlight for Growth/Popular middle tier */
.plan-card:nth-child(2) {
  border-color: rgba(42, 194, 15, 0.35);
  background: linear-gradient(180deg, rgba(42, 194, 15, 0.06) 0%, rgba(16, 24, 18, 0.8) 100%);
}

.plan-tier {
  display: inline-flex;
  align-self: flex-start;
  color: var(--text-green);
  background: rgba(42, 194, 15, 0.1);
  border: 1px solid rgba(42, 194, 15, 0.25);
  border-radius: 9999px;
  padding: 4px 12px;
  margin-bottom: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.plan-from {
  text-transform: uppercase;
  color: var(--muted-foreground);
  font-size: 10px;
  letter-spacing: 1px;
  display: block;
}

.plan-price {
  margin: 8px 0 26px;
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--foreground);
}

.plan-price small {
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 400;
}

.plan-card .service-features {
  gap: 13px;
  margin-bottom: 32px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.plan-card .service-features li {
  font-size: 12.5px;
}

.plan-card .action-button {
  margin-top: auto;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.plan-card .action-button:hover {
  box-shadow: 0 0 20px rgba(42, 194, 15, 0.5);
}

.more-services {
  border-top: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  margin-top: 55px;
  padding-top: 28px;
  display: flex
}

.more-services h3 {
  font-size: 22px
}

.testimonials-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  display: grid;
  align-items: stretch;
}

.testimonial,
.testimonial-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(14, 20, 15, 0.8) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  flex-direction: column;
  margin: 0;
  padding: 30px 26px;
  display: flex;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.testimonial::before,
.testimonial-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(42, 194, 15, 0.5), transparent);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.testimonial:hover,
.testimonial-card:hover {
  border-color: rgba(42, 194, 15, 0.45);
  transform: translateY(-6px);
  background: linear-gradient(180deg, rgba(42, 194, 15, 0.08) 0%, rgba(16, 24, 18, 0.9) 100%);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(42, 194, 15, 0.16);
}

.testimonial:hover::before,
.testimonial-card:hover::before {
  opacity: 1;
}

.testimonial-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.testimonial-quote-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(42, 194, 15, 0.12);
  color: var(--text-green);
  border: 1px solid rgba(42, 194, 15, 0.28);
  box-shadow: 0 2px 10px rgba(42, 194, 15, 0.18);
}

.testimonial-stars {
  display: flex;
  gap: 4px;
  color: var(--text-green);
}

.testimonial blockquote {
  color: #cbd5e1;
  margin: 0 0 26px;
  font-size: 14.5px;
  line-height: 1.75;
  font-style: normal;
  letter-spacing: -0.01em;
  flex: 1;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(42, 194, 15, 0.3), rgba(8, 142, 27, 0.12));
  border: 1.5px solid rgba(42, 194, 15, 0.45);
  color: var(--text-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

.testimonial-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.testimonial-meta strong {
  font-size: 14px;
  font-weight: 600;
  color: #f8fafc;
  letter-spacing: -0.01em;
}

.testimonial-meta span {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 400;
}



.impact-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 36px;
  display: grid;
}

.impact-item {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.impact-item:hover {
  border-color: rgba(42, 194, 15, 0.4);
  background: rgba(255, 255, 255, 0.035);
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35), 0 0 20px rgba(42, 194, 15, 0.1);
}

.impact-item strong {
  background: var(--primary-gradient-h);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 16px;
}

.impact-item h3 {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 600;
  color: #f8fafc;
}

.impact-item p {
  color: var(--muted-foreground);
  font-size: 13.5px;
  line-height: 1.65;
  margin: 0;
}

.contact-section p {
  max-width: 560px;
  line-height: 1.8
}

.contact-form-section {
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  display: grid
}

.contact-form {
  flex-direction: column;
  gap: 14px;
  display: flex
}

.contact-form h3 {
  margin: 0 0 12px;
  font-size: 24px
}

.contact-form label {
  color: var(--muted-foreground);
  font-size: 12px
}

.contact-form input {
  height: 46px
}

.contact-form .action-button {
  align-self: flex-start;
  margin-top: 8px
}

.footer {
  justify-content: space-between;
  align-items: flex-start;
  gap: 50px;
  padding: 55px max(5%, 50% - 720px) 45px;
  display: flex;
  border-top: 1px solid var(--border);
  background: var(--card);
}

.footer-brand-col {
  max-width: 440px;
}

.footer-tagline {
  color: var(--muted-foreground);
  font-size: 15px;
  line-height: 1.7;
  margin: 16px 0 14px;
  font-weight: 400;
}

.footer-social-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 20px;
}

.footer-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted-foreground);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.footer-social-btn:hover {
  transform: translateY(-3px) scale(1.05);
  color: #ffffff;
}

/* WhatsApp hover */
.footer-social-wa:hover {
  background: linear-gradient(135deg, #25D366, #128C7E);
  border-color: #25D366;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
}

/* Facebook hover */
.footer-social-fb:hover {
  background: linear-gradient(135deg, #1877F2, #0d5cbf);
  border-color: #1877F2;
  box-shadow: 0 6px 18px rgba(24, 119, 242, 0.35);
}

/* Instagram hover */
.footer-social-ig:hover {
  background: linear-gradient(135deg, #833AB4, #FD1D1D, #FCB045);
  border-color: #E1306C;
  box-shadow: 0 6px 18px rgba(225, 48, 108, 0.35);
}

/* LinkedIn hover */
.footer-social-li:hover {
  background: linear-gradient(135deg, #0A66C2, #004182);
  border-color: #0A66C2;
  box-shadow: 0 6px 18px rgba(10, 102, 194, 0.35);
}

.footer-copyright {
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  margin: 0;
  font-weight: 400;
}

.footer-services h3 {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--foreground);
}

.footer-services {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.footer-services a {
  color: var(--muted-foreground);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.footer-services a:hover {
  color: var(--text-green);
}

.footer-links {
  flex-direction: column;
  gap: 12px;
  display: flex;
  margin-top: 36px;
}

.footer-links a {
  color: var(--muted-foreground);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--text-green);
}

.footer-map {
  flex-direction: column;
  display: flex;
  min-width: 280px;
  max-width: 380px;
  flex: 1;
}

.footer-map h3 {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--foreground);
}

.footer-map-frame {
  width: 100%;
  height: 190px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  background: var(--muted);
}

.footer-map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (width>=1500px) {
  .hero h1 {
    font-size: 74px
  }
}

@media (width<=900px) {
  .hero h1 {
    font-size: 54px
  }

  .testimonials-grid,
  .impact-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .desktop-nav {
    gap: 16px
  }

  .plan-price {
    font-size: 28px
  }
}

@media (width<=640px) {
  .brand-logo {
    width: 38px;
    height: 38px;
  }

  .brand-name {
    font-size: 18px
  }

  .brand-name small {
    letter-spacing: 1.5px;
    font-size: 7px
  }

  .hero h1 {
    font-size: 40px;
    line-height: 1.15
  }

  .hero h1 span {
    display: block
  }

  .hero-heading {
    padding-top: 32px
  }

  .hero-subtitle {
    font-size: 12px;
    line-height: 1.8
  }

  .eyebrow {
    max-width: 310px;
    margin: auto;
    line-height: 1.6
  }

  .hero-scene {
    inset: 195px 0 70px;
  }

  .testimonials-grid {
    grid-template-columns: 1fr
  }

  .plan-group-title {
    font-size: 23px
  }

  .plan-card {
    padding: 26px
  }

  .plan-price {
    font-size: 32px
  }

  .more-services {
    flex-wrap: wrap;
    gap: 20px
  }

  .impact-grid {
    gap: 25px
  }

  .impact-item strong {
    font-size: 38px
  }

  .impact-item h3 {
    font-size: 16px
  }

  .footer {
    flex-direction: column;
    gap: 32px;
  }

  .footer-links {
    flex-flow: wrap;
    margin-top: 0;
  }

  .footer-services {
    gap: 12px;
  }

  .footer-map {
    width: 100%;
    max-width: 100%;
  }

  .footer-map-frame {
    height: 220px;
  }

  .contact-actions {
    width: 100%
  }

  .contact-actions>a {
    overflow-wrap: anywhere
  }

  .contact-form-section {
    grid-template-columns: 1fr;
    gap: 35px
  }
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0
}

@property --tw-space-x-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-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: ""
}

@keyframes pulse {
  50% {
    opacity: .5
  }
}

@keyframes enter {
  0% {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0)scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1))rotate(var(--tw-enter-rotate, 0));
    filter: blur(var(--tw-enter-blur, 0))
  }
}

@keyframes exit {
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0)scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1))rotate(var(--tw-exit-rotate, 0));
    filter: blur(var(--tw-exit-blur, 0))
  }
}

@keyframes accordion-down {
  0% {
    height: 0
  }

  to {
    height: var(--radix-accordion-content-height, var(--bits-accordion-content-height, var(--reka-accordion-content-height, var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto)))))
  }
}

@keyframes accordion-up {
  0% {
    height: var(--radix-accordion-content-height, var(--bits-accordion-content-height, var(--reka-accordion-content-height, var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto)))))
  }

  to {
    height: 0
  }
}

@keyframes caret-blink {

  0%,
  70%,
  to {
    opacity: 1
  }

  20%,
  50% {
    opacity: 0
  }
}

/* ========================================================
   Clean Minimal Contact Page Styles (/contact)
   ======================================================== */
.minimal-contact-wrap {
  min-height: 100vh;
  background: var(--background);
  color: var(--foreground);
  display: flex;
  flex-direction: column;
}

.minimal-contact-header {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(5%, calc(50% - 720px));
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.minimal-back-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.minimal-back-btn:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

.minimal-contact-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px 80px;
}

.minimal-contact-box {
  width: 100%;
  max-width: 540px;
}

.minimal-contact-box h1 {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: #ffffff;
}

.minimal-contact-desc {
  font-size: 15px;
  line-height: 1.6;
  color: #94a3b8;
  margin: 0 0 32px;
}

.minimal-channels {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 30px;
}

.minimal-channel-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.2s ease;
  font-size: 13.5px;
  text-decoration: none;
}

.minimal-channel-link span {
  color: #64748b;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  width: 80px;
}

.minimal-channel-link strong {
  color: #f1f5f9;
  font-weight: 500;
  flex: 1;
  text-align: left;
}

.minimal-link-arrow {
  color: var(--text-green);
  transition: transform 0.2s ease;
}

.minimal-channel-link:hover {
  border-color: rgba(42, 194, 15, 0.4);
  background: rgba(42, 194, 15, 0.06);
}

.minimal-channel-link:hover .minimal-link-arrow {
  transform: translate(2px, -2px);
}

.minimal-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  margin-bottom: 28px;
}

.minimal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.minimal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.minimal-field label {
  font-size: 12px;
  font-weight: 500;
  color: #94a3b8;
}

.minimal-field input,
.minimal-field textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: #ffffff;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.2s ease;
  font-family: inherit;
}

.minimal-field input:focus,
.minimal-field textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 2px rgba(42, 194, 15, 0.2);
}

.minimal-submit {
  width: 100%;
  height: 44px;
  font-size: 14px;
  font-weight: 600;
  margin-top: 6px;
  border: none;
  cursor: pointer;
  background: var(--primary-gradient-h) !important;
  color: var(--primary-foreground) !important;
  box-shadow: 0 4px 16px rgba(42, 194, 15, 0.35);
}

.minimal-submit:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 22px rgba(42, 194, 15, 0.5);
}

.minimal-success {
  text-align: center;
  padding: 30px 20px;
  border: 1px solid rgba(42, 194, 15, 0.3);
  background: rgba(42, 194, 15, 0.05);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.minimal-success-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(42, 194, 15, 0.18);
  color: var(--text-green);
  display: flex;
  align-items: center;
  justify-content: center;
}

.minimal-success h3 {
  font-size: 18px;
  color: #ffffff;
  margin: 0;
}

.minimal-success p {
  font-size: 13.5px;
  color: #94a3b8;
  margin: 0;
}

.minimal-reset-btn {
  background: transparent;
  border: none;
  color: var(--text-green);
  font-size: 12px;
  cursor: pointer;
  margin-top: 6px;
  text-decoration: underline;
}

.minimal-office-foot {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  text-align: center;
  font-size: 12px;
}

/* ========================================================
   Floating Back to Top Arrow (Bottom Right)
   ======================================================== */
.back-to-top-btn {
  position: fixed;
  bottom: 82px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(14, 20, 15, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(42, 194, 15, 0.35);
  color: var(--text-green);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(42, 194, 15, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 98;
  opacity: 0;
  transform: translateY(16px) scale(0.9);
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.back-to-top-btn.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.back-to-top-btn:hover {
  background: var(--primary-gradient);
  color: var(--primary-foreground);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 24px rgba(42, 194, 15, 0.6);
}

@media (max-width: 640px) {
  .back-to-top-btn {
    bottom: 74px;
    right: 16px;
    width: 38px;
    height: 38px;
  }
}

/* ========================================================
   CINEMATIC VIRTUAL PRESENTER SERVICES STORYTELLING
   ======================================================== */
.presenter-story-track {
  height: calc(320svh + 900px);
  position: relative;
  background: #060907;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.presenter-sticky-frame {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 720px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Background Presenter Frame Canvas */
.presenter-bg-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  background: #060907;
}

.presenter-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 28% center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  /* Native uncompressed 2K dynamic display: zero pixel stretch */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.presenter-bg-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 28% center;
  position: absolute;
  top: 0;
  left: 0;
  /* Pure 2K native definition */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  transform: translate3d(0, 0, 0);
}

.presenter-bg-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.presenter-video-scrub-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(14, 20, 16, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(42, 194, 15, 0.35);
  border-radius: 9999px;
  padding: 6px 14px;
  width: fit-content;
  pointer-events: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.presenter-video-tag-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 10px rgba(42, 194, 15, 0.9);
  animation: pulse 1.8s infinite;
}

.presenter-video-tag-text {
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  color: var(--text-green);
  letter-spacing: 0.5px;
  font-weight: 600;
  text-transform: uppercase;
}

/* Dedicated corner watermark blackout shield */
.presenter-watermark-cover {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 240px;
  height: 180px;
  background: radial-gradient(circle at 100% 100%, #060907 0%, #060907 55%, rgba(6, 9, 7, 0.95) 75%, transparent 100%);
  z-index: 3;
  pointer-events: none;
}

/* Delicate left edge blur */
.presenter-left-blur {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 220px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.6) 40%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.6) 40%, transparent 100%);
  z-index: 3;
  pointer-events: none;
}

/* Cinematic Vignette & Gradient Masks:
   Keep the presenter crisp while softly diffusing left and right perimeters */
.presenter-bg-vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    linear-gradient(to right,
      rgba(6, 9, 7, 0.55) 0%,
      rgba(6, 9, 7, 0.2) 12%,
      transparent 28%,
      rgba(6, 9, 7, 0.45) 55%,
      rgba(6, 9, 7, 0.65) 80%,
      rgba(6, 9, 7, 0.85) 100%),
    linear-gradient(to bottom,
      rgba(6, 9, 7, 0.5) 0%,
      transparent 15%,
      transparent 75%,
      #060907 100%);
  pointer-events: none;
}

.presenter-bg-tint {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 18% 45%, rgba(42, 194, 15, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 82% 50%, rgba(8, 142, 27, 0.06) 0%, transparent 60%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.presenter-ambient-glow {
  position: absolute;
  top: 20%;
  right: 15%;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(42, 194, 15, 0.15) 0%, transparent 70%);
  filter: blur(90px);
  pointer-events: none;
  z-index: 2;
}

/* Foreground Container Grid - shifted right to frame presenter perfectly */
.presenter-layout-container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px 0 24px;
  display: grid;
  grid-template-columns: 46% 54%;
  align-items: center;
  gap: 36px;
  height: 100%;
  position: relative;
  z-index: 5;
}

/* LEFT ZONE: Presenter Host Indicators */
.presenter-host-zone {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 80%;
  padding-bottom: 40px;
  gap: 16px;
  pointer-events: none;
}

.presenter-host-indicator {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: rgba(10, 15, 12, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(42, 194, 15, 0.35);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), 0 0 24px rgba(42, 194, 15, 0.12);
  border-radius: 9999px;
  padding: 10px 20px;
  width: fit-content;
  pointer-events: auto;
}

.presenter-live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 12px rgba(42, 194, 15, 0.9);
  animation: pulse 2s infinite;
  flex-shrink: 0;
}

.presenter-host-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.presenter-host-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #ffffff;
}

.presenter-host-sub {
  font-size: 11px;
  color: var(--text-green);
  font-weight: 500;
}

/* Subtle speech soundwave indicator */
.presenter-speech-indicator {
  display: flex;
  align-items: center;
  gap: 3.5px;
  margin-left: 6px;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.presenter-wave-bar {
  width: 3px;
  border-radius: 2px;
  background: var(--primary);
  animation: waveBar 1.2s ease-in-out infinite alternate;
}

.presenter-wave-bar:nth-child(1) {
  height: 8px;
  animation-delay: 0.1s;
}

.presenter-wave-bar:nth-child(2) {
  height: 16px;
  animation-delay: 0.3s;
}

.presenter-wave-bar:nth-child(3) {
  height: 20px;
  animation-delay: 0.15s;
}

.presenter-wave-bar:nth-child(4) {
  height: 13px;
  animation-delay: 0.45s;
}

.presenter-wave-bar:nth-child(5) {
  height: 9px;
  animation-delay: 0.25s;
}

@keyframes waveBar {
  0% {
    transform: scaleY(0.4);
  }

  100% {
    transform: scaleY(1.2);
  }
}

.presenter-host-service-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(14, 20, 16, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 8px 16px;
  width: fit-content;
  pointer-events: auto;
}

.presenter-host-service-text {
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
}

/* RIGHT ZONE: Shifted right to sit comfortably away from host gesture */
.presenter-dialogue-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  position: relative;
  z-index: 10;
  padding: 16px 0;
  width: 100%;
  margin-left: auto;
}

.presenter-dialogue-card {
  width: 100%;
  max-width: 630px;
  margin-left: auto;
  background: linear-gradient(135deg, rgba(14, 20, 16, 0.48) 0%, rgba(8, 12, 9, 0.62) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(42, 194, 15, 0.4);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5),
    0 0 35px rgba(42, 194, 15, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  border-radius: 22px;
  padding: 32px 34px;
  animation: fadeInPresenter 0.3s ease-out;
  position: relative;
  overflow: hidden;
  will-change: opacity, transform;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.presenter-dialogue-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(42, 194, 15, 0.9), transparent);
}

@keyframes fadeInPresenter {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.presenter-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}

.presenter-scene-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(42, 194, 15, 0.12);
  border: 1px solid rgba(42, 194, 15, 0.3);
  border-radius: 9999px;
  padding: 6px 16px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--text-green);
  text-transform: uppercase;
}

.presenter-progress-pill {
  display: flex;
  align-items: center;
  gap: 8px;
}

.presenter-step-dash {
  width: 14px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.18);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.presenter-step-dash:hover {
  background: rgba(255, 255, 255, 0.4);
}

.presenter-step-dash.is-active {
  width: 32px;
  background: var(--primary-gradient-h);
  box-shadow: 0 0 12px rgba(42, 194, 15, 0.7);
}

.presenter-headline {
  font-size: 32px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: #ffffff;
}

.presenter-highlight {
  background: var(--primary-gradient-h);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline;
}

.presenter-speech-bubble {
  position: relative;
  background: rgba(42, 194, 15, 0.08);
  border-left: 3px solid var(--primary);
  border-radius: 0 14px 14px 0;
  padding: 18px 22px;
  margin-bottom: 20px;
}

.presenter-quote-text {
  font-size: 15px;
  line-height: 1.7;
  color: #f1f5f9;
  font-style: italic;
  margin: 0;
  letter-spacing: -0.01em;
}

.presenter-subtext {
  font-size: 14px;
  line-height: 1.75;
  color: #94a3b8;
  margin: 0 0 22px;
}

.presenter-points-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  margin-bottom: 26px;
}

.presenter-point-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 500;
  color: #cbd5e1;
}

.presenter-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}

.presenter-metric-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.presenter-metric-val {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  background: var(--primary-gradient-h);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: var(--font-mono, monospace);
}

.presenter-metric-desc {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #94a3b8;
  font-weight: 600;
}

.presenter-action-row {
  display: flex;
  align-items: center;
  gap: 18px;
}

.presenter-wa-link {
  color: var(--text-green);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}

.presenter-wa-link:hover {
  color: #ffffff;
}

/* RESPONSIVE BEHAVIOR */
@media (max-width: 1150px) {
  .presenter-layout-container {
    grid-template-columns: 38% 62%;
    padding: 0 24px;
    gap: 24px;
  }

  .presenter-dialogue-card {
    padding: 30px 28px;
  }

  .presenter-headline {
    font-size: 28px;
  }

  .presenter-points-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .presenter-story-track {
    height: auto;
    min-height: auto;
  }

  .presenter-sticky-frame {
    position: relative;
    height: auto;
    min-height: auto;
    padding: 60px 0;
  }

  .presenter-bg-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .presenter-bg-video,
  .presenter-bg-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    top: 0;
    left: 0;
  }

  .presenter-bg-vignette {
    background: linear-gradient(to bottom,
        rgba(6, 9, 7, 0.4) 0%,
        rgba(6, 9, 7, 0.85) 40%,
        #060907 100%);
  }

  .presenter-layout-container {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 0 20px;
  }

  .presenter-host-zone {
    height: auto;
    padding-bottom: 0;
    align-items: flex-start;
  }

  .presenter-dialogue-card {
    padding: 24px 20px;
  }

  .presenter-headline {
    font-size: 24px;
  }

  .presenter-footer-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .presenter-action-row {
    flex-direction: column;
    align-items: stretch;
  }

  .presenter-action-row .action-button {
    width: 100%;
    justify-content: center;
  }

  .presenter-wa-link {
    text-align: center;
  }
}

@media (max-width: 640px) {
  .presenter-dialogue-card {
    padding: 20px 16px;
    border-radius: 18px;
  }

  .presenter-headline {
    font-size: 21px;
    line-height: 1.25;
  }

  .presenter-speech-bubble {
    padding: 12px 14px;
  }

  .presenter-quote-text {
    font-size: 13px;
  }

  .presenter-point-item {
    font-size: 12.5px;
  }

  .presenter-wa-link {
    text-align: center;
  }
}

/* ==========================================================================
   ENHANCEMENTS: Active Nav, Scroll Hint, Floating WhatsApp & FAQ Accordion
   ========================================================================== */

/* Active Navbar highlight */
.desktop-nav a.is-active,
.mobile-nav a.is-active {
  color: var(--text-green);
  font-weight: 600;
  position: relative;
}

.desktop-nav a.is-active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
}

/* Scroll Hint Indicator on Presenter */
.presenter-scroll-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(6, 9, 7, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  padding: 6px 14px;
  color: var(--muted-foreground);
  font-size: 12px;
  font-family: var(--font-sans);
  pointer-events: none;
  z-index: 10;
  letter-spacing: 0.2px;
}

@media (max-width: 768px) {
  .presenter-scroll-hint {
    display: none;
  }
}

/* Floating WhatsApp Quick-Chat Pill */
.floating-whatsapp-pill {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25D366;
  color: #fff;
  font-weight: 600;
  font-size: 13.5px;
  padding: 10px 18px;
  border-radius: 9999px;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
}

.floating-whatsapp-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(37, 211, 102, 0.5);
  color: #fff;
}

.floating-wa-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: pulse 1.8s infinite;
}

@media (max-width: 640px) {
  .floating-whatsapp-pill {
    bottom: 20px;
    right: 16px;
    padding: 9px 15px;
    font-size: 13px;
  }
}

/* FAQ Accordion Section */
.faq-section {
  padding-top: 60px;
  padding-bottom: 80px;
}

.faq-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 860px;
  margin: 36px auto 0;
}

.faq-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.faq-card:hover {
  border-color: rgba(42, 194, 15, 0.3);
  background: rgba(255, 255, 255, 0.035);
}

.faq-card.is-open {
  border-color: rgba(42, 194, 15, 0.4);
  background: rgba(42, 194, 15, 0.025);
}

.faq-question-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: transparent;
  border: none;
  color: var(--foreground);
  font-size: 15.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.faq-question-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.faq-answer {
  padding: 0 22px 18px;
  color: var(--muted-foreground);
  font-size: 14.5px;
  line-height: 1.65;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 14px;
}

/* ==========================================================================
   PROFESSIONAL GRADE AI CHATBOT WIDGET
   ========================================================================== */

.chatbot-badge-pulse {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ff334b;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(255, 51, 75, 0.6);
  border: 2px solid #060907;
  animation: pulse 2s infinite;
}

.chatbot-dialog-wrap {
  position: fixed;
  bottom: 84px;
  right: 24px;
  width: 390px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 120px);
  background: #0d130f;
  border: 1px solid rgba(42, 194, 15, 0.28);
  border-radius: 20px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75), 0 0 24px rgba(42, 194, 15, 0.12);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: chatbotModalPop 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes chatbotModalPop {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chatbot-header {
  padding: 14px 18px;
  background: rgba(18, 26, 20, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chatbot-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chatbot-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(42, 194, 15, 0.15);
  border: 1px solid rgba(42, 194, 15, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chatbot-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chatbot-title-row h4 {
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.chatbot-live-pill {
  font-size: 10px;
  font-weight: 600;
  background: rgba(42, 194, 15, 0.2);
  color: var(--text-green);
  border: 1px solid rgba(42, 194, 15, 0.4);
  padding: 1px 7px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.chatbot-subtitle {
  font-size: 11px;
  color: var(--muted-foreground);
  margin: 0;
}

.chatbot-close-btn {
  background: transparent;
  border: none;
  color: var(--muted-foreground);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, background 0.15s ease;
}

.chatbot-close-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.chatbot-quick-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 14px;
  background: rgba(14, 20, 16, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  scrollbar-width: none;
}

.chatbot-quick-bar::-webkit-scrollbar {
  display: none;
}

.chatbot-quick-pill {
  flex-shrink: 0;
  font-size: 11.5px;
  background: rgba(255, 255, 255, 0.05);
  color: #d1d5db;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 5px 11px;
  border-radius: 9999px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  font-family: inherit;
}

.chatbot-quick-pill:hover {
  background: rgba(42, 194, 15, 0.15);
  border-color: rgba(42, 194, 15, 0.4);
  color: #fff;
}

.chatbot-messages-container {
  flex: 1;
  padding: 16px 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-behavior: smooth;
}

.chatbot-msg-row {
  display: flex;
  gap: 8px;
  max-width: 90%;
}

.chatbot-msg-row.is-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chatbot-msg-row.is-bot {
  align-self: flex-start;
}

.chatbot-bot-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.chatbot-bubble-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chatbot-bubble {
  padding: 11px 15px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  word-break: break-word;
}

.bot-bubble {
  background: rgba(255, 255, 255, 0.06);
  color: #e5e7eb;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top-left-radius: 4px;
}

.user-bubble {
  background: var(--primary);
  color: #060907;
  font-weight: 500;
  border-top-right-radius: 4px;
}

.chatbot-timestamp {
  font-size: 10px;
  color: #6b7280;
  margin-left: 4px;
}

.chatbot-msg-row.is-user .chatbot-timestamp {
  align-self: flex-end;
  margin-right: 4px;
}

.chatbot-options-rack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.chatbot-action-chip {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(42, 194, 15, 0.08);
  border: 1px solid rgba(42, 194, 15, 0.28);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  font-family: inherit;
}

.chatbot-action-chip:hover {
  background: rgba(42, 194, 15, 0.22);
  color: #ffffff;
  border-color: rgba(42, 194, 15, 0.6);
  box-shadow: 0 4px 16px rgba(42, 194, 15, 0.2), 0 0 10px rgba(42, 194, 15, 0.15);
  transform: translateY(-1px);
}

.chatbot-action-chip:hover svg {
  color: var(--text-green);
  transform: translateX(2px);
}

.chatbot-typing-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  width: fit-content;
}

.chatbot-typing-dots span {
  width: 6px;
  height: 6px;
  background: var(--primary);
  border-radius: 50%;
  animation: typingBounce 1.4s infinite ease-in-out;
}

.chatbot-typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.chatbot-typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.chatbot-input-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(18, 26, 20, 0.85);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.chatbot-input-field {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 9px 12px;
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease;
}

.chatbot-input-field:focus {
  border-color: var(--primary);
}

.chatbot-input-field::placeholder {
  color: #6b7280;
}

.chatbot-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--primary);
  color: #060907;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.chatbot-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.chatbot-send-btn:not(:disabled):hover {
  transform: scale(1.04);
}

.chatbot-footer-notice {
  padding: 6px 14px;
  background: #090e0b;
  text-align: center;
  font-size: 10px;
  color: #4b5563;
  border-top: 1px solid rgba(255, 255, 255, 0.02);
}

@media (max-width: 640px) {
  .chatbot-dialog-wrap {
    bottom: 74px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    height: 75vh;
  }
}/* Keep the existing expertise strip inside narrow viewports. */
@media(max-width:900px){.service-strip{overflow-x:auto;justify-content:flex-start;scrollbar-width:thin}}
@media(max-width:900px){html{overflow-x:clip}}

/* Center the final pair of service cards beneath the three-card row. */
@media (width > 900px) {
  #services .services-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  #services .service-card {
    grid-column: span 2;
  }

  #services .service-card:nth-child(4) {
    grid-column: 2 / span 2;
  }

  #services .service-card:nth-child(5) {
    grid-column: 4 / span 2;
  }
}/* Editorial header. Keep 88px desktop / 74px mobile height for the existing sticky scenes. */
#root #home.site-header { height: 88px; padding: 0; background: rgba(8,12,9,.96) !important; border-bottom: 1px solid #ffffff14 !important; box-shadow: none !important; z-index: 100; }
#root #home .header-inner { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 22px; width: 90%; max-width: 1440px; margin-inline: auto; height: 100%; }
#root #home .brand { gap: 10px; justify-self: start; }
#root #home .brand-logo { width: 42px; height: 46px; }
#root #home .brand-name { font-size: 20px; font-weight: 650; letter-spacing: .2px; }
#root #home .brand-name small { font-size: 8px; letter-spacing: 1.65px; color: #8f9e87; margin-top: 5px; }
#root #home .desktop-nav { display: inline-flex; align-items: center; gap: 3px; padding: 5px; border: 1px solid #ffffff15; border-radius: 100px; background: #ffffff03; }
#root #home .desktop-nav a { display: inline-flex; align-items: center; justify-content: center; padding: 10px 15px; min-height: 36px; border-radius: 100px; color: #a7b69e !important; font-size: 14px; line-height: 1.2; font-weight: 500; letter-spacing: 0; white-space: nowrap; transition: color .2s,background .2s; }
#root #home .desktop-nav a::after { display: none; }
#root #home .desktop-nav a:hover { color: #edf5e7 !important; background: #ffffff08; }
#root #home .desktop-nav a.is-active { color: #16270f !important; background: #d1edbd; }
#root #home .header-project-link { display: inline-flex; justify-self: end; align-items: center; gap: 18px; border: 1px solid rgb(var(--brand-green-rgb) / 0.2078); border-radius: 100px; padding: 6px 6px 6px 18px; color: #dbead2; font-size: 14px; font-weight: 500; white-space: nowrap; transition: background .2s,border-color .2s; }
#root #home .header-project-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-green); color: #152310; }
#root #home .header-project-link:hover { background: rgb(var(--brand-green-rgb) / 0.0627); border-color: var(--brand-green); }
#root #home .mobile-toggle { display: none; width: 42px; height: 42px; padding: 0; align-items: center; justify-content: center; border: 1px solid #ffffff20; border-radius: 50%; color: #d6e6cd; background: #ffffff03; cursor: pointer; }
#root #home :is(a,button):focus-visible { outline: 2px solid var(--brand-green); outline-offset: 4px; }
@media (max-width: 1100px) and (min-width: 1001px) { #root #home .desktop-nav a { padding-inline: 11px; } #root #home .header-inner { gap: 14px; } }
@media (max-width: 1200px) {
  #root #home .header-inner { grid-template-columns: minmax(0,1fr) auto; }
  #root #home .desktop-nav, #root #home .header-project-link { display: none; }
  #root #home .mobile-toggle { display: inline-flex; justify-self: end; }
  #root #home .mobile-nav { position: absolute; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; gap: 0; padding: 24px max(5%,calc(50% - 720px)) 28px; max-height: calc(100svh - 88px); overflow-y: auto; background: #10170e !important; border-bottom: 1px solid rgb(var(--brand-green-rgb) / 0.1882) !important; box-shadow: 0 20px 30px #0004 !important; }
  #root #home .header-menu-label { color: #8da17f; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 16px; }
  #root #home .mobile-nav > a:not(.header-mobile-project) { display: grid; grid-template-columns: 24px minmax(0,1fr) 20px; align-items: center; gap: 16px; padding: 17px 0; border-top: 1px solid #ffffff12; font-size: 20px; font-weight: 500; letter-spacing: -.5px; color: #dce8d4; }
  #root #home .header-nav-index { font-size: 10px; color: #718468; letter-spacing: .5px; }
  #root #home .mobile-nav > a.is-active { color: var(--text-green) !important; }
  #root #home .mobile-nav > a:not(.header-mobile-project):hover { color: var(--text-green); }
  #root #home .header-mobile-project { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; padding: 14px 18px; background: var(--brand-green); color: #152310 !important; border-radius: 100px; font-size: 13px; font-weight: 600; }
}
@media (max-width: 760px) {
  #root #home.site-header { height: 74px; }
  #root #home .brand-logo { width: 34px; height: 38px; }
  #root #home .brand-name { font-size: 17px; }
  #root #home .brand-name small { font-size: 7px; letter-spacing: 1.1px; }
  #root #home .mobile-nav { max-height: calc(100svh - 74px); }
}
@media (min-width: 1201px) { #root #home .mobile-nav { display: none; } }
@media (prefers-reduced-motion: reduce) { #root #home .desktop-nav a, #root #home .header-project-link { transition: none; } }

/* Mobile and tablet navigation scrolls with the page. */
@media (max-width: 1200px) {
  #root #home.site-header {
    position: relative;
    top: auto;
  }
}/* One aligned grid and a separate copyright/contact row. */
#root > .footer {
 display:block;
 padding:56px max(5%,calc(50% - 720px)) 25px;
}
#root .footer .footer-grid {
 display:grid;
 grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr) minmax(0,.7fr) minmax(0,1.2fr);
 gap:40px;
 align-items:start;
 width:100%;
}
#root .footer .footer-grid > * { min-width:0; margin:0; }
#root .footer .footer-brand-col { max-width:none; }
#root .footer .brand { display:inline-flex; align-items:center; gap:10px; margin:0; }
#root .footer .brand-logo { width:42px; height:46px; flex-shrink:0; }
#root .footer .brand-name { font-size:21px; line-height:1.2; white-space:nowrap; }
#root .footer .brand-name small { display:block; font-size:8px; letter-spacing:1.5px; margin-top:5px; }
#root .footer .footer-tagline { margin:20px 0; max-width:350px; font-size:13px!important; line-height:1.85; }
#root .footer .footer-social-row { display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap; gap:10px; margin:0; }
#root .footer .footer-social-btn { width:42px; height:42px; min-height:42px; flex:0 0 42px; padding:0; justify-content:center; }
#root .footer :is(.footer-services,.footer-links) { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0; padding:0; }
#root .footer :is(.footer-services,.footer-links,.footer-map) h3 { margin:0 0 20px; padding:0; min-height:24px; display:flex; align-items:center; font-size:12px; line-height:1.5; text-align:left; }
#root .footer :is(.footer-services,.footer-links)>a { display:flex; align-items:center; min-height:36px; padding:6px 0; margin:0; font-size:12px; line-height:1.6; text-align:left; overflow-wrap:anywhere; }
#root .footer .footer-admin-link { margin-top:8px; }
#root .footer .footer-map { width:100%; max-width:none; padding:0; }
#root .footer .footer-map-frame { width:100%; height:200px; margin:0; border-radius:10px; overflow:hidden; }
#root .footer .footer-map-frame iframe { display:block; width:100%; height:100%; border:0; }
#root .footer .footer-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px 30px; margin-top:35px; padding-top:22px; border-top:1px solid #c6f1d61c; }
#root .footer .footer-copyright { margin:0; font-size:11px!important; line-height:1.7; }
#root .footer .footer-contact-links { display:flex; flex-wrap:wrap; align-items:center; gap:8px 25px; }
#root .footer .footer-contact-links>a { min-height:32px; display:inline-flex; align-items:center; color:#9cae9f; font-size:11px; line-height:1.7; overflow-wrap:anywhere; }
#root .footer a:focus-visible { outline:2px solid #a0e5bd; outline-offset:4px; }
@media(max-width:1100px) {
 #root .footer .footer-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:38px 50px; }
 #root .footer .footer-map-frame { height:220px; }
 #root .footer .footer-bottom { align-items:flex-start; }
}
@media(max-width:600px) {
 #root > .footer { padding:36px 18px 66px; }
 #root .footer .footer-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px 25px; }
 #root .footer .footer-brand-col, #root .footer .footer-map { grid-column:1 / -1; }
 #root .footer .brand-logo { width:36px; height:40px; }
 #root .footer .brand-name { font-size:20px; }
 #root .footer .brand-name small { font-size:7px; letter-spacing:1.4px; }
 #root .footer .footer-tagline { max-width:100%; margin:18px 0; font-size:13px!important; }
 #root .footer .footer-social-btn { width:44px; height:44px; min-height:44px; flex-basis:44px; }
 #root .footer :is(.footer-services,.footer-links,.footer-map) h3 { margin-bottom:12px; font-size:12px; }
 #root .footer :is(.footer-services,.footer-links)>a { min-height:44px; font-size:12px; padding:9px 0; }
 #root .footer .footer-map-frame { height:210px; }
 #root .footer .footer-bottom { flex-direction:column; align-items:flex-start; gap:14px; margin-top:28px; padding-top:20px; }
 #root .footer .footer-copyright { font-size:11px!important; }
 #root .footer .footer-contact-links { flex-direction:column; align-items:flex-start; gap:2px; width:100%; }
 #root .footer .footer-contact-links>a { min-height:36px; font-size:12px; }
}
/* Two compact navigation columns, with the heading spanning both. */
#root .footer .footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 0;
  align-content: start;
}
#root .footer .footer-links > h3 { grid-column: 1 / -1; }
#root .footer .footer-links > a { min-width: 0; }
@media (min-width: 1101px) {
  #root .footer .footer-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.1fr);
    column-gap: 32px;
  }
}
@media (max-width: 600px) {
  #root .footer .footer-links { grid-column: 1 / -1; }
  #root .footer .footer-services { grid-column: 1 / -1; }
}/* Compact chat bubble expands towards the left; the right edge remains anchored. */
#root .floating-whatsapp-pill {
  position: fixed;
  inset: auto max(24px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) auto;
  width: 56px;
  height: 56px;
  padding: 0;
  gap: 0;
  border: 0;
  border-radius: 28px;
  justify-content: flex-start;
  cursor: pointer;
  transition: width .25s ease, transform .2s ease, box-shadow .2s ease;
}
#root .floating-wa-icon { display: grid; place-items: center; width: 56px; height: 56px; flex: 0 0 56px; }
#root .floating-wa-label { display: block; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width .25s ease, opacity .18s ease; }
#root .floating-whatsapp-pill:is(:hover,:focus-visible) { width: 172px; }
#root .floating-whatsapp-pill:is(:hover,:focus-visible) .floating-wa-label { max-width: 110px; opacity: 1; }
#root .floating-whatsapp-pill:focus-visible { outline: 2px solid var(--brand-green); outline-offset: 5px; }
#root .floating-whatsapp-pill .chatbot-badge-pulse { right: -2px; top: -2px; }
@media (prefers-reduced-motion: reduce) {
  #root .floating-whatsapp-pill, #root .floating-wa-label { transition: none; }
  #root .floating-whatsapp-pill:hover { transform: none; }
}
/* Shared shell for the five dedicated pages. Existing section designs are reused. */
.page-main { min-height: calc(100svh - 88px); outline: none; }
.interior-main > .section:first-child { padding-top: 72px; }
.interior-main h1 {
  margin: 0;
  max-width: 980px;
  font-family: var(--font-display);
  font-size: clamp(36px, 4.8vw, 64px);
  font-weight: 600;
  letter-spacing: -2px;
  line-height: 1.12;
}
.interior-main h1 em { color: var(--text-green); font-style: normal; }
.page-jump-links { display: flex; flex-wrap: wrap; gap: 16px 28px; margin: -12px 0 36px; }
.page-jump-links a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-green); }
.page-jump-links a:hover { color: var(--foreground); }
.page-loading { min-height: 60svh; display: grid; place-items: center; color: var(--muted-foreground); }
.interior-main .minimal-contact-wrap { min-height: calc(100svh - 88px); }
.interior-main .minimal-contact-content { padding-top: 72px; padding-bottom: 88px; }
.interior-main .minimal-contact-box h1 { font-size: clamp(38px, 5vw, 64px); margin-bottom: 18px; }
.not-found-page p { margin: 24px 0 32px; color: var(--muted-foreground); }
.skip-to-content { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 12px 18px; border-radius: 6px; color: #050805; background: #2ac20f; transform: translateY(-200%); }
.skip-to-content:focus { transform: translateY(0); }
#main-content, #testimonials, #faq, #about, #services, #pricing { scroll-margin-top: 0; }
@media (max-width: 760px) {
  .page-main, .interior-main .minimal-contact-wrap { min-height: calc(100svh - 74px); }
  .interior-main > .section:first-child { padding-top: 48px; }
  .interior-main h1 { font-size: clamp(34px, 7vw, 44px); letter-spacing: -1.2px; }
  .page-jump-links { margin-top: -6px; margin-bottom: 28px; font-size: 13px; }
  .interior-main .minimal-contact-content { padding: 48px 6% 64px; }
  #main-content, #testimonials, #faq, #about, #services, #pricing { scroll-margin-top: 0; }
}
@media (max-width: 1000px) {
  .site-header .desktop-nav, .site-header .header-cta { display: none; }
  .site-header .mobile-toggle { display: inline-flex; }
  .site-header .mobile-nav {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 22px;
    padding: 25px 6%;
    border-bottom: 1px solid var(--border);
    background: var(--background);
    box-shadow: var(--shadow-soft);
  }
  .site-header .mobile-nav a { font-size: 16px; color: var(--foreground); }
}
.interior-main .about-section > *, .interior-main .value-item { min-width: 0; }
.interior-main .values-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
  .footer > * { min-width: 0; max-width: none; }
  .footer .footer-map { min-width: 0; width: 100%; max-width: none; }
  .footer .footer-links { margin-top: 0; }
}
@media (max-width: 900px) {
  .interior-main .about-section { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .interior-main .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .interior-main .values-grid, .footer { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
  .interior-main .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .interior-main .impact-item { min-width: 0; }
  .interior-main .impact-item p { overflow-wrap: anywhere; }
}
/* ==========================================================================
   TALKATHON CONSULTANCY - GLOBAL PREMIUM BLURRED GLASS DESIGN SYSTEM
   Visual Identity: Deep near-black backgrounds, pure vivid Talkathon green,
   crisp white typography, and translucent dark blurred glass surfaces.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     1. Glass Surface Backgrounds (Translucent Dark Charcoal / Black Tint)
     ------------------------------------------------------------------------ */
  --glass-bg-base: linear-gradient(165deg, rgba(18, 26, 20, 0.72) 0%, rgba(8, 12, 9, 0.86) 100%);
  --glass-bg-elevated: linear-gradient(145deg, rgba(20, 30, 22, 0.82) 0%, rgba(9, 14, 10, 0.94) 100%);
  --glass-bg-highlighted: linear-gradient(165deg, rgba(42, 194, 15, 0.1) 0%, rgba(12, 18, 13, 0.9) 100%);
  --glass-bg-chip: rgba(16, 24, 18, 0.75);
  --glass-bg-nav: rgba(6, 9, 7, 0.84);
  --glass-bg-cta: radial-gradient(circle at 12% 24%, rgba(42, 194, 15, 0.1) 0%, transparent 65%), linear-gradient(145deg, rgba(16, 24, 18, 0.82) 0%, rgba(8, 12, 9, 0.94) 100%);

  /* ------------------------------------------------------------------------
     2. Glass Borders & Highlights
     ------------------------------------------------------------------------ */
  --glass-border-default: rgba(255, 255, 255, 0.08);
  --glass-border-subtle: rgba(255, 255, 255, 0.05);
  --glass-border-accent: rgba(42, 194, 15, 0.26);
  --glass-border-hover: rgba(42, 194, 15, 0.48);
  --glass-highlight-line: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  --glass-highlight-accent: inset 0 1px 0 rgba(42, 194, 15, 0.28);

  /* ------------------------------------------------------------------------
     3. Glass Blur & Radii
     ------------------------------------------------------------------------ */
  --glass-blur-sm: 10px;
  --glass-blur-default: 16px;
  --glass-blur-lg: 20px;
  --glass-radius-sm: 8px;
  --glass-radius-md: 14px;
  --glass-radius-lg: 18px;
  --glass-radius-xl: 22px;
  --glass-radius-pill: 9999px;

  /* ------------------------------------------------------------------------
     4. Depth Shadows
     ------------------------------------------------------------------------ */
  --glass-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.35);
  --glass-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.48), var(--glass-highlight-line);
  --glass-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.65), var(--glass-highlight-line);
  --glass-shadow-glow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 0 28px rgba(42, 194, 15, 0.16), var(--glass-highlight-line);
}

/* ==========================================================================
   GLOBAL BACKGROUND LANGUAGE
   Ensures seamless transitions across the whole site: deep dark base (#060907),
   subtle ambient green bloom in key zones, and zero washed-out gray.
   ========================================================================== */

html, body {
  background-color: #060907 !important;
  color: #f8fafc;
}

body {
  background: 
    radial-gradient(circle at 50% 0%, rgba(42, 194, 15, 0.07) 0%, transparent 60%),
    radial-gradient(circle at 85% 30%, rgba(42, 194, 15, 0.04) 0%, transparent 45%),
    #060907 !important;
}

/* ==========================================================================
   REUSABLE GLASS UTILITY CLASSES
   ========================================================================== */

.glass-panel {
  background: var(--glass-bg-base);
  border: 1px solid var(--glass-border-default);
  border-radius: var(--glass-radius-lg);
  box-shadow: var(--glass-shadow-md);
  backdrop-filter: blur(var(--glass-blur-default));
  -webkit-backdrop-filter: blur(var(--glass-blur-default));
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

.glass-elevated {
  background: var(--glass-bg-elevated);
  border: 1px solid var(--glass-border-accent);
  border-radius: var(--glass-radius-xl);
  box-shadow: var(--glass-shadow-lg);
  backdrop-filter: blur(var(--glass-blur-lg));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
}

.glass-highlighted {
  background: var(--glass-bg-highlighted);
  border: 1px solid var(--glass-border-accent);
  border-radius: var(--glass-radius-lg);
  box-shadow: var(--glass-shadow-glow);
  backdrop-filter: blur(var(--glass-blur-default));
  -webkit-backdrop-filter: blur(var(--glass-blur-default));
}

.glass-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--glass-bg-chip);
  border: 1px solid var(--glass-border-accent);
  border-radius: var(--glass-radius-pill);
  box-shadow: var(--glass-shadow-sm);
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
}

.glass-nav {
  background: var(--glass-bg-nav);
  border-bottom: 1px solid var(--glass-border-default);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.glass-cta {
  background: var(--glass-bg-cta);
  border: 1px solid var(--glass-border-accent);
  border-radius: var(--glass-radius-xl);
  box-shadow: var(--glass-shadow-glow);
  backdrop-filter: blur(var(--glass-blur-lg));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
}

/* ==========================================================================
   COMPONENT REFINEMENTS ACROSS THE ENTIRE WEBSITE
   ========================================================================== */

/* 1. Header / Navigation */
.site-header {
  position: sticky;
  top: 0;
  background: var(--glass-bg-nav) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45) !important;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.desktop-nav a {
  position: relative;
  transition: color 0.2s ease;
  font-weight: 500;
  color: #94a3b8 !important;
}

.desktop-nav a:hover,
.desktop-nav a.is-active {
  color: #ffffff !important;
}

.desktop-nav a.is-active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary-gradient-h);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(42, 194, 15, 0.8);
}

.mobile-nav {
  background: rgba(8, 12, 9, 0.95) !important;
  border-bottom: 1px solid var(--glass-border-accent) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7) !important;
}

/* 2. Hero Trust Strip & Pills */
.hero-trust-pill {
  background: rgba(14, 22, 16, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(42, 194, 15, 0.28) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
  transition: all 0.25s ease;
}

.hero-trust-pill:hover {
  border-color: rgba(42, 194, 15, 0.5) !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5), 0 0 16px rgba(42, 194, 15, 0.15) !important;
  transform: translateY(-2px);
}

/* 3. Service Strip (Expertise ticker) */
.service-strip {
  background: rgba(10, 15, 11, 0.85) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.service-strip span {
  color: #94a3b8 !important;
}

/* 4. About Section */
.about-section {
  background: 
    radial-gradient(circle at 10% 20%, rgba(42, 194, 15, 0.06) 0%, transparent 48%),
    radial-gradient(circle at 90% 80%, rgba(8, 142, 27, 0.05) 0%, transparent 42%),
    #060907 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.about-stat-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(10, 15, 11, 0.78) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.about-stat-card:hover {
  border-color: rgba(42, 194, 15, 0.4) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), 0 0 20px rgba(42, 194, 15, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  transform: translateY(-3px) !important;
}

.about-stat-icon {
  background: rgba(42, 194, 15, 0.14) !important;
  border: 1px solid rgba(42, 194, 15, 0.3) !important;
  box-shadow: 0 0 12px rgba(42, 194, 15, 0.2) !important;
}

.about-stat-card:hover .about-stat-icon {
  background: var(--primary-gradient-h) !important;
  color: #041a06 !important;
  box-shadow: 0 0 18px rgba(42, 194, 15, 0.5) !important;
}

.check-bullet {
  background: rgba(42, 194, 15, 0.14) !important;
  border: 1px solid rgba(42, 194, 15, 0.32) !important;
  box-shadow: 0 0 10px rgba(42, 194, 15, 0.15) !important;
}

/* 5. Core Values Cards */
.values-section {
  background: #060907 !important;
}

.value-item {
  background: linear-gradient(165deg, rgba(16, 24, 18, 0.72) 0%, rgba(8, 12, 9, 0.88) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.value-item:hover {
  border-color: rgba(42, 194, 15, 0.45) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6), 0 0 26px rgba(42, 194, 15, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.value-icon-box {
  background: rgba(42, 194, 15, 0.12) !important;
  border: 1px solid rgba(42, 194, 15, 0.28) !important;
  border-radius: 11px !important;
}

.value-item:hover .value-icon-box {
  background: var(--primary-gradient-h) !important;
  color: #041a06 !important;
  box-shadow: 0 0 18px rgba(42, 194, 15, 0.5) !important;
}

.value-tag {
  background: rgba(42, 194, 15, 0.12) !important;
  border: 1px solid rgba(42, 194, 15, 0.26) !important;
  color: var(--text-green) !important;
  backdrop-filter: blur(8px) !important;
}

/* 6. Featured Services Cards */
.service-card {
  background: linear-gradient(165deg, rgba(16, 24, 18, 0.72) 0%, rgba(8, 12, 9, 0.88) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.service-card:hover {
  border-color: rgba(42, 194, 15, 0.45) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.6), 0 0 28px rgba(42, 194, 15, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.service-card a {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--text-green) !important;
  font-weight: 500;
  transition: color 0.2s ease, transform 0.2s ease;
}

.service-card:hover a {
  color: #ffffff !important;
}

/* 7. Pricing Section & Cards */
.pricing-section {
  background: 
    radial-gradient(circle at 80% 20%, rgba(42, 194, 15, 0.06) 0%, transparent 45%),
    #060907 !important;
}

.plan-card {
  background: linear-gradient(165deg, rgba(18, 26, 20, 0.75) 0%, rgba(8, 12, 9, 0.88) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.plan-card:hover {
  border-color: rgba(42, 194, 15, 0.48) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.65), 0 0 30px rgba(42, 194, 15, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Highlighted middle tier plan card */
.plan-card:nth-child(2) {
  background: linear-gradient(165deg, rgba(42, 194, 15, 0.09) 0%, rgba(10, 16, 12, 0.92) 100%) !important;
  border-color: rgba(42, 194, 15, 0.38) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 0 28px rgba(42, 194, 15, 0.14), inset 0 1px 0 rgba(42, 194, 15, 0.25) !important;
}

.plan-tier {
  background: rgba(42, 194, 15, 0.14) !important;
  border: 1px solid rgba(42, 194, 15, 0.3) !important;
  color: var(--text-green) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 0 12px rgba(42, 194, 15, 0.12) !important;
}

.plan-card .service-features {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* 8. Testimonials Section */
.testimonials-section {
  background: #060907 !important;
}

.testimonial,
.testimonial-card {
  background: linear-gradient(165deg, rgba(20, 28, 22, 0.78) 0%, rgba(9, 13, 10, 0.92) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.testimonial:hover,
.testimonial-card:hover {
  border-color: rgba(42, 194, 15, 0.48) !important;
  background: linear-gradient(165deg, rgba(32, 48, 35, 0.82) 0%, rgba(10, 16, 11, 0.94) 100%) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.65), 0 0 30px rgba(42, 194, 15, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

.testimonial-quote-badge {
  background: rgba(42, 194, 15, 0.14) !important;
  border: 1px solid rgba(42, 194, 15, 0.32) !important;
  box-shadow: 0 2px 12px rgba(42, 194, 15, 0.2) !important;
}

.testimonial-avatar {
  background: linear-gradient(135deg, rgba(42, 194, 15, 0.35), rgba(8, 142, 27, 0.15)) !important;
  border: 1.5px solid rgba(42, 194, 15, 0.5) !important;
  box-shadow: 0 0 12px rgba(42, 194, 15, 0.25) !important;
}

.testimonial-author {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* 9. Impact Section & Cards */
.impact-item {
  background: linear-gradient(165deg, rgba(16, 24, 18, 0.6) 0%, rgba(8, 12, 9, 0.8) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.impact-item:hover {
  border-color: rgba(42, 194, 15, 0.45) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 24px rgba(42, 194, 15, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* 10. Frequently Asked Questions (FAQ) */
.faq-section {
  background: #060907 !important;
}

.faq-card {
  background: linear-gradient(165deg, rgba(16, 24, 18, 0.65) 0%, rgba(8, 12, 9, 0.82) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  transition: all 0.25s ease !important;
}

.faq-card:hover {
  border-color: rgba(42, 194, 15, 0.38) !important;
  background: linear-gradient(165deg, rgba(20, 30, 22, 0.75) 0%, rgba(9, 14, 10, 0.88) 100%) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 18px rgba(42, 194, 15, 0.08) !important;
}

.faq-card.is-open {
  background: linear-gradient(165deg, rgba(42, 194, 15, 0.08) 0%, rgba(10, 15, 11, 0.92) 100%) !important;
  border-color: rgba(42, 194, 15, 0.42) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), 0 0 24px rgba(42, 194, 15, 0.12), inset 0 1px 0 rgba(42, 194, 15, 0.2) !important;
}

.faq-answer {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* 11. Contact CTA Section & Action Panel */
.contact-section {
  background: 
    radial-gradient(circle at 15% 25%, rgba(42, 194, 15, 0.08) 0%, transparent 55%),
    #060907 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.contact-actions {
  background: linear-gradient(145deg, rgba(18, 26, 20, 0.82) 0%, rgba(8, 12, 9, 0.94) 100%) !important;
  border: 1px solid rgba(42, 194, 15, 0.25) !important;
  border-radius: 20px !important;
  padding: 32px 36px !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(42, 194, 15, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
}

.contact-actions > a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
  transition: all 0.2s ease;
}

.contact-actions > a:hover {
  color: var(--text-green) !important;
  border-color: var(--primary) !important;
}

/* 12. Footer */
.footer {
  background: #040605 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.footer-social-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(8px) !important;
}

.footer-map-frame {
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  background: rgba(14, 20, 16, 0.6) !important;
  backdrop-filter: blur(10px) !important;
}

/* 13. Back to Top Floating Button */
.back-to-top-btn {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(14, 22, 16, 0.82);
  border: 1px solid rgba(42, 194, 15, 0.3);
  color: var(--text-green);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(42, 194, 15, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.back-to-top-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top-btn:hover {
  background: var(--primary-gradient-h);
  color: #041a06;
  border-color: var(--primary);
  box-shadow: 0 10px 28px rgba(42, 194, 15, 0.5);
  transform: translateY(-3px);
}

/* 14. AI Chatbot Widget (Professional Glass Treatment) */
.chatbot-dialog-wrap {
  background: linear-gradient(150deg, rgba(16, 24, 18, 0.88) 0%, rgba(7, 11, 8, 0.96) 100%) !important;
  border: 1px solid rgba(42, 194, 15, 0.3) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75), 0 0 32px rgba(42, 194, 15, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

.chatbot-header {
  background: rgba(14, 22, 16, 0.85) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.chatbot-quick-bar {
  background: rgba(10, 16, 12, 0.6) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.chatbot-quick-pill {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(8px) !important;
}

.chatbot-quick-pill:hover {
  background: rgba(42, 194, 15, 0.16) !important;
  border-color: rgba(42, 194, 15, 0.45) !important;
  color: #ffffff !important;
}

.bot-bubble {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(10px) !important;
}

.chatbot-action-chip {
  background: rgba(42, 194, 15, 0.1) !important;
  border: 1px solid rgba(42, 194, 15, 0.3) !important;
  backdrop-filter: blur(8px) !important;
  color: #ffffff !important;
}

.chatbot-action-chip:hover {
  background: rgba(42, 194, 15, 0.22) !important;
  border-color: rgba(42, 194, 15, 0.65) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(42, 194, 15, 0.25) !important;
}

.chatbot-action-chip span {
  color: inherit !important;
}

.chatbot-input-bar {
  background: rgba(14, 22, 16, 0.85) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* 15. Dedicated Minimal Contact Page */
.minimal-contact-wrap {
  background: 
    radial-gradient(circle at 50% 15%, rgba(42, 194, 15, 0.07) 0%, transparent 60%),
    #060907 !important;
}

.minimal-contact-header {
  background: var(--glass-bg-nav) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

.minimal-back-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(8px) !important;
  transition: all 0.2s ease !important;
}

.minimal-back-btn:hover {
  border-color: rgba(42, 194, 15, 0.45) !important;
  color: #ffffff !important;
  background: rgba(42, 194, 15, 0.1) !important;
}

.minimal-contact-box {
  background: linear-gradient(150deg, rgba(18, 26, 20, 0.78) 0%, rgba(8, 12, 9, 0.92) 100%) !important;
  border: 1px solid rgba(42, 194, 15, 0.24) !important;
  border-radius: 22px !important;
  padding: 40px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65), 0 0 32px rgba(42, 194, 15, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

.minimal-channel-link {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(10px) !important;
}

.minimal-channel-link:hover {
  background: rgba(42, 194, 15, 0.12) !important;
  border-color: rgba(42, 194, 15, 0.45) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 16px rgba(42, 194, 15, 0.12) !important;
}

/* ==========================================================================
   PRIMARY CTA BUTTON STANDARD
   Preserves crisp vivid Talkathon green identity sitewide.
   ========================================================================== */

.action-button.bg-primary,
.va-actions a:first-child,
.va-actions button:first-child {
  background: var(--primary-gradient-h) !important;
  color: #041a06 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 18px rgba(34, 185, 22, 0.35) !important;
  font-weight: 600 !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.action-button.bg-primary:hover,
.va-actions a:first-child:hover,
.va-actions button:first-child:hover {
  filter: brightness(1.08) !important;
  box-shadow: 0 6px 26px rgba(42, 194, 15, 0.55) !important;
  transform: translateY(-2px) !important;
}

.action-button:focus-visible,
.va-actions a:focus-visible,
.va-tabs button:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 3px !important;
}

/* ==========================================================================
   PERFORMANCE & FALLBACK OPTIMIZATIONS
   ========================================================================== */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-panel,
  .service-card,
  .plan-card,
  .testimonial-card,
  .faq-card,
  .value-item,
  .about-stat-card,
  .contact-actions,
  .va-dashboard,
  .va-caption,
  .site-header,
  .minimal-contact-box {
    background: #0f1611 !important;
  }
}

@media (max-width: 900px) {
  :root {
    --glass-blur-default: 8px;
    --glass-blur-lg: 12px;
  }
  
  .contact-actions {
    padding: 24px 20px !important;
  }
  
  .minimal-contact-box {
    padding: 24px 20px !important;
  }
}
/* Shared editorial design. Home motion, sizing, positions and scroll stages stay in their existing styles. */
#root { --site-ink: #080c09; --site-text: #f3f5f0; --site-muted: #9ca89e; --site-lime: var(--brand-green); --site-paper: #edf0e7; }
#root > .site-header { background: rgba(8,12,9,.94) !important; border-bottom: 1px solid #ffffff18 !important; box-shadow: none !important; }
#root .site-header .desktop-nav a { font-size: 12px; letter-spacing: .2px; }
#root .site-header .desktop-nav a.is-active { color: var(--text-green) !important; }
#root .site-header .mobile-nav { background: #10170e !important; }
#root .site-header .action-button, #main-content .action-button.bg-primary, #main-content .va-actions :is(a,button):first-child {
  background: var(--site-lime) !important; color: #10200b !important; border-color: transparent !important; border-radius: 100px; box-shadow: none !important;
}
#root .site-header .action-button:hover, #main-content .action-button.bg-primary:hover { background: var(--brand-green) !important; }
#main-content .action-button:not(.bg-primary) { border-radius: 100px; }
#main-content.home-main .hero-heading h1 { letter-spacing: -.055em; font-weight: 500; }
#main-content.home-main .hero-heading h1 span { color: var(--text-green); }
#main-content.home-main .eyebrow { color: #b4c7a7; }
#main-content.home-main .hero-trust-pill { background: #192117 !important; border-color: #ffffff20 !important; box-shadow: none !important; }
#main-content.home-main .service-strip { background: #10180e; border-color: #ffffff18; color: #b8c7b0; }
#main-content.home-main .contact-section { background: var(--brand-green) !important; color: #16270f; border-color: transparent !important; }
#main-content.home-main .contact-section :is(h2, p, a, .section-kicker, .contact-address) { color: #24391b; }
#main-content.home-main .contact-section h2 span { color: #16270f; font-family: Georgia, serif; font-style: italic; }
#main-content.home-main .contact-section .section-kicker::before { background: #26431b; }
#main-content.home-main .contact-section .action-button.bg-primary { background: #152310 !important; color: #e8f6df !important; }
#main-content.interior-main { color: var(--site-text); background: var(--site-ink); }
#main-content.interior-main > .section { padding: 80px max(5%, calc(50% - 720px)); }
#main-content.interior-main > .section:first-child { padding-top: 56px; }
#main-content.interior-main > .section h1 { font-size: clamp(44px, 5.6vw, 82px); font-weight: 500; line-height: 1.06; letter-spacing: -.06em; max-width: 1100px; }
#main-content.interior-main > .section h1 em { color: var(--text-green); }
#main-content.interior-main > .section h2 { font-size: clamp(34px, 3.8vw, 58px); font-weight: 500; line-height: 1.12; letter-spacing: -.055em; }
#main-content.interior-main .section-kicker { font-size: 10px; letter-spacing: 1.7px; color: #becdb5; margin-bottom: 24px; }
#main-content.interior-main .section-intro { margin-bottom: 32px; }
#main-content.interior-main .page-jump-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0 0 48px; padding-top: 24px; border-top: 1px solid #ffffff18; }
#main-content.interior-main .page-jump-links a { color: #c4d4bb; font-size: 12px; }
#main-content.interior-main :is(.service-card,.plan-card) { background: linear-gradient(145deg,#192117,#0e140d) !important; border: 1px solid #ffffff18 !important; border-radius: 16px !important; box-shadow: none !important; backdrop-filter: none !important; }
#main-content.interior-main .service-card { min-height: 310px; padding: 32px; }
#main-content.interior-main :is(.service-card,.plan-card):hover { border-color: rgb(var(--brand-green-rgb) / 0.4392) !important; box-shadow: none !important; }
#main-content.interior-main .service-icon { color: var(--text-green); }
#main-content.interior-main .service-number { color: #819476; }
#main-content.interior-main .service-card h3 { font-size: 25px; font-weight: 500; letter-spacing: -.8px; }
#main-content.interior-main .service-card p { color: var(--site-muted); font-size: 14px; line-height: 1.8; }
#main-content.interior-main .service-card a { color: var(--text-green) !important; border-top-color: #ffffff18; font-size: 12px; }
/* A light section gives customer stories the same contrast as the About story. */
#main-content.interior-main .testimonials-section { background: var(--site-paper) !important; color: #182218; }
#main-content.interior-main .testimonials-section :is(h2, .section-kicker) { color: #182218; }
#main-content.interior-main .testimonials-section h2 em { color: #6e7f69; }
#main-content.interior-main .testimonial-card { background: transparent !important; border: 1px solid #18221825 !important; box-shadow: none !important; border-radius: 12px !important; padding: 30px; }
#main-content.interior-main .testimonial-card::before { display: none; }
#main-content.interior-main .testimonial-card :is(blockquote, .testimonial-meta strong) { color: #263524 !important; }
#main-content.interior-main .testimonial-meta span { color: #64705e !important; }
#main-content.interior-main :is(.testimonial-quote-badge,.testimonial-avatar) { background: #dce7d2 !important; color: #365b26 !important; border-color: #365b2630 !important; box-shadow: none !important; }
#main-content.interior-main .testimonial-stars { color: var(--text-green) !important; }
#main-content.interior-main .plan-group { margin-top: 64px; }
#main-content.interior-main .plan-group-title { font-size: clamp(21px,2.3vw,30px); font-weight: 500; letter-spacing: -.7px; padding-bottom: 22px; border-bottom: 1px solid #ffffff18; margin-bottom: 24px; }
#main-content.interior-main .plan-card { padding: 32px; }
#main-content.interior-main .plan-card:nth-child(2) { background: linear-gradient(145deg,#25351b,#142010) !important; border-color: rgb(var(--brand-green-rgb) / 0.4392) !important; }
#main-content.interior-main .plan-tier { background: rgb(var(--brand-green-rgb) / 0.0627) !important; color: var(--text-green) !important; border-color: rgb(var(--brand-green-rgb) / 0.1882) !important; border-radius: 100px; box-shadow: none !important; letter-spacing: 1.4px; font-size: 10px; }
#main-content.interior-main .plan-price { color: #f3f5f0; font-size: clamp(30px,3vw,44px); font-weight: 500; letter-spacing: -1.5px; }
#main-content.interior-main .plan-price small { color: var(--site-muted); font-size: 12px; letter-spacing: 0; }
#main-content.interior-main .service-features { border-color: #ffffff18 !important; }
#main-content.interior-main .service-features li { color: #bbc7b5; font-size: 13px; line-height: 1.7; }
#main-content.interior-main .service-features svg { color: var(--text-green); flex-shrink: 0; }
#main-content.interior-main .more-services { background: var(--brand-green); color: #16270f; border-radius: 12px; padding: 32px; margin-top: 56px; }
#main-content.interior-main .more-services .action-button { background: #152310 !important; color: #e8f6df !important; border-color: transparent !important; }
#main-content.interior-main .faq-section { background: #11190f !important; }
#main-content.interior-main .faq-grid { max-width: 1000px; margin-left: auto; }
#main-content.interior-main .faq-card { background: transparent !important; border: 0 !important; border-top: 1px solid #ffffff20 !important; border-radius: 0 !important; box-shadow: none !important; }
#main-content.interior-main .faq-card:last-child { border-bottom: 1px solid #ffffff20 !important; }
#main-content.interior-main .faq-card.is-open { background: #ffffff03 !important; }
#main-content.interior-main .faq-question-btn { font-weight: 500; padding: 26px 12px; font-size: 16px; letter-spacing: -.3px; }
#main-content.interior-main .faq-answer p { color: var(--site-muted); font-size: 14px; line-height: 1.8; }
/* Contact retains its existing fields, validation, WhatsApp submission and success state. */
#main-content.interior-main .minimal-contact-wrap { background: var(--site-ink) !important; }
#main-content.interior-main .minimal-contact-content { width: 90%; max-width: 1440px; margin: auto; padding: 64px 0 80px; }
#main-content.interior-main .minimal-contact-box { width: 100%; max-width: none; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 44px 80px; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; }
#main-content.interior-main .contact-overview { min-width: 0; }
#main-content.interior-main .minimal-contact-box h1 { font-size: clamp(56px,6.5vw,100px); margin-bottom: 28px; }
#main-content.interior-main .minimal-contact-desc { max-width: 430px; font-size: 16px; line-height: 1.8; color: var(--site-muted); }
#main-content.interior-main .minimal-channels { margin-top: 40px; gap: 0; }
#main-content.interior-main .minimal-channel-link { background: transparent !important; border: 0 !important; border-top: 1px solid #ffffff20 !important; border-radius: 0; padding: 22px 0; box-shadow: none !important; backdrop-filter: none !important; min-width: 0; }
#main-content.interior-main .minimal-channel-link strong { color: #d7e8cd; overflow-wrap: anywhere; }
#main-content.interior-main .minimal-channel-link span { color: var(--site-muted); }
#main-content.interior-main .contact-form-panel { align-self: start; padding: 36px; background: #edf0e7; color: #182218; border-radius: 16px; min-width: 0; }
#main-content.interior-main .minimal-field label { color: #263524; font-size: 12px; font-weight: 600; }
#main-content.interior-main .minimal-field :is(input,textarea) { background: #ffffff80 !important; border: 1px solid #18221830 !important; color: #182218 !important; border-radius: 8px; padding: 14px 16px; box-shadow: none; }
#main-content.interior-main .minimal-field :is(input,textarea)::placeholder { color: #73806d; }
#main-content.interior-main .minimal-field :is(input,textarea):focus { outline: 2px solid #517e38; outline-offset: 2px; }
#main-content.interior-main .contact-form-panel .action-button.bg-primary { background: #152310 !important; color: #e8f6df !important; }
#main-content.interior-main .minimal-success :is(h3,p) { color: #263524; }
#main-content.interior-main .minimal-reset-btn { color: #365b26; }
#main-content.interior-main .minimal-office-foot { grid-column: 1 / -1; border-top: 1px solid #ffffff18; padding-top: 24px; margin-top: 0; text-align: left; }
#root > .footer { background: #080c09 !important; border-top: 1px solid #ffffff18 !important; box-shadow: none !important; padding-block: 64px; }
#root .footer h3 { font-size: 12px; font-weight: 500; color: #dcebd3; letter-spacing: .3px; }
#root .footer :is(.footer-tagline,.footer-copyright,.footer-services a,.footer-links a) { color: #9ca89e !important; font-size: 12px; line-height: 1.9; }
#root .footer :is(.footer-services a,.footer-links a):hover { color: var(--text-green) !important; }
#root .footer-social-btn { background: #192117 !important; color: var(--text-green) !important; border: 1px solid #ffffff18 !important; box-shadow: none !important; border-radius: 50%; }
#root .footer-map-frame { border: 1px solid #ffffff18; border-radius: 12px; overflow: hidden; }
#main-content.interior-main :is(a,button):focus-visible, #root .site-header :is(a,button):focus-visible { outline: 2px solid var(--brand-green); outline-offset: 4px; }
@media (max-width: 1000px) {
  #main-content.interior-main .minimal-contact-box { gap: 40px; }
  #main-content.interior-main .contact-form-panel { padding: 28px; }
  #main-content.interior-main .plan-card { padding: 24px; }
}
@media (max-width: 760px) {
  #main-content.interior-main > .section { padding-block: 52px; }
  #main-content.interior-main > .section:first-child { padding-top: 40px; }
  #main-content.interior-main > .section h1 { font-size: clamp(38px,7.2vw,56px); }
  #main-content.interior-main .page-jump-links { margin-bottom: 32px; }
  #main-content.interior-main .minimal-contact-box { grid-template-columns: minmax(0,1fr); gap: 32px; }
  #main-content.interior-main .minimal-contact-content { padding-block: 40px 52px; }
  #main-content.interior-main .minimal-contact-box h1 { font-size: 64px; }
  #main-content.interior-main .contact-form-panel { padding: 24px; }
  #main-content.interior-main .service-card { min-height: 280px; padding: 26px; }
  #main-content.interior-main .plan-group { margin-top: 40px; }
  #main-content.interior-main .more-services { padding: 26px; }
  #main-content.interior-main .faq-question-btn { font-size: 14px; padding-block: 22px; }
  #root > .footer { padding-block: 44px; }
}
/* Circular back-to-top control at every breakpoint. */
#root .back-to-top-btn { border-radius: 50%; }
/* Home refresh. Keep 3D scene, camera, canvas, transforms and scroll geometry unchanged. */
#main-content.home-main { color: #f3f5f0; background: #080c09; }
#main-content.home-main .hero { background: #080c09 !important; }
#main-content.home-main .hero-heading h1 { color: #f3f5f0; font-family: var(--font-display); font-weight: 500; letter-spacing: -.055em; }
#main-content.home-main .hero-heading h1 span { color: var(--text-green) !important; background: none !important; -webkit-text-fill-color: var(--brand-green) !important; }
#main-content.home-main .hero-heading .eyebrow { color: #b2c5a7; letter-spacing: 1.7px; font-size: 10px; }
#main-content.home-main .hero-heading .status-dot { background: var(--brand-green); box-shadow: 0 0 12px rgb(var(--brand-green-rgb) / 0.1882); }
#main-content.home-main .hero-trust-pill { color: #b6c4ad !important; background: #ffffff05 !important; border-color: #ffffff20 !important; box-shadow: none !important; }
#main-content.home-main .hero-trust-pill strong { color: #e5eedf; }
#main-content.home-main .hero-trust-pill .trust-dot { background: var(--brand-green); }
#main-content.home-main .hero-cta .action-button:not(.bg-primary) { background: transparent !important; border-color: #ffffff30 !important; color: #d1dfc7 !important; box-shadow: none !important; }
#main-content.home-main .service-strip { background: #11190f !important; border-color: #ffffff15 !important; box-shadow: none !important; }
#main-content.home-main .service-strip span { color: #b7c7ad !important; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; }
#main-content .guide-section { --guide-green: #48772e; color: #182218; background: #edf0e7; }
#main-content .guide-header h2 { color: #182218; font-weight: 500; letter-spacing: -.05em; }
#main-content .guide-header p { color: #64705e; }
#main-content .guide-content h3 { color: #263524; font-weight: 500; letter-spacing: -.04em; }
#main-content .guide-description { color: #64705e; }
#main-content .guide-features li { color: #354a2c; }
#main-content .guide-target.is-highlighted { color: #365c23; background: none; }
#main-content .guide-voice { background: #ffffff70; color: #38532b; border-color: #18221825; border-radius: 100px; }
#main-content .guide-voice:hover, #main-content .guide-voice[aria-pressed=true] { background: #dfe9d6; border-color: #48772e80; }
#main-content .guide-actions .action-button.bg-primary { background: #152310 !important; color: #e8f6df !important; }
#main-content .guide-actions a:last-child {
  color: #426333;
  padding: 10px 16px;
  border-radius: 100px;
  transition: background-color .2s ease, color .2s ease;
}
#main-content .guide-actions a:last-child:hover,
#main-content .guide-actions a:last-child:focus-visible {
  color: #152310;
  background-color: var(--brand-green);
}
@media (prefers-reduced-motion: reduce) {
  #main-content .guide-actions a:last-child { transition: none; }
}
#main-content .guide-navigation { border-color: #18221825; }
#main-content .guide-navigation button { color: #263524; border-color: #18221830; background: #ffffff60; }
#main-content .guide-progress, #main-content .guide-narration { color: #64705e; }
#main-content.home-main .contact-section { background: var(--brand-green) !important; }
#main-content.home-main .contact-section h2 { font-weight: 500; letter-spacing: -.055em; }
#main-content.home-main .contact-section h2 span { color: #16270f; font-family: Georgia, serif; font-style: italic; }
#main-content.home-main .contact-section .contact-address svg { color: #365b26; }
@media (max-width: 760px) {
  #main-content.home-main .hero-heading .eyebrow { font-size: 9px; letter-spacing: 1px; }
  #main-content.home-main .hero-trust-pill { font-size: 10px; }
}

/* Contact details sit on a dark card within the light green section. */
#main-content.home-main .contact-section .contact-actions {
  background: #152310 !important;
  border-color: #ffffff20 !important;
  box-shadow: 0 16px 36px #16270f25 !important;
}
#main-content.home-main .contact-section .contact-actions .contact-address {
  color: #d6e5cd;
  font-size: 13px;
  line-height: 1.8;
}
#main-content.home-main .contact-section .contact-actions :is(a, .contact-address svg) {
  color: #e8f6df !important;
}
#main-content.home-main .contact-section .contact-actions .action-button.bg-primary {
  background: var(--brand-green) !important;
  color: #10200b !important;
}
#main-content.home-main .contact-section .contact-actions a:hover {
  color: var(--text-green) !important;
}/* Logo palette: use these stops for every branded green treatment. */
:root {
  --brand-green: #24c600;
  --brand-green-rgb: 36 198 0;
  --brand-green-deep: #007b19;
  --brand-gradient: linear-gradient(135deg, var(--brand-green), var(--brand-green-deep));
  --primary: var(--brand-green);
  --primary-light: var(--brand-green);
  --primary-deep: var(--brand-green-deep);
  --primary-dark: var(--brand-green-deep);
  --primary-gradient: var(--brand-gradient);
  --primary-gradient-h: linear-gradient(90deg, var(--brand-green), var(--brand-green-deep));
  --accent: var(--brand-green-deep);
  --mint: var(--brand-green);
  --scene-primary: var(--brand-green);
  --scene-accent: var(--brand-green-deep);
}

#root { --site-lime: var(--brand-green); }
#main-content .guide-section { --guide-green: var(--brand-green-deep); }

#root .site-header .action-button,
#root #home .header-project-icon,
#root #home .header-mobile-project,
#root #home .desktop-nav a.is-active,
#main-content .action-button.bg-primary,
#main-content .guide-actions .action-button.bg-primary,
#main-content.interior-main .contact-form-panel .action-button.bg-primary,
#main-content .va-actions :is(a, button):first-child,
#main-content .ab-button,
#root .floating-whatsapp-pill,
#root .back-to-top-btn {
  background: var(--brand-gradient) !important;
  color: #041a06 !important;
}

#root .site-header .action-button:hover,
#main-content .action-button.bg-primary:hover,
#main-content .ab-button:hover {
  background: var(--brand-gradient) !important;
  filter: brightness(1.08);
}

#main-content.home-main .hero-heading h1 span,
#main-content.interior-main > .section h1 em,
#main-content .ab-hero h1 > span {
  background: var(--brand-gradient) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

#main-content.home-main .contact-section,
#main-content.interior-main .more-services {
  background: var(--brand-gradient) !important;
}

/* Keep copy readable at both ends of the green gradient. */
#main-content.home-main .contact-section :is(h2, p, a, span, .section-kicker, .contact-address),
#main-content.interior-main .more-services {
  color: #041a06 !important;
}
#main-content.home-main .contact-section .action-button.bg-primary,
#main-content.interior-main .more-services .action-button {
  background: #041a06 !important;
  color: #fff !important;
}
/* Visual layer only: preserve scene sizing, sticky geometry and journey timelines. */
:root {
  --premium-ink: #030806;
  --premium-text: #f4faf6;
  --premium-muted: #adbbb2;
  --premium-green: #39f58a;
  --premium-border: rgba(134, 255, 182, .17);
  --premium-surface: linear-gradient(145deg, rgba(23, 43, 32, .76), rgba(4, 13, 9, .84));
  --premium-shadow: inset 0 1px 0 #ffffff15, 0 16px 40px #0005, 0 0 28px #20ff7409;
  --premium-blur: 14px;
  --scene-primary: #39f58a;
  --scene-accent: #087e44;
  --scene-paper: #0b2118;
  --scene-ink: #bed6c8;
  --scene-line: #37644c;
}
body, #root { background: var(--premium-ink); color: var(--premium-text); }
#root { --site-ink: var(--premium-ink); --site-text: var(--premium-text); --site-muted: var(--premium-muted); }
/* Keep the header's original 88px / 74px footprint for scroll calculations. */
#root #home.site-header {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
#root #home .header-inner {
  height: calc(100% - 16px); margin-block: 8px; padding-inline: 22px;
  border: 1px solid #b5ffcf1c; border-radius: 999px;
  background: linear-gradient(120deg, #061009e8, #07100bd9, #030806ed);
  box-shadow: inset 0 1px 0 #ffffff07, 0 12px 38px #0004, 0 0 30px #28f38305;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
#root #home .desktop-nav {
  background: linear-gradient(180deg, #ffffff04, #ffffff01); border-color: #b5ffcf16;
  box-shadow: inset 0 1px 8px #d4ffe80a, 0 0 15px #20ff7405;
}
#root #home .desktop-nav a { color: #b7c3bc !important; }
#root #home .desktop-nav a.is-active {
  color: #f5fff8 !important; background: linear-gradient(150deg, #0a3625, #168143) !important;
  box-shadow: inset 0 0 12px #39f58a50, inset 0 1px 0 #a5ffd762, 0 0 18px #1af87520;
}
#root #home .header-project-link { background: #07130ca3; color: #f4faf6; border-color: #39f58a55; box-shadow: inset 0 1px 0 #ffffff0c; }
#root #home .header-project-icon { background: var(--premium-green) !important; box-shadow: 0 0 16px #39f58a50; }
#root #home .mobile-nav { background: #06120bf5 !important; border: 1px solid var(--premium-border); border-radius: 22px; }
#main-content.home-main, #main-content.interior-main, #main-content .about-redesign, #main-content .blog-page { background: var(--premium-ink); }
#main-content.home-main .hero {
  background: radial-gradient(ellipse at 50% 70%, #0c3c202d, transparent 48%), var(--premium-ink) !important;
}
#main-content.home-main .hero-heading h1 { color: #f7faf8; font-weight: 600; letter-spacing: -.048em; text-shadow: 0 2px 18px #0003; }
#main-content.home-main .hero-heading h1 span {
  background: linear-gradient(110deg, #08f47c, #5ce98b, #10d66a) !important;
  background-clip: text !important; -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: var(--text-green) !important;
}
#main-content.home-main .hero-heading .eyebrow { color: #a6b9ab; letter-spacing: 2px; }
#main-content.home-main .hero-heading .status-dot { background: #ff284a; box-shadow: 0 0 12px #ff284a80; }
.hero-atmosphere { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -2; }
.hero-atmosphere i { display: block; position: absolute; pointer-events: none; }
.hero-orbit { width: 74%; height: 125%; border: 1px solid #25ea7433; border-radius: 50%; box-shadow: 0 0 10px #1aff6810; }
.hero-orbit-left { left: -58%; top: 2%; transform: rotate(-25deg); }
.hero-orbit-right { right: -55%; top: -1%; transform: rotate(30deg); border-style: dashed; }
.hero-planet { width: 42%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 80% 24%, #0f462a55, #021009 50%, #020805 75%); border: 1px solid #3eff8a4d; box-shadow: inset -2px 2px 12px #3eff8a22, 0 0 30px #14ff7710; }
.hero-planet-left { left: -23%; top: 36%; }
.hero-planet-right { right: -25%; top: 65%; }
.hero-horizon { width: 146%; height: 46%; left: -23%; bottom: -29%; border-radius: 50% 50% 0 0; border-top: 1px solid #4cff9f8a; background: radial-gradient(ellipse at 50% 0%, #0b3828b0, #030806 63%); box-shadow: 0 -3px 22px #19f87a26, inset 0 5px 20px #12c96716; }
.hero-sphere { width: 42px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 28% 20%, #a9eacb55, #09251b 25%, #020705 65%); box-shadow: inset 1px 2px 2px #d4ffe880, inset -1px -1px 3px #18e97280, 0 0 20px #12e87809; animation: premium-float 9s ease-in-out infinite; }
.hero-sphere-one { left: 6%; top: 55%; }
.hero-sphere-two { right: 7.5%; top: 34%; width: 46px; box-shadow: inset 1px 2px 2px #d4ffe880, inset -2px -1px 2px #ff284ab0; animation-delay: -3s; }
.hero-sphere-three { right: 11%; top: 57%; width: 34px; animation-delay: -6s; }
#main-content.home-main .hero-trust-pill {
  background: linear-gradient(135deg, #0b1b1080, #020705ad) !important;
  border-color: #b9ffcf29 !important; color: #bdc9c1 !important;
  box-shadow: inset 0 1px 0 #ffffff08, 0 8px 20px #0003 !important;
}
#main-content.home-main .hero-trust-pill strong { color: #f3faf6; }
#main-content.home-main .hero-trust-pill .trust-dot { background: var(--premium-green); box-shadow: 0 0 9px #39f58a88; }
#main-content.home-main .hero-trust-pill:nth-child(2) .trust-dot { background: #ff284a; box-shadow: 0 0 9px #ff284a66; }
/* Shared surfaces, deliberately exclude the assistant's canvas and animation targets. */
#root #main-content :is(.service-card, .plan-card, .testimonial-card, .faq-card, .value-item, .about-stat-card, .impact-item, .contact-actions, .contact-form-panel, .service-detail-panel, .ab-expertise, .blog-card),
#root .premium-glass {
  background: var(--premium-surface) !important; border: 1px solid var(--premium-border) !important;
  border-radius: 22px !important; box-shadow: var(--premium-shadow) !important;
  backdrop-filter: blur(var(--premium-blur)) !important; -webkit-backdrop-filter: blur(var(--premium-blur)) !important;
  color: var(--premium-text);
}
#root #main-content :is(.service-card, .plan-card, .faq-card, .blog-card):hover { border-color: #39f58a60 !important; box-shadow: var(--premium-shadow), 0 0 24px #20ff7410 !important; }
#root #main-content .plan-card:nth-child(2) { border-color: #39f58a66 !important; background: linear-gradient(145deg, #173e29c9, #04110be8) !important; }
#root #main-content :is(.guide-section, .testimonials-section, .contact-section, .more-services) {
  background: radial-gradient(ellipse at 15% 20%, #125c3026, transparent 65%), var(--premium-ink) !important;
  color: var(--premium-text) !important;
}
#root #main-content :is(.guide-section, .testimonials-section, .contact-section, .more-services) :is(h2, h3, blockquote, .testimonial-meta strong, .section-kicker, .guide-features li, .contact-address, a, span) { color: var(--premium-text) !important; }
#root #main-content :is(.guide-section, .testimonials-section, .contact-section) :is(p, .guide-description, .guide-progress, .guide-narration, .testimonial-meta span) { color: var(--premium-muted) !important; }
#root #main-content .guide-section { --guide-green: var(--premium-green); }
#root #main-content :is(.guide-voice, .guide-navigation button) { color: var(--text-green); background: #12302188; border-color: var(--premium-border); }
#root #main-content .guide-actions a:last-child:hover { background: #1d6b3d80; color: #fff; }
#root #main-content .contact-section h2 span { font-family: inherit; font-style: normal; color: var(--text-green) !important; }
#root #main-content .service-detail-panel :is(h2, li),
#root #main-content .contact-form-panel :is(label, h3),
#root #main-content .minimal-success :is(h3, p) { color: var(--premium-text) !important; }
#root #main-content .service-detail-panel :is(p, h3, .service-panel-eyebrow, .service-panel-count) { color: var(--premium-muted); }
#root #main-content .service-panel-icon { color: var(--text-green); background: #39f58a12; }
#root #main-content .service-panel-body { border-color: var(--premium-border); }
#root #main-content .minimal-field :is(input, textarea) { background: #020a06b3 !important; border-color: #a5ffca33 !important; color: #f4faf6 !important; }
#root #main-content .minimal-field :is(input, textarea)::placeholder { color: #8da798; }
#root #main-content .minimal-field :is(input, textarea):focus { outline-color: var(--premium-green); }
#root #main-content .action-button.bg-primary, #root #main-content .ab-button {
  background: linear-gradient(135deg, #47f991, #14ba63) !important; color: #03180b !important;
  border-color: #82ffba66 !important; box-shadow: inset 0 1px 0 #d0ffe966, 0 5px 20px #16d56a24 !important;
}
#root #main-content .action-button.bg-primary :is(span, svg) { color: #03180b !important; }
#root #main-content .action-button.bg-primary:hover { filter: brightness(1.08); box-shadow: 0 0 25px #39f58a40 !important; }
#root .floating-whatsapp-pill { box-shadow: 0 0 28px #39f58a33; }
#root .chatbot-dialog-wrap { background: var(--premium-surface) !important; border-color: var(--premium-border) !important; }
#root > .footer { background: #020604 !important; }
@keyframes premium-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 900px) {
  :root { --premium-blur: 6px; }
  #root #home .header-inner { padding-inline: 16px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .hero-sphere { width: 24px; }
  .hero-sphere-two { width: 30px; right: 3%; }
  .hero-sphere-three { width: 20px; right: 4%; }
  .hero-planet { width: 70%; }
  .hero-planet-left { left: -53%; }
  .hero-planet-right { right: -54%; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --premium-surface: linear-gradient(145deg, #11231a, #061009); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-sphere { animation: none; }
  #root #home :is(a, button), #root #main-content :is(.action-button, .service-card, .plan-card, .faq-card, .blog-card) { transition: none !important; }
}
/* Interior chapters keep the same layout with a continuous dark atmosphere. */
#root #main-content :is(.ab-story, .ab-values-section, .blog-reading) { background: radial-gradient(ellipse at 10% 0%, #125c3026, transparent 70%), var(--premium-ink); color: var(--premium-text); }
#root #main-content :is(.ab-story, .ab-values-section, .blog-reading) :is(h2, h3, .ab-story-lead, .ab-text-link) { color: var(--premium-text); }
#root #main-content :is(.ab-story, .ab-values-section, .blog-reading) :is(p, .ab-metric > span, .ab-value-detail) { color: var(--premium-muted); }
#root #main-content :is(.ab-metrics, .ab-metric, .ab-value-detail, .ab-text-link, .blog-article) { border-color: var(--premium-border); }
#root #main-content .ab-value-card { background: var(--premium-surface); border-color: var(--premium-border); border-radius: 22px; box-shadow: var(--premium-shadow); }
#root #main-content .ab-value-icon { color: var(--text-green); background: #39f58a12; }
#root #main-content #services .service-panel-approach { background: #39f58a08; border-color: var(--premium-border); }
#root #main-content #services .service-panel-approach p { color: var(--premium-muted); }
#root #main-content #services .service-choice[aria-pressed="true"] { background: linear-gradient(145deg, #12472d, #0b261b); color: #f4faf6; border-color: #39f58a70; box-shadow: inset 0 1px 0 #ffffff14, 0 0 22px #20ff7410; }
#root #main-content #services .service-choice[aria-pressed="true"] :is(.service-choice-number, .service-choice-arrow) { color: var(--text-green); }
#root .floating-whatsapp-pill { background: var(--premium-green) !important; color: #03180b !important; }
/* Reference refinement: broad reflected light, layered orbital depth and a raised horizon. */
#main-content.home-main .hero { background: radial-gradient(ellipse at 50% 62%, #0d432032, transparent 43%), radial-gradient(ellipse at 50% 100%, #06261666, transparent 60%), #020705 !important; }
.hero-orbit-left { width: 80%; height: 130%; left: -59%; top: -4%; transform: rotate(-30deg); border-color: #26e17a30; }
.hero-orbit-right { width: 90%; height: 135%; right: -64%; top: -1%; transform: rotate(35deg); border-style: solid; border-color: #26e17a26; }
.hero-orbit-left::after { content: ''; position: absolute; width: 92%; height: 86%; inset: 19% 0 0 13%; border: 1px dashed #56f59b25; border-radius: 50%; }
.hero-planet-left { top: 35%; left: -24%; background: radial-gradient(ellipse at 78% 20%, #10533260, #02130b 47%, #020705 73%); }
.hero-planet-right { top: 61%; right: -25%; }
.hero-horizon { bottom: -23%; height: 46%; border-top-color: #67ffadba; background: radial-gradient(ellipse at 50% 0%, #10442ba8, #020705 66%); box-shadow: 0 -2px 5px #3bff9a55, 0 -10px 38px #12d96824, inset 0 7px 24px #23f4841b; }
.hero-atmosphere::before { content: ''; position: absolute; width: 48%; height: 28%; left: 26%; top: 47%; background: radial-gradient(ellipse, #18ff6b17, transparent 66%); }
.hero-atmosphere::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 8% 18%, #0ae77655 0 2px, #0ae77612 5px, transparent 11px), radial-gradient(circle at 18% 48%, #4fffaa 0 1px, #25ed7250 2px, transparent 5px), radial-gradient(circle at 14% 78%, #9bffc6 0 1px, #25ed7250 2px, transparent 6px); }
@media (min-width: 1001px) {
  #main-content.home-main .hero { height: calc(100svh - 88px); min-height: 600px; }
  #main-content.home-main .hero-scene { inset: 205px 0 105px; }
  #main-content.home-main .hero-heading h1 span { display: block; }
}
@media (min-width: 1001px) and (max-height: 800px) {
  #main-content.home-main .stage-heading { top: 44px; }
  #main-content.home-main .hero-heading h1 { font-size: clamp(42px, 4.65vw, 62px); line-height: 1.02; margin-top: 18px; }
  #main-content.home-main .hero-scene { inset: 185px 0 95px; }
}
#root #home .header-inner { width: 84%; }
@media (min-width: 1001px) {
  #main-content.home-main .hero-scene { inset: 170px 0 70px; }
  .hero-atmosphere::before { width: 36%; height: 38%; left: 32%; top: 37%; background: radial-gradient(ellipse at 60% 58%, #1eff791f, transparent 58%); }
}
@media (max-width: 1200px) { #root #home .header-inner { width: 90%; } }
/* A bounded fluid headline prevents the old 1500px rule from creating a third line. */
@media (min-width: 1001px) {
  #main-content.home-main .stage-heading { left: 4%; right: 4%; }
  #main-content.home-main .hero-heading h1 {
    width: 100%; max-width: 1440px; margin: 18px auto 0;
    font-size: clamp(42px, 4.5vw, 72px); line-height: 1.08;
    letter-spacing: -.048em; text-align: center; text-wrap: initial;
  }
  #main-content.home-main .hero-heading h1 span { display: block; white-space: nowrap; }
  #main-content.home-main .hero-scene { top: clamp(190px, 25svh, 250px); bottom: 70px; }
}
/* Restrained surfaces for content cards and closing calls to action. */
#root #main-content :is(.ab-contact-inner, .blog-contact, .more-services) {
  background: radial-gradient(ellipse at 100% 0%, #173b252e, transparent 65%), linear-gradient(135deg, #0d1711, #060c08) !important;
  border: 1px solid #b5e6c51f !important;
  border-radius: 20px;
  box-shadow: inset 0 1px 0 #ffffff08 !important;
  color: #f1f6f2 !important;
}
#root #main-content .ab-contact-inner { padding: clamp(28px, 4.5vw, 64px); }
#root #main-content :is(.ab-contact-inner, .blog-contact, .more-services) :is(h2, h3) { color: #f1f6f2 !important; }
#root #main-content .ab-contact-inner h2 { font-size: clamp(34px, 4vw, 60px); line-height: 1.12; letter-spacing: -.045em; max-width: 960px; }
#root #main-content .ab-contact-inner h2 span { font-family: inherit; font-style: normal; font-weight: inherit; color: var(--text-green); }
#root #main-content .ab-contact-inner .ab-eyebrow,
#root #main-content .blog-contact .blog-eyebrow { color: #a6b8ac; font-size: 10px; letter-spacing: 1.7px; }
#root #main-content .ab-contact-inner .ab-dot { background: #51e591; box-shadow: 0 0 10px #51e59126; }
#root #main-content .ab-contact-inner p { color: #a5b6ab; line-height: 1.85; }
#root #main-content .ab-contact-bottom { display: grid; grid-template-columns: minmax(0, 1fr); }
#root #main-content .ab-contact-bottom .ab-button { justify-self: center; }
@media (min-width: 1001px) {
  #root #main-content .ab-contact-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; }
  #root #main-content .ab-contact-inner > .ab-eyebrow,
  #root #main-content .ab-contact-inner > h2 { grid-column: 1; }
  #root #main-content .ab-contact-bottom { display: contents; }
  #root #main-content .ab-contact-bottom p { grid-column: 1; margin-top: 40px; }
  #root #main-content .ab-contact-bottom .ab-button { grid-column: 2; grid-row: 1 / 4; align-self: center; justify-self: end; }
}
#root #main-content :is(.blog-contact > a, .more-services .action-button) {
  background: #183625 !important; color: #e1f9e9 !important; border: 1px solid #65d18c40 !important; box-shadow: none !important;
}
#root #main-content :is(.blog-contact > a, .more-services .action-button):hover { background: #214832 !important; border-color: #65d18c80 !important; }
#root #main-content.interior-main :is(.service-card, .plan-card, .service-detail-panel),
#root #main-content.interior-main .plan-card:nth-child(2) {
  background: linear-gradient(145deg, #101b14, #09110c) !important;
  border: 1px solid #b5e6c51c !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 #ffffff05 !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
#root #main-content.interior-main .plan-card:nth-child(2) { border-color: #51e59145 !important; }
#root #main-content.interior-main :is(.service-card, .plan-card):hover { border-color: #51e59150 !important; box-shadow: inset 0 1px 0 #ffffff08 !important; }
#root #main-content.interior-main .plan-tier { background: transparent !important; border: 0 !important; padding-left: 0; color: var(--text-green) !important; box-shadow: none !important; }
#root #main-content.interior-main .plan-price { color: #f1f6f2; font-weight: 550; }
#root #main-content.interior-main .service-features { color: #b2c1b7; }
#root #main-content.interior-main .plan-card .action-button.bg-primary {
  background: #173f29 !important; color: #e0fbe9 !important; border-color: #65d18c40 !important; box-shadow: none !important;
}
#root #main-content.interior-main .plan-card .action-button.bg-primary :is(span, svg) { color: inherit !important; }
#root #main-content.interior-main .plan-card .action-button.bg-primary:hover { background: #215636 !important; box-shadow: none !important; }
@media (max-width: 760px) {
  #root #main-content .ab-contact-bottom { flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 28px; }
  #root #main-content .ab-contact-inner h2 { font-size: clamp(30px, 7.6vw, 42px); }
  #root #main-content .blog-contact { padding: 28px 24px; }
}
/* Transparent liquid glass: faint reflections over the existing dark navigation. */
#root #home .desktop-nav a.is-active {
  color: #f4faf6 !important;
  background: radial-gradient(ellipse at 30% 0%, rgba(255,255,255,.24), transparent 64%), linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.035) 48%, rgba(255,255,255,.075)) !important;
  border: 1px solid rgba(255,255,255,.29);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.48), inset 1px 0 1px rgba(255,255,255,.1), inset 0 -1px 0 rgba(255,255,255,.08), 0 3px 10px rgba(0,0,0,.16);
  backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%);
}
#root #home .desktop-nav a.is-active:hover { background: linear-gradient(145deg, rgba(255,255,255,.19), rgba(255,255,255,.06) 48%, rgba(255,255,255,.1)) !important; }
/* Match the full sticky header to the transparent liquid-glass navigation. */
#root #home .header-inner {
  background: radial-gradient(ellipse at 24% 0%, rgba(255,255,255,.09), transparent 58%), linear-gradient(155deg, rgba(22,31,26,.82), rgba(5,13,9,.72) 55%, rgba(21,30,25,.78)) !important;
  border: 1px solid rgba(231,255,241,.18);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.045), 0 8px 26px rgba(0,0,0,.17);
  backdrop-filter: blur(32px) saturate(140%); -webkit-backdrop-filter: blur(32px) saturate(140%);
}
#root #home .desktop-nav {
  background: linear-gradient(155deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  border-color: rgba(255,255,255,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
@media (max-width: 900px) {
  #root #home .header-inner { backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #root #home .header-inner { background: #101a14 !important; }
}
/* Borderless navigation group; retain the active tab's liquid-glass highlight. */
#root #home .desktop-nav { border-color: transparent; box-shadow: none; }
/* Shrink the visible glass surface while preserving the header's layout footprint. */
#root #home .header-inner {
  width: 90%; height: 80px; margin-block: 4px; max-width: 1480px;
  transition: width .3s ease, max-width .3s ease, height .3s ease, margin .3s ease;
}
#root #home.is-compact .header-inner { width: 86%; max-width: 1340px; height: 60px; margin-block: 8px; }
#root #home .brand-logo { transition: width .3s ease, height .3s ease; }
#root #home.is-compact .brand-logo { width: 36px; height: 40px; }
#root #home .desktop-nav a { transition: padding .3s ease, min-height .3s ease, color .2s ease, background .2s ease; }
#root #home.is-compact .desktop-nav a { min-height: 32px; padding-block: 8px; }
@media (max-width: 1200px) {
  #root #home.is-compact .header-inner { width: 90%; }
}
@media (max-width: 760px) {
  #root #home .header-inner { height: 64px; margin-block: 5px; }
  #root #home.is-compact .header-inner { height: 54px; margin-block: 6px; }
  #root #home.is-compact .brand-logo { width: 30px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  #root #home :is(.header-inner, .brand-logo, .desktop-nav a) { transition: none; }
}
/* Match the project CTA to the header's glossy transparent glass. */
#root #home .header-project-link {
  background: radial-gradient(ellipse at 25% 0%, rgba(255,255,255,.16), transparent 64%), linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025) 52%, rgba(255,255,255,.06));
  color: #f4faf6; border-color: rgba(255,255,255,.24);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.32), inset 0 -1px 0 rgba(255,255,255,.06), 0 3px 12px rgba(0,0,0,.12);
  backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%);
}
#root #home .header-project-link:hover { background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); border-color: rgba(255,255,255,.4); }
/* One persistent glass indicator glides between real navigation links. */
#root #home .desktop-nav { position: relative; isolation: isolate; }
#root #home .desktop-nav a { position: relative; z-index: 1; border: 1px solid transparent; }
#root #home .desktop-nav a.is-active,
#root #home .desktop-nav a.is-active:hover { background: transparent !important; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
#root #home .nav-glass-indicator {
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;
  width: var(--nav-pill-width, 0px); height: var(--nav-pill-height, 0px);
  transform: translate(var(--nav-pill-x, 0px), var(--nav-pill-y, 0px));
  border-radius: 999px; border: 1px solid #ffffff4a;
  background: radial-gradient(ellipse at 30% 0%, #ffffff3d, transparent 64%), linear-gradient(145deg, #ffffff21, #ffffff09 48%, #ffffff13);
  box-shadow: inset 0 1px 1px #ffffff7a, inset 1px 0 1px #ffffff1a, inset 0 -1px 0 #ffffff14, 0 3px 10px #00000029;
  backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%);
  opacity: 0;
  transition: transform .46s cubic-bezier(.22,1.18,.36,1), width .46s cubic-bezier(.22,1.18,.36,1), height .3s ease, opacity .15s ease;
}
#root #home .desktop-nav[data-pill-visible="true"] .nav-glass-indicator { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #root #home .nav-glass-indicator { transition: none; } }
/* A continuous liquid surface stretches and carries a reflection as it flows between tabs. */
#root #home .desktop-nav { overflow: visible; }
#root #home .nav-glass-indicator {
  background: none; border: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: transform .62s cubic-bezier(.22,.75,.25,1), width .62s cubic-bezier(.22,.75,.25,1), height .3s ease, opacity .15s ease;
}
#root #home .nav-liquid-surface {
  position: absolute; inset: 0; display: block; border-radius: 999px; overflow: hidden;
  border: 1px solid #ffffff45;
  background: radial-gradient(ellipse at 25% 0%, #ffffff38, transparent 65%), linear-gradient(145deg, #ffffff1f, #ffffff08 50%, #ffffff12);
  box-shadow: inset 0 1px 1px #ffffff70, inset 0 -1px 1px #ffffff10, 0 3px 10px #00000026;
  backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%);
}
#root #home .nav-liquid-sheen {
  position: absolute; display: block; inset: -20% -35%; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 28%, #ffffff04 38%, #ffffff35 49%, #ffffff09 60%, transparent 72%);
  filter: blur(2px);
}
@media (prefers-reduced-motion: reduce) { #root #home .nav-glass-indicator { transition: none; } }
/* Keep the expanded header dimensions at every scroll position, with a top inset. */
#root #home.site-header { top: 12px; }
#root #home.is-compact .header-inner { width: 90%; max-width: 1480px; height: 80px; margin-block: 4px; }
#root #home.is-compact .brand-logo { width: 42px; height: 46px; }
#root #home.is-compact .desktop-nav a { min-height: 36px; padding-block: 10px; }
@media (max-width: 760px) {
  #root #home.site-header { top: 8px; }
  #root #home.is-compact .header-inner { height: 64px; margin-block: 5px; }
  #root #home.is-compact .brand-logo { width: 34px; height: 38px; }
}
/* Shared liquid-glass system, matched to the homepage header. */
#root #main-content .guide-section .guide-content {
  padding: clamp(20px, 2.5vw, 36px);
  border: 1px solid #d4ffe62b;
  border-radius: 24px;
  background: radial-gradient(ellipse at 12% 0%, #c7ffe50b, transparent 65%), linear-gradient(145deg, #213b2d52, #06110b70 58%, #13291c50);
  box-shadow: inset 0 1px 0 #ffffff1c, 0 16px 40px #00000026;
}
.guide-card-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  color: #adbbb2;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.guide-card-label span { color: var(--text-green); white-space: nowrap; }
.guide-card-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.guide-card-icon { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; color: var(--text-green); background: #d4ffe60a; }
.guide-card-count { color: #adbbb2; font-size: 21px; letter-spacing: -.06em; }
.guide-card-count small { font-size: 11px; letter-spacing: 0; color: #8fa18d; }
#root #main-content .guide-section .guide-content h3 { font-size: clamp(28px, 2.7vw, 44px); margin-bottom: 18px; }
#root #main-content .guide-section .guide-description { font-size: 14px; line-height: 1.8; margin-bottom: 0; }
.guide-card-body { display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px; margin-top: 26px; padding-top: 24px; border-top: 1px solid #ffffff08; }
.guide-card-body h4 { font-size: 10px; line-height: 1.5; letter-spacing: .05em; text-transform: uppercase; color: #adbbb2; margin: 0 0 18px; font-weight: 600; }
#root #main-content .guide-card-body .guide-features { margin: 0; gap: 16px; }
#root #main-content .guide-card-body .guide-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; line-height: 1.7; }
.guide-card-body .guide-features li::before { display: none; }
.guide-card-body .guide-features svg { flex-shrink: 0; color: var(--text-green); margin-top: 3px; }
.guide-card-approach { padding: 20px; border: 1px solid #e8fff021; border-radius: 12px; background: #ffffff03; }
.guide-card-approach p { margin: 0; font-size: 12px; line-height: 1.85; color: #adbbb2; }
#root #main-content .guide-card-footer { justify-content: space-between; flex-wrap: wrap; gap: 16px; border-top: 1px solid #ffffff08; margin-top: 26px; padding-top: 24px; }
#root #main-content .guide-card-footer a:first-child { font-size: 12px; padding: 12px 18px; }
#root #main-content .guide-card-footer a:last-child { display: inline-flex; align-items: center; gap: 12px; color: var(--text-green); font-size: 12px; }
@media (min-width: 761px) and (min-height: 561px) {
  #root #main-content .guide-section .guide-details { max-height: calc(100svh - 230px); overflow-y: auto; padding: 2px 4px 2px 0; }
}
@media (max-width: 1100px), (max-height: 700px) {
  .guide-card-body { grid-template-columns: 1fr; gap: 20px; }
  .guide-card-top { margin-bottom: 18px; }
  .guide-card-icon { width: 48px; height: 48px; border-radius: 14px; }
}
@media (max-width: 760px), (max-height: 560px) {
  #root #main-content .guide-section .guide-content { padding: 18px; border-radius: 18px; }
  .guide-card-label { margin-bottom: 12px; font-size: 9px; }
}
:root {
  --site-glass-fill: radial-gradient(ellipse at 20% 0%, #ffffff0e, transparent 60%), linear-gradient(145deg, #24382d66, #08140e70 55%, #15261b66);
  --site-glass-edge: #e8fff02b;
  --site-glass-shadow: inset 0 1px 1px #ffffff26, inset 0 -1px 0 #ffffff07, 0 12px 32px #00000026;
  --site-glass-blur: 16px;
}
#root #main-content.interior-main,
#root #main-content :is(.about-redesign, .blog-page, .minimal-contact-wrap) {
  background: radial-gradient(ellipse at 90% 12%, #0e54252b, transparent 40%), radial-gradient(ellipse at 0% 65%, #1451361f, transparent 42%), #030806 !important;
}
#root #main-content :is(.ab-story, .ab-values-section, .ab-approach, .blog-reading, .testimonials-section, .faq-section, .guide-section, .contact-section) {
  background: linear-gradient(135deg, #12302113, #06100a08) !important;
}
#root #main-content #services .service-detail-panel,
#root #main-content.interior-main :is(.service-card, .plan-card, .testimonial-card, .faq-card, .contact-form-panel, .ab-expertise, .ab-value-card, .ab-contact-inner, .blog-card, .blog-contact, .more-services),
#root #main-content.interior-main .plan-card:nth-child(2),
#root #main-content.home-main .contact-actions {
  background: var(--site-glass-fill) !important;
  border: 1px solid var(--site-glass-edge) !important;
  border-radius: 22px !important;
  box-shadow: var(--site-glass-shadow) !important;
  backdrop-filter: blur(var(--site-glass-blur)) saturate(125%) !important;
  -webkit-backdrop-filter: blur(var(--site-glass-blur)) saturate(125%) !important;
  color: #f1f7f3;
}
#root #main-content.interior-main :is(.service-card, .plan-card, .blog-card, .faq-card):hover {
  border-color: #e8fff04a !important; box-shadow: var(--site-glass-shadow), 0 0 24px #48ee8c08 !important;
}
#root #main-content.interior-main .plan-card:nth-child(2) { border-color: #6cf0a151 !important; }
#root #main-content #services .service-choice,
#root #main-content :is(.minimal-channel-link, .guide-voice, .guide-navigation button, .ab-expertise-support, .service-panel-approach) {
  background: linear-gradient(145deg, #ffffff08, #ffffff02) !important;
  border-color: #e8fff025 !important; box-shadow: inset 0 1px 0 #ffffff0c !important; color: #d3e3d9;
}
#root #main-content #services .service-choice[aria-pressed="true"] {
  background: radial-gradient(ellipse at 20% 0%, #ffffff20, transparent 70%), linear-gradient(145deg, #a5f5c518, #ffffff06) !important;
  border-color: #dcffe64d !important; color: #f4faf6; box-shadow: inset 0 1px 0 #ffffff3b !important;
}
#root #main-content .blog-card-featured .blog-card-art { background: radial-gradient(ellipse at 80% 10%, #3be58b20, transparent 70%), #ffffff03; color: var(--text-green); }
#root #main-content :is(.ab-value-icon, .service-panel-icon, .testimonial-avatar, .testimonial-quote-badge) { background: #d4ffe60a !important; border-color: #e8fff020 !important; color: var(--text-green) !important; }
#root #main-content :is(.minimal-field input, .minimal-field textarea) {
  background: linear-gradient(145deg, #ffffff08, #0000001a) !important;
  border: 1px solid #e8fff02b !important; box-shadow: inset 0 1px 2px #00000026 !important; color: #f4faf6 !important;
}
#root #main-content :is(.minimal-field input, .minimal-field textarea):focus { outline: 2px solid #9ee8bd; outline-offset: 3px; }
#root #main-content :is(.action-button, .ab-button, .service-panel-cta, .blog-contact > a),
#root #main-content.interior-main .plan-card .action-button.bg-primary,
#root #main-content.interior-main .more-services .action-button {
  background: radial-gradient(ellipse at 25% 0%, #ffffff1f, transparent 65%), linear-gradient(145deg, #c0ffdc13, #ffffff04) !important;
  color: #f1f9f4 !important; border: 1px solid #e8fff038 !important;
  box-shadow: inset 0 1px 1px #ffffff30, inset 0 -1px 0 #ffffff08, 0 4px 14px #0000001f !important;
}
#root #main-content .action-button.bg-primary :is(span, svg),
#root #main-content.interior-main .plan-card .action-button.bg-primary :is(span, svg) { color: #f1f9f4 !important; }
#root #main-content :is(.action-button, .ab-button, .service-panel-cta, .blog-contact > a):hover,
#root #main-content.interior-main .plan-card .action-button.bg-primary:hover {
  background: linear-gradient(145deg, #eafff321, #eafff30a) !important; border-color: #e8fff061 !important; box-shadow: inset 0 1px 1px #ffffff38, 0 4px 14px #00000026 !important;
}
#root > .footer { background: linear-gradient(145deg, #13271b52, #030806b3) !important; border-top: 1px solid #e8fff021 !important; box-shadow: inset 0 1px 0 #ffffff05 !important; }
#root :is(.footer-social-btn, .back-to-top-btn, .chatbot-quick-pill, .chatbot-action-chip) { background: linear-gradient(145deg, #ffffff0d, #ffffff03) !important; border: 1px solid #e8fff029 !important; box-shadow: inset 0 1px 0 #ffffff14 !important; color: #d9f6e5 !important; }
#root .chatbot-dialog-wrap { background: var(--site-glass-fill) !important; border-color: var(--site-glass-edge) !important; box-shadow: var(--site-glass-shadow) !important; backdrop-filter: blur(var(--site-glass-blur)) saturate(125%) !important; -webkit-backdrop-filter: blur(var(--site-glass-blur)) saturate(125%) !important; }
@media (max-width: 900px) { :root { --site-glass-blur: 6px; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --site-glass-fill: linear-gradient(145deg, #15271d, #09130d); } }
/* Primary CTA labels remain readable over translucent surfaces. */
#root #main-content .action-button.bg-primary,
#root #main-content .ab-button { color: #f1f9f4 !important; }
#root #main-content .minimal-reset-btn { color: var(--text-green); }
/* Layered site atmosphere visible through the translucent content surfaces. */
/* Extend interior page scenery behind the floating header. */
#root #main-content.interior-main {
  margin-top: -88px;
  padding-top: 88px;
}
@media (max-width: 760px) {
  #root #main-content.interior-main {
    margin-top: -74px;
    padding-top: 74px;
  }
}
body {
  background: radial-gradient(ellipse at 12% 12%, #183d2c70, transparent 46%), radial-gradient(ellipse at 88% 55%, #153b274a, transparent 48%), linear-gradient(145deg, #07120c, #020705 65%);
}
#root {
  background: transparent;
  --site-glass-fill: radial-gradient(ellipse at 16% 0%, #c7ffe50b, transparent 65%), linear-gradient(145deg, #213b2d52, #06110b42 58%, #13291c38);
}
#root #main-content.interior-main,
#root #main-content :is(.about-redesign, .blog-page, .minimal-contact-wrap) {
  background: radial-gradient(ellipse at 10% 4%, #25533b32, transparent 42%), radial-gradient(ellipse at 96% 46%, #16472d25, transparent 45%), linear-gradient(145deg, #06110bc2, #020705c7) !important;
}
#root #main-content :is(.ab-story, .ab-values-section, .ab-approach, .blog-reading, .testimonials-section, .faq-section, .guide-section, .contact-section) {
  background: linear-gradient(135deg, #18352516, #06100a08) !important;
}
#root > .footer { background: linear-gradient(145deg, #142a1e66, #03080685) !important; }
/* Match the Plans header and its surrounding area to the black page surface. */
#root #main-content.interior-main[data-page="/plans"] {
  background: #030806 !important;
}
#root:has(#main-content[data-page="/plans"]) #home .header-inner {
  background: radial-gradient(ellipse at 24% 0%, #ffffff12, transparent 58%), linear-gradient(155deg, #181818f2, #060606ed 55%, #141414f2) !important;
  border-color: #ffffff26;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
/* One material for cards and controls throughout the site. */
#root { --control-glass-fill: var(--site-glass-fill); }
#root #main-content[class] :is(button:not(.faq-question-btn), .action-button, .ab-button, .service-panel-cta, .minimal-channel-link, .blog-contact > a),
#root #main-content .action-button.bg-primary,
#root #main-content.interior-main .plan-card .action-button.bg-primary,
#root #main-content.interior-main .more-services .action-button,
#root #home :is(.header-project-link, .mobile-toggle, .header-mobile-project),
#root :is(.floating-whatsapp-pill, .back-to-top-btn, .footer-social-btn, .chatbot-quick-pill, .chatbot-action-chip, .chatbot-input-bar button, .chatbot-header button) {
  background: var(--control-glass-fill) !important;
  border: 1px solid var(--site-glass-edge) !important;
  box-shadow: var(--site-glass-shadow) !important;
  backdrop-filter: blur(var(--site-glass-blur)) saturate(125%) !important;
  -webkit-backdrop-filter: blur(var(--site-glass-blur)) saturate(125%) !important;
  color: #edf9f2 !important;
}
#root #main-content[class] :is(button:not(.faq-question-btn), .action-button, .ab-button, .service-panel-cta, .blog-contact > a):hover,
#root #main-content.interior-main .plan-card .action-button.bg-primary:hover,
#root #home .header-project-link:hover {
  background: radial-gradient(ellipse at 20% 0%, #ffffff1a, transparent 65%), var(--control-glass-fill) !important;
  border-color: #e8fff054 !important;
  box-shadow: var(--site-glass-shadow) !important;
}
#root #main-content[class] :is(button, .action-button, .ab-button, .service-panel-cta):focus-visible,
#root :is(.floating-whatsapp-pill, .back-to-top-btn):focus-visible { outline: 2px solid #c0f9d8; outline-offset: 4px; }
#root #main-content[class] button:disabled { opacity: .5; cursor: not-allowed; }
#root #main-content :is(.value-item, .about-stat-card, .impact-item, .ab-expertise-support) {
  background: var(--site-glass-fill) !important; border-color: var(--site-glass-edge) !important;
  box-shadow: var(--site-glass-shadow) !important;
  backdrop-filter: blur(var(--site-glass-blur)) saturate(125%) !important;
  -webkit-backdrop-filter: blur(var(--site-glass-blur)) saturate(125%) !important;
}

/* One emerald shade for all green typography, including formerly gradient headings. */
:root { --text-green: #51e591; }
#root #main-content.home-main .hero-heading h1 span,
#root #main-content.interior-main > .section h1 em,
#root #main-content .ab-hero h1 > span,
#root #main-content .blog-page h1 span {
  background: none !important; color: var(--text-green) !important;
  -webkit-text-fill-color: var(--text-green) !important;
}
/* Contact page: balanced columns and individually padded glass contact links. */
#root #main-content[data-page="/contact"] .minimal-contact-content {
  width: 90%; max-width: 1240px; padding: clamp(40px, 5vw, 72px) 0 64px; margin-inline: auto;
}
#root #main-content[data-page="/contact"] .minimal-contact-box { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 36px 64px; align-items: start; }
#root #main-content[data-page="/contact"] .minimal-contact-box h1 { font-size: clamp(52px, 5.5vw, 80px); line-height: 1.08; margin: 22px 0 24px; letter-spacing: -.05em; }
#root #main-content[data-page="/contact"] .minimal-contact-desc { max-width: 460px; margin-bottom: 0; line-height: 1.75; }
#root #main-content[data-page="/contact"] .minimal-channels { display: grid; gap: 12px; margin: 30px 0 0; }
#root #main-content[data-page="/contact"] .minimal-channel-link {
  display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 5px 16px;
  padding: 16px 20px; border: 1px solid var(--site-glass-edge) !important;
  border-radius: 16px; min-height: 78px;
  background: var(--site-glass-fill) !important; box-shadow: var(--site-glass-shadow) !important;
}
#root #main-content[data-page="/contact"] .minimal-channel-link > span { width: auto; font-size: 10px; letter-spacing: 1px; line-height: 1.4; color: #a5b6ad; }
#root #main-content[data-page="/contact"] .minimal-channel-link > strong { grid-column: 1; min-width: 0; font-size: 14px; line-height: 1.5; font-weight: 500; color: #edf9f2; overflow-wrap: anywhere; }
#root #main-content[data-page="/contact"] .minimal-link-arrow { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--text-green); }
#root #main-content[data-page="/contact"] .contact-form-panel { width: 100%; min-width: 0; padding: 32px; }
#root #main-content[data-page="/contact"] .minimal-form { gap: 20px; }
#root #main-content[data-page="/contact"] .minimal-field { gap: 8px; }
#root #main-content[data-page="/contact"] .minimal-field label { color: #e0eae4; }
#root #main-content[data-page="/contact"] .minimal-field textarea { min-height: 144px; resize: vertical; }
#root #main-content[data-page="/contact"] .minimal-submit { min-height: 48px; margin-top: 2px; }
#root #main-content[data-page="/contact"] .minimal-office-foot { margin-top: 0; padding-top: 22px; line-height: 1.8; }
#root #main-content[data-page="/contact"] .minimal-success { min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(24px, 5vw, 48px) clamp(16px, 3vw, 32px); border-color: #b5ffcf24; background: #0c21143d; border-radius: 22px; }
#root #main-content[data-page="/contact"] .minimal-success p { max-width: 420px; font-size: 14px; line-height: 1.65; }
#root #main-content[data-page="/contact"] .contact-success-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 320px; margin-top: 6px; }
#root #main-content[data-page="/contact"] .contact-success-actions .action-button { width: 100%; min-height: 48px; padding: 12px 20px; }
#root #main-content[data-page="/contact"] .contact-success-actions .minimal-reset-btn { width: auto; min-height: 44px; margin: 0; padding: 10px 16px; border: 0 !important; border-radius: 999px; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; color: #b7cabe !important; font: inherit; font-size: 13px; text-decoration: none; cursor: pointer; }
#root #main-content[data-page="/contact"] .contact-success-actions .minimal-reset-btn:hover { color: #fff !important; background: #ffffff08 !important; }
@media (max-width: 900px) {
  #root #main-content[data-page="/contact"] .minimal-contact-box { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  #root #main-content[data-page="/contact"] .minimal-contact-content { max-width: 640px; }
}
@media (max-width: 480px) {
  #root #main-content[data-page="/contact"] .contact-form-panel { padding: 24px 20px; }
  #root #main-content[data-page="/contact"] .minimal-channel-link { padding: 16px; }
  #root #main-content[data-page="/contact"] .minimal-contact-box h1 { font-size: 52px; }
}
/* All heading emphasis uses the shared emerald, including formerly grey subtitles. */
#root #main-content :is(h1, h2, h3) :is(span, em) {
  color: var(--text-green) !important;
  -webkit-text-fill-color: var(--text-green) !important;
}
/* Phone and tablet adaptations; desktop hero and animation timelines stay intact. */
.cta-mobile { display: none; }
@media (max-width: 1200px) {
  #root { --responsive-inset: clamp(16px, 4vw, 36px); }
  #root #home .mobile-toggle { min-width: 44px; min-height: 44px; }
  #root #home .mobile-nav { left: 5%; right: 5%; padding: 22px 24px; max-height: calc(100dvh - 112px); overscroll-behavior: contain; }
  #root #main-content :is(.action-button, .ab-button, .service-panel-cta, .guide-voice) { min-height: 44px; }
  #root #main-content :is(.minimal-field input, .minimal-field textarea) { font-size: 16px; }
  #root #main-content :is(.section, .ab-wrap, .blog-wrap, .minimal-contact-content, .contact-overview, .contact-form-panel, .service-detail-panel) { min-width: 0; }
  #main-content :is(section[id], article[id], div[id]) { scroll-margin-top: 108px; }
  #root .chatbot-dialog-wrap { max-height: calc(100dvh - 112px); }
  #root .chatbot-input-bar input { font-size: 16px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  #root #main-content .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  #root #main-content .blog-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #root #main-content .blog-card-featured { grid-column: 1 / -1; }
  #root #main-content .ab-value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #root #main-content .ab-value-card:last-child { grid-column: 1 / -1; }
}
/* Tablet service stage: keep the presenter beside the content, rather than
   anchoring it to the bottom of a tall portrait viewport. */
@media (min-width: 761px) and (max-width: 1200px) and (min-height: 561px) {
  #root #main-content .guide-sticky {
    height: calc(100svh - 88px); padding: 28px 28px 72px;
    display: flex; flex-direction: column;
  }
  #root #main-content .guide-header { align-items: start; gap: 20px; margin-bottom: 28px; }
  #root #main-content .guide-header h2 { font-size: clamp(30px, 3.6vw, 40px); }
  #root #main-content .guide-header p { font-size: 14px; max-width: 440px; }
  #root #main-content .guide-voice { flex-shrink: 0; font-size: 12px; }
  #root #main-content .guide-stage {
    flex: 0 1 auto; display: grid; grid-template-columns: minmax(0, .36fr) minmax(0, .64fr);
    gap: 24px; align-items: center; min-height: 0; overflow: visible;
    margin-top: clamp(12px, 3svh, 36px);
  }
  #root #main-content .guide-avatar {
    position: relative; left: auto; bottom: auto; width: 100%; min-width: 0;
    max-width: 300px; justify-self: center; align-self: center;
  }
  #root #main-content .guide-details {
    width: auto; min-width: 0; margin: 0; padding: 24px;
    border: 1px solid #ffffff18; border-radius: 24px;
    background: linear-gradient(145deg, #16332355, #07120c88);
  }
  #root #main-content .guide-content { min-height: 0; }
  #root #main-content .guide-content h3 { font-size: clamp(28px, 3.5vw, 38px); margin-bottom: 18px; }
  #root #main-content .guide-description { font-size: 15px; line-height: 1.65; margin-bottom: 22px; }
  #root #main-content .guide-features { gap: 12px; margin-bottom: 24px; }
  #root #main-content .guide-features li { font-size: 14px; }
  #root #main-content .guide-actions { gap: 20px; flex-wrap: wrap; }
  #root #main-content .guide-navigation { margin-top: 24px; gap: 12px; }
  #root #main-content .guide-navigation button { min-height: 44px; min-width: 44px; }
  #root #main-content .guide-narration { display: none; height: auto; margin-top: 16px; }
  #root #main-content .guide-narration.is-active { display: block; }
}
@media (min-width: 761px) and (max-width: 1200px) and (min-height: 561px) and (max-height: 800px) {
  #root #main-content .guide-sticky { padding-top: 18px; }
  #root #main-content .guide-header { margin-bottom: 16px; }
  #root #main-content .guide-stage { margin-top: 0; }
  #root #main-content .guide-details { padding: 18px; }
  #root #main-content .guide-description { margin-bottom: 16px; font-size: 14px; }
  #root #main-content .guide-features { gap: 8px; margin-bottom: 16px; }
  #root #main-content .guide-navigation { margin-top: 16px; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  #root #main-content .ab-hero-grid, #root #main-content .blog-intro-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  #root #main-content .ab-expertise { max-width: none; width: 100%; }
  #root #main-content .blog-reading-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  #root #main-content #services .service-explorer { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  #root #main-content #services .service-selector-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #root #main-content #services .service-choice { gap: 10px; padding: 18px 14px; }
  #root #main-content #services .service-choice > span:not(.service-choice-number) { font-size: 17px; }
  #root #main-content #services .service-selector-help { display: none; }
}
@media (max-width: 760px) {
  #root #home .mobile-nav { max-height: calc(100dvh - 94px); padding: 20px; }
  #root #main-content.interior-main > .section { padding-inline: var(--responsive-inset); }
  #root #main-content :is(.ab-wrap, .blog-wrap, .minimal-contact-content) { width: calc(100% - 2 * var(--responsive-inset)); }
  #root #main-content .services-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  #root #main-content .ab-value-grid, #root #main-content .blog-cards { grid-template-columns: minmax(0, 1fr); }
  #root #main-content .ab-value-card:last-child, #root #main-content .blog-card-featured { grid-column: auto; }
  #root #main-content :is(.ab-actions, .guide-actions, .service-panel-footer, .page-jump-links) { flex-wrap: wrap; }
  #root #main-content .plan-card { padding: 26px 22px; }
  #root #main-content .guide-voice { padding-inline: 12px; }
  #root #main-content .guide-sticky { top: 82px; }
  #root #main-content .guide-navigation { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 4px; align-items: center; }
  #root #main-content .guide-navigation button { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
  #root #main-content .guide-progress { text-align: center; font-size: 9px; letter-spacing: 0; }
  #root #main-content .hero-cta { width: calc(100% - 32px); justify-content: center; gap: 8px; white-space: normal; }
  #root #main-content .hero-cta .action-button { padding-inline: 14px; font-size: 12px; text-align: center; }
  #root #main-content .minimal-contact-box h1 { overflow-wrap: break-word; }
  #root .footer { padding-inline: var(--responsive-inset); gap: 30px; }
  #root .footer :is(.footer-links a, .footer-services a, .footer-social-btn) { min-height: 44px; display: inline-flex; align-items: center; }
  #root .footer-map-frame { height: 220px; }
  #root .chatbot-dialog-wrap { left: 12px; right: 12px; width: auto; max-width: none; bottom: calc(82px + env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - 110px - env(safe-area-inset-bottom, 0px)); }
  #root .floating-whatsapp-pill { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); right: 16px; }
  #main-content :is(section[id], article[id], div[id]) { scroll-margin-top: 94px; }
}
@media (max-width: 360px) {
  #root #home .brand { gap: 7px; }
  #root #home .brand-name { font-size: 15px; }
  #root #home .brand-name small { font-size: 6px; letter-spacing: 1px; }
  #root #home .header-inner { padding-inline: 12px; }
  #root #main-content .hero-cta { flex-direction: column; }
}
@media (max-height: 560px) and (max-width: 1200px) {
  #root #main-content .guide-sticky { position: relative; top: 0; height: auto; }
}
@media (pointer: coarse) { #root :is(button, a) { -webkit-tap-highlight-color: #a0f2bf26; touch-action: manipulation; } }
/* Mobile home: compact the hero and keep assistant controls in document flow. */
/* Portrait scenery: a quiet title area and a luminous orbital stage for the network. */
@media (max-width: 760px) {
  #root #main-content .hero.hero-integrated {
    background: radial-gradient(ellipse at 50% 58%, #0c422c66, transparent 48%), linear-gradient(180deg, #020705 24%, #05140d 68%, #020906) !important;
  }
  #root #main-content .hero-integrated .hero-atmosphere::before {
    inset: 28% -20% 8%; width: auto; height: auto;
    background: radial-gradient(ellipse at 50% 55%, #22ed8720, transparent 62%);
  }
  #root #main-content .hero-integrated .hero-planet,
  #root #main-content .hero-integrated .hero-horizon { display: none; }
  #root #main-content .hero-integrated .hero-orbit {
    width: 118%; height: 30%; left: -9%; right: auto; top: 48%;
    border: 1px solid #5df5ae24; border-radius: 50%;
    transform: rotate(-18deg);
    background: linear-gradient(180deg, transparent 50%, #22ed8706);
    box-shadow: 0 0 28px #20ec7d08, inset 0 -1px 0 #78ffc321;
  }
  #root #main-content .hero-integrated .hero-orbit-right {
    width: 102%; height: 36%; left: -1%; top: 44%;
    transform: rotate(25deg); border-color: #5df5ae12;
    background: none; box-shadow: none;
  }
  #root #main-content .hero-integrated .hero-orbit-left::after { display: none; }
  #root #main-content .hero-integrated .hero-sphere {
    width: 10px; box-shadow: 0 0 14px #39f58a55, inset 1px 1px 2px #bcffdf88;
    background: radial-gradient(circle at 30% 25%, #b5ffda, #0b7040 40%, #03150b 78%);
  }
  #root #main-content .hero-integrated .hero-sphere-one { left: 8%; top: 57%; }
  #root #main-content .hero-integrated .hero-sphere-two { right: 10%; top: 43%; width: 15px; }
  #root #main-content .hero-integrated .hero-sphere-three { right: 19%; top: 76%; width: 6px; }
}
@media (max-width: 760px) {
  #root #main-content .hero.hero-integrated { top: 82px; height: clamp(510px, calc(100svh - 90px), 660px); min-height: 510px; }
  #root #main-content .hero-integrated .hero-heading { padding: 0; min-height: 180px; z-index: 2; }
  #root #main-content .hero-integrated .stage-heading { top: 24px; left: 20px; right: 20px; }
  #root #main-content .hero-integrated .hero-heading h1 { font-size: clamp(29px, 8.2vw, 40px); max-width: 420px; margin: 14px auto 0; line-height: 1.12; text-wrap: balance; }
  #root #main-content .hero-integrated .hero-heading h1 span { white-space: normal; }
  #root #main-content .hero-integrated .hero-heading .eyebrow { font-size: 8px; letter-spacing: 1.2px; }
  #root #main-content .hero-integrated .hero-scene { inset: 172px 0 104px; }
  #root #main-content .hero-integrated .hero-trust-strip { bottom: 26px; gap: 8px; width: calc(100% - 100px); white-space: normal; }
  #root #main-content .hero-integrated .hero-trust-pill { padding: 8px 12px; font-size: 10px; justify-content: center; text-align: center; }
  #root #main-content .hero-integrated .hero-cta { bottom: 28px; width: calc(100% - 100px); }
  #root #main-content .guide-sticky { position: sticky; top: 82px; height: calc(100svh - 82px); padding: 16px 20px 64px; display: flex; flex-direction: column; overflow: visible; }
  #root #main-content .guide-header { margin-bottom: 22px; gap: 12px; grid-template-columns: minmax(0, 1fr); }
  #root #main-content .guide-header h2 { font-size: clamp(23px, 6.3vw, 28px); line-height: 1.2; }
  #root #main-content .guide-header p { max-width: none; font-size: 12px; }
  #root #main-content .guide-voice { justify-self: start; font-size: 11px; min-height: 44px; }
  #root #main-content .guide-stage { flex: 1; display: grid; grid-template-columns: minmax(110px, .42fr) minmax(0, .58fr); grid-template-rows: minmax(0, 1fr) minmax(140px, .55fr) auto; align-content: stretch; gap: 16px 12px; min-height: 0; overflow: visible; }
  #root #main-content .guide-details { display: contents; }
  #root #main-content .guide-content { grid-column: 1 / -1; grid-row: 1; align-self: center; max-height: 100%; min-height: 0; overflow-y: auto; padding: 20px; border: 1px solid #ffffff18; border-radius: 20px; background: linear-gradient(145deg, #16332355, #07120c88); }
  #root #main-content .guide-content h3 { font-size: 26px; line-height: 1.2; margin-bottom: 14px; }
  #root #main-content .guide-description { font-size: 14px; line-height: 1.65; margin-bottom: 18px; }
  #root #main-content .guide-features { gap: 10px; margin-bottom: 20px; }
  #root #main-content .guide-features li { font-size: 13px; }
  #root #main-content .guide-avatar { position: relative; left: auto; bottom: auto; grid-column: 1; grid-row: 2; width: min(100%, 170px); height: 100%; max-height: 210px; aspect-ratio: auto; min-width: 0; max-width: 100%; justify-self: center; align-self: center; }
  #root #main-content .guide-navigation { position: static; grid-column: 2; grid-row: 2; max-width: none; width: 100%; margin: 0; align-self: center; padding: 12px 0 0; border-top: 1px solid #ffffff18; }
  #root #main-content .guide-progress { font-size: 12px; }
  #root #main-content .guide-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  #root #main-content .guide-actions a { min-height: 44px; display: inline-flex; justify-content: center; align-items: center; text-align: center; }
  #root #main-content .guide-narration { display: none; position: static; grid-column: 1 / -1; grid-row: 3; width: 100%; height: auto; max-height: 48px; margin: 0; font-size: 12px; line-height: 1.6; overflow-y: auto; }
  #root #main-content .guide-narration.is-active { display: block; }
}
@media (max-width: 360px) {
  #root #main-content .guide-sticky { padding-inline: 16px; }
  #root #main-content .guide-content { padding: 16px; }
  #root #main-content .guide-content h3 { font-size: 24px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  #root #main-content .hero.hero-integrated { min-height: 480px; }
  #root #main-content .hero-integrated .hero-scene { inset: 166px 0 100px; }
  #root #main-content .guide-header { margin-bottom: 16px; }
  #root #main-content .guide-header h2 { font-size: 23px; }
}
@media (max-width: 760px) and (max-height: 560px) {
  #root #main-content .hero.hero-integrated { top: 0; }
  #root #main-content .guide-sticky { position: relative; top: 0; height: auto; overflow: visible; }
  #root #main-content .guide-stage { grid-template-rows: auto auto auto; }
}

/* App-style portrait hero, with a persistent project action. */
@media (max-width: 760px) {
  #root #main-content .hero.hero-integrated {
    height: max(560px, calc(100svh - 82px)); min-height: 560px;
    background: radial-gradient(ellipse at 50% 48%, #075d344a, transparent 45%), #020906 !important;
  }
  #root #main-content .hero-integrated .stage-heading { top: 20px; }
  #root #main-content .hero-integrated .hero-heading h1 { font-size: clamp(29px, 8.6vw, 40px); }
  #root #main-content .hero-integrated .hero-scene { inset: 170px 0 212px; filter: drop-shadow(0 0 9px #12ff7945); }
  #root #main-content .hero-integrated .hero-atmosphere::before {
    inset: 25% -10% 24%; background: radial-gradient(ellipse, #00ec792e, transparent 65%);
  }
  #root #main-content .hero-integrated .hero-orbit { display: none; }
  #root #main-content .hero-integrated .hero-orbit-right {
    display: block; width: 100%; height: 42%; left: 65%; top: 26%;
    border: 1px dashed #31f79538; transform: rotate(28deg);
  }
  #root #main-content .hero-integrated .hero-horizon {
    display: block; width: 150%; height: 42%; left: -25%; bottom: -7%;
    border-radius: 50% 50% 0 0; border-top: 2px solid #48ffad;
    background: radial-gradient(ellipse at 50% 0%, #0d70434d, #021109 46%, #020906 72%);
    box-shadow: 0 -2px 7px #2aff9f99, 0 -12px 36px #0bff8140, inset 0 10px 28px #08e37d12;
  }
  #root #main-content .hero-integrated .hero-sphere-one { left: 18%; top: 43%; width: 5px; }
  #root #main-content .hero-integrated .hero-sphere-two { right: 16%; top: 57%; width: 6px; }
  #root #main-content .hero-integrated .hero-sphere-three { right: 49%; top: 64%; width: 9px; }
  #root #main-content .hero-integrated .hero-trust-strip {
    bottom: 96px; width: min(78%, 310px); gap: 8px; opacity: 1; transform: translateX(-50%);
  }
  #root #main-content .hero-integrated .hero-trust-pill {
    display: flex; width: 100%; min-height: 36px; gap: 8px; padding: 8px 12px;
    font-size: 10px; border-color: #86ffc72b !important;
    background: linear-gradient(145deg, #072016b3, #020c08c9) !important;
    box-shadow: inset 0 1px 0 #ffffff08 !important;
  }
  #root #main-content .hero-integrated .hero-cta {
    display: none;
    bottom: 24px; width: min(72%, 290px); opacity: 1; pointer-events: auto;
    transform: translateX(-50%); flex-direction: row;
  }
  #root #main-content .hero-integrated .hero-cta > a:first-child {
    width: 100%; min-height: 52px; justify-content: space-between; padding: 7px 10px 7px 24px;
    font-size: 14px; border-radius: 999px; border: 1px solid #3dffa4 !important;
    background: linear-gradient(145deg, #12673d, #032b1a) !important;
    color: #f0fff6 !important; box-shadow: inset 0 1px 8px #67ffaf40, 0 0 22px #17ef7950 !important;
  }
  #root #main-content .hero-integrated .hero-cta > a:first-child svg {
    width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: #39f58a; color: #032b1a !important;
  }
  #root #main-content .hero-integrated .hero-cta :is(.cta-default, .cta-final),
  #root #main-content .hero-integrated .hero-cta > a:last-child { display: none !important; }
  #root #main-content .hero-integrated .cta-mobile { display: inline; }
}

/* Bridge desktop typography and portrait tablet geometry. */
@media (min-width: 761px) and (max-width: 1200px) {
  #root #main-content .hero.hero-integrated { top: 88px; height: max(580px, calc(100svh - 88px)); min-height: 580px; }
  #root #main-content .hero-integrated .stage-heading { top: 32px; left: 28px; right: 28px; }
  #root #main-content .hero-integrated .hero-heading h1 { font-size: clamp(38px, 5vw, 58px); line-height: 1.1; max-width: 880px; text-wrap: balance; }
  #root #main-content .hero-integrated .hero-heading h1 span { white-space: normal; }
  #root #main-content .hero-integrated .hero-scene { inset: 200px 16px 110px; }
  #root #main-content .hero-integrated .hero-trust-strip { bottom: 28px; gap: 10px; flex-wrap: wrap; justify-content: center; width: calc(100% - 96px); white-space: normal; }
  #root #main-content .hero-integrated .hero-trust-pill { font-size: 11px; }
  #root #main-content .guide-header > div { min-width: 0; }
  #root #main-content .guide-details { max-height: calc(100svh - 260px); overflow-y: auto; }
}
@media (max-width: 760px) and (max-height: 740px) {
  #root #main-content .hero-integrated .stage-heading { top: 16px; }
  #root #main-content .hero-integrated .hero-heading h1 { font-size: clamp(27px, 8vw, 35px); margin-top: 10px; }
  #root #main-content .hero-integrated .hero-scene { top: 146px; bottom: 202px; }
  #root #main-content .hero-integrated .hero-trust-strip { bottom: 88px; gap: 6px; }
  #root #main-content .hero-integrated .hero-trust-pill { min-height: 32px; padding-block: 6px; }
  #root #main-content .hero-integrated .hero-cta { bottom: max(18px, env(safe-area-inset-bottom, 0px)); }
  #root #main-content .guide-header { flex-shrink: 0; gap: 8px; margin-bottom: 12px; }
  #root #main-content .guide-header h2 { font-size: 23px; }
  #root #main-content .guide-sticky { padding: 12px 16px 56px; }
  #root #main-content .guide-stage { grid-template-columns: 100px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 120px auto; gap: 10px; }
  #root #main-content .guide-avatar { width: 100px; max-height: 120px; }
  #root #main-content .guide-content h3 { font-size: 23px; }
}
@media (max-width: 360px) {
  #root #main-content .hero-integrated .stage-heading { left: 14px; right: 14px; }
  #root #main-content .hero-integrated .hero-trust-strip { width: calc(100% - 48px); }
  #root #main-content .hero-integrated .hero-cta { width: calc(100% - 72px); }
  #root #main-content .guide-actions { gap: 8px; }
  #root #main-content .guide-actions a:first-child { padding-inline: 10px; }
}
@media (max-width: 1200px) and (max-height: 560px) {
  #root #main-content .guide-sticky { position: relative; top: 0; height: auto; }
  #root #main-content .guide-stage { flex: none; grid-template-rows: auto auto auto; }
  #root #main-content .guide-details { max-height: none; overflow: visible; }
  #root #main-content .hero.hero-integrated { top: 0; }
}
@media (max-width: 1200px) {
  #root #main-content .ab-contact-inner h2 { overflow-wrap: anywhere; }
  #root #main-content .ab-contact-bottom .ab-button { max-width: 100%; white-space: normal; text-align: center; }
  #root #main-content .minimal-channel-link strong { overflow-wrap: anywhere; }
}
/* Fit the complete service card and controls inside the desktop stage. */
@media (min-width: 1201px) and (min-height: 561px) {
  #root #main-content .guide-section .guide-sticky {
    height: calc(100svh - 88px);
    padding-top: clamp(12px, 2svh, 24px);
    padding-bottom: 16px;
    display: flex;
    flex-direction: column;
  }
  #root #main-content .guide-section .guide-header { margin-bottom: 16px; flex: 0 0 auto; }
  #root #main-content .guide-section .guide-header h2 { font-size: clamp(28px, 3.5svh, 40px); margin-bottom: 6px; }
  #root #main-content .guide-section .guide-stage { flex: 1; min-height: 0; align-items: stretch; overflow: visible; }
  #root #main-content .guide-section .guide-details {
    display: flex; flex-direction: column; justify-content: center;
    max-height: none; height: 100%; min-height: 0; overflow: visible;
    padding: 2px; background: none; border: 0;
  }
  #root #main-content .guide-section .guide-content {
    flex: 0 1 auto; min-height: 0; overflow: visible;
    padding: clamp(16px, 2.5svh, 28px);
  }
  #root #main-content .guide-section .guide-card-top { margin-bottom: clamp(8px, 1.6svh, 18px); }
  #root #main-content .guide-section .guide-card-icon { width: clamp(36px, 5.5svh, 52px); height: clamp(36px, 5.5svh, 52px); border-radius: 14px; }
  #root #main-content .guide-section .guide-card-label { margin-bottom: 10px; font-size: 9px; }
  #root #main-content .guide-section .guide-content h3 { font-size: clamp(27px, 4.2svh, 40px); margin-bottom: 12px; }
  #root #main-content .guide-section .guide-description { font-size: 13px; line-height: 1.65; }
  #root #main-content .guide-section .guide-card-body { grid-template-columns: 1fr 1.1fr; gap: 20px; margin-top: 18px; padding-top: 18px; }
  #root #main-content .guide-section .guide-card-body h4 { margin-bottom: 12px; }
  #root #main-content .guide-section .guide-card-approach { padding: 14px; }
  #root #main-content .guide-section .guide-card-approach p { font-size: 12px; line-height: 1.7; }
  #root #main-content .guide-section .guide-features { gap: 12px; }
  #root #main-content .guide-section .guide-card-footer { margin-top: 18px; padding-top: 16px; }
  #root #main-content .guide-section .guide-navigation { flex: 0 0 auto; margin-top: 12px; padding-top: 0; border: 0; }
  #root #main-content .guide-section .guide-narration:not(.is-active) { display: none; }
}
@media (min-width: 1201px) and (min-height: 561px) and (max-height: 740px) {
  #root #main-content .guide-section .guide-header p { display: none; }
  #root #main-content .guide-section .guide-card-body { margin-top: 12px; padding-top: 12px; }
  #root #main-content .guide-section .guide-card-top { margin-bottom: 8px; }
  #root #main-content .guide-section .guide-card-footer { margin-top: 12px; padding-top: 12px; }
  #root #main-content .guide-section .guide-card-approach p { font-size: 11px; line-height: 1.55; }
}
/* Homepage services: align the introduction, links and explorer as one section. */
#root #main-content.home-main #services {
  width: min(90%, 1440px);
  margin-inline: auto;
  padding: clamp(44px, 5vw, 72px) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 40px;
  row-gap: 32px;
  align-items: end;
}
#root #main-content.home-main #services .section-intro { margin: 0; min-width: 0; }
#root #main-content.home-main #services .section-intro h2 { margin-bottom: 0; }
#root #main-content.home-main #services .page-jump-links {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: 12px 24px; margin: 0; padding: 0 0 6px;
}
#root #main-content.home-main #services .service-explorer {
  grid-column: 1 / -1;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.4fr);
  gap: 32px; align-items: stretch;
}
#root #main-content.home-main #services .service-selector { display: flex; flex-direction: column; }
#root #main-content.home-main #services .service-selector-label { padding: 0 4px 20px; min-height: 36px; }
#root #main-content.home-main #services .service-selector-list { flex: 1; }
#root #main-content.home-main #services .service-detail-panel {
  margin-top: 36px; display: flex; flex-direction: column;
}
#root #main-content.home-main #services .service-panel-footer { margin-top: auto; padding-top: 24px; }
#root #main-content.home-main #services .service-panel-body { margin-bottom: 28px; }
@media (max-width: 1200px) {
  #root #main-content.home-main #services { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #root #main-content.home-main #services .page-jump-links { justify-content: flex-start; padding-bottom: 0; }
}
@media (max-width: 1000px) {
  #root #main-content.home-main #services .service-explorer { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #root #main-content.home-main #services .service-detail-panel { margin-top: 0; }
}
/* One viewport for homepage services on desktop, with room for the header. */
@media (min-width: 1201px) and (min-height: 650px) {
  #root #main-content.home-main #services {
    height: 90svh;
    padding-block: clamp(16px, 2.5svh, 28px);
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: clamp(16px, 2.2svh, 24px);
    align-items: end;
  }
  #root #main-content.home-main #services .section-intro h2 {
    font-size: clamp(28px, 4.3svh, 46px); line-height: 1.12;
    margin-top: 12px;
  }
  #root #main-content.home-main #services .section-kicker { margin-bottom: 0; }
  #root #main-content.home-main #services .page-jump-links { font-size: 12px; gap: 12px 20px; }
  #root #main-content.home-main #services .service-explorer { height: 100%; min-height: 0; gap: 28px; }
  #root #main-content.home-main #services .service-selector { min-height: 0; }
  #root #main-content.home-main #services .service-selector-label { min-height: 28px; padding-bottom: 12px; }
  #root #main-content.home-main #services .service-selector-list { min-height: 0; grid-template-rows: repeat(5, minmax(0,1fr)); gap: 8px; }
  #root #main-content.home-main #services .service-choice { padding: 12px 18px; min-height: 0; }
  #root #main-content.home-main #services .service-choice > span:not(.service-choice-number) { font-size: clamp(16px, 2.4svh, 21px); }
  #root #main-content.home-main #services .service-selector-help { padding-top: 14px; }
  #root #main-content.home-main #services .service-selector-help p { margin-bottom: 6px; }
  #root #main-content.home-main #services .service-detail-panel { margin-top: 28px; min-height: 0; padding: clamp(20px, 2.8svh, 30px); }
  #root #main-content.home-main #services .service-panel-top { margin-bottom: clamp(12px, 2svh, 22px); }
  #root #main-content.home-main #services .service-panel-icon { width: 48px; height: 48px; }
  #root #main-content.home-main #services .service-panel-eyebrow { margin-bottom: 10px; }
  #root #main-content.home-main #services .service-panel-heading h2 { font-size: clamp(28px, 3.8svh, 40px); margin-bottom: 12px; }
  #root #main-content.home-main #services .service-panel-heading > p { font-size: 13px; line-height: 1.65; min-height: 0; }
  #root #main-content.home-main #services .service-panel-body { gap: 20px; margin-top: 18px; padding-top: 18px; margin-bottom: 16px; }
  #root #main-content.home-main #services .service-panel-body h3 { margin-bottom: 12px; }
  #root #main-content.home-main #services .service-panel-includes ul { gap: 12px; }
  #root #main-content.home-main #services .service-panel-approach { padding: 14px; }
  #root #main-content.home-main #services .service-panel-approach p { font-size: 12px; line-height: 1.65; }
  #root #main-content.home-main #services .service-panel-footer { padding-top: 14px; gap: 12px; }
}
@media (min-width: 1201px) and (min-height: 650px) and (max-height: 800px) {
  #root #main-content.home-main #services { padding-block: 14px; row-gap: 14px; }
  #root #main-content.home-main #services .section-intro h2 { font-size: 28px; margin-top: 8px; }
  #root #main-content.home-main #services .service-detail-panel { padding: 16px 20px; }
  #root #main-content.home-main #services .service-panel-top { margin-bottom: 8px; }
  #root #main-content.home-main #services .service-panel-icon { width: 34px; height: 34px; }
  #root #main-content.home-main #services .service-panel-icon svg { width: 23px; height: 23px; }
  #root #main-content.home-main #services .service-panel-eyebrow { font-size: 8px; margin-bottom: 6px; }
  #root #main-content.home-main #services .service-panel-heading h2 { font-size: 28px; margin-bottom: 8px; }
  #root #main-content.home-main #services .service-panel-heading > p { font-size: 12px; line-height: 1.55; }
  #root #main-content.home-main #services .service-panel-body { margin-top: 12px; padding-top: 12px; margin-bottom: 10px; gap: 16px; }
  #root #main-content.home-main #services .service-panel-body h3 { margin-bottom: 8px; font-size: 9px; }
  #root #main-content.home-main #services .service-panel-approach { padding: 10px; }
  #root #main-content.home-main #services .service-panel-approach p { font-size: 11px; line-height: 1.5; }
  #root #main-content.home-main #services .service-panel-includes li { font-size: 11px; }
  #root #main-content.home-main #services .service-panel-includes ul { gap: 8px; }
  #root #main-content.home-main #services .service-panel-footer { padding-top: 10px; }
  #root #main-content.home-main #services .service-panel-cta { padding-block: 10px; }
}
/* Raise the homepage detail card and balance its content vertically. */
@media (min-width: 1201px) and (min-height: 650px) {
  #root #main-content.home-main #services .service-detail-panel {
    margin-top: 0;
    padding-block: clamp(22px, 3svh, 32px);
  }
  #root #main-content.home-main #services .service-panel-top {
    margin-bottom: clamp(18px, 3svh, 30px);
  }
  #root #main-content.home-main #services .service-panel-body {
    flex: 1;
    align-items: center;
    margin-block: clamp(16px, 2.5svh, 26px);
    padding-top: clamp(16px, 2.5svh, 26px);
  }
  #root #main-content.home-main #services .service-panel-includes ul {
    gap: clamp(14px, 2.3svh, 24px);
  }
  #root #main-content.home-main #services .service-panel-footer {
    margin-top: 0;
    flex-shrink: 0;
  }
}
/* Use real service content rather than stretching the card to fill the column. */
#root #main-content.home-main #services .service-detail-panel { align-self: start; }
#root #main-content.home-main #services .service-panel-body { flex: none; align-items: start; margin-block: 18px; padding-top: 18px; }
#root #main-content.home-main #services .service-panel-footer { margin-top: 18px; }
.service-panel-workflow { border-top: 1px solid #ffffff10; padding-top: 16px; }
.service-panel-workflow h3 { margin: 0 0 12px; font-size: 10px; font-weight: 600; color: #adbbb2; text-transform: uppercase; letter-spacing: .05em; }
.service-panel-workflow ol { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.service-panel-workflow li { display: flex; flex-direction: column; gap: 6px; color: #d7e4dc; font-size: 12px; line-height: 1.5; }
.service-panel-workflow li span { color: var(--text-green); font-size: 10px; }
@media (min-width: 1201px) and (min-height: 650px) {
  #root #main-content.home-main #services .service-panel-top { margin-bottom: 16px; }
  #root #main-content.home-main #services .service-panel-includes ul { gap: 12px; }
}
@media (max-width: 760px) {
  .service-panel-workflow ol { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
}
@media (min-width: 1201px) and (max-height: 800px) {
  #root #main-content.home-main #services { height: auto; min-height: 90svh; }
  #root #main-content.home-main #services .service-selector-list { flex: none; }
}
/* Let desktop service cards occupy the stage; scrolling changes services. */
@media (min-width: 1201px) {
  #root #main-content .guide-section .guide-sticky { padding-inline: 4%; }
  #root #main-content .guide-section .guide-details { margin-left: 40%; width: 60%; max-width: none; }
  #root #main-content .guide-section .guide-navigation { display: none; }
  #root #main-content .guide-section .guide-narration:not(.is-active) { display: none; }
}
@media (min-width: 1201px) and (min-height: 650px) {
  #root #main-content .guide-section .guide-content { display: flex; flex-direction: column; flex: 1; min-height: min(650px, calc(100svh - 190px)); max-height: calc(100svh - 170px); overflow-y: auto; padding: clamp(28px, 3.5svh, 44px); }
  #root #main-content .guide-section .guide-card-body { flex: 1; align-items: center; margin-top: 24px; padding-top: 24px; }
  #root #main-content .guide-section .guide-card-footer { margin-top: 28px; padding-top: 24px; }
  #root #main-content .guide-section .guide-description { max-width: none; }
}
@media (min-width: 1201px) and (min-height: 650px) {
  #root #main-content .guide-section .guide-stage:is([data-scene="0"], [data-scene="6"]) .guide-content { flex: 0 1 auto; min-height: 0; }
}
@media (min-width: 1201px) {
  #root #main-content .guide-section .guide-avatar { left: 0; bottom: 0; width: 40%; height: 100%; aspect-ratio: auto; min-width: 0; max-width: none; }
}
@media (min-width: 1201px) and (min-height: 650px) {
  #root #main-content .guide-section .guide-content h3 { font-size: clamp(32px, 3vw, 46px); }
  #root #main-content .guide-section .guide-card-body .guide-features li,
  #root #main-content .guide-section .guide-card-approach p { font-size: 13px; }
}

/* Keep the whole service card visible: image and service details share a row. */
#root #main-content .guide-section .guide-content,
#root #main-content .guide-section .guide-details {
  max-height: none;
  overflow: visible;
}
@media (min-width: 761px) {
  #root #main-content .guide-section .guide-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(16px, 2vw, 28px);
    align-content: center;
    min-height: 0;
    flex: 0 0 auto;
    padding: clamp(18px, 2.5svh, 30px);
  }
  #root #main-content .guide-section .guide-content > :is(.guide-card-top, .guide-card-label, h3, .guide-description, .guide-card-footer) { grid-column: 1 / -1; }
  #root #main-content .guide-section .guide-card-top { margin-bottom: 12px; }
  #root #main-content .guide-section .guide-card-label { margin-bottom: 10px; }
  #root #main-content .guide-section .guide-content h3 { font-size: clamp(28px, 3.6svh, 40px); margin-bottom: 12px; }
  #root #main-content .guide-section .guide-description { font-size: 13px; line-height: 1.65; margin-bottom: 18px; }
  #root #main-content .guide-section .guide-service-image {
    grid-column: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    align-self: center;
    margin: 0;
  }
  #root #main-content .guide-section .guide-card-body {
    grid-column: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    margin: 0;
    padding: 0;
    border: 0;
  }
  #root #main-content .guide-section .guide-card-body h4 { margin-bottom: 8px; }
  #root #main-content .guide-section .guide-card-body .guide-features { gap: 8px; }
  #root #main-content .guide-section .guide-card-body .guide-features li { font-size: 12px; line-height: 1.5; }
  #root #main-content .guide-section .guide-card-approach { padding: 12px; }
  #root #main-content .guide-section .guide-card-approach p { font-size: 12px; line-height: 1.6; }
  #root #main-content .guide-section .guide-card-footer { margin-top: 18px; padding-top: 16px; }
}
@media (min-width: 761px) and (max-height: 740px) {
  #root #main-content .guide-section .guide-card-top { margin-bottom: 8px; }
  #root #main-content .guide-section .guide-card-icon { width: 36px; height: 36px; }
  #root #main-content .guide-section .guide-card-label { margin-bottom: 6px; }
  #root #main-content .guide-section .guide-content h3 { margin-bottom: 8px; font-size: 28px; }
  #root #main-content .guide-section .guide-card-body { gap: 10px; }
  #root #main-content .guide-section .guide-card-approach p { font-size: 11px; line-height: 1.5; }
  #root #main-content .guide-section .guide-card-footer { margin-top: 12px; padding-top: 12px; }
}
/* Narrow and short screens use page scrolling instead of nested scroll areas. */
@media (max-width: 760px), (max-height: 560px) {
  #root #main-content .guide-section .guide-sticky { position: relative; top: 0; height: auto; }
  #root #main-content .guide-section .guide-stage { flex: none; grid-template-rows: auto auto auto; }
  #root #main-content .guide-section .guide-content { min-height: 0; max-height: none; overflow: visible; }
  #root #main-content .guide-section .guide-details { height: auto; max-height: none; overflow: visible; }
  #root #main-content .guide-section .guide-service-image { width: 100%; height: auto; aspect-ratio: 16 / 9; margin-top: 16px; }
}

/* Photographs use browser photo interpolation, independently of decorative artwork. */
#root #main-content :is(.guide-service-image, .service-panel-image, .service-story-image) { image-rendering: auto; filter: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Align the service introduction and stage with the site's 1440px content area. */
#root #main-content .guide-section .guide-sticky {
  padding-inline: max(5%, calc((100% - 1440px) / 2));
}
#root #main-content .guide-section .guide-header {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
#root #main-content .guide-section .guide-header > div { min-width: 0; }
#root #main-content .guide-section .guide-header :is(h2, p) { max-width: 100%; overflow-wrap: break-word; }

/* Give desktop service cards more height while retaining the complete layout. */
@media (min-width: 1201px) and (min-height: 650px) {
  #root #main-content .guide-section .guide-stage:not([data-scene="0"]):not([data-scene="6"]) .guide-content {
    min-height: min(720px, calc(100svh - 210px));
    padding-block: clamp(24px, 3.5svh, 40px);
    grid-template-rows: auto auto auto auto minmax(min-content, 1fr) auto;
    align-content: stretch;
  }
  #root #main-content .guide-section .guide-card-body { align-self: center; }
  #root #main-content .guide-section .guide-card-footer { align-self: end; margin-top: 24px; padding-top: 20px; }
}
/* Final layout rules for touch devices and narrow windows. */
@media (max-width: 1200px) {
 #root { --device-gutter: clamp(16px, 4vw, 36px); }
 #root #main-content .section { padding-inline: var(--device-gutter); }
 #root #main-content :is(.section-intro, .service-panel-heading, .service-story-copy, .service-story-visual, .gallery-collection, .minimal-contact-box, .minimal-form-container) { min-width: 0; }
 #root #main-content :is(h1, h2, h3) { overflow-wrap: break-word; }
 #root #main-content :is(.service-story-contact-actions, .page-jump-links, .service-panel-footer, .ab-actions) { flex-wrap: wrap; }
 #root #main-content :is(.service-panel-cta, .service-story-cta, .ab-button, .faq-question-btn) { min-height: 44px; }
 #root #main-content :is(input:not([type="checkbox"]), textarea, select) { font-size: 16px; }
 #root .footer :is(.footer-brand, .footer-services, .footer-map, .footer-links) { min-width: 0; }
 #root .footer a { overflow-wrap: anywhere; }
 #root #main-content .guide-section { height: auto; padding-bottom: 24px; }
 #root #main-content .guide-section .guide-sticky { position: relative; top: 0; height: auto; padding: 28px var(--device-gutter); }
 #root #main-content .guide-section .guide-stage { height: auto; min-height: 0; overflow: visible; }
 #root #main-content .guide-section .guide-details { max-height: none; height: auto; overflow: visible; }
 #root #main-content .guide-section .guide-content { display: block; max-height: none; min-height: 0; overflow: visible; }
 #root #main-content .guide-section .guide-card-body { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 22px; padding-top: 20px; border-top: 1px solid #ffffff12; }
 #root #main-content .guide-section .guide-card-body .guide-features li { font-size: 14px; }
 #root #main-content .guide-section .guide-card-approach p { font-size: 13px; }
 #root #main-content .guide-section .guide-service-image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin-top: 20px; }
 #root #main-content .guide-section .guide-navigation { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
 #root #main-content .guide-section .guide-navigation button { min-width: 44px; min-height: 44px; }
 #root #main-content .guide-section .guide-navigation button span { display: inline; }
 #root #main-content .guide-section .guide-card-footer { display: flex; gap: 16px; flex-wrap: wrap; }
 #root .chatbot-dialog-wrap { width: min(390px, calc(100vw - 32px)); max-height: calc(100dvh - 112px - env(safe-area-inset-bottom)); right: 16px; bottom: calc(88px + env(safe-area-inset-bottom)); }
 #root .chatbot-input-field { min-width: 0; font-size: 16px; }
 #root .chatbot-send-btn { min-width: 44px; min-height: 44px; }
}
@media (min-width: 761px) and (max-width: 1200px) {
 #root #main-content .guide-section .guide-stage { display: grid; grid-template-columns: minmax(150px, .6fr) minmax(0, 1.4fr); gap: 24px; align-items: start; }
 #root #main-content .guide-section .guide-avatar { position: relative; inset: auto; grid-column: 1; width: 100%; max-width: 280px; height: auto; min-width: 0; aspect-ratio: 280 / 340; }
 #root #main-content .guide-section .guide-details { display: block; grid-column: 2; width: auto; margin: 0; padding: 0; border: 0; background: none; }
 #root #main-content .guide-section .guide-content h3 { font-size: clamp(28px, 3.8vw, 40px); }
 #root #main-content .service-story-lead { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
 #root #main-content .service-story h1 { font-size: clamp(38px, 5.2vw, 60px); }
 #root #main-content .testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
 #root #main-content .section { padding-block: 48px; }
 #root #main-content .section-intro { gap: 20px; flex-direction: column; align-items: stretch; }
 #root #main-content .section-intro h2 { font-size: clamp(29px, 7.8vw, 40px); line-height: 1.15; }
 #root #main-content .guide-section .guide-stage { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 20px; }
 #root #main-content .guide-section .guide-details { display: contents; }
 #root #main-content .guide-section .guide-content { grid-column: 1; grid-row: 1; width: 100%; padding: 22px; }
 #root #main-content .guide-section .guide-avatar { position: relative; inset: auto; grid-column: 1; grid-row: 3; width: 120px; height: 150px; min-width: 0; max-height: 150px; justify-self: center; }
 #root #main-content .guide-section .guide-navigation { grid-column: 1; grid-row: 2; width: 100%; margin: 0; padding: 0; }
 #root #main-content .guide-section .guide-progress { flex: 1; font-size: 12px; }
 #root #main-content .guide-section .guide-narration.is-active { grid-row: 4; max-height: none; overflow: visible; }
 #root #main-content .guide-section .guide-card-footer a { min-height: 44px; }
 #root #main-content :is(.testimonials-grid, .plans-grid, .faq-grid, .service-story-lead, .service-story-delivery, .service-why-grid) { grid-template-columns: minmax(0, 1fr); }
 #root #main-content .service-story h1 { font-size: clamp(36px, 10vw, 58px); }
 #root #main-content .service-story-lead { gap: 32px; }
 #root #main-content .service-story-contact-actions { gap: 16px; }
 #root #main-content .service-story-related > div { grid-template-columns: minmax(0, 1fr); }
 #root #main-content .service-story-related a { min-height: 52px; }
 #root #main-content .reference-composition { width: calc(100% - 2 * var(--device-gutter)); }
 #root #main-content .reference-stacked { padding-inline: 0; }
 #root #home .mobile-nav { overflow-y: auto; }
 #root #home .mobile-nav > a { min-height: 48px; }
 #root .footer .footer-services { gap: 12px; }
 #root .footer .footer-services a { min-height: 44px; }
 #root .chatbot-dialog-wrap { left: 12px; right: 12px; width: auto; }
}
@media (max-width: 380px) {
 #root #main-content #services .service-selector-list { grid-template-columns: minmax(0, 1fr); }
 #root #main-content .guide-section .guide-content { padding: 18px; }
 #root #main-content .guide-section .guide-content h3 { font-size: 26px; }
 #root #main-content .guide-section .guide-navigation button span { display: none; }
 #root #main-content .service-panel-workflow ol { grid-template-columns: minmax(0, 1fr); }
 #root #main-content .minimal-channel-link { padding: 16px; }
}
@media (max-height: 560px) and (max-width: 1200px) {
 #root #home .mobile-nav { max-height: calc(100dvh - 88px); }
 #root .chatbot-dialog-wrap { bottom: 12px; max-height: calc(100dvh - 24px); }
}

@media (max-width: 1200px) {
 #root #main-content .gallery-collection-links { display: flex; flex-wrap: wrap; max-width: 100%; width: fit-content; gap: 6px; }
 #root #main-content .gallery-filter-btn { min-height: 44px; flex: 0 1 auto; white-space: normal; }
 #root #main-content .gallery-toolbar { min-width: 0; flex-wrap: wrap; }
 #root #main-content .gallery-select-wrap { min-width: 0; }
}

/* Put service selection before the card so it is discoverable on phones. */
@media (max-width: 760px) {
 #root #main-content .guide-section .guide-navigation { grid-row: 1; }
 #root #main-content .guide-section .guide-content { grid-row: 2; }
}

/* The service presenter is reserved for desktop layouts. */
@media (max-width: 1200px) {
 #root #main-content .guide-section .guide-avatar { display: none; }
}
@media (min-width: 761px) and (max-width: 1200px) {
 #root #main-content .guide-section .guide-stage { grid-template-columns: minmax(0, 1fr); }
 #root #main-content .guide-section .guide-details { grid-column: 1; width: 100%; }
}

/* Keep service navigation above the card on every phone and tablet. */
@media (max-width: 1200px) {
 #root #main-content .guide-section .guide-stage { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 20px; }
 #root #main-content .guide-section .guide-details { display: contents; }
 #root #main-content .guide-section .guide-navigation { grid-column: 1; grid-row: 1; width: 100%; margin: 0; padding: 0; }
 #root #main-content .guide-section .guide-content { grid-column: 1; grid-row: 2; }
 #root #main-content .guide-section .guide-narration.is-active { grid-column: 1; grid-row: 3; }
}

/* Match the five-service list and detail card without including helper text in their height. */
@media (min-width: 1001px) {
 #root #main-content.home-main #services .service-explorer { grid-template-rows: auto auto auto; row-gap: 16px; align-items: stretch; }
 #root #main-content.home-main #services .service-selector { display: contents; }
 #root #main-content.home-main #services .service-selector-label { grid-column: 1; grid-row: 1; padding: 0 4px; min-height: 0; }
 #root #main-content.home-main #services .service-selector-list { grid-column: 1; grid-row: 2; display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); flex: none; align-self: stretch; }
 #root #main-content.home-main #services .service-selector-help { grid-column: 1; grid-row: 3; padding-top: 0; }
 #root #main-content.home-main #services .service-detail-panel { grid-column: 2; grid-row: 2; align-self: stretch; margin-top: 0; }
 #root #main-content.home-main #services .service-panel-footer { margin-top: auto; }
}

.faq-more { margin-top: 28px; text-align: center; }
.faq-more > a { display: inline-flex; align-items: center; gap: 18px; min-height: 44px; }
.faq-more > p { margin-top: 14px; font-size: 13px; color: #adbbb2; }

.faq-more { display: flex; align-items: center; justify-content: center; gap: 14px 22px; flex-wrap: wrap; }
.faq-more > a { flex-shrink: 0; }
.faq-more > p { margin: 0; }

@media (max-width: 760px) {
 #root #main-content .gallery-page .gallery-collection-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 100%; box-sizing: border-box; gap: 4px; padding: 5px; border-radius: 999px; }
 #root #main-content .gallery-page .gallery-filter-btn { min-width: 0; min-height: 44px; padding: 9px 6px; gap: 6px; font-size: 13px; white-space: nowrap; }
 #root #main-content .gallery-page .gallery-filter-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
}
@media (max-width: 350px) {
 #root #main-content .gallery-page .gallery-filter-btn { font-size: 12px; gap: 4px; padding-inline: 3px; }
}

/* Fit each plan label's pill to its text with balanced padding. */
#root #main-content.interior-main .plan-card .plan-tier {
 display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
 width: fit-content; max-width: 100%; min-height: 28px; box-sizing: border-box;
 padding: 6px 14px; font-size: clamp(11px, .8vw, 12px); line-height: 1.2;
 font-weight: 700; letter-spacing: .1em; white-space: nowrap;
 background: #4bed9920 !important; border: 1px solid #4bed9938 !important;
 border-radius: 999px; color: #55f2a5 !important;
}

/* Shared touch-device layout: content reflows rather than scaling down. */
@media (max-width: 1200px) {
 #root #main-content :is(.service-explorer,.service-detail-panel,.service-panel-body,.ab-hero-grid,.blog-reading-grid,.gallery-toolbar,.reference-composition) > * { min-width:0; }
 #root #main-content :is(.minimal-channel-link strong,.footer-contact-line,.service-features li,.faq-page-entry p) { overflow-wrap:anywhere; }
 #root #main-content :is(.gallery-control,.faq-page-entry summary,.minimal-form-container button,.tp-toggle button) { min-height:44px; }
 #root #main-content :is(.gallery-pagination,.faq-more,.page-jump-links,.more-services) { flex-wrap:wrap; gap:12px 20px; }
 #root #main-content .guide-section .guide-service-image { max-width:100%; object-fit:cover; }
 #root #main-content .reference-motion-control { min-width:44px; min-height:44px; }
 #root #main-content .reference-intro-cta { max-width:100%; white-space:normal; text-align:center; }
 #root #main-content .reference-engine-caption { font-size:12px; line-height:1.6; padding-right:46px; }
 #root #home .mobile-nav { overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding-bottom:max(20px,env(safe-area-inset-bottom)); }
 #root .footer :is(input,select,textarea),#root .chatbot-dialog-wrap input { font-size:16px; }
}
/* All five choices remain visible, without a nested horizontal scroller. */
@media (max-width: 1000px) {
 #root #main-content.home-main #services .service-selector { display:block; }
 #root #main-content.home-main #services .service-selector-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; gap:10px; overflow:visible; padding:0; width:100%; }
 #root #main-content.home-main #services .service-choice { display:grid; grid-template-columns:20px minmax(0,1fr); width:100%; min-width:0; min-height:64px; gap:10px; padding:14px; border-radius:14px; }
 #root #main-content.home-main #services .service-choice > span:not(.service-choice-number) { font-size:15px; line-height:1.35; white-space:normal; }
 #root #main-content.home-main #services .service-choice > svg:not(.service-choice-arrow) { width:20px; height:20px; }
 #root #main-content.home-main #services .service-choice-number,#root #main-content.home-main #services .service-choice-arrow { display:none; }
 #root #main-content.home-main #services .service-choice:last-child { grid-column:1/-1; }
 #root #main-content .service-panel-workflow ol { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
 #root #main-content .service-panel-footer { gap:16px; }
 #root #main-content .service-panel-footer > a { min-height:44px; }
}
@media (min-width: 761px) and (max-width: 1200px) {
 #root #main-content .hero-integrated .hero-heading h1 { max-width:620px; margin-inline:auto; font-size:clamp(38px,5.5vw,60px); }
 #root #main-content .hero-integrated .hero-heading h1 span { display:block; }
 #root #main-content .hero-integrated .hero-scene { top:230px; }
 #root #main-content .service-story h1 { overflow-wrap:normal; font-size:clamp(35px,4.5vw,54px); }
 #root #main-content .minimal-contact-content { width:calc(100% - 2 * var(--device-gutter)); }
 #root #main-content .faq-search-controls { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
 #root #main-content .faq-search-controls > button { justify-self:start; }
 #root #main-content .tp-services { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
 #root #main-content .service-detail-panel { padding:24px 20px; }
 #root #main-content .service-panel-heading h2 { font-size:clamp(28px,8vw,38px); line-height:1.15; }
 #root #main-content .service-panel-body { gap:24px; }
 #root #main-content .service-panel-workflow ol { padding-top:12px; }
 #root #main-content .service-story-lead { align-items:start; }
 #root #main-content .service-story-visual { width:100%; }
 #root #main-content .gallery-toolbar .gallery-service-filter { width:100%; min-width:0; }
 #root #main-content .gallery-select-wrap { flex:1; max-width:100%; }
 #root #main-content .gallery-pagination { justify-content:center; }
 #root #main-content .gallery-pagination > span { font-size:13px; }
 #root #main-content .faq-page-intro { padding-bottom:24px; }
 #root #main-content .faq-page-library { padding-top:24px; }
 #root #main-content .faq-page-entry summary { gap:12px; font-size:15px; }
 #root #main-content .faq-page-entry summary > span { flex-shrink:0; }
 #root #main-content .tp-index { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 20px; }
 #root #main-content .tp-index a { justify-content:space-between; }
 #root #main-content .tp-portfolio :is(.tp-services li,.tp-steps p,.tp-marketing-pillars p,.tp-values-grid p) { font-size:13px; }
 #root #main-content .tp-portfolio .tp-services h3 { min-height:0; margin-bottom:20px; }
 #root #main-content .tp-portfolio .tp-team-strip { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
 #root #main-content .tp-portfolio .tp-team-strip span { font-size:12px; }
 #root #main-content .tp-portfolio .tp-cover-content { min-height:660px; }
 #root #main-content .tp-portfolio .tp-cover { min-height:660px; }
 #root #main-content .tp-portfolio .tp-section { scroll-margin-top:96px; }
 #root .back-to-top-btn { left:16px; bottom:max(16px,env(safe-area-inset-bottom)); min-width:44px; min-height:44px; }
 #root .floating-whatsapp-pill { right:16px; bottom:max(16px,env(safe-area-inset-bottom)); }
}
@media (max-width:360px) {
 #root #main-content.home-main #services .service-selector-list { grid-template-columns:minmax(0,1fr); }
 #root #main-content.home-main #services .service-choice { min-height:52px; }
 #root #main-content .service-panel-workflow ol { grid-template-columns:minmax(0,1fr); }
 #root #main-content .tp-portfolio .tp-marketing-pillars { grid-template-columns:minmax(0,1fr); }
}
/* Short landscape screens need scrolling content and a menu that fits its viewport. */
@media (max-width:1200px) and (max-height:600px) {
 #root #home .mobile-nav { max-height:calc(100dvh - 100px); }
 #root #home .mobile-nav > a:not(.header-mobile-project) { padding-block:12px; font-size:17px; }
 #root #main-content .hero.hero-integrated { top:0; min-height:540px; height:540px; }
 #root #main-content .hero-integrated .stage-heading { top:24px; }
 #root #main-content .hero-integrated .hero-heading h1 { max-width:560px; font-size:clamp(28px,4.5vw,42px); }
 #root #main-content .hero-integrated .hero-scene { top:170px; bottom:100px; }
}

/* Compact floating controls on phones and tablets; retain a generous hit area. */
@media (max-width: 1200px) {
  #root .back-to-top-btn,
  #root .floating-whatsapp-pill,
  #root .floating-whatsapp-pill:is(:hover, :focus-visible) {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border-radius: 50%;
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }
  #root .back-to-top-btn { left: max(12px, env(safe-area-inset-left, 0px)); }
  #root .floating-whatsapp-pill { right: max(12px, env(safe-area-inset-right, 0px)); }
  #root .floating-wa-icon { width: 36px; height: 36px; flex-basis: 36px; }
  #root .back-to-top-btn > svg,
  #root .floating-wa-icon > svg { width: 18px; height: 18px; }
  #root .floating-whatsapp-pill .floating-wa-label { display: none; }
  #root .floating-whatsapp-pill .chatbot-badge-pulse {
    width: 12px;
    height: 12px;
    min-width: 12px;
    font-size: 8px;
    line-height: 12px;
    top: -2px;
    right: -2px;
  }
  #root .back-to-top-btn::before,
  #root .floating-whatsapp-pill::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
  }
}