/* =========================================================
   VEXEN — MOBILE LANDING
   Based directly on the supplied Figma mobile blueprint:
   393 × 2921 px.
   Standalone file — does not load desktop style.css.
   ========================================================= */

/* =========================================================
   LOCAL FONTS
   Correct paths are taken from the desktop project.
   ========================================================= */

@font-face {
  font-family: "e-Ukraine";
  src: url("../../fonts/e-Ukraine/e-Ukraine-Thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "e-Ukraine";
  src: url("../../fonts/e-Ukraine/e-Ukraine-UltraLight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "e-Ukraine";
  src: url("../../fonts/e-Ukraine/e-Ukraine-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "e-Ukraine";
  src: url("../../fonts/e-Ukraine/e-Ukraine-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "e-Ukraine";
  src: url("../../fonts/e-Ukraine/e-Ukraine-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "e-Ukraine";
  src: url("../../fonts/e-Ukraine/e-Ukraine-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Unbounded";
  src: url("../../fonts/Unbounded/Unbounded-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Unbounded";
  src: url("../../fonts/Unbounded/Unbounded-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Unbounded";
  src: url("../../fonts/Unbounded/Unbounded-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Unbounded";
  src: url("../../fonts/Unbounded/Unbounded-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Unbounded";
  src: url("../../fonts/Unbounded/Unbounded-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Unbounded";
  src: url("../../fonts/Unbounded/Unbounded-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Mono";
  src: url("../../fonts/Space_Mono/SpaceMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Mono";
  src: url("../../fonts/Space_Mono/SpaceMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   RESET
   ========================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: #0A0A0A;
}

body {
  overflow-x: hidden;
}

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

button {
  font: inherit;
}

/* =========================================================
   MAIN 393px FIGMA FRAME
   ========================================================= */

.Landing {
  width: 393px;
  height: 2875px;
  min-height: 2875px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: #0A0A0A;
  color: #F2F2F0;
}

/* =========================================================
   ANNOUNCEMENT BAR
   ========================================================= */

.AnnouncementBar {
  width: 393px;
  height: 34px;
  position: absolute;
  left: 0;
  top: 0;
  background: #3A0D10;
}

.Drop00125 {
  position: absolute;
  left: 0;
  top: 11px;
  width: 393px;
  text-align: center;
  color: #F2F2F0;
  font-family: "e-Ukraine", sans-serif;
  font-size: 9px;
  font-weight: 400;
  line-height: 12px;
  letter-spacing: 0.36px;
  white-space: nowrap;
}

/* =========================================================
   HEADER
   ========================================================= */

.MobileHeader {
  width: 393px;
  height: 32px;
  position: absolute;
  left: 0;
  top: 60px;
}

.MobileLogo {
  width: 121.43px;
  height: 20.67px;
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
  display: block;
}

.MobileLogo img {
  width: 121.43px;
  height: 20.67px;
  display: block;
  object-fit: contain;
}

.MobileMenu {
  width: 32px;
  height: 32px;
  position: absolute;
  left: 42px;
  top: 0;
  border: 2px solid #F2F2F0;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.67px;
  padding: 0;
}

.MobileMenu span {
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  border-radius: 50%;
  background: #F2F2F0;
}

.MobileCart {
  width: 32px;
  height: 32px;
  position: absolute;
  left: 320px;
  top: 0;
  display: block;
}

.MobileCart img {
  width: 32px;
  height: 32px;
  display: block;
  object-fit: contain;
}

/* =========================================================
   HERO
   ========================================================= */

.MobileHero {
  width: 353px;
  height: 750px;
  position: absolute;
  left: 20px;
  top: 117px;
}

.HeroModel {
  width: 351px;
  height: 397px;
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  object-fit: contain;
  opacity: 0.80;
}

.HeroDrop {
  position: absolute;
  left: 1px;
  top: 331px;
  color: #F2F2F0;
  font-family: "Unbounded", sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 36px;
  white-space: nowrap;
}

.HeroDrop strong {
  font-family: "Space Mono", monospace;
  font-size: 34px;
  font-weight: 700;
  line-height: 36px;
}

.HeroLimited {
  position: absolute;
  left: 3px;
  top: 379px;
  color: #F2F2F0;
  font-family: "Unbounded", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  white-space: nowrap;
}

.HeroProductName {
  position: absolute;
  right: 3px;
  top: 433px;
  color: #F2F2F0;
  text-align: right;
  font-family: "Unbounded", sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  white-space: nowrap;
}

.HeroPrice {
  position: absolute;
  right: 3px;
  top: 465px;
  color: #F2F2F0;
  text-align: right;
  font-family: "Unbounded", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  white-space: nowrap;
}

/* =========================================================
   CTA
   ========================================================= */

.MobileCta {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E8E8E8;
  color: #0A0A0A;
  border-radius: 11.70px;
  font-family: "e-Ukraine", sans-serif;
  font-size: 18.72px;
  font-weight: 500;
  line-height: 24.96px;
  letter-spacing: 0.56px;
  white-space: nowrap;
}

.HeroCta {
  width: 236.34px;
  height: 46.02px;
  position: absolute;
  left: 58px;
  top: 519px;
}

/* =========================================================
   PRODUCT
   ========================================================= */

.MobileProduct {
  width: 350px;
  height: 300px;
  position: absolute;
  left: 23px;
  top: 822px;
  overflow: hidden;
}

.ProductFront {
  width: 205px;
  height: 154px;
  position: absolute;
  left: -5px;
  top: 0;
  object-fit: contain;
  box-shadow: none;
}

.ProductBack {
  width: 205px;
  height: 154px;
  position: absolute;
  left: -15px;
  top: 80px;
  object-fit: contain;
  transform: rotate(-15deg);
  transform-origin: top left;
  box-shadow: none;
}

.ProductInfo {
  position: absolute;
  right: 0;
  top: 0;
  width: 152px;
  text-align: right;
}

.ProductDrop,
.ProductName {
  color: #F2F2F0;
  font-family: "e-Ukraine", sans-serif;
  font-size: 16.81px;
  font-weight: 400;
  line-height: 22.81px;
}

.ProductPrice {
  margin-top: 9.61px;
  color: #8C8C8C;
  font-family: "e-Ukraine", sans-serif;
  font-size: 14.41px;
  font-weight: 400;
  line-height: 19.21px;
}

.ProductDescription {
  margin-top: 38.43px;
  color: #F2F2F0;
  font-family: "e-Ukraine", sans-serif;
  font-size: 16.81px;
  font-weight: 400;
  line-height: 22.81px;
}

.ProductLimited {
  position: absolute;
  right: 110px;
  top: 285px;
  color: #8C8C8C;
  text-align: right;
  font-family: "e-Ukraine", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 15px;
}

/* =========================================================
   STATEMENT
   ========================================================= */

.MobileStatement {
  width: 353px;
  height: 166px;
  position: absolute;
  left: 20px;
  top: 1282.02px;
  overflow: hidden;
  text-align: center;
}

.StatementTitle {
  position: absolute;
  left: 33px;
  top: 14px;
  width: 287px;
  color: #F2F2F0;
  font-family: "Unbounded", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
}

.StatementText {
  position: absolute;
  left: 29px;
  top: 82px;
  width: 295px;
  color: #F2F2F0;
  font-family: "Unbounded", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.StatementSignature {
  position: absolute;
  left: 0;
  top: 139px;
  width: 353px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #7D7E7E;
  font-family: "Space Mono", monospace;
  font-size: 11px;
  font-weight: 400;
  line-height: 13.20px;
  letter-spacing: 2.75px;
  white-space: nowrap;
}

.SignatureLine {
  width: 18px;
  height: 1px;
  flex: 0 0 18px;
  background: #7D7E7E;
}

/* =========================================================
   PRODUCT EDITORIAL
   Figma blueprint currently contains an empty 353 × 308 frame.
   ========================================================= */

.MobileProductEditorial {
  width: 353px;
  height: 308px;
  position: absolute;
  left: 20px;
  top: 1608.02px;
}

/* =========================================================
   FINAL CTA
   ========================================================= */

.MobileFinalCta {
  width: 353px;
  height: 289px;
  position: absolute;
  left: 20px;
  top: 2076.02px;
  overflow: hidden;
  text-align: center;
}

.FinalLimited {
  position: absolute;
  left: 0;
  top: 0;
  width: 353px;
  color: #8B1118;
  font-family: "Unbounded", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  white-space: nowrap;
}

.FinalProduct {
  position: absolute;
  left: 0;
  top: 28px;
  width: 353px;
  color: #F2F2F0;
  font-family: "e-Ukraine", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
}

.FinalPrice {
  position: absolute;
  left: 0;
  top: 70px;
  width: 353px;
  color: #F2F2F0;
  font-family: "e-Ukraine", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 19px;
}

.FinalCtaButton {
  width: 236.34px;
  height: 46.02px;
  position: absolute;
  left: 58px;
  top: 128px;
}

.FinalSlogan {
  width: 143px;
  position: absolute;
  left: 105px;
  top: 222px;
  color: #F2F2F0;
  font-family: "e-Ukraine", sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 15px;
}

/* =========================================================
   FOOTER
   ========================================================= */

.MobileFooter {
  width: 393px;
  height: 430px;
  position: absolute;
  left: 0;
  top: 2445px;
  overflow: hidden;
  background: #141414;
}

.FooterBrand {
  position: absolute;
  left: 42px;
  top: 30px;
}

.FooterLogoText {
  color: #F2F2F0;
  font-family: "Unbounded", sans-serif;
  font-size: 14.40px;
  font-weight: 500;
  line-height: 19.20px;
}

.FooterTagline {
  position: static;
  left: auto;
  top: auto;
  margin-top: 4.80px;
  color: #F2F2F0;
  font-family: "e-Ukraine", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.FooterLanguage {
  position: absolute;
  left: 244px;
  top: 36px;
  display: flex;
  gap: 12px;
  align-items: center;
  font-family: "e-Ukraine", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.54px;
}

.LangEn,
.LangUa {
  width: 48px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7.50px;
}

.LangEn {
  color: #818181;
  background: #242424;
}

.LangUa {
  color: #0A0A0A;
  background: #E8E8E8;
}

.FooterNav {
  position: absolute;
  left: 23px;
  top: 152px;
  width: 347px;
  display: grid;
  grid-template-columns: 160px 160px;
  column-gap: 27px;
  row-gap: 38px;
}

.FooterNav a {
  width: 160px;
  color: #F2F2F0;
  text-align: center;
  font-family: "e-Ukraine", sans-serif;
  font-size: 17.28px;
  font-weight: 500;
  line-height: 23.04px;
  letter-spacing: 0.35px;
}

.FooterSocials {
  position: absolute;
  left: 44px;
  top: 316px;
  width: 305px;
  display: flex;
  justify-content: space-between;
}

.FooterSocials a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #F2F2F0;
  font-family: "e-Ukraine", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.36px;
}

.FooterSocials img {
  width: 19.5px;
  height: 19.5px;
  display: block;
  object-fit: contain;
}

.FooterLine {
  width: 401px;
  height: 1px;
  position: absolute;
  left: 0;
  top: 356.48px;
  background: #292929;
}

.FooterBottom {
  position: absolute;
  left: 44px;
  right: 44px;
  top: 380px;
  display: flex;
  justify-content: space-between;
  color: #F2F2F0;
  font-family: "e-Ukraine", sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 15px;
  white-space: nowrap;
}

/* =========================================================
   NO BROWSER-DEPENDENT PAGE SCALING
   393px is the source-of-truth Figma frame.
   The page is intentionally kept at its real CSS dimensions
   so Safari Responsive Design Mode and a real 393px device
   render the same layout.
   ========================================================= */