:root {
  --font-outfit: "Outfit", "Outfit Fallback";
  --font-sofia: "Sofia Sans", "Sofia Sans Fallback";
  --font-display: "Sofia Sans", "Sofia Sans Fallback";
  --font-inter: "Outfit", "Outfit Fallback";
  --accent: #f37338;
}

body {
  margin: 0;
  background: #faf8f5;
  font-family: var(--font-outfit), Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

footer { padding-bottom: 2rem; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
}

.js-motion [data-anim] { will-change: opacity, transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-anim] { opacity: 1 !important; transform: none !important; }
}

.pt-14 { padding-top: 3.5rem; }
.pt-20 { padding-top: 5rem; }
.mt-9  { margin-top: 2.25rem; }
.mt-14 { margin-top: 3.5rem; }
.mb-9  { margin-bottom: 2.25rem; }
.p-9   { padding: 2.25rem; }
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
.gap-9 { gap: 2.25rem; }
.my-7  { margin-top: 1.75rem; margin-bottom: 1.75rem; }
.pb-\[0\.5rem\] { padding-bottom: 0.5rem; }

.h-\[320px\]    { height: 320px; }
.max-w-\[42rem\] { max-width: 42rem; }
.max-w-\[44rem\] { max-width: 44rem; }
.max-w-\[62rem\] { max-width: 62rem; }

.text-\[1\.375rem\] { font-size: 1.375rem; line-height: 1.25; }
.text-\[1\.6rem\]   { font-size: 1.6rem;   line-height: 1.2; }
.text-\[1\.9rem\]   { font-size: 1.9rem;   line-height: 1.15; }
.leading-\[1\.08\]  { line-height: 1.08; }
.tracking-\[-0\.02rem\] { letter-spacing: -0.02rem; }
.tracking-\[-0\.03rem\] { letter-spacing: -0.03rem; }
.tracking-\[-0\.05rem\] { letter-spacing: -0.05rem; }
.text-\[\#c0392b\] { color: #c0392b; }

.bg-\[\#f4f2ee\] { background-color: #f4f2ee; }
.bg-\[\#f37338\]\/12 { background-color: rgba(243, 115, 56, 0.12); }
.border-\[\#f37338\]\/35 { border-color: rgba(243, 115, 56, 0.35); }
.border-neutral-900\/25 { border-color: rgba(23, 23, 23, 0.25); }
.hover\:bg-neutral-900\/5:hover { background-color: rgba(23, 23, 23, 0.05); }
.rounded-\[1\.5rem\] { border-radius: 1.5rem; }

.opacity-25 { opacity: 0.25; }
.opacity-45 { opacity: 0.45; }
.opacity-55 { opacity: 0.55; }
.opacity-\[0\.04\] { opacity: 0.04; }

.shadow-\[0_8px_30px_rgba\(0\,0\,0\,0\.05\)\] { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05); }
.shadow-\[0_8px_30px_rgba\(0\,0\,0\,0\.06\)\] { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06); }
.shadow-\[0_8px_32px_rgba\(0\,0\,0\,0\.3\)\]  { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); }
.shadow-\[0px_1px_3px_rgba\(0\,0\,0\,0\.04\)\] { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); }
.hover\:shadow-\[0_16px_50px_rgba\(0\,0\,0\,0\.09\)\]:hover { box-shadow: 0 16px 50px rgba(0, 0, 0, 0.09); }

.hover\:grayscale-0:hover { filter: grayscale(0); }
.hover\:scale-\[1\.03\]:hover { transform: scale(1.03); }

@media (min-width: 640px) {
  .sm\:h-\[440px\] { height: 440px; }
}
@media (min-width: 768px) {
  .md\:h-\[560px\]    { height: 560px; }
  .md\:text-\[36px\]  { font-size: 36px; }
  .md\:p-7            { padding: 1.75rem; }
}
@media (min-width: 1024px) {
  .lg\:top-28 { top: 7rem; }
}

.hover\:bg-neutral-200:hover { background-color: #e5e5e5; }
.hover\:bg-neutral-700:hover { background-color: #404040; }
.hover\:text-neutral-900:hover { color: #171717; }
.hover\:-translate-y-1:hover { transform: translateY(-0.25rem); }
.group:hover .group-hover\:bg-\[\#f37338\] { background-color: #f37338; }
.first\:mt-0:first-child { margin-top: 0; }

@media (min-width: 768px) {
  .md\:text-\[19px\] { font-size: 19px; }
  .md\:text-\[26px\] { font-size: 26px; }
  .md\:pt-6  { padding-top: 1.5rem; }
  .md\:gap-12 { gap: 3rem; }
}

@media (min-width: 1024px) {
  .lg\:w-1\/2     { width: 50%; }
  .lg\:w-56       { width: 14rem; }
  .lg\:flex-col   { flex-direction: column; }
  .lg\:items-end  { align-items: flex-end; }
  .lg\:py-16      { padding-top: 4rem; padding-bottom: 4rem; }
  .lg\:p-10       { padding: 2.5rem; }
}

.cm-logo {
  display: inline-flex;
  font-family: "Outfit", "Outfit Fallback", system-ui, sans-serif;
  font-weight: 900;
  font-size: 25px;
  letter-spacing: -.04em;
  line-height: 1;
  white-space: nowrap;
  filter: drop-shadow(0 .2em .4em rgba(234, 88, 12, .25));
}

.cm-logo-chat,
.cm-logo-mate {
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.cm-logo-chat { background-image: linear-gradient(135deg, #ea580c, #9a3412); }
.cm-logo-mate { background-image: linear-gradient(135deg, #fb923c, #ea580c); }

.cm-logo--lg { font-size: 30px; }
.cm-logo--xl { font-size: 38px; }

.cm-hero-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0a0a0a;
}

.cm-hero-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

wa-icon.wa-ic { display: inline-flex; align-items: center; justify-content: center; }
wa-icon.w-3 { font-size: 12px; }
wa-icon.w-4 { font-size: 16px; }
wa-icon.w-5 { font-size: 20px; }
wa-icon.w-6 { font-size: 24px; }
wa-icon.w-8 { font-size: 32px; }

.cm-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(75% 80% at 30% 25%, rgba(243, 115, 56, 0.30) 0%, transparent 62%),
    radial-gradient(60% 70% at 82% 78%, rgba(251, 146, 60, 0.18) 0%, transparent 66%),
    linear-gradient(145deg, #241408 0%, #17150f 55%, #101010 100%);
}

.cm-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 52px 52px;
}

.cm-stage wa-icon {
  position: relative;
  font-size: clamp(64px, 12vw, 132px);
  color: #ffb37a;
  filter: drop-shadow(0 12px 40px rgba(243, 115, 56, 0.45));
}

.cm-stage::after {
  content: "";
  position: absolute;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(243, 115, 56, 0.22) 0%, transparent 68%);
}

.cm-stage-panel {
  flex-direction: column;
  gap: 18px;
  padding: 44px 32px;
  border-radius: 2rem;
}
.cm-stage-panel wa-icon { font-size: clamp(52px, 7vw, 84px); }
.cm-stage-panel .cm-stage-label {
  position: relative;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.cm-stage--aside { justify-content: flex-end; padding-right: 6%; }
.cm-stage--aside wa-icon { font-size: clamp(120px, 17vw, 240px); opacity: 0.5; }
.cm-stage--aside::after { left: auto; right: 2%; width: 34%; }

@media (max-width: 767px) {
  .cm-stage--aside wa-icon,
  .cm-stage--aside::after { display: none; }
}

@media (min-width: 1100px) {
  .cm-nav-links  { display: flex; }
  .cm-nav-action { display: inline-flex; }
  .cm-nav-menu   { display: none; }
}