.wrapper {
    margin: 0 auto;
    max-width: none;
    padding: 27px;
    width: 100%;
}

.hero {
    min-height: 100dvh;
    height: 100%;
    background-color: black;
}

.hero__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 25px;

    @media screen and (max-width: 654px) {
        margin-top: -80px;
    }
}

.hero__logo {
    grid-column: 1 / span 2;
    display: flex;
    flex-direction: column;
    gap: 20px;

     @media screen and (max-width: 654px) {
        grid-column: 1 / 5;
        height: fit-content;
        width: fit-content;
        transform: rotate(90deg) translateY(-50%);
    }
}

.hero__logo-img {
    width: 70px;
    height: 70px;
    transition: transform .2s ease-in;
}

.hero__logo-img:hover {
    transform: rotate(25deg);
}

.hero__logo-name {
    width: 100%;
    max-height: 680px;
    height: 100%;
    object-fit: contain;
}

.hero__logo-car {
    border-radius: 15px;
    height: 100%;
    max-height: 680px;
    object-fit: cover;
    transition: transform .3s ease-in;
}

.hero__main-img {
    grid-column: 3 / span 8;
    overflow: hidden;
    border-radius: 16px;

    @media screen and (max-width: 1161px) {
       grid-column: 3 / -1;
    }

     @media screen and (max-width: 654px) {
        grid-column: 1 / -1;
        margin-top: -40px;
    }
}

.hero__logo-car:hover {
    transform: scale(1.04);
}

.hero__shapes {
    grid-column: 11 / -1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;

    @media screen and (max-width: 1161px) {
       grid-column: 1 / -1;
       width: 100%;
       flex-direction: row;
       margin-top: 10px;
       align-items: center;
    }

     @media screen and (max-width: 734px) {
        gap: 10px;
        flex-direction: column;
    }
}

/* Shared shape styles */
.hero__shapes > div {
    width: 160px;
    height: 80px;

    @media screen and (max-width: 1161px) {
       flex: 1;
    }

     @media screen and (max-width: 734px) {
        min-width: 120px;
    }
}

.shape1,
.shape2,
.shape4,
.shape5 {
    background-color: #2a2522; /* near-black */
    border-top-left-radius: 140px;
    border-top-right-radius: 140px;
}

/* Shape 2 & 5 are inverted (bottom half-circles) */
.shape4 {
    transform: rotate(180deg);
}

.shape1, .shape2 {
    @media screen and (max-width: 1161px) {
        transform: rotate(-90deg);
    }

     @media screen and (max-width: 734px) {
        min-height: 60px;
        transform: none;
    }
}

.shape4, .shape5 {
    @media screen and (max-width: 1161px) {
        transform: rotate(90deg);
    }

    @media screen and (max-width: 734px) {
        min-height: 60px;
        transform: rotate(180deg);
    }
}

.shape3 {
  background-color: #e8dfd7;
  color: #000;
  height: 160px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  aspect-ratio: 1;
  font-family:"larken";
  font-size: 16px;
  transition: transform .2s ease-in;

  --g:/18.202% 18.202% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat;
  mask: 100% 50% var(--g),95.048% 71.694% var(--g),81.174% 89.092% var(--g),61.126% 98.746% var(--g),38.874% 98.746% var(--g),18.826% 89.092% var(--g),4.952% 71.694% var(--g),0% 50% var(--g),4.952% 28.306% var(--g),18.826% 10.908% var(--g),38.874% 1.254% var(--g),61.126% 1.254% var(--g),81.174% 10.908% var(--g),95.048% 28.306% var(--g),radial-gradient(100% 100%,#000 39.874%,#0000 calc(39.874% + 1px));

  @media screen and (max-width: 734px) {
        height: 110px !important;
        min-width: 110px !important;
        max-width: 110px !important;
        font-size: 12.5px;
    }
}

.shape3:hover {
    transform: rotate(45deg);
}

.shape6,
.shape7 {
    width: 80px;
    height: 180px;
    background-color: #8467f3;
    border-bottom-right-radius: 210px;
    border-top-right-radius: 230px;
}

.hero__blue-shapes {
    display: flex;
    height: 180px !important;

    @media screen and (max-width: 1161px) {
        display: none;
    }
}

.hero__title {
    color: white;
    font-size: 60px;
    font-family: "larken";
    max-width: 640px;
    font-weight: 500;

     @media screen and (max-width: 734px) {
        font-size: 45px;
    }
}

.hero__subtitle {
    color: #8467f3;
    font-family:"tt-commons-pro";
    font-size: 20px;
    transition: opacity .2s ease-in;
}

.hero__subtitle:hover {
    opacity: .85;

}

.hero__texts {
    display: grid;
    gap: 25px;
    grid-template-columns: repeat(12, 1fr);
    align-items: flex-end;

    @media screen and (max-width: 734px) {
        margin-bottom: 20px;
    }
}

.hero__heading {
    align-items: flex-end;
    gap: 160px;
    grid-column: 1 / span 7;

    @media screen and (max-width: 1480px) {
        gap: 60px;
        flex-direction: column;
        align-items: flex-start;
    }

    @media screen and (max-width: 734px) {
        grid-column: 1 / -1;
        gap: 20px;
    }
}

.hero__smash {
    color: white;
    font-family:"larken";
    grid-column: 11;

    @media screen and (max-width: 734px) {
        grid-column: 1 / -1;
    }
}

.wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
}