/* VALUE — experience, motion and depth layer
   Progressive enhancement only: the site remains fully usable if this file or
   motion support is unavailable. */

:root {
  --ease-heavy: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
}

html {
  font-kerning: normal;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

body {
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

@media (max-width: 767px) {
  body::before {
    z-index: 140;
    opacity: 0.026;
    background-size: 240px 240px;
    mix-blend-mode: soft-light;
    transform: translateZ(0);
    contain: strict;
  }

  body.ui-scroll-locked {
    position: fixed;
    top: var(--locked-scroll-y, 0);
    right: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .navbar,
  .mobile-menu,
  .wa-fab,
  .video-modal {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
  }

  .navbar {
    transition:
      padding 420ms var(--ease-heavy),
      background-color 420ms var(--ease-heavy),
      box-shadow 420ms var(--ease-heavy),
      transform 420ms var(--ease-heavy);
  }

  .navbar.scrolled {
    -webkit-backdrop-filter: blur(18px) saturate(128%);
    backdrop-filter: blur(18px) saturate(128%);
  }

  .mobile-toggle line {
    transform-box: view-box;
    transform-origin: 12px 12px;
    transition:
      transform 460ms var(--ease-heavy),
      opacity 220ms var(--ease-heavy);
  }

  .mobile-toggle[aria-expanded='true'] line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .mobile-toggle[aria-expanded='true'] line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.2);
  }

  .mobile-toggle[aria-expanded='true'] line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .mobile-menu > a {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition:
      opacity 360ms var(--ease-heavy),
      transform 560ms var(--ease-heavy),
      color 260ms var(--ease-heavy);
    transition-delay: 0ms;
  }

  .mobile-menu.open > a {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: calc(90ms + (var(--menu-index, 0) * 52ms));
  }

  .mobile-menu > .btn.btn-primary {
    min-height: 54px;
    justify-content: center;
    color: var(--bg-primary);
    font-family: var(--font);
    font-size: 0.86rem;
    font-weight: 650;
    letter-spacing: -0.01em;
  }

  .mobile-menu .mob-close svg {
    transition: transform 600ms var(--ease-heavy);
  }

  .mobile-menu.open .mob-close svg {
    transform: rotate(180deg);
  }

  /* Typography stability and optical tuning. */
  .hero-premium h1,
  .page-hero .section-title,
  .section-title {
    -webkit-font-smoothing: antialiased;
    font-optical-sizing: auto;
    text-wrap: balance;
  }

  .section-title .thin,
  .page-hero .thin {
    color: rgba(245,250,249,0.64);
    font-weight: 500;
  }

  .client-proof-section .section-title .thin,
  .client-proof-section .thin {
    color: rgba(6,17,31,0.58);
  }

  /* A restrained perspective grid gives the hero dimensional structure. */
  .hero-premium::before {
    display: block;
    inset: auto -28% -18%;
    width: auto;
    height: 46%;
    background-image:
      linear-gradient(rgba(138,223,212,0.10) 1px, transparent 1px),
      linear-gradient(90deg, rgba(138,223,212,0.10) 1px, transparent 1px);
    background-size: 34px 34px;
    opacity: 0.22;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 38%, transparent 94%);
    mask-image: linear-gradient(to bottom, transparent, #000 38%, transparent 94%);
    transform: perspective(420px) rotateX(64deg) translate3d(0, 5%, 0) scale(1.16);
    transform-origin: center bottom;
    animation: valueGridDrift 9s var(--ease-soft) infinite alternate;
  }

  .hero-premium .hero-bg img {
    transform: scale(1.025);
    transition: transform 8s var(--ease-heavy);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .hero-premium .eyebrow,
  .hero-premium h1,
  .hero-premium .hero-desc,
  .hero-premium .hero-actions,
  .page-hero .eyebrow,
  .page-hero .section-title,
  .page-hero .section-subtitle,
  .page-hero .content-nav {
    animation: valueHeroEnter 820ms var(--ease-heavy) both;
  }

  .hero-premium .eyebrow,
  .page-hero .eyebrow { animation-delay: 80ms; }
  .hero-premium h1,
  .page-hero .section-title { animation-delay: 150ms; }
  .hero-premium .hero-desc,
  .page-hero .section-subtitle { animation-delay: 240ms; }
  .hero-premium .hero-actions,
  .page-hero .content-nav { animation-delay: 330ms; }

  .page-hero::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    opacity: 0.28;
    background-image:
      radial-gradient(circle at 86% 15%, rgba(138,223,212,0.18), transparent 24%),
      linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: auto, 38px 38px, 38px 38px;
    -webkit-mask-image: linear-gradient(120deg, transparent 25%, #000, transparent 84%);
    mask-image: linear-gradient(120deg, transparent 25%, #000, transparent 84%);
  }

  .client-proof-section {
    background-image:
      radial-gradient(circle at 92% 8%, rgba(32,169,155,0.08), transparent 26%),
      linear-gradient(rgba(6,17,31,0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(6,17,31,0.025) 1px, transparent 1px);
    background-size: auto, 42px 42px, 42px 42px;
  }

  /* CTA architecture: tactile outer body and nested kinetic arrow. */
  .btn {
    transition:
      transform 420ms var(--ease-heavy),
      background-color 420ms var(--ease-heavy),
      border-color 420ms var(--ease-heavy),
      box-shadow 520ms var(--ease-heavy),
      color 300ms var(--ease-heavy);
  }

  .btn:not(.btn-outline) {
    border-radius: 999px;
    box-shadow:
      0 14px 36px rgba(1, 62, 58, 0.20),
      inset 0 1px 0 rgba(255,255,255,0.20),
      inset 0 -1px 0 rgba(0,0,0,0.12);
  }

  .btn:has(.btn-arrow) {
    padding-right: 10px;
  }

  .btn-arrow {
    display: inline-grid;
    width: 30px;
    height: 30px;
    margin: -5px 0 -5px 4px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
    transition:
      transform 460ms var(--ease-heavy),
      background-color 360ms var(--ease-heavy);
  }

  .btn-primary .btn-arrow {
    background: rgba(6,17,31,0.09);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
  }

  .btn:active {
    transform: translateY(1px) scale(0.975);
  }

  .btn:active .btn-arrow {
    transform: translate3d(2px, -1px, 0) scale(1.05);
  }

  /* Double-bezel surfaces without changing the existing DOM. */
  .service-grid .service-card,
  .pocket-card,
  .diff-item,
  .val-card,
  .client-case,
  .channel,
  .form-card {
    isolation: isolate;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    box-shadow:
      0 20px 54px rgba(1,8,16,0.20),
      inset 0 1px 0 rgba(255,255,255,0.09),
      inset 0 0 0 4px rgba(255,255,255,0.018);
    transition:
      transform 620ms var(--ease-heavy),
      opacity 420ms var(--ease-heavy),
      box-shadow 620ms var(--ease-heavy),
      background-color 420ms var(--ease-heavy);
  }

  .service-grid .service-card {
    border-color: rgba(138,223,212,0.13);
    background:
      radial-gradient(circle at 92% 0%, rgba(32,169,155,0.11), transparent 30%),
      linear-gradient(165deg, rgba(13,33,50,0.98), rgba(7,20,34,0.99));
  }

  .testimonial-media {
    transform-style: preserve-3d;
    transition:
      transform 620ms var(--ease-heavy),
      box-shadow 620ms var(--ease-heavy);
  }

  .testimonial-media::before {
    content: '';
    position: absolute;
    z-index: 3;
    inset: 1px;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 4px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.15),
      inset 0 0 0 4px rgba(4,12,23,0.12);
  }

  .testimonial-play {
    box-shadow:
      0 10px 30px rgba(1,8,16,0.32),
      inset 0 1px 0 rgba(255,255,255,0.18);
    transition:
      transform 520ms var(--ease-heavy),
      background-color 420ms var(--ease-heavy);
  }

  .testimonial-play::after {
    content: '';
    position: absolute;
    inset: -7px;
    border: 1px solid rgba(138,223,212,0.28);
    border-radius: 50%;
    animation: valuePlayHalo 3.8s var(--ease-soft) infinite;
  }

  .testimonial-card:active .testimonial-media {
    transform: perspective(760px) rotateX(1.5deg) scale(0.985);
  }

  .testimonial-card:active .testimonial-play {
    transform: scale(0.92);
  }

  /* Rails gain a center-focused Z axis and a quiet progress indicator. */
  .mobile-rail {
    perspective: 1100px;
  }

  .mobile-rail > * {
    transform-origin: center center;
  }

  .mobile-rail > *.is-rail-active {
    opacity: 1;
    transform: perspective(900px) translate3d(0, -2px, 10px) rotateY(-0.35deg);
  }

  .mobile-rail-progress {
    position: relative;
    display: block;
    width: 64px;
    height: 2px;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(245,250,249,0.13);
  }

  .mobile-rail-progress > span {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--blue-light);
    transform: scaleX(var(--rail-progress, 0.12));
    transform-origin: left center;
    transition: transform 180ms var(--ease-heavy);
  }

  .client-proof-section .mobile-rail-progress {
    background: rgba(6,17,31,0.12);
  }

  .client-proof-section .mobile-rail-progress > span {
    background: var(--brand-teal);
  }

  /* iOS keeps the viewport stable because editable controls never fall below 16px. */
  .form-field input,
  .form-field select,
  .form-field textarea {
    font-size: 16px !important;
    transition:
      transform 360ms var(--ease-heavy),
      border-color 360ms var(--ease-heavy),
      background-color 360ms var(--ease-heavy),
      box-shadow 420ms var(--ease-heavy);
  }

  .form-field input:focus,
  .form-field select:focus,
  .form-field textarea:focus {
    transform: translate3d(0, -1px, 0);
    background: rgba(255,255,255,0.052) !important;
  }

  .wa-fab {
    transition:
      opacity 340ms var(--ease-heavy),
      transform 520ms var(--ease-heavy),
      box-shadow 520ms var(--ease-heavy);
  }

  .wa-fab::before {
    content: '';
    position: absolute;
    inset: -6px;
    z-index: -1;
    border: 1px solid rgba(138,223,212,0.25);
    border-radius: 50%;
    animation: valueFabHalo 4.2s var(--ease-soft) infinite;
  }

  .wa-fab.is-context-hidden,
  body.menu-open .wa-fab,
  body.modal-open .wa-fab {
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, 18px, 0) scale(0.84);
  }

  .reveal.visible {
    animation: valueRevealDepth 760ms var(--ease-heavy) var(--reveal-delay) backwards;
  }

  @keyframes valueHeroEnter {
    from {
      opacity: 0;
      transform: translate3d(0, 22px, 0) scale(0.988);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }
  }

  @keyframes valueRevealDepth {
    from {
      opacity: 0.01;
      transform: perspective(900px) translate3d(0, 28px, 0) rotateX(2.4deg);
    }
    to {
      opacity: 1;
      transform: perspective(900px) translate3d(0, 0, 0) rotateX(0deg);
    }
  }

  @keyframes valueGridDrift {
    from { transform: perspective(420px) rotateX(64deg) translate3d(0, 3%, 0) scale(1.16); }
    to { transform: perspective(420px) rotateX(64deg) translate3d(0, 8%, 0) scale(1.2); }
  }

  @keyframes valuePlayHalo {
    0%, 100% { opacity: 0.24; transform: scale(0.94); }
    50% { opacity: 0.7; transform: scale(1.04); }
  }

  @keyframes valueFabHalo {
    0%, 100% { opacity: 0.16; transform: scale(0.94); }
    50% { opacity: 0.62; transform: scale(1.06); }
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .hero-premium::before,
  .hero-premium .eyebrow,
  .hero-premium h1,
  .hero-premium .hero-desc,
  .hero-premium .hero-actions,
  .page-hero .eyebrow,
  .page-hero .section-title,
  .page-hero .section-subtitle,
  .page-hero .content-nav,
  .testimonial-play::after,
  .wa-fab::before,
  .reveal.visible {
    animation: none !important;
  }

  .mobile-menu > a,
  .mobile-rail > *,
  .btn,
  .btn-arrow,
  .testimonial-media,
  .wa-fab {
    transition-duration: 0.01ms !important;
    transform: none !important;
  }
}