:root {
  --cream: #f7efe9;
  --cream-2: #fffaf6;
  --blush: #e9c9bd;
  --rose: #c58f7d;
  --rose-dark: #9e6d5c;
  --ink: #2c2624;
  --muted: #8f7a72;
  --line: rgba(157, 111, 94, .17);
  --glass: rgba(255,255,255,.62);
  --shadow: 0 18px 45px rgba(100, 72, 62, .12);
}

* { box-sizing: border-box; }

html { background: #efe5de; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Noto Kufi Arabic", system-ui, sans-serif;
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.9), transparent 33%),
    linear-gradient(180deg, #f6eee8 0%, #f1e4dc 100%);
}

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

.page-shell {
  position: relative;
  width: min(100%, 430px);
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  padding: 32px 22px 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.12)),
    var(--cream);
  box-shadow: 0 0 80px rgba(76, 50, 42, .16);
  isolation: isolate;
}

.page-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: .38;
  background-image:
    linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 78%);
}

.glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(34px);
  opacity: .45;
  z-index: -2;
}
.glow-one { width: 220px; height: 220px; background: #fff; top: -70px; right: -70px; }
.glow-two { width: 260px; height: 260px; background: #e6c6ba; bottom: 80px; left: -130px; }

.menu-button {
  position: absolute;
  top: 24px;
  right: 20px;
  width: 44px;
  height: 44px;
  display: grid;
  place-content: center;
  gap: 4px;
  border: 1px solid rgba(187, 146, 130, .24);
  border-radius: 50%;
  background: rgba(255,255,255,.58);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 24px rgba(93, 65, 56, .1);
}
.menu-button span {
  width: 17px;
  height: 1.5px;
  background: var(--rose-dark);
  border-radius: 2px;
}

.hero {
  text-align: center;
  padding-top: 18px;
}

.brand-lockup { animation: rise .8s ease both; }

.monogram {
  width: 90px;
  height: 90px;
  margin: 0 auto 8px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--rose);
  font: 600 74px/1 "Cormorant Garamond", serif;
  text-shadow: 0 8px 18px rgba(197,143,125,.22);
  position: relative;
}
.monogram::after {
  content: "";
  position: absolute;
  width: 62px;
  height: 14px;
  right: 1px;
  bottom: 7px;
  border-bottom: 2px solid var(--rose);
  border-radius: 50%;
  transform: rotate(-11deg);
}

h1 {
  margin: 0;
  font: 600 29px/1 "Cormorant Garamond", serif;
  letter-spacing: .18em;
}
.subbrand {
  margin: 6px 0 0;
  color: var(--rose-dark);
  font: 600 12px/1 "Cormorant Garamond", serif;
  letter-spacing: .42em;
  padding-left: .42em;
}

.headline {
  margin-top: 23px;
  font-size: 15px;
  line-height: 1.95;
}
.headline p { margin: 0; }
.headline p:last-child { color: var(--muted); }

.shipping-pill {
  width: fit-content;
  margin: 18px auto 22px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.5);
  box-shadow: 0 10px 28px rgba(117, 81, 68, .08);
  font-size: 11px;
}
.flag { font-size: 17px; }

.links {
  display: grid;
  gap: 13px;
  position: relative;
  z-index: 3;
}

.link-card {
  min-height: 76px;
  display: grid;
  grid-template-columns: 54px 1fr 24px;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 12px;
  border: 1px solid rgba(182, 137, 120, .17);
  border-radius: 25px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.48));
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  animation: rise .75s ease both;
}
.link-card:nth-child(2) { animation-delay: .08s; }
.link-card:nth-child(3) { animation-delay: .16s; }
.link-card:nth-child(4) { animation-delay: .24s; }

.link-card:active { transform: scale(.985); }
@media (hover:hover) {
  .link-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 50px rgba(99, 69, 59, .16);
    border-color: rgba(182, 137, 120, .32);
  }
}

.link-card.featured {
  background:
    linear-gradient(135deg, rgba(237,207,197,.8), rgba(255,248,244,.72));
}

.icon-wrap {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: linear-gradient(145deg, #f1d8cf, #fff8f4);
  color: var(--rose-dark);
  font-size: 22px;
  box-shadow: inset 0 0 0 1px rgba(182, 137, 120, .12);
}

.link-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: right;
}
.link-copy strong { font-size: 14px; font-weight: 600; }
.link-copy small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  direction: ltr;
}
.arrow {
  color: var(--rose-dark);
  font-size: 22px;
  opacity: .7;
}

.brand-scene {
  height: 210px;
  position: relative;
  margin-top: 24px;
  pointer-events: none;
}

.bag-image {
  position: absolute;
  left: -34px;
  bottom: -8px;
  width: 235px;
  border-radius: 28px;
  transform: rotate(-2deg);
  filter: drop-shadow(0 18px 24px rgba(88, 57, 48, .15));
  mix-blend-mode: multiply;
}

.label-image {
  position: absolute;
  left: 138px;
  bottom: 8px;
  width: 112px;
  height: 112px;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 18px 32px rgba(28, 22, 20, .28);
  transform: rotate(6deg);
  border: 5px solid rgba(255,255,255,.7);
}

.floral {
  position: absolute;
  width: 110px;
  height: 150px;
  right: -22px;
  bottom: 0;
  opacity: .36;
  background:
    radial-gradient(circle at 54% 13%, #d9a99b 0 4px, transparent 5px),
    radial-gradient(circle at 72% 29%, #d9a99b 0 5px, transparent 6px),
    radial-gradient(circle at 42% 46%, #d9a99b 0 4px, transparent 5px),
    linear-gradient(74deg, transparent 48%, #b68979 49% 50%, transparent 51%);
  filter: blur(.15px);
  transform: rotate(-14deg);
}
.floral-two { right: 24px; bottom: -12px; transform: scale(.72) rotate(12deg); opacity: .23; }

.signature {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  margin-top: -3px;
}
.signature span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(153,108,91,.38), transparent);
}
.signature p {
  margin: 0;
  color: var(--rose-dark);
  font-size: 11px;
  white-space: nowrap;
}

footer {
  padding-top: 18px;
  text-align: center;
}
.social-row {
  display: flex;
  justify-content: center;
  gap: 11px;
}
.social-row a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.58);
  color: var(--rose-dark);
  box-shadow: 0 8px 22px rgba(111, 75, 63, .09);
  transition: transform .2s ease;
}
.social-row a:active { transform: scale(.94); }
footer p {
  margin: 12px 0 0;
  color: #9c8880;
  font: 500 10px/1.4 "Cormorant Garamond", serif;
  letter-spacing: .08em;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 700px) {
  body { padding: 34px 0; }
  .page-shell {
    min-height: calc(100vh - 68px);
    border-radius: 38px;
  }
}