/* xsm: '380px', */
/* sm: '640px', */
/* md: '768px', */
/* lg: '1024px', */
/* xl: '1280px', */
/* '2xl': '1536px', */
:root {
--0: rgba(0, 0, 0, 0%);
--50a:#fafaf989;
--50a2:#fafaf9b1;
--50: #fafaf9;
--100: #f5f5f4;
--150: #F1F0EE;
--200: #e7e5e4;
--250: #d5d4d4;
--300: #d6d3d1;
--400: #a8a29e;
--500: #78716c;
--600: #57534e;
--700: #44403c;
--750: #34302d;
--750a: #34302d00;
--800: #292524;
--850: #221f1e;
--800a: #2925248b;
--900: #1c1917;
--950: #0c0a09;
--950a: #0c0a0900;
--950a2: #0c0a093f;
--shadow: #0c0a093f;
--shadow1: #0c0a0965;
--shadowi: #aca8a865;
--shadow0: #aca8a832;
--white: var(--50);
--text-primary: var(--50);
--black: var(--950);
--bg: var(--50);

--p-2: .2rem;
--p-4: .4rem;
--p-6: .6rem;
--p-8: .8rem;
--p-12: 1.2rem;
--p-16: 1.6rem;
--p-20: 2.0rem;
--p-24: 2.4rem;
--p-32: 3.2rem;
--p-40: 4.0rem;
--p-48: 4.8rem;
--p-64: 6.4rem;
--p-96: 9.6rem;
--p-128: 12.6rem;

--rc-4: 0.4rem;
--rc-8: 0.8rem;
--rc-16: 1.6rem;
--rc-24: 2.4rem;

--stk-4: 0.4rem;

--max-width: 1280px;
--fff: #ffffff;
--bt-bg: var(--white);
--bt-c: var(--black);

--font-family-body: sans-serif;
--font-size-body: 1.6rem;
--font-body-letter-spacing: unset;
}



*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

@media (max-width: 1280px) {
  html {
    font-size: 58%;
  }
}
@media (max-width: 768px) {
  html {
    font-size: 54%;
  }
}
@media (max-width: 640px) {
  html {
    font-size: 50%;
  }
}
@media (max-width: 380px) {
  html {
    font-size: 48%;
  }
}
body {
  height: 100vh;
  background-color: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-family-body);
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.underline {
  text-decoration: underline;
}
.module-spacer {
  height: 10lvh;
}
.module-spacer.half {
  height: 5lvh;
}
.module-spacer.double {
  height: 20lvh;
}
.body {
  background: linear-gradient(0deg, var(--400) 0%, var(--300) 20%, var(--50) 40%, var(--50) 60%, var(--300) 80%, var(--400) 100%) center center repeat;
  /* background: radial-gradient(circle,rgba(120, 113, 108, 1) 0%, rgba(168, 162, 158, 1) 15%, rgba(245, 245, 244, 1) 40%, rgba(250, 250, 249, 1) 50%, rgba(245, 245, 244, 1) 60%, rgba(168, 162, 158, 1) 85%, rgba(120, 113, 108, 1) 100%);; */
  background-size: 200% 200%;
  background-attachment: fixed;
  padding: 0px;
}

/* button */
button,
a.button {
	border: none;
	outline: none;
	padding: 0;
	margin: 0;
	background-color: transparent;
	cursor: pointer;
  text-decoration: none;
  letter-spacing: var(--font-body-letter-spacing);
}
button.primary,
a.button.primary {
  display: inline-flex;
  padding: var(--p-6) var(--p-16);
  justify-content: center;
  align-items: center;
  gap: var(--p-4);
  border-radius: 2.4rem;
  
  font-size: inherit;
  font-style: normal;
  font-weight: 700;
  line-height: 2.8rem; /* 155.556% */

  color: var(--bt-c);
  background-color: var(--bt-bg);
}
button.primary.lg,
a.button.primary.lg {
  padding: var(--p-8) var(--p-20);
  justify-content: center;
  align-items: center;
  gap: var(--p-4);
  border-radius: 2.4rem;
  
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.8rem; /* 155.556% */

  color: var(--bt-c);
  background-color: var(--bt-bg);
}
button.secondary,
a.button.secondary {
  display: inline-flex;
  padding: var(--p-6) var(--p-16);
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--p-4);
  border-radius: 2.4rem;
  
  font-size: inherit;
  color: var(--bt-bg);
  font-weight: 700;
  line-height: 2.8rem;
  border: 1px solid var(--bt-bg);
}
hr {
  border: 0;
  border-top: 1px solid var(--black);
  margin: var(--p-24) 0;
}

.sb {
  font-weight: 500 !important;
}
.i {
  font-style: italic !important;
}

/* tags */
strong {
  font-weight: 600 !important;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
 }
li.divider {
  border-top: 1px solid var(--700);
}
/* inputs */
input[type=text], 
input[type=email], 
input[type=url], 
input[type=password] {
  outline: none;
  border: none;
  border-radius: var(--rc-4);
  font-family: inherit;
  font-size: 1.6rem;
  padding: var(--p-8) var(--p-16);
  background-color: var(--300);
  color: var(--black);
}
input[type=text]::placeholder, 
input[type=email]::placeholder, 
input[type=url]::placeholder, 
input[type=password]::placeholder {
  background-color: var(--600);
  color: var(--white);
}

@namespace svg url(http://www.w3.org/2000/svg);
/* svg */
svg|a:link,
svg|a:visited {
  cursor: pointer;
}
.desktop { display: contents}
.tablet { display: none}
.mobile { display: none}
.br-desktop {
  display: inline;
}
.br-tablet {
  display: none;
}
.br-mobile {
  display: none;
}
@media (min-width: 781px) and (max-width: 1024px) {
  .desktop { display: none}
  .tablet { display: contents}
  .mobile { display: none}
  .br-desktop {
    display: inline;
  }
  .br-tablet {
    display: none;
  }
  .br-mobile {
    display: none;
  }
}
@media (min-width: 641px) and (max-width: 780px) {
  .desktop { display: none}
  .tablet { display: contents}
  .mobile { display: none}
  .br-desktop {
    display: none;
  }
  .br-tablet {
    display: contents;
  }
  .br-mobile {
    display: none;
  }
}
@media (max-width: 640px) {
  .desktop { display: none}
  .tablet { display: none}
  .mobile { display: contents}
  .br-desktop {
    display: none;
  }
  .br-tablet {
    display: none;
  }
  .br-mobile {
    display: inline;
  }
}
/* xsm: '380px', */
/* sm: '640px', */
/* md: '768px', */
/* lg: '1024px', */
/* xl: '1280px', */
/* '2xl': '1536px', */

/* the phone */

.the-phone {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: var(--lar);
  display: flex;
  flex-direction: column;
  gap: 0;

  border-radius: var(--lbrr);
  box-shadow: 4px 4px 32px 0 var(--shadow1);
  overflow:hidden;
  border: var(--lb) solid transparent;
  background: linear-gradient(white, white) padding-box,
              radial-gradient(circle, var(--300), var(--400)) border-box;
}

.the-phone-center {
  width: 100%;
  height: auto;
  background-color: var(--black);
  padding: var(--lb);
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  position: relative;
}
.the-phone-center > img {
  width: 100%;
  height: auto;
}
.the-phone-center video {
  width: 100%;
  height: auto;
}
.the-phone-center-img {
  position: absolute;
  width: 100%;
  aspect-ratio: 0.5464632455;
  overflow: hidden;
}
.the-phone-center-img > img {
  position: absolute;
  height: auto;
  width: 100%;
  top: 0px;
  left: 0px;
}
.the-phone-top,
.the-phone-bottom {
  display: flex;
  gap: 0;
  width: 100%;
}
.the-phone-top-left,
.the-phone-top-center,
.the-phone-top-right,
.the-phone-bottom-left,
.the-phone-bottom-center,
.the-phone-bottom-right {
  background-color: var(--black);
  height: var(--lbr);
  overflow:hidden;
}
.the-phone-top-left {
  border-top-left-radius: var(--lbr);
  width: var(--lbr);
}
.the-phone-top-right {
  border-top-right-radius: var(--lbr);
  width: var(--lbr);
}
.the-phone-bottom-left {
  border-bottom-left-radius: var(--lbr);
  width: var(--lbr);
}
.the-phone-bottom-right {
  border-bottom-right-radius: var(--lbr);
  width: var(--lbr);
}
.the-phone-top-center,
.the-phone-bottom-center {
  flex: 1 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.the-phone-top-center img {
  width: var(--lcw);
  height: auto;
}
.the-phone-volume-1,
.the-phone-volume-2 {
  position: absolute;
  z-index: 0;
  left: var(--lpvl);
  top: var(--lpvt);
  width: var(--lpvw);
  height: var(--lpvh);
  background: linear-gradient(0deg,var(--600) 0%, var(--300) 10%, var(--200) 50%, var(--300) 90%, var(--600) 100%);;
  border-radius: 4px;
  border-right: 1px solid var(--100);
  border-left: 1px solid var(--200);
}
.the-phone-volume-2 {
  top: var(--lpvt2);
}
.the-phone-power {
  position: absolute;
  z-index: 0;
  right: var(--lppr);
  top: var(--lptt);
  width: var(--lppw);
  height: var(--lpph);
  background: linear-gradient(0deg,var(--600) 0%, var(--300) 10%, var(--200) 50%, var(--300) 90%, var(--600) 100%);;
  border-radius: 4px;
  border-left: 1px solid var(--100);
  border-right: 1px solid var(--200);
}

.the-phone-wrapper {
  position: relative;
  --lbr: 4rem;
  --lbrr: 4.4rem;
  --lb: 4px;
  --lcw: 8rem;

  --lpvl: -0.4rem;
  --lpvt: 16rem;
  --lpvw: 0.4rem;
  --lpvh: 5rem;
  --lpvt2: 22rem;

  --lppr: -0.4rem;
  --lptt: 18rem;
  --lppw: 0.4rem;
  --lpph: 6rem;

  --lpih: 584px;
}
.the-phone-wrapper.medium {
  --lbr: 3.4rem;
  --lbrr: 3.6rem;
  --lb: 3px;
  --lcw: 4rem;

  --lpvl: -0.2rem;
  --lpvt: 10rem;
  --lpvw: 0.2rem;
  --lpvh: 3.5rem;
  --lpvt2: 15rem;

  --lppr: -0.2rem;
  --lptt: 12rem;
  --lppw: 0.2rem;
  --lpph: 3.5rem;

  --lpih: 452px;
  max-width: 30rem;
}
.the-phone-wrapper.small {
  --lbr: 2.5rem;
  --lbrr: 2.5rem;
  --lb: 2px;
  --lcw: 6rem;

  --lpvl: -0.2rem;
  --lpvt: 6rem;
  --lpvw: 0.2rem;
  --lpvh: 2.5rem;
  --lpvt2: 10rem;

  --lppr: -0.2rem;
  --lptt: 9rem;
  --lppw: 0.2rem;
  --lpph: 3rem;

  --lpih: 266px;
  max-width: 20rem;
}