/* =========================================
   PRODUCT STORY SECTIONS
========================================= */

.product-story-section
{
    padding:
        110px 40px 40px;
}

.story-block
{
    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: space-between;

    gap: 90px;

    max-width: 1280px;

    margin: 0 auto;
}

.story-text
{
    flex: 1;

    max-width: 620px;
}

.story-image
{
    flex: 1;
}

.story-image img
{
    width: 100%;

    display: block;

    border-radius: 22px;

    border:
        1px solid rgba(240,211,164,0.08);

    box-shadow:
        0 0 60px rgba(0,0,0,0.35),
        0 0 100px rgba(120,70,25,0.08);
}

.section-eyebrow
{
    font-size: 12px;

    letter-spacing: 0.34em;

    text-transform: uppercase;

    color:
        rgba(240,211,164,0.52);

    margin-bottom: 22px;
}

.story-text h2,
.character-inner h2,
.usage-inner h2,
.interface-inner h2
{
    font-family:
        "Cormorant Garamond";

    font-size: 54px;

    line-height: 1.05;

    font-weight: 500;

    color:
        #f0d3a4;

    margin-bottom: 30px;

    text-shadow:
        0 0 24px rgba(240,211,164,0.06);
}

.story-text p,
.character-inner p,
.usage-card p,
.interface-intro,
.interface-description p
{
    font-size: 17px;

    line-height: 1.95;

    color:
        rgba(240,211,164,0.74);
}

/* =========================================
   SOUND CHARACTER
========================================= */

.product-sound-character
{
    padding:
        140px 40px 80px;

    text-align: center;
}

.character-inner
{
    max-width: 900px;

    margin: 0 auto;
}

.character-tags
{
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 14px;

    margin-top: 42px;
}

.character-tags span
{
    padding:
        12px 18px;

    border-radius: 999px;

    background:
        rgba(240,211,164,0.05);

    border:
        1px solid rgba(240,211,164,0.08);

    color:
        rgba(240,211,164,0.84);

    font-size: 13px;

    letter-spacing: 0.08em;

    box-shadow:
        inset 0 0 10px rgba(240,211,164,0.03),
        0 0 18px rgba(240,211,164,0.03);
}

/* =========================================
   USAGE SECTION
========================================= */

.product-usage-section
{
    padding:
        80px 40px 140px;

    text-align: center;
}

.usage-inner
{
    max-width: 1180px;

    margin: 0 auto;
}

.usage-grid
{
    display: grid;

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

    gap: 28px;

    margin-top: 50px;
}

.usage-card
{
    position: relative;

    isolation: isolate;

    padding:
        34px;

    border-radius: 24px;

    background:
        linear-gradient(
            180deg,

            rgba(70,48,22,0.34) 0%,

            rgba(34,22,10,0.28) 38%,

            rgba(12,10,8,0.42) 100%
        );

    border:
        1px solid rgba(240,211,164,0.06);

    box-shadow:
        0 24px 60px rgba(0,0,0,0.30),

        0 0 24px rgba(240,211,164,0.08),

        0 0 60px rgba(180,120,45,0.08),

        inset 0 1px 0 rgba(255,240,210,0.04),

        inset 0 0 26px rgba(240,211,164,0.02);
}

.usage-card::before
{
    content: "";

    position: absolute;

    inset: -40px;

    background:
        radial-gradient(
            circle at top,

            rgba(240,211,164,0.14) 0%,

            rgba(180,120,45,0.08) 34%,

            transparent 72%
        );

    filter: blur(38px);

    opacity: 0.9;

    z-index: -1;

    pointer-events: none;
}

.usage-card h3
{
    font-family:
        "Cormorant Garamond";

    font-size: 34px;

    font-weight: 500;

    margin-bottom: 16px;

    color:
        #f0d3a4;

    text-shadow:
        0 0 18px rgba(240,211,164,0.05);
}

/* =========================================
   FINAL QUOTE
========================================= */

.product-final-quote
{
    padding:
        30px 40px 140px;

    text-align: center;
}

.final-quote-inner
{
    max-width: 900px;

    margin: 0 auto;
}

.final-quote-inner p
{
    font-family:
        "Cormorant Garamond";

    font-size: 42px;

    line-height: 1.45;

    color:
        rgba(240,211,164,0.9);

    margin-bottom: 26px;

    text-shadow:
        0 0 30px rgba(240,211,164,0.06);
}

.final-quote-inner span
{
    letter-spacing: 0.18em;

    text-transform: uppercase;

    font-size: 12px;

    color:
        rgba(240,211,164,0.52);
}

/* =========================================
   INTERFACE SECTION
========================================= */

.product-interface-section
{
    padding:
        100px 40px 80px;

    text-align: center;
}

.interface-inner
{
    display: flex;

    flex-direction: column;

    align-items: center;

    max-width: 1280px;

    margin: 0 auto;

    text-align: center;
}

.interface-inner h2
{
    margin-top: 24px;
}


.interface-intro
{
    max-width: 760px;

    margin:
        0px auto 60px;

    text-align: center;

    font-size: 18px;

    line-height: 1.9;

    color:
        rgba(240,211,164,0.74);
}

.interface-images
{
    display: flex;

    gap: 34px;

    align-items: stretch;

    justify-content: center;

    margin-bottom: 60px;
}

.interface-image-card
{
    position: relative;

    flex: 1;

    max-width: 560px;

    border-radius: 16px;

    overflow: hidden;

    background:
        linear-gradient(
            to bottom,
            rgba(42,28,14,0.35),
            rgba(10,8,6,0.55)
        );

    border:
        1px solid rgba(240,211,164,0.15);

    box-shadow:
        0 0 38px rgba(0,0,0,0.36),

        0 0 17px rgba(240,211,164,0.18),

        0 0 42px rgba(240,211,164,0.14),

        0 0 96px rgba(180,120,45,0.13),

        0 0 170px rgba(180,120,45,0.07),

        inset 0 0 26px rgba(240,211,164,0.045);
}

.interface-image-card::before
{
    content: "";

    position: absolute;

    inset: -40px;

    background:
        radial-gradient(
            circle,
            rgba(240,211,164,0.13) 0%,
            rgba(180,120,45,0.08) 35%,
            transparent 72%
        );

    z-index: -1;

    filter: blur(38px);

    pointer-events: none;
}

.interface-image-card img
{
    width: 100%;

    display: block;
}

.interface-description
{
    max-width: 820px;

    margin: 0 auto;
}

.interface-description p
{
    font-size: 17px;

    line-height: 1.95;

    color:
        rgba(240,211,164,0.74);

    margin-bottom: 24px;
}

.interface-3d-wrap
{
    display: flex;

    justify-content: center;

    margin-top: -70px;
    margin-bottom: -100px;
}

.interface-image-card-3d
{
    position: relative;

    width: 100%;

    max-width: 1280px;

    overflow: hidden;

 }

.interface-image-card-3d img
{
    width: 100%;

    height: auto;

    display: block;
}

/* =========================================
   MOBILE EXPERIENCE REWORK
========================================= */

@media (max-width: 900px)
{
    /* =========================
       CONSISTENT SECTION SPACING
    ========================= */

    .product-story-section,
    .product-sound-character,
    .product-interface-section,
    .product-usage-section,
    .product-final-quote
    {
        padding-left: 22px;

        padding-right: 22px;
    }

    .product-story-section,
    .product-sound-character,
    .product-interface-section,
    .product-usage-section
    {
        padding-top: 52px;

        padding-bottom: 52px;
    }

    .product-final-quote
    {
        padding-top: 42px;

        padding-bottom: 120px;
    }

    /* =========================
       STORY LAYOUT
    ========================= */

    .story-block
    {
        flex-direction: column;

        gap: 42px;

        align-items: stretch;
    }

    .story-text,
    .story-image
    {
        width: 100%;
        text-align: center;
        max-width: 100%;
    }

    /* =========================
       REVERSED STORY BLOCKS
    ========================= */

    .story-block.reverse
    {
        flex-direction: column;
    }

    .story-block.reverse .story-text
    {
        order: 1;
    }

    .story-block.reverse .story-image
    {
        order: 2;

        width: 100%;

        margin: 0;
    }

    /* =========================
       TYPOGRAPHY
    ========================= */

    .section-eyebrow
    {
        font-size: 11px;
        text-align: center;

        letter-spacing: 0.30em;

        margin-bottom: 18px;

        color:
            rgba(240,211,164,0.58);
    }

    .story-text h2,
    .character-inner h2,
    .usage-inner h2,
    .interface-inner h2
    {
        font-size: clamp(46px, 10vw, 64px);
        text-align: center;

        line-height: 1.08;

        margin-bottom: 28px;

        letter-spacing: -0.02em;

        text-shadow:
            0 0 34px rgba(240,211,164,0.08);
    }

    .story-text p,
    .character-inner p,
    .usage-card p,
    .interface-intro,
    .interface-description p
    {
        font-size: 17px;

        line-height: 1.88;

        color:
            rgba(240,211,164,0.76);
    }

    /* =========================
       STORY IMAGES
    ========================= */

    .story-image
    {
        position: relative;

        margin-left: 0px;

        margin-right: 0px;
    }

    .story-image::before
    {
        content: "";

        position: absolute;

        inset: -20px;

        background:
            radial-gradient(
                circle,
                rgba(240,211,164,0.12) 0%,
                rgba(120,70,25,0.08) 40%,
                transparent 75%
            );

        filter: blur(36px);

        z-index: -1;

        pointer-events: none;
    }

    .story-image img
    {
        width: 100%;

        aspect-ratio: 4 / 5;

        object-fit: cover;

        border-radius: 24px;

        border:
            1px solid rgba(240,211,164,0.10);

        box-shadow:
            0 30px 70px rgba(0,0,0,0.50),

            0 0 40px rgba(180,120,45,0.08);
    }

    /* =========================
       SOUND CHARACTER
    ========================= */

    .character-inner
    {
        max-width: 100%;
    }

    .character-tags
    {
        gap: 10px;

        margin-top: 34px;
    }

    .character-tags span
    {
        padding:
            12px 16px;

        font-size: 12px;

        background:
            rgba(240,211,164,0.045);

        border:
            1px solid rgba(240,211,164,0.06);

        box-shadow:
            inset 0 0 12px rgba(240,211,164,0.025),

            0 0 18px rgba(240,211,164,0.025);
    }

    /* =========================
       INTERFACE SECTION
    ========================= */

    .interface-inner
    {
        max-width: 100%;
    }

    .interface-intro
    {
        margin:
            0 auto 42px;

        font-size: 17px;

        line-height: 1.9;
    }

    .interface-images
    {
        flex-direction: column;

        gap: 34px;

        margin-bottom: 42px;
    }

    .interface-image-card
    {
        border-radius: 6px;

        overflow: hidden;
    }

    .interface-image-card::before
    {
        inset: -30px;

        filter: blur(34px);
    }

    .interface-image-card img
    {
        width: 100%;

        display: block;
    }

    /* =========================
       3D IMAGE
    ========================= */

    .interface-3d-wrap
    {
        margin-top: -22px;
        margin-bottom: -30px;
        maring-left: -22px;
        margin-right: -16px;
    }

    .interface-image-card-3d
    {
        border-radius: 12px;

        overflow: hidden;
        
        border: none;
    }

    /* =========================
       USAGE CARDS
    ========================= */

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

        gap: 18px;

        margin-top: 42px;
    }

    .usage-card
    {
    position: relative;

    padding:
        4px 22px 12px;

    border-radius: 24px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,

            rgba(70,48,22,0.34) 0%,

            rgba(34,22,10,0.28) 38%,

            rgba(12,10,8,0.42) 100%
        );

    border:
        1px solid rgba(240,211,164,0.07);

    box-shadow:
        0 24px 60px rgba(0,0,0,0.30),

        0 0 24px rgba(240,211,164,0.08),

        0 0 60px rgba(180,120,45,0.08),

        inset 0 1px 0 rgba(255,240,210,0.04),

        inset 0 0 26px rgba(240,211,164,0.02);
    }
    
    .usage-card::before
{
    content: "";

    position: absolute;

    inset: -40px;

    background:
        radial-gradient(
            circle at top,

            rgba(240,211,164,0.14) 0%,

            rgba(180,120,45,0.08) 34%,

            transparent 72%
        );

    filter: blur(38px);

    opacity: 0.9;

    z-index: -1;

    pointer-events: none;
}

    .usage-card h3
    {
        font-size: 30px;

        line-height: 1.08;

        margin-bottom: 12px;
    }

    .usage-card p
    {
        font-size: 15px;

        line-height: 1.72;
    }

    /* =========================
       FINAL QUOTE
    ========================= */

    .final-quote-inner
    {
        max-width: 100%;
    }

    .final-quote-inner p
    {
        font-size: clamp(38px, 9vw, 52px);

        line-height: 1.24;

        margin-bottom: 28px;

        text-shadow:
            0 0 40px rgba(240,211,164,0.08);
    }

    .final-quote-inner span
    {
        font-size: 11px;

        letter-spacing: 0.24em;
    }

    /* =========================
       BUTTONS
    ========================= */

    .buttons
    {
        gap: 14px;
    }

    .buttons button
    {
        min-height: 58px;

        font-size: 14px;

        letter-spacing: 0.08em;
    }

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

    .product-image
    {
        margin-left: -2px;

        margin-right: -2px;
    }

    .product-image img
    {
        width: 100%;

        filter:
            drop-shadow(0 30px 70px rgba(0,0,0,0.52))
            drop-shadow(0 0 40px rgba(180,120,45,0.10));
    }
}

.user-feedback-section
{
  padding:
    30px 28px;
    
  margin-bottom: 120px;

  text-align: center;
}

.feedback-list
{
  max-width: 950px;

  margin:
    70px auto 0;
}

.feedback-quote
{
  position: relative;

  text-align: center;

  font-family:
    "Playfair Display",
    serif;

  font-size: 22px;

  font-style: italic;

  line-height: 1.7;

  color:
    rgba(240,211,164,0.72);

  margin:
    36px 0;

  text-shadow:
    0 0 12px rgba(240,211,164,0.10),
    0 0 34px rgba(180,120,40,0.08);

  opacity: 0.92;
}

.feedback-quote::before
{
  content: "“";

  position: absolute;

  left: 50%;

  top: -58px;

  transform:
    translateX(-50%);

  font-size: 72px;

  font-style: normal;

  color:
    rgba(240,211,164,0.26);

  text-shadow:
    0 0 24px rgba(240,211,164,0.06);

  pointer-events: none;
}

.quote-left
{
  text-align: left;

  max-width: 620px;
}

.quote-center
{
  text-align: center;

  max-width: 760px;

  margin-left: auto;
  margin-right: auto;
}

.quote-right
{
  text-align: right;

  max-width: 620px;

  margin-left: auto;
}

@media (max-width: 768px)
{
  .user-feedback-section
  {
    margin-bottom: 50px;
  }

  .feedback-quote
  {
    font-size: 18px;

    line-height: 1.5;

    margin:
      54px 0;
  }

  .quote-left,
  .quote-center,
  .quote-right
  {
    text-align: center;

    max-width: 100%;
  }
}