/* ==========================================================================
   InnovationZ - exact Figma replication
   Desktop frame : 1280 x 832   (node 1395:2 / 1397:49)
   Mobile frame  : 420  x 912   (node 1375:34 / 1375:57 / 1379:81)
   Font          : Inter (Light 300 / Regular 400)
   Green         : #02704D
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: #ffffff;
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; }
button { background: none; border: none; cursor: pointer; font-family: inherit; }
img { display: block; }

/* ---------- frames ---------- */
.frame { position: relative; background: #ffffff; overflow: hidden; margin: 0 auto; }

.frame-desktop { width: 1280px; height: 832px; }
.frame-mobile  { width: 420px;  height: 912px; display: none; }

@media (min-width: 768px) {
  /* One-pager: the 1280x832 frame is scaled by script.js to fill the
     full screen width on any large screen, so the page never scrolls
     and the hero image always reaches both edges */
  html, body { height: 100%; overflow: hidden; }
  .frame-desktop { margin: 0; transform-origin: top left; }
}

@media (max-width: 767px) {
  /* One-pager: the 420x912 frame is scaled by script.js to fit the
     real screen, so the page itself must never scroll */
  html, body { height: 100%; overflow: hidden; }

  .frame-desktop { display: none; }
  .frame-mobile {
    display: block;
    position: absolute;
    left: 50%;
    top: 0;
    margin: 0 0 0 -210px; /* center the 420px frame */
    transform-origin: top center;
  }
}

/* ==========================================================================
   DESKTOP
   ========================================================================== */

.logo-desktop {
  position: absolute;
  left: 88px;
  top: 54px;
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  color: #000;
  white-space: nowrap;
}

/* Hero paragraph : Inter Light 20 / 26, left 163 (calc(50% - 477px)), top 248, width 955 */
.hero-text-desktop {
  position: absolute;
  left: calc(50% - 477px);
  top: 248px;
  width: 955px;
  font-weight: 300;
  font-size: 20px;
  line-height: 26px;
  color: #000;
  word-break: break-word;
}

/* CTA : green text 16px at 163/292, arrow 24px at 417/290 */
.cta { cursor: pointer; }

.cta-desktop {
  position: absolute;
  left: 163px;
  top: 290px;
  height: 24px;
}
.cta .cta-text {
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  color: #02704d;
  white-space: nowrap;
}
.cta-desktop .cta-text {
  position: absolute;
  left: 0;
  top: 2px;
}
.cta-desktop .cta-arrow {
  position: absolute;
  left: 254px; /* 417 - 163 */
  top: 0;
  width: 24px;
  height: 24px;
}
.cta-desktop .cta-arrow svg { transition: transform 0.25s ease; }
.cta-desktop:hover .cta-arrow svg { transform: translateX(4px); }

/* Hero image : 1280 x 354 band anchored to the bottom edge of the page
   (Figma node 1395:9 - bottom of image = bottom of frame) */
.hero-img-desktop {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 1280px;
  height: 354px;
}
.hero-img-desktop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* ---------- nav icons + hover label animation ----------
   Figma: WhatsApp 22px @1102/52, LinkedIn 26x22 @1136/52, send 22px @1170/52
   Row is anchored to the right edge (1280 - 1192 = 88px) so the labels can
   expand without breaking the layout. */
.nav-icons {
  position: absolute;
  top: 52px;
  right: 88px;
  display: flex;
  align-items: center;
  height: 22px;
}

.nav-icon {
  display: flex;
  align-items: center;
  height: 22px;
}

.nav-icon + .nav-icon { margin-left: 12px; }

.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  transition: transform 0.25s ease;
}
.nav-icon .li-box { width: 26px; }

/* the animated label - hidden until hover/focus */
.hover-label {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: #000;
  transform: translateX(-6px);
  transition: max-width 0.35s ease, opacity 0.3s ease, transform 0.35s ease, margin-left 0.35s ease;
  margin-left: 0;
}

.nav-icon:hover .hover-label,
.nav-icon:focus-visible .hover-label {
  max-width: 110px;
  opacity: 1;
  transform: translateX(0);
  margin-left: 8px;
}

.nav-icon:hover .icon-box,
.nav-icon:focus-visible .icon-box {
  transform: scale(1.12);
}

/* ---------- desktop modal (node 1397:49) ---------- */
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  z-index: 50;
}
.modal-overlay.open { display: block; }

.modal-card {
  position: absolute;
  left: 222px;
  top: 110px;
  width: 838px;
  height: 611px;
  background: #fafafa;
  border-radius: 44px;
}

/* fields - page coords converted to card coords (card left 222, top 110)
   labels at page-left 402 -> card-left 180
   Name 292->182 / line 325->215 ; Phone 361->251 / 394->284 ;
   Email 430->320 / 463->353 ; Company 499->389 / 532->422 ; Submit 613->503 */
.modal-form .field { position: absolute; left: 180px; width: 461px; }
.modal-form .field-1 { top: 182px; }
.modal-form .field-2 { top: 251px; }
.modal-form .field-3 { top: 320px; }
.modal-form .field-4 { top: 389px; }

.modal-form .field input {
  width: 100%;
  height: 33px; /* label top -> line top (215 - 182) */
  background: transparent;
  border: none;
  border-bottom: 1px solid #000;
  outline: none;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: normal;
  color: #000;
  border-radius: 0;
  padding: 0;
}
.modal-form .field input::placeholder { color: #000; opacity: 1; font-weight: 300; }

.modal-form .submit-btn {
  position: absolute;
  left: 180px;
  top: 503px;
  font-weight: 300;
  font-size: 20px;
  line-height: normal;
  color: #02704d;
  white-space: nowrap;
}
.modal-form .submit-btn:hover { text-decoration: underline; }

/* ==========================================================================
   MOBILE
   ========================================================================== */

.logo-mobile {
  position: absolute;
  left: 56px;
  top: 92px;
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  color: #000;
  white-space: nowrap;
}

.menu-btn {
  position: absolute;
  left: 356px;
  top: 83px;
  width: 24px;
  height: 24px;
}

/* paragraph : Inter Light 20/26, left 56 (calc(50% - 154px)), top 233, width 278 */
.hero-text-mobile {
  position: absolute;
  left: calc(50% - 154px);
  top: 233px;
  width: 278px;
  font-weight: 300;
  font-size: 20px;
  line-height: 26px;
  color: #000;
  word-break: break-word;
}

/* CTA mobile : text @56/410, arrow 24px @310/408 */
.cta-mobile {
  position: absolute;
  left: 56px;
  top: 408px;
  height: 24px;
}
.cta-mobile .cta-text {
  position: absolute;
  left: 0;
  top: 2px;
}
.cta-mobile .cta-arrow {
  position: absolute;
  left: 254px; /* 310 - 56 */
  top: 0;
  width: 24px;
  height: 24px;
}

/* hero image mobile : 429 x 384, left 36, top 503 (bleeds off right edge) */
.hero-img-mobile {
  position: absolute;
  left: 36px;
  top: 503px;
  width: 429px;
  height: 384px;
}
.hero-img-mobile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* ---------- mobile bottom-sheet modal (node 1375:57) ---------- */
.sheet-overlay {
  position: absolute;
  inset: 0;
  display: none;
  z-index: 50;
}
.sheet-overlay.open { display: block; }

.sheet {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 382px;
  width: 420px;
  height: 530px;
  background: #fafafa;
  border-radius: 36px 36px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.08);
}

.sheet-close {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 38px; /* page 420 - sheet 382 */
  width: 24px;
  height: 24px;
}

/* fields - page coords -> sheet coords (sheet top 382, left 0)
   Name 524->142 / 551->169 ; Phone 593->211 ; Email 662->280 ;
   Company 731->349 ; Submit 839->457 ; lines width 314, left 47 */
.sheet-form .field { position: absolute; left: 47px; width: 314px; }
.sheet-form .field-1 { top: 142px; }
.sheet-form .field-2 { top: 211px; }
.sheet-form .field-3 { top: 280px; }
.sheet-form .field-4 { top: 349px; }

.sheet-form .field input {
  width: 100%;
  height: 27px; /* 551 - 524 */
  background: transparent;
  border: none;
  border-bottom: 1px solid #000;
  outline: none;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: normal;
  color: #000;
  border-radius: 0;
  padding: 0;
}
.sheet-form .field input::placeholder { color: #000; opacity: 1; font-weight: 300; }

.sheet-form .submit-btn {
  position: absolute;
  left: 47px;
  top: 457px;
  font-weight: 300;
  font-size: 16px;
  line-height: normal;
  color: #02704d;
  white-space: nowrap;
}

/* ---------- mobile menu screen (node 1379:81) ---------- */
.menu-screen {
  position: absolute;
  inset: 0;
  background: #ffffff;
  display: none;
  z-index: 60;
}
.menu-screen.open { display: block; }

.menu-title {
  position: absolute;
  left: 56px;
  top: 92px;
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  color: #000;
  white-space: nowrap;
}

.menu-close {
  position: absolute;
  left: 356px;
  top: 83px;
  width: 24px;
  height: 24px;
}

.menu-hero-text {
  position: absolute;
  left: calc(50% - 139px); /* Figma 1435:183 - now centered */
  top: 306px;              /* was 233 - designer moved it down */
  width: 278px;
  font-weight: 300;
  font-size: 20px;
  line-height: 26px;
  color: #000;
  word-break: break-word;
}

/* cards : #e4edff 314 x 106, radius 8, left 56, tops 489 / 611 / 733 */
.menu-card {
  position: absolute;
  left: 56px;
  width: 314px;
  height: 106px;
  background: #e4edff;
  border-radius: 8px;
  display: block;
}
.menu-card.card-1 { top: 486px; } /* Figma 1435:183 spacing */
.menu-card.card-2 { top: 608px; }
.menu-card.card-3 { top: 730px; }

/* texts at page-left 92 -> card-left 36 ; Join us 529->40, Follow us 651->40, Contact us 776->43 */
.menu-card-text {
  position: absolute;
  left: 36px;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: #000;
  white-space: nowrap;
}
.card-1 .menu-card-text { top: 40px; }
.card-2 .menu-card-text { top: 40px; }
.card-3 .menu-card-text { top: 43px; }

/* icons : WA 22px @310/531 -> 254/42 ; LI 26x22 @308/653 -> 252/42 ; send 24px @308/774 -> 252/41 */
.menu-card-icon { position: absolute; display: block; }
.card-1 .menu-card-icon { left: 254px; top: 42px; width: 22px; height: 22px; }
.card-2 .menu-card-icon { left: 252px; top: 42px; width: 26px; height: 22px; }
.card-3 .menu-card-icon { left: 252px; top: 41px; width: 24px; height: 24px; }
.card-2 .menu-card-icon svg { width: 26px; height: 22px; }

/* ==========================================================================
   Desktop responsive overrides - MUST stay at the end of this file so they
   win over the fixed-pixel base rules above.
   Vertical composition stays proportional to the Figma frame (832px tall)
   on any screen shape: logo 54/832, icons 52/832, text 248/832,
   CTA 290/832, image 354/832.
   ========================================================================== */
@media (min-width: 768px) {
  .logo-desktop      { top: 6.49%; }
  .nav-icons         { top: 6.25%; }
  .hero-text-desktop { top: 29.81%; }
  .cta-desktop       { top: 34.86%; }
  .hero-img-desktop  { height: 42.55%; }

  /* Booking modal: vertically centered (equals Figma's 110px at 1280x832) */
  .modal-card { top: max(10px, calc((100% - 611px) / 2)); }
}

/* ==========================================================================
   NEW DESKTOP DESIGN (Figma node 1435:128) - full-screen image background,
   text overlaid at left, icons + logo centered at the bottom.
   Old-design rules above are inactive (markup lives in a <template>).
   Vertical positions are percentages of the frame height so the
   composition stays identical on large screens of any size:
   text 306/832 = 36.78%, icons 743/832 = 89.3%, logo 788/832 = 94.71%.
   ========================================================================== */

/* Full-bleed background image.
   The Figma composition shows the photo's central 1280/1483 slice
   (cover-cropped ~101px each side at 1280x832). Locking the rendered
   width to 1483px keeps the orange wall at the exact same horizontal
   position as the design on every screen shape - so the headline always
   sits inside the orange wall, never over the windows. */
.hero-bg-desktop {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-bg-desktop img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1483px;
  height: 832px;
  min-height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* --vscale shrinks type so it occupies the same SHARE of the screen height
   as in the 832px-tall Figma frame. Exactly 1 at 1280x832 (set by script.js). */
.frame-desktop { --vscale: 1; }

/* Headline + CTA block (left 149, text top 306, CTA 20px below the text) */
.hero-block-desktop {
  position: absolute;
  left: 149px;
  top: 36.78%;
  width: calc(391px * var(--vscale));
}
.hero-block-desktop .hero-copy {
  font-weight: 300;
  font-size: calc(20px * var(--vscale));
  line-height: calc(26px * var(--vscale));
  color: #000;
  word-break: break-word;
}
.cta-desktop2 {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--vscale));
  margin-top: calc(20px * var(--vscale));
  height: calc(24px * var(--vscale));
  width: max-content;
}
.cta-desktop2 .cta-text { font-size: calc(16px * var(--vscale)); }
.cta-desktop2 .cta-arrow-img {
  width: calc(24px * var(--vscale));
  height: calc(24px * var(--vscale));
  transition: transform 0.25s ease;
}
.cta-desktop2:hover .cta-arrow-img,
.cta-desktop2:focus-visible .cta-arrow-img { transform: translateX(4px); }

/* Social icons centered near the bottom (WA 586, LI 627, send 672 @ 743).
   Sized with --vscale (like the text) and tight gaps; hover slides out the
   "Join us / Follow us / Contact us" labels, same as the old top-bar icons. */
.nav-icons-bottom {
  position: absolute;
  top: 89.3%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: calc(14px * var(--vscale));
  height: calc(22px * var(--vscale));
}
.nav-icons-bottom .nav-icon { height: calc(22px * var(--vscale)); }
.nav-icons-bottom .nav-icon + .nav-icon { margin-left: 0; }
.nav-icons-bottom .icon-box {
  width: calc(22px * var(--vscale));
  height: calc(22px * var(--vscale));
}
.nav-icons-bottom .li-box { width: calc(26px * var(--vscale)); }
.nav-icons-bottom .icon-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.nav-icons-bottom .hover-label {
  font-size: calc(16px * var(--vscale));
  line-height: calc(26px * var(--vscale));
}

/* Logo centered at the very bottom (top 788) */
.logo-desktop-bottom {
  position: absolute;
  top: 94.71%;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 400;
  font-size: calc(16px * var(--vscale));
  color: #000;
  white-space: nowrap;
}

/* ==========================================================================
   BOOKING SCREEN (Figma node 1435:230 "Karibu Ofisi")
   Slides in from the right over the homepage; the homepage glides left
   underneath at a slower speed (parallax). The X reverses both, smoothly.
   Vertical positions are % of the 832 frame: X 102/832 = 12.26%,
   title 177/832 = 21.27%, subtitle 248/832 = 29.81%, form 386/832 = 46.39%.
   ========================================================================== */

/* Cinematic slide: 0.9s, eases in gently, glides through the middle,
   settles softly - same curve both directions */
.home-view {
  position: absolute;
  inset: 0;
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.18, 1);
  will-change: transform;
}

.form-screen {
  position: absolute;
  inset: 0;
  background: #ffffff;
  z-index: 50;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.18, 1), visibility 0s 0.9s;
  will-change: transform;
}
.form-screen.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.18, 1), visibility 0s 0s;
}
/* parallax: homepage shifts left at ~1/4 speed while the panel covers it */
.frame-desktop:has(.form-screen.open) .home-view { transform: translateX(-25%); }

/* Left side: the blue meeting-room end of the office photo (598/1280) */
.form-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 46.72%;
  height: 100%;
  overflow: hidden;
}
.form-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  pointer-events: none;
}

/* X close (1167/102) */
.form-close {
  position: absolute;
  right: 89px;
  top: 12.26%;
  width: 24px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, opacity 0.15s ease;
}
.form-close:hover { opacity: 0.6; transform: rotate(90deg); }
.form-close:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.form-close:active { opacity: 0.4; }

/* Texts (730/177 and 730/248) */
.form-title {
  position: absolute;
  left: 730px;
  top: 21.27%;
  font-weight: 300;
  font-size: calc(40px * var(--vscale));
  line-height: normal;
  color: #000;
  white-space: nowrap;
}
.form-sub {
  position: absolute;
  left: 730px;
  top: 29.81%;
  font-weight: 300;
  font-size: calc(20px * var(--vscale));
  line-height: normal;
  color: #000;
  white-space: nowrap;
}

/* Form fields (730/386, lines 461 wide, rows 69px apart, Submit at 704) */
.form-fields {
  position: absolute;
  left: 730px;
  top: 46.39%;
  width: 461px;
}
.form-fields .field {
  height: calc(33px * var(--vscale));
  margin-bottom: calc(36px * var(--vscale));
}
.form-fields .field input {
  width: 100%;
  height: calc(33px * var(--vscale));
  background: transparent;
  border: none;
  border-bottom: 1px solid #d9d9d9; /* exact Figma stroke (Line 35) */
  outline: none;
  transition: border-color 0.2s ease;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: calc(20px * var(--vscale));
  line-height: normal;
  color: #000;
  border-radius: 0;
  padding: 0;
}
.form-fields .field input::placeholder { color: #000; opacity: 1; font-weight: 300; }
.form-fields .field input:focus { border-bottom-color: #8a8a8a; }

.form-fields .submit-btn {
  display: block;
  margin-top: calc(78px * var(--vscale));
  font-weight: 300;
  font-size: calc(20px * var(--vscale));
  line-height: normal;
  color: #02704d;
  white-space: nowrap;
}
.form-fields .submit-btn:hover { text-decoration: underline; }
.form-fields .submit-btn:focus-visible { outline: 2px solid #02704d; outline-offset: 3px; }
.form-fields .submit-btn:active { opacity: 0.6; }

/* ==========================================================================
   MOBILE responsive overrides - MUST stay at the end of this file so they
   win over the fixed-pixel mobile rules above.
   Same system as desktop: the 420-wide frame fills the phone width, the
   frame stretches to the real screen height, vertical positions become
   percentages of the 912px Figma frame, and --mvscale shrinks type/cards
   on screens shorter than the design so everything keeps the same share
   of the space. At exactly 420x912 nothing changes.
   ========================================================================== */
@media (max-width: 767px) {
  .frame-mobile { --mvscale: 1; }

  /* ---- Home screen ---- */
  .logo-mobile { top: 10.09%; font-size: calc(16px * var(--mvscale)); }      /* 92/912 */
  .menu-btn    { top: 9.1%; }                                                 /* 83/912 */

  .hero-text-mobile {
    top: 25.55%;                                                              /* 233/912 */
    width: calc(278px * var(--mvscale));
    font-size: calc(20px * var(--mvscale));
    line-height: calc(26px * var(--mvscale));
  }

  .cta-mobile {
    top: 44.74%;                                                              /* 408/912 */
    display: flex;
    align-items: center;
    gap: calc(8px * var(--mvscale));
    height: calc(24px * var(--mvscale));
  }
  .cta-mobile .cta-text {
    position: static;
    font-size: calc(16px * var(--mvscale));
  }
  .cta-mobile .cta-arrow {
    position: static;
    width: calc(24px * var(--mvscale));
    height: calc(24px * var(--mvscale));
  }
  .cta-mobile .cta-arrow svg { width: 100%; height: 100%; }

  .hero-img-mobile {
    top: auto;
    bottom: 2.74%;                                                            /* (912-887)/912 */
    height: 42.11%;                                                           /* 384/912 */
  }

  /* ---- Menu screen ---- */
  .menu-title { top: 10.09%; font-size: calc(16px * var(--mvscale)); }
  .menu-close { top: 9.1%; }

  .menu-hero-text {
    top: 33.55%;                                                              /* 306/912 */
    left: calc(50% - 139px * var(--mvscale));
    width: calc(278px * var(--mvscale));
    font-size: calc(20px * var(--mvscale));
    line-height: calc(26px * var(--mvscale));
  }

  .menu-card { height: calc(106px * var(--mvscale)); }
  .menu-card.card-1 { top: 53.29%; }                                          /* 486/912 */
  .menu-card.card-2 { top: 66.67%; }                                          /* 608/912 */
  .menu-card.card-3 { top: 80.04%; }                                          /* 730/912 */

  .menu-card-text {
    top: calc(40px * var(--mvscale));
    font-size: calc(16px * var(--mvscale));
    line-height: calc(26px * var(--mvscale));
  }
  .card-3 .menu-card-text { top: calc(43px * var(--mvscale)); }

  .card-1 .menu-card-icon { top: calc(42px * var(--mvscale)); width: calc(22px * var(--mvscale)); height: calc(22px * var(--mvscale)); }
  .card-2 .menu-card-icon { top: calc(42px * var(--mvscale)); width: calc(26px * var(--mvscale)); height: calc(22px * var(--mvscale)); }
  .card-3 .menu-card-icon { top: calc(41px * var(--mvscale)); width: calc(24px * var(--mvscale)); height: calc(24px * var(--mvscale)); }
  .menu-card-icon svg { width: 100%; height: 100%; }

  /* ---- Booking bottom sheet ---- */
  .sheet {
    top: auto;
    bottom: 0;
    height: calc(530px * var(--mvscale));
  }
  .sheet-close { top: calc(38px * var(--mvscale)); }

  .sheet-form .field-1 { top: calc(142px * var(--mvscale)); }
  .sheet-form .field-2 { top: calc(211px * var(--mvscale)); }
  .sheet-form .field-3 { top: calc(280px * var(--mvscale)); }
  .sheet-form .field-4 { top: calc(349px * var(--mvscale)); }
  .sheet-form .field input {
    height: calc(27px * var(--mvscale));
    font-size: calc(16px * var(--mvscale));
  }
  .sheet-form .submit-btn {
    top: calc(457px * var(--mvscale));
    font-size: calc(16px * var(--mvscale));
  }
}