/* .hero {
  position: relative;
  min-height: 720px;
  margin-top: var(--header);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(105deg, #361222 0%, #4b1835 48%, #63274F 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 83% 22%, rgba(202, 87, 141, .22), transparent 27%),
    radial-gradient(circle at 72% 78%, rgba(229, 148, 64, .09), transparent 20%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.03fr .97fr;
  align-items: center;
  gap: 30px;
}

.hero-copy {
  color: #fff;
}

.hero-copy h1 {
  color: #fff;
  margin-top: 6px;
}

.hero-copy p {
  max-width: 620px;
  margin-top: 22px;
  color: #f7eaf0;
  font-size: 1.05rem;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.hero-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 25px;
  color: #f8ddeb;
  font-size: .85rem;
}

.hero-note span {
  color: var(--accent);
}

.hero-product {
  position: relative;
  min-height: 560px;
  display: grid;
  place-items: center;
}

.hero-cake-glow {
  position: absolute;
  width: 80%;
  height: 65%;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, .13),
      rgba(202, 87, 141, .08) 45%,
      transparent 70%
    );
  filter: blur(6px);
}

.hero-product img {
  position: relative;
  z-index: 2;
  width: min(720px, 115%);
  max-height: 590px;
  object-fit: contain;
  filter: drop-shadow(0 28px 35px rgba(0, 0, 0, .28));
  animation: heroFloat 6s ease-in-out infinite;
}

@keyframes heroFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

@media(max-width:820px) {
  .hero {
    min-height: auto;
    padding: 62px 0 38px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    text-align: center;
  }

  .hero-copy p {
    margin-inline: auto;
  }

  .hero-actions,
  .hero-note {
    justify-content: center;
  }

  .hero-product {
    min-height: 410px;
  }

  .hero-product img {
    width: min(660px, 100%);
    max-height: 440px;
  }
}

@media(max-width:580px) {
  .hero {
    padding-top: 52px;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-product {
    min-height: 330px;
  }
} */


/* ==========================================================
   OPAL'S CAKE
   PREMIUM HERO SECTION
========================================================== */

.hero {
    position: relative;

    min-height: 760px;

    margin-top: var(--header);

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 38%,
            rgba(202, 87, 141, 0.20),
            transparent 28%
        ),
        radial-gradient(
            circle at 93% 18%,
            rgba(229, 148, 64, 0.10),
            transparent 20%
        ),
        linear-gradient(
            112deg,
            #32101F 0%,
            #48152F 35%,
            #63274F 72%,
            #703256 100%
        );
}


/* ==========================================================
   SUBTLE PREMIUM TEXTURE
========================================================== */

.hero::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.18;

    background-image:

        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size:
        42px 42px;
}


/* ==========================================================
   BACKGROUND DECORATION
========================================================== */

.hero-bg-decoration {
    position: absolute;
    inset: 0;

    pointer-events: none;
}


.hero-glow {
    position: absolute;

    display: block;

    border-radius: 50%;

    filter: blur(10px);
}


.hero-glow--one {
    width: 440px;
    height: 440px;

    right: 5%;
    top: 9%;

    background:
        radial-gradient(
            circle,
            rgba(202, 87, 141, 0.16),
            transparent 70%
        );
}


.hero-glow--two {
    width: 330px;
    height: 330px;

    right: 27%;
    bottom: -120px;

    background:
        radial-gradient(
            circle,
            rgba(229, 148, 64, 0.10),
            transparent 70%
        );
}


/* ==========================================================
   SPARKS
========================================================== */

.hero-spark {
    position: absolute;

    color: rgba(
        229,
        148,
        64,
        0.85
    );

    font-size: 16px;

    animation:
        heroSparkle
        4s ease-in-out
        infinite;
}


.hero-spark--1 {
    left: 5%;
    top: 24%;
}


.hero-spark--2 {
    right: 5%;
    top: 19%;

    animation-delay: 1.2s;
}


.hero-spark--3 {
    right: 38%;
    bottom: 15%;

    font-size: 11px;

    animation-delay: 2.2s;
}


@keyframes heroSparkle {

    0%,
    100% {
        opacity: 0.35;
        transform:
            scale(0.8)
            rotate(0deg);
    }

    50% {
        opacity: 1;

        transform:
            scale(1.2)
            rotate(30deg);
    }

}


/* ==========================================================
   DECORATIVE RINGS
========================================================== */

.hero-ring {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.06
        );
}


.hero-ring--1 {
    width: 430px;
    height: 430px;

    right: -150px;
    top: -170px;
}


.hero-ring--2 {
    width: 290px;
    height: 290px;

    right: 17%;
    bottom: -190px;
}


/* ==========================================================
   GRID
========================================================== */

.hero-grid {
    position: relative;
    z-index: 3;


    display: grid;

    grid-template-columns:
        1.04fr
        0.96fr;

    align-items: center;

    gap: 46px;

    padding-top: 55px;
    padding-bottom: 75px;
}


/* ==========================================================
   LEFT CONTENT
========================================================== */

.hero-content {
    position: relative;
    z-index: 4;

    color: #ffffff;
}


/* Eyebrow */

.hero-eyebrow {
    width: fit-content;

    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 22px;

    padding:
        8px
        14px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.14
        );

    border-radius: 999px;

    background:
        rgba(
            255,
            255,
            255,
            0.06
        );

    backdrop-filter:
        blur(8px);

    color: #FCE6EF;

    font-size: 0.73rem;
    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.hero-eyebrow-icon {
    color: var(--accent);

    font-size: 0.85rem;
}


/* ==========================================================
   TITLE
========================================================== */

.hero-title {
    max-width: 800px;

    color: #ffffff;

    font-size: clamp(
        2.75rem,
        4.2vw,
        3.75rem
    );

    line-height: 0.98;

    letter-spacing: -0.052em;
}


.hero-title-line {
    display: block;
}


.hero-title-highlight {
    margin-top: 6px;

    color: #FFB7D5;

    font-style: italic;
}


.hero-title-highlight::after {
    content: "";

    width: 104px;
    height: 4px;

    display: inline-block;

    margin-left: 17px;

    vertical-align: middle;

    border-radius: 99px;

    background:
        linear-gradient(
            90deg,
            var(--accent),
            rgba(
                229,
                148,
                64,
                0
            )
        );
}


/* ==========================================================
   DESCRIPTION
========================================================== */

.hero-description {
    max-width: 640px;

    margin-top: 27px;

    color: rgba(
        255,
        255,
        255,
        0.80
    );

    font-size: 1.02rem;

    line-height: 1.75;
}


/* ==========================================================
   ACTIONS
========================================================== */

.hero-actions {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 25px;

    margin-top: 32px;
}


.hero-main-btn {
    min-height: 56px;

    padding-inline: 24px;

    box-shadow:
        0 16px 38px
        rgba(
            202,
            87,
            141,
            0.30
        );
}


.hero-explore-link {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 11px;

    padding:
        12px
        0;

    color: #ffffff;

    font-size: 0.92rem;
    font-weight: 800;
}


.hero-explore-link::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 4px;

    height: 1px;

    background:
        rgba(
            255,
            255,
            255,
            0.38
        );

    transition:
        background
        0.25s ease;
}


.hero-explore-arrow {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.10
        );

    transition:
        transform
        0.25s ease,
        background
        0.25s ease;
}


.hero-explore-link:hover
.hero-explore-arrow {
    transform:
        translateX(4px);

    background:
        var(--accent);
}


.hero-explore-link:hover::after {
    background:
        var(--accent);
}


/* ==========================================================
   TRUST POINTS
========================================================== */

.hero-trust {
    display: flex;
    align-items: center;

    gap: 18px;

    margin-top: 40px;

    padding-top: 25px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );
}


.hero-trust-item {
    display: flex;
    align-items: center;

    gap: 10px;
}


.hero-trust-icon {
    width: 37px;
    height: 37px;

    flex:
        0 0
        37px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.07
        );

    color: #F2B061;
}


.hero-trust-icon svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke:
        currentColor;
}


.hero-trust-item strong,
.hero-trust-item small {
    display: block;
}


.hero-trust-item strong {
    color: #ffffff;

    font-size: 0.75rem;

    letter-spacing:
        0.01em;
}


.hero-trust-item small {
    margin-top: 2px;

    color:
        rgba(
            255,
            255,
            255,
            0.52
        );

    font-size: 0.64rem;

    white-space: nowrap;
}


.hero-trust-divider {
    width: 1px;
    height: 34px;

    background:
        rgba(
            255,
            255,
            255,
            0.12
        );
}


/* ==========================================================
   RIGHT VISUAL
========================================================== */

.hero-visual {
    position: relative;

    min-height: 620px;

    display: flex;
    align-items: center;
    justify-content: center;

    perspective: 1000px;
}


/* Large premium background word */

.hero-celebration-text {
    position: absolute;

    top: 47%;
    left: 50%;

    z-index: 0;

    transform:
        translate(
            -50%,
            -50%
        )
        rotate(-7deg);

    color:
        rgba(
            255,
            255,
            255,
            0.027
        );

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            4.5rem,
            8vw,
            8rem
        );

    font-style: italic;

    letter-spacing:
        0.04em;

    white-space: nowrap;

    user-select: none;
}


/* ==========================================================
   CAKE STAGE
========================================================== */

.hero-cake-stage {
    position: relative;

    width: 100%;
    min-height: 590px;

    display: flex;
    align-items: center;
    justify-content: center;

    transform-style:
        preserve-3d;

    transition:
        transform
        0.18s ease-out;
}


/* Halo */

.hero-cake-halo {
    position: absolute;

    width: 470px;
    height: 470px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                255,
                255,
                255,
                0.11
            )
            0%,

            rgba(
                202,
                87,
                141,
                0.09
            )
            38%,

            transparent
            71%
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.055
        );
}


/* Cake floor shadow */

.hero-cake-shadow {
    position: absolute;

    left: 50%;
    bottom: 53px;

    width: 72%;
    height: 66px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        rgba(
            0,
            0,
            0,
            0.30
        );

    filter:
        blur(27px);
}


/* Main Cake */

.hero-cake-image {
    position: relative;
    z-index: 3;

    width:
        min(
            690px,
            116%
        );

    max-height: 620px;

    object-fit: contain;

    filter:
        drop-shadow(
            0
            31px
            30px
            rgba(
                0,
                0,
                0,
                0.27
            )
        );

    animation:
        premiumCakeFloat
        6.5s
        ease-in-out
        infinite;

    transform-origin:
        center bottom;

    will-change:
        transform;
}


@keyframes premiumCakeFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-12px);
    }

}


/* ==========================================================
   FLOATING GLASS CARDS
========================================================== */

.hero-floating-card {
    position: absolute;

    z-index: 6;

    min-width: 165px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding:
        13px
        15px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.16
        );

    border-radius: 16px;

    background:
        rgba(
            67,
            18,
            47,
            0.64
        );

    backdrop-filter:
        blur(14px);

    box-shadow:
        0
        18px
        38px
        rgba(
            0,
            0,
            0,
            0.18
        );

    transition:
        transform
        0.18s ease-out;
}


.hero-floating-card--top {
    top: 105px;
    left: -8px;
}


.hero-floating-card--bottom {
    right: -14px;
    bottom: 102px;
}


.hero-floating-card small,
.hero-floating-card strong {
    display: block;
}


.hero-floating-card small {
    color:
        rgba(
            255,
            255,
            255,
            0.59
        );

    font-size: 0.64rem;

    text-transform: uppercase;

    letter-spacing:
        0.07em;
}


.hero-floating-card strong {
    margin-top: 1px;

    color: #ffffff;

    font-size: 0.79rem;
}


.hero-floating-symbol {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        rgba(
            229,
            148,
            64,
            0.15
        );

    color:
        var(--accent);
}


.hero-year {
    color: #FFB4D3;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.3rem;

    font-style: italic;
}


/* ==========================================================
   DECORATIVE DOTS
========================================================== */

.hero-decoration-dot {
    position: absolute;

    z-index: 1;

    display: block;

    border-radius: 50%;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.14
        );
}


.hero-decoration-dot--1 {
    width: 11px;
    height: 11px;

    right: 10%;
    top: 25%;
}


.hero-decoration-dot--2 {
    width: 6px;
    height: 6px;

    left: 5%;
    bottom: 27%;

    background:
        var(--accent);

    border: 0;
}


.hero-decoration-dot--3 {
    width: 18px;
    height: 18px;

    right: 4%;
    bottom: 34%;
}


/* ==========================================================
   BOTTOM WAVE
========================================================== */

.hero-bottom-shape {
    position: absolute;

    z-index: 5;

    left: 0;
    right: 0;
    bottom: -1px;

    height: 62px;

    pointer-events: none;
}


.hero-bottom-shape svg {
    width: 100%;
    height: 100%;
}


.hero-bottom-shape path {
    fill: #ffffff;
}


/* ==========================================================
   TABLET
========================================================== */

@media(max-width: 1050px) {

    .hero-grid {
        grid-template-columns:
            1fr
            0.9fr;

        gap: 20px;
    }


    .hero-title {
        font-size: clamp(
            2.625rem,
            5vw,
            3.25rem
        );
    }


    .hero-trust {
        gap: 12px;
    }


    .hero-trust-divider {
        display: none;
    }


    .hero-trust-item small {
        white-space: normal;
    }


    .hero-floating-card--top {
        left: 0;
    }


    .hero-floating-card--bottom {
        right: 0;
    }

}


/* ==========================================================
   TABLET / MOBILE STACK
========================================================== */

@media(max-width: 820px) {

    .hero {
        min-height: auto;
    }


    .hero-grid {
        grid-template-columns:
            1fr;

        gap: 15px;

        padding-top: 65px;
        padding-bottom: 95px;
    }


    .hero-content {
        text-align: center;
    }


    .hero-eyebrow {
        margin-inline: auto;
    }


    .hero-title {
        max-width: 720px;

        margin-inline: auto;

        font-size: clamp(
            2.5rem,
            7vw,
            3rem
        );
    }


    .hero-title-highlight::after {
        display: none;
    }


    .hero-description {
        max-width: 620px;

        margin-inline: auto;
    }


    .hero-actions {
        justify-content: center;
    }


    .hero-trust {
        justify-content: center;

        flex-wrap: wrap;
    }


    .hero-visual {
        min-height: 510px;
    }


    .hero-cake-stage {
        min-height: 510px;
    }


    .hero-cake-image {
        max-height: 520px;

        width:
            min(
                650px,
                100%
            );
    }


    .hero-cake-halo {
        width: 390px;
        height: 390px;
    }


    .hero-floating-card--top {
        left: 5%;
        top: 75px;
    }


    .hero-floating-card--bottom {
        right: 5%;
        bottom: 75px;
    }

}


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

@media(max-width: 580px) {

    .hero-grid {
        padding-top: 50px;
        padding-bottom: 75px;
    }


    .hero-eyebrow {
        font-size: 0.65rem;

        padding:
            7px
            11px;
    }


    .hero-title {
        font-size: clamp(
            2.125rem,
            9.5vw,
            2.625rem
        );

        line-height: 1.08;
        letter-spacing: -0.035em;
    }


    .hero-title-line {
        display: inline;
    }


    .hero-title-line::after {
        content: " ";
    }


    .hero-description {
        margin-top: 21px;

        font-size: 0.94rem;
    }


    .hero-actions {
        width: 100%;

        flex-direction: column;

        gap: 11px;

        margin-top: 27px;
    }


    .hero-main-btn {
        width: 100%;
    }


    .hero-explore-link {
        justify-content: center;

        width: 100%;
    }


    .hero-trust {
        display: grid;

        grid-template-columns:
            repeat(
                3,
                1fr
            );

        gap: 8px;

        margin-top: 31px;

        padding-top: 21px;
    }


    .hero-trust-item {
        flex-direction: column;

        text-align: center;

        gap: 6px;
    }


    .hero-trust-icon {
        width: 34px;
        height: 34px;

        flex-basis: 34px;
    }


    .hero-trust-item strong {
        font-size: 0.66rem;
    }


    .hero-trust-item small {
        display: none;
    }


    .hero-visual {
        min-height: 380px;

        margin-top: 5px;
    }


    .hero-cake-stage {
        min-height: 380px;
    }


    .hero-cake-image {
        width: 115%;

        max-width: none;

        max-height: 400px;
    }


    .hero-cake-halo {
        width: 300px;
        height: 300px;
    }


    .hero-cake-shadow {
        bottom: 35px;

        width: 76%;
    }


    .hero-floating-card {
        min-width: auto;

        padding:
            9px
            11px;

        border-radius: 12px;
    }


    .hero-floating-card--top {
        left: 0;
        top: 55px;
    }


    .hero-floating-card--bottom {
        right: 0;
        bottom: 55px;
    }


    .hero-floating-card small {
        display: none;
    }


    .hero-floating-card strong {
        font-size: 0.67rem;
    }


    .hero-floating-symbol {
        width: 28px;
        height: 28px;

        flex-basis: 28px;
    }


    .hero-year {
        font-size: 1rem;
    }


    .hero-celebration-text {
        font-size: 4rem;
    }


    .hero-bottom-shape {
        height: 38px;
    }

}


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

@media(max-width: 390px) {

    .hero-title {
        font-size: 2.125rem;
    }


    .hero-trust {
        gap: 4px;
    }


    .hero-trust-item strong {
        font-size: 0.61rem;
    }


    .hero-floating-card {
        display: none;
    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media(prefers-reduced-motion: reduce) {

    .hero-cake-image,
    .hero-spark {
        animation: none;
    }


    .hero-cake-stage,
    .hero-floating-card {
        transform: none !important;
    }

}