<script setup lang="ts">
useSeoMeta({
  title: 'Чистый город - клининговая компания',
})
</script>

<template>
  <div class="app text-lg">
    <k-nav></k-nav>
    <main>
      <about-company></about-company>
      <services></services>
      <clients></clients>
      <contacts></contacts>
      <map-view></map-view>
    </main>
    <k-footer></k-footer>
  </div>
</template>

<style lang="postcss">
:root {
  --col-width: 1280px;

  --clr-brand: #6ec843;
}

html {
  scroll-behavior: smooth;
}

.app {
  min-height: 100dvh;
}

p:not(:last-of-type) {
  margin-bottom: 16px;
}

.col-w {
  max-width: var(--col-width);
}

.scroll-target {
  position: absolute;

  &:target {
    scroll-margin-top: 60px;
  }
}

.link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  color: #84cc16;
  transition: color .2s;

  &:hover {
    color: #65a30d;
  }
}
</style>
