/*==============================================================
  VirtuaalKodu — layout & hierarchy layer
  Loads AFTER style.css. Never edit style.css; override here.

  1.  Tokens
  2.  Viewport sections & scroll behaviour
  3.  Fluid type scale
  4.  Reveal motion
  5.  Header & navigation
  6.  Section dot indicator
  7.  Hero
  8.  Why (benefits)
  9.  Sample tour
  10. How it works
  11. Pricing
  12. FAQ
  13. Contact & footer
  14. Utilities, preloader, scroll-top
==============================================================*/

/*--------------------------------------------------------------
  1. Tokens
--------------------------------------------------------------*/
:root {
  --header-h: 88px;
  --navy: #152046;
  --navy-soft: #1c2a5c;
  --green: #19cf79;
  --ink: #636363;
  --line: rgba(21, 32, 70, 0.1);
  --page: #f6f8fb;
  --gap: clamp(24px, 3vw, 48px);
  --pad-y: clamp(28px, 4.5vh, 72px);
  --radius: 16px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background-color: #fff;
  overflow-x: hidden;
  text-wrap: pretty;
}

/* Container: defer to Bootstrap's responsive .container (v5.3.2 —
   max-widths 540/720/960/1140/1320 and centering are Bootstrap's). We
   only widen the side gutter a touch so the full-viewport sections
   breathe; max-width and margins stay Bootstrap's. */
.container {
  padding-inline: clamp(16px, 3vw, 32px);
}

/*--------------------------------------------------------------
  2. Viewport sections & scroll behaviour

  Each section fills the viewport and snaps gently. Snapping is
  "proximity", never "mandatory", so a section taller than the
  screen can always be scrolled through normally.
--------------------------------------------------------------*/
/* Sections are full-height and carry their own header-sized top
   padding, so anchors must NOT add the header offset again —
   otherwise every jump overshoots by one header height. That
   double offset was the original navigation bug. */
html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  scroll-padding-top: 0;
}

.vk-sec {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--header-h) + var(--pad-y));
  padding-bottom: var(--pad-y);
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  scroll-margin-top: 0;
}

/* Sections that can outgrow the viewport keep their own rhythm */
.vk-sec--fluid {
  min-height: 100svh;
  height: auto;
}

/* Top-align the content instead of vertically centring it. Used for the FAQ,
   where centred content re-centres on every accordion open/close — that shift
   read as the viewport "jumping". Top-aligned, opening a card only pushes the
   cards below it down; the heading and tapped card stay put. */
.vk-sec--top {
  justify-content: flex-start;
}

.vk-sec--dark {
  background-color: var(--navy);
  color: rgba(255, 255, 255, 0.72);
}
.vk-sec--dark h2,
.vk-sec--dark h3 {
  color: #fff;
}

.vk-sec--tint {
  background-color: var(--page);
}

/* Landscape phones and very short windows: stop forcing full
   height, because the taller sections simply will not fit. A
   1366x768 laptop (~650px viewport) still gets full-height
   sections — that is the point of the design. */
@media (max-height: 560px) {
  .vk-sec {
    min-height: 0;
    padding-top: calc(var(--header-h) + 40px);
    padding-bottom: 56px;
  }
  .vk-hero {
    min-height: 100svh;
  }
}

/* Magnetic snapping is switched off wherever it tends to trap content
   or feel janky: shorter viewports (most laptops, where a section can
   exceed the screen) and touch devices (where momentum scroll fights
   the snap). The sections still fill the viewport via min-height — only
   the magnetism is dropped, so nothing can ever become unreachable.
   Snapping stays on for tall desktop screens, where it shines. */
@media (max-height: 740px), (pointer: coarse) {
  html {
    scroll-snap-type: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }
}

/*--------------------------------------------------------------
  3. Fluid type scale
  Overrides the template's fixed px sizes so nothing breaks
  between 640px and 1024px.
--------------------------------------------------------------*/
.cs_fs_64 {
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.cs_fs_48 {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
}
.cs_fs_30 {
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 1.95rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.cs_fs_28 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.2;
}
.cs_fs_24 {
  font-size: clamp(1.06rem, 0.98rem + 0.5vw, 1.4rem);
  line-height: 1.35;
}
.cs_fs_18 {
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.12rem);
}
.cs_fs_16 {
  font-size: 1rem;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

.vk-heading {
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.6rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
}
.vk-heading--center {
  margin-inline: auto;
  text-align: center;
  max-width: 24ch;
}

/* Small green eyebrow rule above centred headings */
.vk-rule {
  width: 44px;
  height: 3px;
  border-radius: 3px;
  background: var(--green);
  margin: 0 auto clamp(16px, 2vh, 28px);
}

/* Text eyebrow — the split-layout analogue of .vk-rule */
.vk-eyebrow {
  margin: 0 0 12px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
}

/*--------------------------------------------------------------
  4. Reveal motion
  Only active when JS is running, so content is never hidden
  from crawlers or on script failure.
--------------------------------------------------------------*/
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal="left"] {
  transform: translateX(-32px);
}
.js [data-reveal="right"] {
  transform: translateX(32px);
}
.js [data-reveal="zoom"] {
  transform: scale(0.94);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/*--------------------------------------------------------------
  5. Header & navigation
--------------------------------------------------------------*/
.cs_site_header.cs_style_1 {
  background: rgba(255, 255, 255, 0);
  transition: background-color 0.3s ease, box-shadow 0.3s ease,
    backdrop-filter 0.3s ease;
}
.cs_site_header.cs_style_1 .cs_main_header_in,
.cs_site_header.cs_style_1.cs_sticky_active .cs_main_header_in {
  height: var(--header-h);
}
.cs_site_header.cs_style_1.cs_sticky_active {
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  box-shadow: 0 1px 0 var(--line), 0 8px 30px -18px rgba(21, 32, 70, 0.4);
}

/* The template painted the mobile header bar navy, which hid the
   navy half of the logo. Kill it. */
@media screen and (max-width: 1199px) {
  .cs_main_header .container {
    background-color: transparent;
  }
}

.cs_main_header_in {
  gap: 24px;
  flex-wrap: nowrap;
}
/* The redesign moved the nav out of .cs_main_header_left, so the
   template's `.cs_site_branding + .cs_nav` selector never matched and
   the nav lost its alignment. Target the real adjacency and let the
   branding column shrink so the nav can sit hard right. */
.cs_main_header_left {
  min-width: 0;
  /* Branding is an inline-block <a>, so the font line-box adds ~9px of
     leading below it and the logo rides ~5px above the bar's true
     centre. Flex-centring collapses that leading so the logo sits on
     the real 44px midline — matching the toggle. */
  display: flex;
  align-items: center;
}
.cs_main_header_left + .cs_nav {
  margin-left: auto;
}
.cs_avatar.cs_style_1.cs_mb_lg_24 {
  margin-bottom: 0;
}
.cs_site_branding .cs_avatar_info .cs_fs_28 {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.cs_site_branding img {
  width: clamp(38px, 4vw, 46px);
  height: auto;
}

/* Desktop nav: pill hover + active state */
@media screen and (min-width: 1200px) {
  .cs_nav .cs_nav_list {
    gap: 4px;
    /* style.css leaves this flex row at align-items:stretch, which
       expands each auto-height <li> to the full 88px bar; the inline
       pill then rides the top of that box, so the nav floats above the
       centred logo. Centre the items so the pills line up with it. */
    align-items: center;
    height: var(--header-h);
  }
  .cs_nav .cs_nav_list > li {
    margin-right: 0 !important;
    height: auto;
  }
  .cs_nav .cs_nav_list > li > a {
    padding: 9px 15px;
    border-radius: 999px;
    font-size: 0.97rem;
    font-weight: 500;
    line-height: 1.2;
    transition: color 0.25s ease, background-color 0.25s ease;
  }
  .cs_nav .cs_nav_list > li > a:hover {
    background: rgba(25, 207, 121, 0.1);
    color: var(--navy);
  }
  .cs_nav .cs_nav_list > li.is-active > a {
    background: var(--navy);
    color: #fff;
  }
}

/* Mobile panel */
@media screen and (max-width: 1199px) {
  .cs_nav .cs_nav_list {
    position: fixed;
    inset: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100svh;
    padding: calc(var(--header-h) + 24px) clamp(20px, 6vw, 48px) 48px;
    background: var(--navy);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.32s var(--ease), transform 0.32s var(--ease),
      visibility 0.32s;
  }
  .cs_nav .cs_nav_list.cs_active {
    left: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .cs_nav .cs_nav_list > li > a {
    display: block;
    padding: 14px 4px;
    min-height: 48px;
    font-size: clamp(1.25rem, 1rem + 2vw, 1.75rem);
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .cs_nav .cs_nav_list > li.is-active > a {
    color: var(--green);
  }
  .cs_menu_toggle {
    /* Built in JS as a real <button>, so strip the UA chrome (border +
       grey fill) that otherwise boxes the bars. style.css never resets
       it because the original template used an <a>. */
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    width: 44px;
    height: 44px;
    top: 50%;
    right: 0;
    margin-top: -22px;
    color: var(--navy);
    display: grid;
    place-items: center;
    z-index: 1021;
  }
  .cs_menu_toggle span,
  .cs_menu_toggle span::before,
  .cs_menu_toggle span::after {
    width: 26px;
  }
  /* style.css offsets the middle bar with `top:12px` to centre it in
     the old 27px toggle. We centre via grid instead, so that offset
     just pushes all three bars ~12px low. Zero it so the icon sits on
     the box centre (and thus level with the logo). */
  .cs_menu_toggle span {
    top: 0;
  }
  /* style.css centres the toggle with a hard-coded margin-top:-13px at
     higher specificity (0,3,0), which drops it ~9px below the logo.
     Match that specificity and centre on the 88px bar with a transform
     so the toggle lines up with the (now truly centred) logo. */
  .cs_site_header.cs_style_1 .cs_menu_toggle {
    top: 50%;
    margin-top: 0;
    transform: translateY(-50%);
  }
  .cs_menu_toggle.cs_toggle_active {
    color: #fff;
  }
  body.vk-nav-open {
    overflow: hidden;
  }
}

.vk-skip {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2000;
  padding: 12px 18px;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  transform: translateY(-150%);
  transition: transform 0.2s ease;
}
.vk-skip:focus-visible {
  transform: none;
  color: #fff;
}

:where(a, button, input, textarea, summary):focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}

/*--------------------------------------------------------------
  6. Section dot indicator
--------------------------------------------------------------*/
.vk-dots {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: none;
  flex-direction: column;
  gap: 14px;
}
@media (min-width: 1200px) and (min-height: 621px) {
  .vk-dots {
    display: flex;
  }
}
.vk-dots a {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(21, 32, 70, 0.22);
  transition: background-color 0.3s ease, transform 0.3s var(--ease);
}
.vk-dots a:hover {
  transform: scale(1.5);
  background: var(--green);
}
.vk-dots a.is-active {
  background: var(--green);
  transform: scale(1.45);
}
.vk-dots.is-on-dark a {
  background: rgba(255, 255, 255, 0.3);
}
.vk-dots.is-on-dark a.is-active,
.vk-dots.is-on-dark a:hover {
  background: var(--green);
}

/*--------------------------------------------------------------
  7. Hero
--------------------------------------------------------------*/
.vk-hero {
  background-size: cover;
  background-position: 72% center;
  background-repeat: no-repeat;
  /* Bottom pad intentionally outweighs the top: justify-content
     centres between the two paddings, so an 88px top pad with a 0
     bottom dragged the block ~44px below the true middle. A heavier
     bottom pad lifts it to sit just above centre, which reads better
     for a bottom-heavy heading + CTA stack (and opens more air above
     the scroll cue). The +40px is the dial — raise to lift further. */
  padding-top: var(--header-h);
  padding-bottom: calc(var(--header-h) + 40px);
  overflow: hidden;
}
/* Width in px, not ch: the ch unit here is measured at the block's
   ~1rem size, not the 4rem heading, so 44ch was only ~350px and forced
   the title into a cramped 4-line stack. ~680px lets text-wrap:balance
   settle it into two lines, each ending on its green accent word. */
.vk-hero .cs_hero_text {
  max-width: 680px;
}
.vk-hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
      100deg,
      rgba(255, 255, 255, 0.97) 0%,
      rgba(255, 255, 255, 0.92) 42%,
      rgba(255, 255, 255, 0.45) 66%,
      rgba(255, 255, 255, 0) 84%
    ),
    linear-gradient(to top, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 45%);
}
.vk-hero .container {
  position: relative;
  z-index: 1;
}
.vk-hero h1 {
  margin-bottom: clamp(14px, 2vh, 22px);
}
.vk-hero p {
  color: var(--navy);
  opacity: 0.78;
  max-width: 38ch;
}
.vk-hero p br {
  display: none;
}
.vk-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(26px, 4vh, 44px);
}
.vk-hero-actions .cs_btn.cs_style_1 {
  margin: 0 !important;
  min-height: 52px;
  padding: 14px 26px;
  font-size: 1rem;
}
.vk-hero-actions .cs_btn.cs_accent_bg {
  box-shadow: 0 14px 34px -14px rgba(25, 207, 121, 0.75);
}
.vk-hero-actions .cs_btn.cs_type_1 {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(21, 32, 70, 0.16);
  color: var(--navy) !important;
}
.vk-hero-actions .cs_btn.cs_type_1:hover {
  background: #fff;
  border-color: var(--navy);
}

.vk-scrollcue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  translate: -50% 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--navy);
  border: 1px solid rgba(21, 32, 70, 0.18);
  background: rgba(255, 255, 255, 0.7);
  animation: vk-bob 2.4s var(--ease) infinite;
}
@keyframes vk-bob {
  0%,
  100% {
    translate: -50% 0;
  }
  50% {
    translate: -50% 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vk-scrollcue {
    animation: none;
  }
}
@media (max-width: 767px) {
  .vk-hero {
    background-position: 78% center;
    padding-top: var(--header-h);
    padding-bottom: var(--pad-y);
  }
  /* Tall phone: the copy block stays centred and cohesive (title +
     subtitle tight together), but we open the gap down to the CTA so
     the stack breathes into the tall viewport instead of leaving one
     dead void below the buttons. The photo then frames the content
     top and bottom. */
  .vk-hero-actions {
    margin-top: clamp(40px, 11vh, 104px);
  }
  .vk-scrollcue {
    display: none;
  }
}

/*--------------------------------------------------------------
  8. Why (benefits)
--------------------------------------------------------------*/
.vk-why-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 991px) {
  .vk-why-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.cs_about_thumbnail_wrapper {
  max-height: 62svh;
}
.cs_about_thumbnail {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 40px 80px -50px rgba(21, 32, 70, 0.55);
}
.cs_about_thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 62svh;
  object-fit: cover;
}
.cs_about_shape_1 {
  opacity: 0.35;
  left: -34px;
  bottom: -34px;
  z-index: -1;
}
/* On the stacked single-column layout the decorative collage eats ~40svh
   and pushes the benefits list below the fold. The message (heading +
   benefits) is what matters here, so drop the image on mobile/tablet. */
@media (max-width: 991px) {
  .cs_about_thumbnail_wrapper {
    display: none;
  }
}
/* Phones: with the image gone the message no longer fills the screen, so
   the section's vertical centering left dead space up top. Stretch the
   column to the full viewport and spread the benefit cards to fill it. */
@media (max-width: 600px) {
  #why .container,
  #why .vk-why-grid,
  #why .cs_about_text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }
  #why .vk-benefits {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    justify-content: space-between;
    gap: 12px;
  }
}

.vk-benefits {
  list-style: none;
  margin: clamp(24px, 3.5vh, 40px) 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.vk-benefits li {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.3s ease, transform 0.3s var(--ease),
    box-shadow 0.3s ease;
}
.vk-benefits li:hover {
  border-color: rgba(25, 207, 121, 0.5);
  transform: translateX(4px);
  box-shadow: 0 18px 34px -28px rgba(21, 32, 70, 0.6);
}
.vk-benefits li i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.8rem;
  background: rgba(25, 207, 121, 0.12);
}
.vk-benefits li span {
  color: var(--navy);
  font-weight: 500;
  line-height: 1.45;
}

/*--------------------------------------------------------------
  9. Sample tour — the page's centrepiece
--------------------------------------------------------------*/
.vk-tour .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2.5vh, 32px);
}
.vk-tour .cs_tour_embed {
  width: 100%;
  max-width: 1240px;
  border-radius: var(--radius);
  max-height: calc(100svh - var(--header-h) - 250px);
  box-shadow: 0 60px 100px -60px rgba(0, 0, 0, 0.9);
}
.vk-tour .cs_tour_embed::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  pointer-events: none;
  z-index: 2;
}
.vk-tour .cs_tour_play {
  width: clamp(64px, 8vw, 96px);
  height: clamp(64px, 8vw, 96px);
  font-size: clamp(20px, 2vw, 28px);
  box-shadow: 0 0 0 0 rgba(25, 207, 121, 0.5);
  animation: vk-pulse 2.6s ease-out infinite;
}
@keyframes vk-pulse {
  70% {
    box-shadow: 0 0 0 26px rgba(25, 207, 121, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(25, 207, 121, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vk-tour .cs_tour_play {
    animation: none;
  }
}
.vk-tour .cs_tour_note {
  margin: 0;
  text-align: center;
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.66);
}
.vk-tour .cs_tour_note a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-height: 860px) and (min-width: 992px) {
  .vk-tour .cs_tour_embed {
    max-height: calc(100svh - var(--header-h) - 210px);
  }
}

/* Phones: with only a heading, a 16:9 video and one line, the centred
   cluster floats in the middle of the full-height section, leaving big
   voids top and bottom. Give the card a tall portrait crop so the
   cluster nearly fills the viewport — the poster is object-fit: cover,
   so it simply crops, no letterboxing. The video ends up far larger and
   the voids collapse to tight, symmetric margins, while the note stays
   clear of the reveal observer's bottom dead-zone. The max-height guard
   keeps it fitting on shorter phones; short landscape phones opt out via
   the max-height rule above. */
@media (max-width: 575.98px) and (min-height: 561px) {
  .vk-tour .cs_tour_embed {
    aspect-ratio: 4 / 5;
    max-height: calc(100svh - var(--header-h) - 300px);
  }
}

/*--------------------------------------------------------------
  10. How it works
--------------------------------------------------------------*/
.vk-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 34px);
  margin-top: clamp(28px, 4vh, 56px);
  position: relative;
}
/* connector line behind the three steps */
.vk-steps::before {
  content: "";
  position: absolute;
  top: 54px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: repeating-linear-gradient(
    to right,
    rgba(25, 207, 121, 0.55) 0 8px,
    transparent 8px 16px
  );
}
@media (max-width: 767px) {
  .vk-steps {
    grid-template-columns: 1fr;
    gap: clamp(16px, 2.4vh, 22px);
    margin-top: clamp(28px, 5vh, 48px);
  }
  .vk-steps::before {
    display: none;
  }
}

.vk-step {
  position: relative;
  text-align: center;
  padding: clamp(26px, 3vw, 40px) clamp(18px, 2vw, 28px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s ease,
    border-color 0.35s ease;
}
.vk-step:hover {
  transform: translateY(-6px);
  border-color: rgba(25, 207, 121, 0.45);
  box-shadow: 0 40px 60px -45px rgba(21, 32, 70, 0.75);
}
.vk-step-num {
  font-family: var(--heading-font, "Golos Text", sans-serif);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--green);
}
.vk-step-icon {
  width: clamp(72px, 7vw, 92px);
  height: clamp(72px, 7vw, 92px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 18px 34px -18px rgba(25, 207, 121, 0.7);
  transition: background-color 0.35s ease, box-shadow 0.35s ease,
    transform 0.35s var(--ease);
}
.vk-step:hover .vk-step-icon {
  background: #14bb6d;
  box-shadow: 0 22px 40px -18px rgba(25, 207, 121, 0.85);
  transform: scale(1.06);
}
.vk-step-icon img {
  width: clamp(38px, 3.6vw, 50px);
  height: auto;
}
.vk-step h3 {
  margin: 0;
  color: var(--navy);
  font-weight: 500;
  line-height: 1.32;
  max-width: 22ch;
}
@media (max-width: 767px) {
  .vk-step {
    flex-direction: row;
    text-align: left;
    align-items: center;
    gap: 20px;
    padding: clamp(24px, 3.4vh, 34px) 22px;
  }
  .vk-step-num {
    order: -1;
    font-size: 0.95rem;
  }
  .vk-step-icon {
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
  }
  .vk-step-icon img {
    width: 38px;
  }
  .vk-step h3 {
    max-width: none;
  }
}

/*--------------------------------------------------------------
  11. Pricing
--------------------------------------------------------------*/
.vk-price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
  max-width: 940px;
  margin: clamp(18px, 2.4vh, 34px) auto 0;
}
@media (max-width: 767px) {
  .vk-price-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.vk-price-grid .cs_card.cs_style_1 {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: clamp(22px, 2.2vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -50px rgba(21, 32, 70, 0.7);
  transition: transform 0.35s var(--ease), box-shadow 0.35s ease,
    border-color 0.35s ease;
}
.vk-price-grid .cs_card.cs_style_1:hover {
  transform: translateY(-6px);
  border-color: rgba(25, 207, 121, 0.45);
  box-shadow: 0 46px 70px -50px rgba(21, 32, 70, 0.8);
}
.vk-price-grid .cs_card.cs_style_1 .cs_card_icon {
  display: grid;
  place-items: center;
  height: clamp(72px, 6.5vw, 92px);
  margin-bottom: 4px;
}
.vk-price-grid .cs_card.cs_style_1 .cs_card_icon img {
  max-height: 100%;
  width: clamp(64px, 6vw, 84px);
  height: auto;
}
.vk-price-grid .cs_card.cs_style_1 .cs_card_content {
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 18px;
}
.vk-price-grid .cs_card.cs_style_1 .cs_card_title {
  text-align: center;
  margin-bottom: 0;
}
.vk-price-grid .cs_card.cs_style_1 .cs_card_features_list {
  display: grid;
  /* style.css sets repeat(2, auto) here — force a single column so
     both cards' rows line up for comparison */
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  flex: 1;
}
.vk-price-grid .cs_card.cs_style_1 .cs_card_features_list li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line);
  color: var(--navy);
  font-size: 1rem;
}
.vk-price-grid .cs_card.cs_style_1 .cs_card_features_list li:last-child {
  border-bottom: 0;
}
.vk-price-grid .cs_card.cs_style_1 .cs_card_features_list span {
  width: 24px;
  display: grid;
  place-items: center;
}
.vk-price-grid .cs_card.cs_style_1 .cs_card_btns_wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.vk-price-grid .cs_card.cs_style_1 .cs_card_price {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* style.css gives .cs_card_price a border + flex:1 for the old
     property-card layout — reset it so the price reads as plain text,
     not an empty input field. */
  flex: 0 1 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  gap: 4px;
}
.vk-price-grid .cs_card.cs_style_1 .cs_card_price_for {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  color: var(--ink);
}
.vk-price-grid .cs_card.cs_style_1 .cs_card_price_value {
  font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.vk-price-grid .cs_card.cs_style_1 .cs_card_price_value small {
  color: var(--green);
  font-size: 0.5em;
  font-weight: 600;
}
.vk-price-grid .cs_card.cs_style_1 .vk-price-cta {
  width: 100%;
  min-height: 54px;
  margin: 0;
}
.vk-price-note {
  text-align: center;
  margin: clamp(12px, 1.6vh, 18px) 0 0;
  color: var(--ink);
}

/*--------------------------------------------------------------
  12. FAQ
--------------------------------------------------------------*/
.vk-faq-list {
  max-width: 860px;
  margin: clamp(24px, 3.5vh, 48px) auto 0;
  width: 100%;
}
.vk-faq-list .cs_accordian.cs_style_2 {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.vk-faq-list .cs_accordian.cs_style_2:not(:last-child) {
  margin-bottom: 12px;
}
.vk-faq-list .cs_accordian.active {
  border-color: rgba(25, 207, 121, 0.45);
  box-shadow: 0 30px 55px -45px rgba(21, 32, 70, 0.8);
}
.vk-faq-list .cs_accordian_head {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(16px, 2vw, 24px) clamp(18px, 2.2vw, 28px);
  min-height: 56px;
}
.vk-faq-list .cs_accordian_head > span:first-child {
  flex: 1;
}
.vk-faq-list .cs_accordian_title {
  margin: 0;
  color: var(--navy);
  font-weight: 500;
  line-height: 1.35;
}
.vk-faq-list .cs_accordian_toggle {
  position: relative;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: transform 0.3s var(--ease);
}
.vk-faq-list .cs_accordian.active .cs_accordian_toggle {
  transform: rotate(45deg);
}
/* Keep this bar's length so the 45deg parent turn crosses the other bar into a
   clean "×". The base template zeroes its width in the active state, which left
   a single diagonal bar (a "⊘"-looking slash) instead of a close icon. */
.vk-faq-list .cs_accordian.active .cs_accordian_toggle::after {
  width: 14px;
  transform: translate(-50%, -50%) rotate(90deg);
}
/* Answer panel — the height is animated with the grid-rows 0fr->1fr technique so
   it opens and closes smoothly, without measuring the content height in script.
   The <p> is the collapsing grid item (overflow-clipped, min-height:0); its
   bottom padding is applied only while open so the panel fully collapses to 0.
   Scoped with .cs_style_2 to outrank the base template's accordion rules; the
   horizontal padding is left to that template rule so the copy keeps its inset. */
.vk-faq-list .cs_accordian.cs_style_2 .cs_accordian_body {
  display: grid;
  grid-template-rows: 0fr;
  padding-top: 0;
  padding-bottom: 0;
  transition: grid-template-rows 0.4s var(--ease);
}
.vk-faq-list .cs_accordian.cs_style_2.active .cs_accordian_body {
  grid-template-rows: 1fr;
}
.vk-faq-list .cs_accordian.cs_style_2 .cs_accordian_body p {
  overflow: hidden;
  min-height: 0;
  margin: 0;
  max-width: 62ch;
  color: var(--navy-soft);
  line-height: 1.63em;
  padding-bottom: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.4s var(--ease);
}
.vk-faq-list .cs_accordian.cs_style_2.active .cs_accordian_body p {
  padding-bottom: clamp(24px, 2.2vw, 38px);
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .vk-faq-list .cs_accordian_body,
  .vk-faq-list .cs_accordian_body p {
    transition: none;
  }
}

/*--------------------------------------------------------------
  13. Contact & footer
--------------------------------------------------------------*/
/* Contact is the viewport snap section and also the page's outro: the
   form area (.vk-contact-main) grows to fill and centres itself, while the
   copyright bar (.vk-contact-foot) pins to the bottom edge inside the same
   viewport. min-height (not height) means a tall form + hCaptcha grows the
   section and stays scrollable rather than clipping the submit button. */
.vk-contact {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--header-h) + var(--pad-y));
  background: var(--navy);
  color: rgba(255, 255, 255, 0.72);
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}
.vk-contact-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: var(--pad-y);
}
.vk-contact-foot {
  flex: 0 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 18px;
  padding-bottom: 18px;
  text-align: center;
}
@media (max-height: 560px) {
  .vk-contact {
    min-height: 0;
  }
}
.vk-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 991px) {
  .vk-contact-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}
.vk-contact h2 {
  color: #fff;
  margin: 0 0 clamp(18px, 2.5vh, 28px);
  max-width: 22ch;
}
.vk-contact-eyebrow {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 10px;
}
.vk-contact-side h2 {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}
.cs_footer_widget_address {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* The li is only the card box; the button inside it is the flex
   line, so the icon gap and the 48px hit area apply identically in
   every row. Each row copies its value to the clipboard on click. */
.cs_footer_widget_address li {
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.cs_footer_widget_address li:hover {
  border-color: rgba(25, 207, 121, 0.55);
  background: rgba(255, 255, 255, 0.07);
}
.cs_footer_widget_address li:has(.vk-copy.is-copied) {
  border-color: rgba(25, 207, 121, 0.75);
  background: rgba(25, 207, 121, 0.1);
}
/* The copy control fills the whole card, so the entire row is the
   click target. Button chrome is reset back to the plain card look. */
.vk-copy {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  margin: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: inherit;
}
.vk-copy:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.cs_footer_widget_address li i {
  position: static;
  color: var(--green);
  width: 18px;
  text-align: center;
  flex: 0 0 18px;
}
.vk-copy-value {
  flex: 1 1 auto;
  min-width: 0;
}
/* Copy affordance: dim by default, greens up on hover, and the
   whole thing swaps to a "Kopeeritud" tick once the value lands. */
.vk-copy-hint {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.25s ease;
}
.vk-copy:hover .vk-copy-hint {
  color: var(--green);
}
.vk-copy-hint i {
  width: auto;
  flex: 0 0 auto;
}
.vk-copy-done {
  display: none;
  align-items: center;
  gap: 6px;
  color: var(--green);
}
.vk-copy-done i {
  color: var(--green);
}
.vk-copy.is-copied .vk-copy-idle {
  display: none;
}
.vk-copy.is-copied .vk-copy-hint {
  color: var(--green);
}
.vk-copy.is-copied .vk-copy-done {
  display: inline-flex;
}
/* Visually-hidden screen-reader announcement for the copy action. */
.vk-copy-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.vk-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.vk-form > .vk-form-full {
  grid-column: 1 / -1;
}
@media (max-width: 575px) {
  .vk-form {
    grid-template-columns: 1fr;
  }
}
.vk-form .cs_form_field {
  width: 100%;
  min-height: 52px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.vk-form textarea.cs_form_field {
  min-height: 120px;
  resize: vertical;
}
.vk-form .cs_form_field::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.vk-form .cs_form_field:focus {
  border-color: var(--green);
  background: rgba(255, 255, 255, 0.09);
  outline: none;
}
.vk-form-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.vk-form-submit .cs_btn.cs_style_1 {
  float: none !important;
  min-height: 52px;
  padding: 14px 28px;
}
/* On phones the submit row stacks and the button spans the full
   width, so it lines up with the full-width fields above it. */
@media (max-width: 575px) {
  .vk-form-submit {
    flex-direction: column;
    align-items: stretch;
  }
  .vk-form-submit .cs_btn.cs_style_1 {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}
#cs_result {
  font-size: 0.95rem;
}
.cs_form_result.cs_success {
  color: var(--green);
}

.vk-contact-social {
  margin-top: clamp(22px, 3.5vh, 34px);
}
.vk-contact-social-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 12px;
}
.vk-contact-social .cs_social_btns.cs_style_1 {
  gap: 12px;
}
.vk-contact-social .cs_social_btns.cs_style_1 a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 15px;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.vk-contact-social .cs_social_btns.cs_style_1 a:hover {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.cs_footer_copyright {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
}

/*--------------------------------------------------------------
  14. Utilities, preloader, scroll-top
--------------------------------------------------------------*/
[hidden] {
  display: none !important;
}

.cs_section_heading.cs_style_1 {
  margin-bottom: 0;
}

.vk-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Preloader can never get stuck: CSS retires it on its own. */
.cs_preloader {
  animation: vk-preloader-out 0.5s ease 1.1s forwards;
}
@keyframes vk-preloader-out {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
.cs_preloader.is-done {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s;
}

.cs_scrolltop_btn {
  width: 48px;
  height: 48px;
  right: 22px;
  bottom: 22px;
  box-shadow: 0 18px 34px -18px rgba(21, 32, 70, 0.7);
  border: 1px solid var(--line);
  z-index: 91;
}
@media (min-width: 1200px) {
  .cs_scrolltop_btn {
    right: 56px;
  }
}

/*--------------------------------------------------------------
  15. Refined motion polish
  Subtle, tasteful micro-interactions on top of the redesign. Every
  transform here sits behind `prefers-reduced-motion: no-preference`,
  so motion-sensitive visitors get the calm, static version. Colour-only
  changes stay unguarded (a hover colour is not "motion").
--------------------------------------------------------------*/

/* Accent buttons stay filled on hover. The template hollowed them out
   (transparent bg + green text), which read as "disabled" on the hero
   and on the dark contact panel. */
.cs_btn.cs_style_1.cs_accent_bg:hover {
  background-color: var(--green);
  color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
  /* Buttons lift on hover and press back down on click. */
  .cs_btn.cs_style_1 {
    transition: transform 0.25s var(--ease), background-color 0.25s ease,
      color 0.25s ease, box-shadow 0.25s ease;
  }
  .cs_btn.cs_style_1:hover {
    transform: translateY(-2px);
  }
  .cs_btn.cs_style_1:active {
    transform: translateY(0);
  }

  /* Hero primary CTA: keep it filled and deepen the glow on hover. */
  .vk-hero-actions .cs_btn.cs_accent_bg:hover {
    box-shadow: 0 20px 42px -12px rgba(25, 207, 121, 0.85);
  }

  /* The green eyebrow rule "draws" itself out from nothing as its
     heading reveals — a small, classy accent above each section title. */
  .js .vk-rule[data-reveal] {
    width: 0;
    transform: none;
    transition: width 0.7s var(--ease), opacity 0.7s var(--ease);
  }
  .js .vk-rule[data-reveal].is-in {
    width: 44px;
  }
}