:root {
        --pink: #ef2f67;
        --pink-dark: #d9235b;
        --cream: #fbf7f2;
        --cream2: #f4e9df;
        --paper: #fff;
        --ink: #191716;
        --muted: #69625c;
        --line: #e5d9d0;
        --dark: #25211f;
        --max: 1240px
      }

      * {
        box-sizing: border-box
      }

      html {
        scroll-behavior: smooth
      }

      body {
        margin: 0;
        color: var(--ink);
        background: #fff;
        font-family: "DM Sans", Arial, sans-serif
      }

      img {
        max-width: 100%;
        display: block
      }

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

      .inner {
        width: min(var(--max), calc(100% - 72px));
        margin: auto
      }

      header {
        height: 82px;
        background: #fff;
        border-bottom: 1px solid rgba(25, 23, 22, .08);
        position: sticky;
        top: 0;
        z-index: 100
      }

      .nav {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px
      }

      .logo {
        width: 170px;
        height: 52px;
        object-fit: contain;
        object-position: left center
      }

      .nav-links {
        display: flex;
        gap: 70px;
        align-items: center;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
      }

      .nav-links a {
        height: 82px;
        display: flex;
        align-items: center;
        position: relative
      }

      .nav-links a:hover,
      .nav-links a.active {
        color: var(--pink)
      }

      .nav-links a.active:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 18px;
        height: 2px;
        background: var(--pink)
      }

      .nav-button,
      .primary {
        background: var(--pink);
        color: #fff;
        font-weight: 800;
        padding: 13px 24px;
        border-radius: 11px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: .2s; 
        border: none;
        text-transform: uppercase;
      }
      .primary { height: 50px; }

      .nav-button {
        border-radius: 25px;
        font-size: 13px
      }

      .nav-button:hover,
      .primary:hover {
        background: var(--pink-dark);
        transform: translateY(-2px)
      }

      /* Navigation */
      .main-nav {
          display: flex;
          align-items: center;
          gap: 70px;
      }

      .main-nav > a,
      .dropdown-toggle {
          font-family: Arial, sans-serif;
          font-size: 16px;
          font-weight: 700;
          color: #222;
          text-decoration: none;
          transition: color 0.3s ease;
          padding: 10px 0;
      }

      /* Dropdown container */
      .dropdown {
          position: relative;
      }

      /* Products link */
      .dropdown-toggle {
          display: flex;
          align-items: center;
          gap: 7px;
          cursor: pointer;
      }

      /* Arrow */
      .arrow {
          font-size: 18px;
          line-height: 1;
          color: #702C83;
          transition: transform 0.3s ease;
      }

      /* Dropdown menu */
      .dropdown-menu {
          position: absolute;
          top: calc(100% - 0px);
          left: 50%;
          transform: translateX(-50%) translateY(10px);

          min-width: 200px;
          background: #ffffff;

          padding: 10px 0;

          border-radius: 12px;

          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);

          opacity: 0;
          visibility: hidden;
          pointer-events: none;

          transition: all 0.25s ease;

          z-index: 1000;
      }

      /* Small purple line on top */
      .dropdown-menu::before {
          content: "";
          position: absolute;
          top: 0;
          left: 25px;
          right: 25px;
          height: 3px;

          background: #702C83;
          border-radius: 0 0 5px 5px;
      }

      /* Dropdown links */
      .dropdown-menu a {
          display: block;
          text-transform: uppercase;
          padding: 14px 22px;

          font-family: Arial, sans-serif;
          font-size: 15px;
          font-weight: 600;

          color: #333;
          text-decoration: none;

          transition: all 0.2s ease;
      }

      /* Hover */
      .dropdown-menu a:hover {
          background: #f9edf5;
          color: #702C83;
          padding-left: 27px;
      }

      /* Show dropdown */
      .dropdown:hover .dropdown-menu {
          opacity: 1;
          visibility: visible;
          pointer-events: auto;
          transform: translateX(-50%) translateY(0);
      }

      /* Rotate arrow */
      .dropdown:hover .arrow {
          transform: rotate(180deg);
      }

      /* Navigation hover */
      .main-nav > a:not(.contact-btn):hover,
      .dropdown-toggle:hover {
          color: #702C83;
      }

      /* Contact button */
      .contact-btn {
          background: #f32f68;
          color: white !important;

          padding: 19px 36px;
          border-radius: 35px;

          font-weight: 700;

          transition: all 0.3s ease;
      }

      .contact-btn:hover {
          background: #702C83;
          transform: translateY(-2px);
      }


      .page-hero {
        background: linear-gradient(120deg, #fffaf7, #f6e9de);
        padding: 85px 0
      }

      .page-hero-grid {
        display: grid;
        grid-template-columns: 1.1fr .9fr;
        align-items: center;
        gap: 60px
      }

      .eyebrow {
        font-size: 15px;
        font-weight: 800;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: var(--pink);
        margin-bottom: 12px
      }

      .page-hero h1 {
        font-family: "Cormorant Garamond", serif;
        font-size: 68px;
        line-height: .9;
        letter-spacing: -1px;
        margin: 0 0 18px
      }

      .page-hero h1 span {
        color: var(--pink)
      }

      .page-hero p {
        font-size: 18px;
        line-height: 1.7;
        color: var(--muted);
        max-width: 590px;
        margin: 0
      }

      .hero-card {
        /*background: #fff;
        border-radius: 26px;
        padding: 35px;
        box-shadow: 0 20px 50px rgba(72, 43, 25, .12);*/
        display: flex;
        justify-content: center;
        width: 100%;
      }

      .hero-card img {
        /*max-height: 450px;*/
        object-fit: contain;
        width: 100%;
      }

      .section {
        padding: 82px 0
      }

      .section-head {
        text-align: center;
        max-width: 760px;
        margin: 0 auto 45px
      }

      .section-head h2 {
        font-family: "Cormorant Garamond", serif;
        font-size: 52px;
        line-height: .98;
        margin: 0 0 12px
      }

      .section-head p {
        font-size: 20px;
        line-height: 1.65;
        color: var(--muted);
        margin: 0
      }

      .grid4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr)
      }

      .card4 {
        text-align: center;
        padding: 12px 28px;
        position: relative
      }

      .card4:not(:last-child):after {
        content: "";
        position: absolute;
        right: 0;
        top: 30px;
        height: 130px;
        width: 1px;
        background: var(--line)
      }

      .circle {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: var(--cream2);
        display: grid;
        place-items: center;
        margin: 0 auto 20px;
        overflow: hidden
      }

      .circle img {
        width: 100%;
        height: 100%;
        object-fit: cover
      }

      .card4 h3 {
        font-size: 20px;
        line-height: 1.2;
        margin: 0 0 9px
      }

      .card4 p {
        font-size: 15px;
        line-height: 1.5;
        color: var(--muted);
        margin: 0
      }

      .soft {
        background: var(--cream)
      }

      .split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 65px
      }

      .split-copy h2 {
        font-family: "Cormorant Garamond", serif;
        font-size: 52px;
        line-height: .96;
        margin: 0 0 17px
      }

      .split-copy p {
        font-size: 18px;
        line-height: 1.7;
        color: var(--muted)
      }

      .feature-list {
        display: grid;
        gap: 14px;
        margin-top: 25px
      }

      .feature {
        display: flex;
        gap: 13px
      }

      .check {
        width: 28px;
        height: 28px;
        border: 1px solid var(--pink);
        color: var(--pink);
        border-radius: 50%;
        display: grid;
        place-items: center;
        flex: none;
        font-size: 12px
      }

      .feature strong {
        display: block;
        font-size: 18px;
        margin-bottom: 3px
      }

      .feature span {
        font-size: 16px;
        line-height: 1.45;
        color: var(--muted);
        margin-bottom: 10px;
        display: block;
      }

      .visual-panel {
        /*background: #fff;
        border-radius: 25px;
        padding: 40px;
        box-shadow: 0 16px 40px rgba(60, 38, 25, .08)*/
      }

      .visual-panel img {
        margin: auto;
        max-height: 500px
      }

      .dark {
        background: var(--dark);
        color: #fff
      }

      .dark .section-head p {
        color: #d3ccc5
      }

      .dark .section-head h2 {
        color: #fff
      }

      .dark-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0
      }

      .dark-card {
        padding: 35px;
        border-right: 1px solid rgba(255, 255, 255, .14)
      }

      .dark-card:last-child {
        border-right: 0
      }

      .dark-card h3 {
        font-size: 20px;
        margin: 0 0 10px
      }

      .dark-card p {
        font-size: 15px;
        line-height: 1.6;
        color: #d2ccc5;
        margin: 0
      }

      .quality-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px
      }

      .quality-card {
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 30px;
        background: #fff
      }

      .quality-card .num {
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 2px;
        color: var(--pink)
      }

      .quality-card h3 {
        font-family: "Cormorant Garamond", serif;
        font-size: 30px;
        margin: 8px 0
      }

      .quality-card p {
        font-size: 13px;
        line-height: 1.65;
        color: var(--muted);
        margin: 0
      }

      .cta {
        background: var(--pink);
        color: #fff;
        text-align: center;
        padding: 72px 20px
      }

      .cta h2 {
        font-family: "Cormorant Garamond", serif;
        font-size: 56px;
        line-height: .98;
        margin: 0 0 18px
      }

      .cta p {
        font-size: 18px;
        color: #ffecef;
        margin: 0 auto 24px
      }

      .cta .white {
        background: #fff;
        color: var(--pink);
        padding: 14px 28px;
        border-radius: 11px;
        font-weight: 800;
        display: inline-flex
      }

      footer {
        background: #fff;
        border-top: 1px solid var(--line);
        padding: 25px 0
      }

      .footer-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px
      }

      .footer-logo {
        font-weight: 800
      }

      .footer-logo span {
        color: var(--pink)
      }

      .footer-copy {
        font-size: 11px;
        line-height: 1.5;
        color: #777;
        text-align: right;
      }

      .socials {
        display: flex;
        gap: 8px
      }

      .social {
        width: 31px;
        height: 31px;
        border: 1px solid #d9ccc4;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-weight: 700
      }

      .product-hero {
        background: linear-gradient(120deg, #fffaf7, #f5e7dc);
        padding: 70px 0
      }

      .product-grid {
        display: grid;
        grid-template-columns: 52% 48%;
        align-items: center;
        gap: 30px
      }

      .product-art {
        display: flex;
        justify-content: center
      }

      .product-art img {
        max-height: 580px;
        filter: drop-shadow(0 24px 25px rgba(64, 35, 19, .16))
      }

      .product-copy h1 {
        font-family: "Cormorant Garamond", serif;
        font-size: 64px;
        line-height: .9;
        margin: 10px 0
      }

      .product-copy h3 {
        font-family: "Cormorant Garamond", serif;
        font-size: 60px;
        line-height: .9;
        margin: 10px 0
      }

      .product-copy h1 span {
        color: var(--pink)
      }

      .product-copy h3 span {
        color: var(--pink)
      }      

      .stars {
        color: var(--pink);
        letter-spacing: 4px;
        font-size: 14px
      }

      .price {
        font-size: 22px;
        font-weight: 800;
        margin: 17px 0
      }

      .product-copy .lead {
        font-size: 16px;
        line-height: 1.65;
        color: var(--muted)
      }

      .product-copy ul li {
        font-size: 16px;
        line-height: 1.65;
        color: var(--muted)
      }

      .pills {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 22px 0
      }

      .pill {
        border: 1px solid #e8cdd2;
        padding: 8px 12px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 800;
        color: #6b5e58
      }

      .pill-one { background-color: var(--pink-dark); color: #fff; }

      .buy-row {
        display: flex;
        gap: 12px;
        align-items: center
      }

      .secondary {
        border: 1px solid #d9ccc4;
        padding: 13px 22px;
        border-radius: 11px;
        font-weight: 800
      }

      .table-wrap {
        overflow: auto
      }

      .compare {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px
      }

      .compare th,
      .compare td {
        text-align: left;
        padding: 15px;
        border-bottom: 1px solid var(--line)
      }

      .compare th {
        background: var(--cream);
        font-weight: 800
      }

      .highlight {
        color: var(--pink);
        font-weight: 800
      }

      .about-intro {
        background: #fff
      }

      .manifesto {
        font-family: "Cormorant Garamond", serif;
        font-size: 42px;
        line-height: 1.1;
        max-width: 950px;
        margin: 0 auto;
        text-align: center
      }

      .manifesto span {
        color: var(--pink)
      }

      .contact-wrap {
        background: var(--cream);
        padding: 75px 0
      }

      .contact-grid {
        display: grid;
        grid-template-columns: .8fr 1.2fr;
        gap: 45px;
        align-items: start
      }

      .contact-copy h1 {
        font-family: "Cormorant Garamond", serif;
        font-size: 64px;
        line-height: .9;
        margin: 0 0 18px
      }

      .contact-copy h1 span {
        color: var(--pink)
      }

      .contact-copy p {
        font-size: 15px;
        line-height: 1.7;
        color: var(--muted)
      }

      .contact-details {
        margin-top: 30px;
        display: grid;
        gap: 14px
      }

      .detail {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 13px;
        padding: 16px
      }

      .detail small {
        display: block;
        font-size: 10px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--pink);
        font-weight: 800;
        margin-bottom: 4px
      }

      .detail a {
        font-weight: 700
      }

      .form-card {
        background: #fff;
        border-radius: 22px;
        padding: 35px;
        box-shadow: 0 18px 45px rgba(65, 40, 25, .08)
      }

      .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px
      }

      .field {
        display: flex;
        flex-direction: column;
        gap: 7px
      }

      .field.full {
        grid-column: 1/-1
      }

      .field label {
        font-size: 12px;
        font-weight: 800
      }

      .field input,
      .field textarea,
      .field select {
        width: 100%;
        border: 1px solid #ddd1c9;
        border-radius: 10px;
        padding: 13px 14px;
        font: inherit;
        font-size: 13px;
        outline: none;
        background: #fff
      }

      .field input:focus,
      .field textarea:focus,
      .field select:focus {
        border-color: var(--pink);
        box-shadow: 0 0 0 3px rgba(239, 47, 103, .08)
      }

      .field textarea {
        min-height: 145px;
        resize: vertical
      }

      .form-note {
        font-size: 11px;
        color: #777;
        margin-top: 12px
      }

      .success {
        background: #ecf8ef;
        border: 1px solid #b9dec0;
        color: #235c2e;
        border-radius: 11px;
        padding: 13px;
        font-size: 13px;
        margin-bottom: 18px
      }

      .error {
        background: #fff0f0;
        border: 1px solid #e6b8b8;
        color: #7b2626;
        border-radius: 11px;
        padding: 13px;
        font-size: 13px;
        margin-bottom: 18px
      }

      /* FORM */
.form-section{
  padding:90px 0 110px;
  background:#fffdfb;
  border-top:1px solid rgba(0,0,0,.05);
}

.form-grid{
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:70px;
  align-items:start;
}

.form-intro h2{
  font-size:48px;
  letter-spacing:-1.5px;
}

.form-intro p{
  margin-top:18px;
  color:var(--muted);
  max-width:430px;
}

.note{
  margin-top:30px;
  padding:20px 22px;
  border-left:3px solid var(--pink);
  background:var(--cream);
  color:#555;
  font-size:14px;
}

form{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:34px;
  box-shadow:0 20px 55px rgba(40,25,15,.06);
}

.fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.field.full{grid-column:1/-1}

label{
  font-size:13px;
  font-weight:700;
}

input,select,textarea{
  width:100%;
  border:1px solid #dcd2ca;
  border-radius:12px;
  padding:14px 15px;
  font:inherit;
  font-size:14px;
  color:var(--ink);
  background:#fffdfb;
  outline:none;
  transition:.2s ease;
}

input:focus,select:focus,textarea:focus{
  border-color:var(--pink);
  box-shadow:0 0 0 3px rgba(245,54,105,.10);
}

textarea{
  min-height:150px;
  resize:vertical;
}

.submit{
  margin-top:24px;
  border:0;
  cursor:pointer;
  background:var(--pink);
  color:#fff;
  font:inherit;
  font-weight:700;
  padding:15px 30px;
  border-radius:999px;
  transition:.2s ease;
}

.submit:hover{
  background:var(--pink-dark);
  transform:translateY(-1px);
}

.form-small{
  margin-top:13px;
  font-size:12px;
  color:#777;
}


      @media(max-width:1000px) {
        .nav-links {
          gap: 15px;
          font-size: 11px
        }

        .page-hero-grid,
        .product-grid,
        .split,
        .contact-grid {
          grid-template-columns: 1fr
        }

        .hero-card {
          max-width: 600px;
          margin: auto
        }

        .grid4 {
          grid-template-columns: repeat(2, 1fr);
          gap: 35px
        }

        .card4:nth-child(2):after {
          display: none
        }

        .quality-grid {
          grid-template-columns: 1fr
        }

        .dark-grid {
          grid-template-columns: 1fr
        }

        .dark-card {
          border-right: 0;
          border-bottom: 1px solid rgba(255, 255, 255, .14)
        }
      }

      @media(max-width:700px) {
        .inner {
          width: calc(100% - 30px)
        }

        header {
          height: 70px
        }

        .nav {
          height: 70px
        }

        .nav-links {
          display: none
        }

        .logo {
          width: 145px
        }

        .section {
          padding: 58px 0
        }

        .page-hero,
        .product-hero {
          padding: 55px 0
        }

        .page-hero h1,
        .product-copy h1,
        .contact-copy h1 {
          font-size: 52px
        }

        .section-head h2 {
          font-size: 42px
        }

        .grid4 {
          grid-template-columns: 1fr
        }

        .card4:after {
          display: none !important
        }

        .form-grid {
          grid-template-columns: 1fr
        }

        .field.full {
          grid-column: auto
        }

        .footer-row {
          flex-direction: column
        }

        .cta h2 {
          font-size: 44px
        }

        .split {
          gap: 30px
        }
      }