/* ===== FONTS ===== */
/* Place your SF Pro Rounded Heavy font file in assets/fonts/ */
@font-face {
  font-family: 'SF Pro Rounded';
  font-weight: 900;
  font-style: normal;
  src: url('assets/fonts/SF-Pro-Rounded-Heavy.otf') format('opentype'),
       url('assets/fonts/SF-Pro-Rounded-Heavy.woff2') format('woff2'),
       url('assets/fonts/SF-Pro-Rounded-Heavy.woff') format('woff'),
       url('assets/fonts/SF-Pro-Rounded-Heavy.ttf') format('truetype');
}

/* ===== RESET ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  min-height: 100%;
  background: #EDE8F2;
}

body {
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ===== SCREEN (full viewport) ===== */
.screen {
  width: 100vw;
  height: 100vh;
  padding: 10px;
  background: transparent;
  flex-shrink: 0;
}

/* ===== HERO (inner frame, 10px gap from all sides) ===== */
.hero {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  /* Fallback gradient — outer stop matches body bg to hide stroke */
  background: radial-gradient(
    ellipse at 50% 40%,
    #F8F5FA 0%,
    #EDE6F3 40%,
    #E4D9EE 70%,
    #EDE8F2 100%
  );
}

/* ===== BACKGROUND IMAGE ===== */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ===== DECORATIVE DOTS ===== */
.dot {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}

.dot--purple { background: #7B3FA0; }
.dot--olive  { background: #4A5230; }
.dot--red    { background: #A03F3F; }

/* Dot positions (percentage-based from 1420×885 design) */
.dot--1  { right: 15.2%;  top: 7.8%;  }   /* top-right area */
.dot--2  { right: 15.8%;  bottom: 6.1%; }  /* bottom-right */
.dot--3  { left: 2.5%;    bottom: 6.8%; }  /* bottom-left */
.dot--4  { right: 3.4%;   bottom: 32.5%; } /* right side */
.dot--5  { right: 17.5%;  bottom: 6.1%; }  /* near dot-2 */
.dot--6  { left: 2.5%;    bottom: 4.5%; }  /* near dot-3 */
.dot--7  { right: 20.4%;  top: 28.5%; }    /* mid-right */
.dot--8  { right: 25.6%;  bottom: 33.8%; } /* center-right */
.dot--9  { right: 20.4%;  top: 30.7%; }    /* near dot-7 */
.dot--10 { left: 4.7%;    top: 12.8%; }    /* top-left */

/* ===== WRAPPER (logo + heading) ===== */
.wrapper {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 88px;
  width: 50.8%;
  max-width: 721px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  z-index: 5;
}

/* ===== BITZ LOGO ===== */
.bitz-logo {
  width: 216px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: -30px;
}

.bitz-logo__svg {
  display: block;
  width: 216px;
  height: auto;
  max-width: none;
  pointer-events: none;
}

/* ===== HEADING ===== */
.heading {
  font-family: 'SF Pro Rounded', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 900;
  font-size: clamp(48px, 6.95vw, 100px);
  line-height: 0.75;
  color: #000000;
  text-align: center;
  text-transform: lowercase;
  letter-spacing: -0.02em;
  width: 100%;
}

/* ===== IMAGE WRAPPER (collage) ===== */
.image-wrapper {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 66.6%;
  z-index: 7;
  pointer-events: none;
}

.collage-main {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== PHOTO CARDS (inside SVG — hidden) ===== */
.photo-card {
  display: none;
}

/* ===== CTA BUTTON ===== */
.btn-outter {
  position: absolute;
  left: 41.7%;
  top: 61.5%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 236px;
  height: 116px;
  background: #FFFFFF;
  border-radius: 1000px;
  padding: 14px;
  box-shadow:
    37px 136px 39px 0px rgba(0,0,0,0),
    23px 87px 36px 0px rgba(0,0,0,0.02),
    13px 49px 30px 0px rgba(0,0,0,0.08),
    6px 22px 23px 0px rgba(0,0,0,0.13),
    1px 5px 12px 0px rgba(0,0,0,0.15),
    inset 4px 4px 4px 0px rgba(255,255,255,0.25);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.2s ease;
}

.btn-outter:hover {
  transform: scale(1.04);
}

.btn-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 208px;
  height: 88px;
  background: #BBEC2C;
  border-radius: 60px;
  box-shadow: inset 16px 16px 16px 0px rgba(255,255,255,0.4);
  font-family: 'SF Pro Rounded', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #252E12;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ===== STICKERS ===== */
.sticker {
  position: absolute;
  z-index: 8;
  pointer-events: none;
}

.sticker img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sticker--share {
  left: 25.5%;
  top: 86%;
  width: 7%;
  aspect-ratio: 1;
}

.sticker--fire {
  left: 72.5%;
  top: 40.8%;
  width: 7%;
  aspect-ratio: 1;
}

/* Bottom padding so last block clears the footer (64px gap + 45px footer) */
body {
  padding-bottom: 63px;
}

/* ===== WIDE SCREENS (>1440px) ===== */
@media (min-width: 1441px) {
  .image-wrapper {
    width: 59.9%; /* 66.6% × 0.9 */
  }
}

/* ===== MOBILE (≤768px) ===== */
@media (max-width: 768px) {

  /* ── Hero screen ── */
  .screen {
    padding: 6px;
    height: 100svh; /* safe viewport height — accounts for iOS Safari bar */
  }

  .hero {
    border-radius: 20px;
  }

  /* ── Logo + heading ── */
  .wrapper {
    width: 88%;
    top: 56px;     /* enough clearance from rounded top corners */
    align-items: center;
  }

  .bitz-logo {
    width: 112px;
    height: auto;
    margin-bottom: -16px;
  }

  .bitz-logo__svg {
    width: 112px;
  }

  .heading {
    font-size: 40px;
    line-height: 0.75;
    text-align: center;
  }

  /* ── Collage: stretch from 35% top to bottom, cover-crop to fill ── */
  .image-wrapper {
    width: 120%;
    top: 35%;
    bottom: 0;
    height: auto;
  }

  .collage-main {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }

  /* ── CTA button: centered, sits right at the top of the collage ── */
  .btn-outter {
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translateX(-50%);
    width: 220px;
    height: 84px;
    padding: 11px;
  }

  /* hover must keep the translate so button doesn't jump */
  .btn-outter:hover {
    transform: translateX(-50%) scale(1.04);
  }

  .btn-cta {
    width: 198px;
    height: 62px;
    font-size: 18px;
    border-radius: 50px;
  }

  /* ── Dots: smaller, trim the ones that crowd mobile ── */
  .dot {
    width: 8px;
    height: 8px;
  }

  /* Hide the clustered mid-screen dots — keep only edge ones */
  .dot--7, .dot--8, .dot--9 { display: none; }

  /* ── Stickers: smaller & repositioned ── */
  .sticker--share {
    left: 18%;
    top: 88%;
    width: 10%;
  }

  .sticker--fire {
    left: 73%;
    top: 44%;
    width: 10%;
  }

  /* ── Block 3 ── */
  .block-3 {
    padding: 6px;
    padding-top: 0;
  }

  .block-3__inner {
    border-radius: 20px;
    padding: 56px 20px 72px;
    min-height: auto;
    gap: 48px;
  }

  .block-3__heading {
    font-size: 36px;
    width: 100%;
    line-height: 0.82;
  }

  /* Cards: two small side by side + tall card below */
  .block-3__cards {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .block-3__cards-group {
    gap: 10px;
  }


  /* Stickers: hide on mobile — too cluttered */
  .block-3__sticker { display: none; }

  /* Dots: keep but smaller */
  .block-3__dot { width: 8px; height: 8px; }

  /* ── Block 2 ── */
  .block-2 {
    padding: 6px;
    padding-top: 0;
  }

  .block-2__inner {
    border-radius: 20px;
    padding: 48px 28px 56px;
  }

  .block-2__content {
    flex-direction: column;
    align-items: center;
    gap: 36px;
  }

  .block-2__text-section {
    width: 100%;
    gap: 36px;
    padding: 0;
    align-items: center;
  }

  .block-2__container {
    align-items: center;
  }

  .block-2__share-icon {
    width: 180px;
    height: 180px;
  }

  .block-2__heading {
    font-size: 40px;
    text-align: center;
  }

  .block-2__actions {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .block-2 .btn-outter {
    width: 220px;
    height: 84px;
  }

  .block-2__image {
    height: auto;
    width: 100%;
    max-height: 480px;
  }

}

/* ===== BLOCK 3 ===== */
.block-3 {
  width: 100vw;
  padding: 10px;
  padding-top: 0;
}

.block-3__inner {
  background: #fbfbf3;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  min-height: 1050px;
  padding: 152px 40px 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
}

.block-3__heading {
  font-family: 'SF Pro Rounded', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 900;
  font-size: 64px;
  line-height: 0.75;
  color: #000000;
  text-transform: lowercase;
  text-align: center;
  letter-spacing: -0.02em;
  width: 666px;
  position: relative;
  z-index: 2;
}

.block-3__cards {
  display: flex;
  align-items: center;
  padding-right: 40px;
  position: relative;
  z-index: 2;
}

.block-3__card-wrap {
  width: 447px;
  height: 580px;
  flex-shrink: 0;
  margin-right: -40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.block-3__card {
  width: 300px;
  height: 580px;
  border-radius: 36px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.block-3__card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Stickers */
.block-3__sticker {
  position: absolute;
  pointer-events: none;
  z-index: 3;
}

.block-3__sticker img {
  display: block;
  width: 100%;
  height: auto;
}

.block-3__sticker--duck {
  left: 6.46%;
  top: 30%;
  width: 12.08%; /* 174px / 1440px */
}

.block-3__sticker--ice {
  left: 81.1%;
  top: 21.33%;
  width: 10.76%; /* 155px / 1440px */
}

.block-3__sticker--camera {
  left: 29.86%;
  top: 75.6%;
  width: 17.57%; /* 253px / 1440px */
}

/* Dots */
.block-3__dot {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  pointer-events: none;
  transform: rotate(3.01deg);
  z-index: 3;
}

.block-3__dot--brown { background: #8B3A2E; }
.block-3__dot--green { background: #BBEC2C; }

.block-3__dot--1 { left: 29.5%; top: 30.3%; }
.block-3__dot--2 { left: 80.4%; top: 16.5%; }
.block-3__dot--3 { left: 97.2%; top: 43.3%; }
.block-3__dot--4 { left: 61.4%; top: 86.1%; }

/* ===== BLOCK 2 ===== */
.block-2 {
  width: 100vw;
  padding: 10px;
  padding-top: 0;
}

.block-2__inner {
  background: #FBFBF3;
  border-radius: 16px;
  padding: 62px 88px 62px 201px;
  overflow: hidden;
}

.block-2__content {
  display: flex;
  align-items: center;
  gap: 49px;
  width: 100%;
}

/* Left: text section */
.block-2__text-section {
  display: flex;
  flex-direction: column;
  gap: 100px;
  padding: 24px 0;
  flex-shrink: 0;
  width: 564px;
}

.block-2__container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.block-2__share-icon {
  width: 367px;
  height: 367px;
  flex-shrink: 0;
  filter: drop-shadow(0px 10px 22px rgba(145,145,145,0.10))
          drop-shadow(0px 40px 40px rgba(145,145,145,0.09))
          drop-shadow(0px 91px 55px rgba(145,145,145,0.05));
}

.block-2__share-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.block-2__heading {
  font-family: 'SF Pro Rounded', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 900;
  font-size: 64px;
  line-height: 0.75;
  color: #000000;
  text-transform: lowercase;
  letter-spacing: -0.02em;
  margin: 0;
}

/* Button + link row */
.block-2__actions {
  display: flex;
  align-items: center;
  gap: 46px;
  flex-shrink: 0;
}

.block-2__link {
  font-family: 'SF Pro Rounded', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #252E12;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.block-2__link:hover {
  opacity: 0.7;
}

/* Right: phone image */
.block-2__image {
  flex: 1;
  height: 839px;
  position: relative;
  overflow: visible;
}

.block-2__image img,
.block-2__image video {
  width: 130%;
  height: 130%;
  object-fit: contain;
  object-position: center;
  display: block;
  position: relative;
  top: -10%;
  left: -10%;
}

/* Override hero button for block 2 */
.block-2 .btn-outter {
  position: static;
  width: 236px;
  height: 116px;
  box-shadow:
    0px 91px 25px 0px rgba(163,163,163,0),
    0px 58px 23px 0px rgba(163,163,163,0.01),
    0px 33px 20px 0px rgba(163,163,163,0.05),
    0px 14px 14px 0px rgba(163,163,163,0.09),
    0px 4px 8px 0px rgba(163,163,163,0.10),
    inset 4px 4px 4px 0px rgba(255,255,255,0.25);
}

/* ===== FOOTER ===== */
.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 55px;
  z-index: 100;
  background: #EDE8F2;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  transform: translateY(0);
  transition: transform 0.3s ease;
}

.site-footer.footer--hidden {
  transform: translateY(100%);
}

.footer__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 201px;
  max-width: 1440px;
  margin: 0 auto;
}

/* Desktop: wrapper is invisible — TG & VK act as direct flex children of nav */
.footer__icons {
  display: contents;
}

/* Restore correct TG | menu | VK order on desktop */
.footer__icon-link--tg {
  order: 1;
}
.footer__menu {
  order: 2;
}
.footer__icon-link--vk {
  order: 3;
}

.footer__icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.footer__icon-link img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer__menu {
  display: flex;
  align-items: center;
  gap: 64px;
  list-style: none;
}

.footer__menu a {
  font-family: 'Rubik', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #000000;
  opacity: 0.3;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.footer__menu a:hover {
  opacity: 0.7;
}

/* ── Footer: mobile only — overrides fixed desktop footer ── */
@media (max-width: 768px) {
  body {
    padding-bottom: 0;
  }

  .site-footer {
    position: static !important;
    height: auto !important;
    transform: none !important;
    margin-top: 40px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }

  .footer__nav {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 69px;
    padding: 39px 24px 48px 23px;
    height: auto;
  }

  .footer__icons {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 25px;
    flex-shrink: 0;
  }

  .footer__icon-link--tg {
    width: 44px;
    height: 44px;
  }

  .footer__icon-link--vk {
    width: 40px;
    height: 40px;
  }

  .footer__menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  .footer__menu a {
    font-size: 16px;
  }
}

/* ── Block 3: mobile — vertical stacked cards ── */
@media (max-width: 768px) {
  .block-3 {
    padding: 10px;
    padding-top: 0;
  }

  .block-3__inner {
    padding: 28px 0 32px;
    overflow: hidden;
    position: relative;
  }

  .block-3__heading {
    font-size: 40px;
    line-height: 0.8;
    text-align: center;
    margin-bottom: 32px;
    padding: 0 16px;
    position: static;
    transform: none;
    left: auto;
    top: auto;
    width: auto;
  }

  /* Stack cards vertically on mobile */
  .block-3__cards {
    flex-direction: column;
    padding-right: 0;
    gap: 20px;
    align-items: center;
  }

  .block-3__card-wrap {
    width: 300px;
    height: 460px;
    margin-right: 0;
  }

  .block-3__card {
    width: 300px;
    height: 460px;
  }

  /* Hide stickers and dots on mobile */
  .block-3__sticker {
    display: none !important;
  }

  .block-3__dot {
    display: none !important;
  }
}

/* ── Block 3 heading top gap: 100px on mobile ── */
@media (max-width: 768px) {
  .block-3__inner {
    padding-top: 100px;
  }
}

/* ── Block 2: mobile — vertical single column ── */
@media (max-width: 768px) {
  .block-2__inner {
    padding: 62px 12px;
  }

  .block-2__content {
    flex-direction: column;
    align-items: flex-start;
    gap: 49px;
  }

  .block-2__text-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    padding: 24px 0;
    width: 100%;
  }

  .block-2__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
  }

  /* Share icon — let the SVG render naturally (it has its own card design) */
  .block-2__share-icon {
    width: 280px;
    height: auto;
    flex-shrink: 0;
    margin-bottom: 16px;
  }

  .block-2__share-icon img {
    width: 100%;
    height: auto;
    display: block;
  }

  .block-2__heading {
    font-size: 40px;
    line-height: 0.9;
    text-align: center;
    width: 100%;
  }

  /* Button + link: centered column */
  .block-2__actions {
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100%;
  }

  .block-2__link {
    text-align: center;
    font-size: 20px;
    text-decoration: underline;
  }

  /* Phone mockup: full width */
  .block-2__image {
    width: 100%;
    max-height: none;
    height: auto;
  }

  .block-2__image img,
  .block-2__image video {
    width: 150%;
    height: auto;
    display: block;
    position: relative;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Fix block-2 button on mobile — match hero button exactly */
@media (max-width: 768px) {
  .block-2 .btn-outter {
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 220px !important;
    height: 84px !important;
    padding: 11px !important;
  }
  .block-2 .btn-outter .btn-cta {
    width: 198px !important;
    height: 62px !important;
    font-size: 18px !important;
  }
  .block-2 .btn-outter:hover {
    transform: scale(1.04) !important;
  }
}

/* Mobile logo size — Figma node 2124:17087 */
@media (max-width: 768px) {
  .bitz-logo {
    width: 274px;
    height: 122px;
    margin-bottom: -10px;
    margin-left: -20px;
  }
  .bitz-logo__svg {
    width: 274px;
    height: 122px;
  }
}