:root {
  --navy: #12304a;
  --blue: #1769e0;
  --teal: #0f9d8a;
  --orange: #f97316;
  --violet: #7357d9;
  --background: #f6f8fb;
  --text: #17212b;
  --muted: #536779;
  --border: #e2e8f0;
  font-family: "Manrope", "Noto Sans Arabic", sans-serif;
  color: var(--navy);
  background: var(--background);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--violet); outline-offset: 5px; }
::selection { background: #ddf7f2; color: var(--navy); }
[hidden] { display: none !important; }
html:lang(ar) { font-family: "Noto Sans Arabic", "Manrope", sans-serif; }
.page-shell { width: min(100% - 112px, 1320px); min-height: 100svh; margin-inline: auto; display: flex; flex-direction: column; }
.skip-link { position: fixed; inset-block-start: -100px; inset-inline-start: 24px; padding: 12px 20px; background: white; border-radius: 8px; z-index: 10; color: var(--navy); }
.skip-link:focus { inset-block-start: 16px; }

.header { min-height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; width: 166px; flex-shrink: 0; }
.brand img { width: 100%; height: auto; display: block; }
.header-note { font-size: 13px; color: var(--muted); font-weight: 500; }
.language-switch { direction: ltr; display: flex; align-items: center; gap: 3px; padding: 5px; border: 1px solid var(--border); border-radius: 100px; background: #ffffffa6; }
.language-switch button { display: grid; place-items: center; width: 37px; height: 33px; border: 0; border-radius: 100px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 700; transition: background 160ms ease, color 160ms ease; }
.language-switch button[lang="ar"] { font-size: 16px; font-family: "Noto Sans Arabic", sans-serif; }
.language-switch button:hover { background: #e8f1ff; color: var(--blue); }
.language-switch button[aria-pressed="true"] { background: var(--navy); color: white; }

.hero { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 32px; padding-block: 45px 50px; }
.hero-copy { position: relative; z-index: 1; min-width: 0; padding-block: 12px 24px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-block-end: 19px; font-size: 13px; font-weight: 600; }
.tiny-star { color: var(--teal); font-size: 23px; line-height: 1; }
h1 { font-size: clamp(68px, 7.5vw, 110px); font-weight: 800; letter-spacing: -0.055em; word-spacing: .03em; line-height: 1.11; margin: 0; }
html:lang(ar) h1 { font-size: clamp(76px, 7.6vw, 112px); letter-spacing: -0.06em; line-height: 1.45; }
.headline-first, .headline-second { display: block; }
.headline-second { position: relative; width: fit-content; color: var(--blue); }
.underline { position: absolute; width: 95%; height: 22px; inset-inline-start: 0; inset-block-end: -10px; color: var(--teal); transform: rotate(-2deg); }
html:lang(ar) .underline { inset-block-end: 4px; }
.hero-description { margin-block: 39px 34px; color: var(--muted); font-size: 17px; font-weight: 400; line-height: 1.8; }
.hero-action { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.share-button { display: inline-flex; align-items: center; justify-content: center; gap: 26px; min-height: 56px; padding: 13px 25px; background: var(--violet); color: white; border: 1px solid var(--violet); border-radius: 12px; font-size: 13px; font-weight: 600; transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.share-button:hover { background: #5e42bc; border-color: #5e42bc; transform: translateY(-3px); box-shadow: 0 8px 20px #7357d922; }
.share-button:active { transform: translateY(0); }
.share-button svg { width: 21px; height: 21px; }
[dir="rtl"] .share-button svg { transform: scaleX(-1); }
.domain { position: relative; padding-block: 7px; color: var(--muted); font-family: "Manrope", sans-serif; font-size: 12px; letter-spacing: .02em; }
.domain-line { position: absolute; bottom: 0; left: 0; height: 1px; width: 100%; background: #cbd5e1; }

.hero-art { position: relative; width: 100%; min-width: 0; max-width: 560px; justify-self: center; aspect-ratio: 1 / 1.05; direction: ltr; isolation: isolate; overflow: clip; overflow-clip-margin: 15px; }
.art-circle { position: absolute; width: 87%; aspect-ratio: 1; top: 9%; left: 5%; border-radius: 50%; background: #e8eef6; z-index: -2; }
.art-circle::after { content: ""; position: absolute; width: 72%; height: 72%; left: 14%; top: 14%; border: 1px solid #d9e3ef; border-radius: 50%; }
.orbit { position: absolute; border: 1px dashed #c6d2df; border-radius: 50%; width: 102%; height: 63%; left: -4%; top: 22%; transform: rotate(-28deg); z-index: -1; }
.orbit-two { transform: rotate(46deg); width: 76%; height: 100%; left: 12%; top: 0; opacity: .65; }
.main-bag { position: absolute; width: 48%; height: 59%; left: 34%; top: 24%; transform: rotate(10deg); filter: drop-shadow(15px 28px 18px #12304a26); animation: bag-in 1000ms cubic-bezier(.2,.7,.3,1) both; }
.bag-body { position: absolute; inset: 0; background: linear-gradient(115deg, #4d94fc 0%, #1769e0 47%, #1154b8 100%); border-radius: 7px 7px 15px 13px; overflow: hidden; box-shadow: inset 1px 1px 0 #ffffff45, inset -2px 0 8px #073f8d33; clip-path: polygon(3% 0, 95% 0, 100% 100%, 0 100%); }
.bag-side { position: absolute; width: 21%; height: 100%; left: -15%; top: 0; background: linear-gradient(90deg, #104ca5, #155dca); clip-path: polygon(0 6%, 100% 0, 100% 100%, 9% 95%); border-radius: 8px; }
.bag-fold { position: absolute; width: 100%; top: 0; height: 17px; background: #0752be50; border-bottom: 1px solid #ffffff20; }
.bag-handle { position: absolute; width: 41%; height: 30%; top: -19%; left: 30%; border: 10px solid #183b68; border-bottom: 0; border-radius: 80px 80px 0 0; transform: perspective(160px) rotateX(12deg); box-shadow: 2px -2px 0 #ffffff1a; z-index: 2; }
.bag-handle-back { left: 18%; top: -20%; border-color: #0b2d5b; z-index: -1; }
.bag-sticker { position: absolute; width: 47%; aspect-ratio: 1; background: white; border-radius: 25%; top: 23%; left: 27%; display: grid; place-items: center; box-shadow: 0 5px 12px #0a3d9420; transform: rotate(-7deg); }
.bag-sticker img { width: 78%; height: auto; }
.bag-wordmark { position: absolute; top: 65%; left: 0; width: 100%; text-align: center; color: white; font-family: "Manrope", sans-serif; font-size: clamp(20px, 2.9vw, 40px); letter-spacing: -.07em; font-weight: 800; }
.bag-bottom-line { position: absolute; height: 1px; bottom: 16px; left: 10%; width: 80%; background: #ffffff24; }
.little-bag { position: absolute; width: 36%; height: 40%; left: 8%; top: 44%; transform: rotate(-14deg); filter: drop-shadow(8px 18px 15px #12304a1c); animation: little-bag-in 1000ms cubic-bezier(.2,.7,.3,1) both; }
.little-bag-body { position: absolute; inset: 0; background: linear-gradient(115deg, #4ac9ae, #0f9d8a 65%, #0c8878); clip-path: polygon(5% 0, 94% 0, 100% 100%, 0 100%); border-radius: 7px 7px 13px 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; box-shadow: inset 1px 1px 0 #ffffff70; }
.little-bag-body > span:first-child { font-family: "Noto Sans Arabic", sans-serif; font-size: clamp(38px, 4.7vw, 66px); font-weight: 800; line-height: 1.5; }
.little-bag-star { font-size: 33px; line-height: 1; color: #baf1e0; }
.little-handle { position: absolute; width: 46%; height: 36%; left: 27%; top: -24%; border: 8px solid #0d7269; border-bottom: 0; border-radius: 70px 70px 0 0; z-index: -1; }
.orange-tag { position: absolute; top: 22%; left: 72%; width: 21%; aspect-ratio: 1 / 1.35; background: var(--orange); border-radius: 5px 5px 28px 5px; transform: rotate(21deg); box-shadow: 3px 8px 10px #8e43111a; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--navy); }
.orange-tag::before { content: ""; position: absolute; width: 74%; height: 65%; bottom: 95%; right: 40%; border: 2px solid #b97a43; border-bottom: 0; border-radius: 70% 70% 0 0; transform: rotate(-9deg); z-index: -1; }
.tag-hole { position: absolute; width: 8px; height: 8px; border-radius: 50%; top: 12px; left: calc(50% - 4px); background: #e8eef6; }
.orange-tag > span:nth-child(2) { font-family: "Noto Sans Arabic", sans-serif; font-size: clamp(10px, 1.25vw, 17px); font-weight: 800; white-space: nowrap; }
.orange-tag svg { width: 31px; height: 31px; }
.sparkle { position: absolute; }
.sparkle-orange { width: 14%; height: 14%; top: 8%; left: 14%; color: var(--orange); transform: rotate(9deg); }
.sparkle-blue { width: 5%; height: 5%; top: 79%; left: 86%; color: var(--blue); transform: rotate(9deg); }
.small-dot { position: absolute; border-radius: 50%; }
.dot-one { width: 10px; height: 10px; background: var(--teal); top: 15%; left: 87%; }
.dot-two { width: 7px; height: 7px; background: var(--violet); top: 91%; left: 25%; }
.community-label { display: flex; align-items: center; gap: 10px; position: absolute; top: 80%; left: 25%; padding: 11px 19px; background: white; border: 1px solid #f0f3f7; border-radius: 100px; box-shadow: 0 10px 25px #12304a0b; transform: rotate(-7deg); white-space: nowrap; color: var(--navy); font-size: 12px; font-weight: 600; }
.label-symbol { font-size: 28px; line-height: 1; color: var(--violet); }
.doodle-arrow { position: absolute; width: 19%; height: 16%; left: 1%; top: 27%; color: var(--navy); transform: rotate(16deg); }
.art-caption { position: absolute; bottom: 0; left: 41%; font-family: "Manrope", sans-serif; font-size: 10px; letter-spacing: .1em; color: var(--muted); transform: rotate(-4deg); }

.footer { min-height: 87px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--border); font-size: 11px; }
.made-in { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.morocco { display: grid; place-items: center; flex-shrink: 0; width: 23px; height: 23px; border: 1px solid #cbd7d5; background: #edf3f0; color: #087f70; border-radius: 50%; line-height: 0; }
.morocco svg { display: block; width: 15px; height: 15px; }
.copyright { font-family: "Manrope", sans-serif; color: var(--muted); font-size: 10px; letter-spacing: .02em; }
.footer-signature { font-weight: 600; }
.toast { position: fixed; bottom: 28px; left: 50%; transform: translate(-50%, 15px); background: var(--navy); color: white; border-radius: 10px; padding: 13px 22px; margin: 0; font-size: 13px; text-align: center; opacity: 0; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; z-index: 5; max-width: calc(100% - 32px); }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.share-fallback { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); width: min(440px, calc(100% - 32px)); padding: 20px; border: 1px solid var(--border); border-radius: 16px; background: white; box-shadow: 0 12px 50px #12304a26; z-index: 6; font-size: 13px; }
.share-fallback label { display: block; margin-bottom: 12px; }
.share-fallback-row { display: flex; gap: 10px; }
.share-fallback input { width: 100%; min-width: 0; border: 1px solid var(--border); border-radius: 6px; padding: 9px; color: var(--navy); background: var(--background); }
.share-fallback button { border: 0; background: var(--navy); color: white; border-radius: 6px; padding: 8px 14px; }

@keyframes bag-in { from { opacity: 0; transform: translate(12px, 16px) rotate(15deg); } to { opacity: 1; transform: translate(0, 0) rotate(10deg); } }
@keyframes little-bag-in { from { opacity: 0; transform: translate(-10px, 20px) rotate(-19deg); } to { opacity: 1; transform: translate(0, 0) rotate(-14deg); } }

@media (min-width: 1500px) { .hero { gap: 70px; padding-block: 50px 65px; } }
@media (max-width: 1100px) {
  .page-shell { width: calc(100% - 72px); }
  .hero { gap: 22px; }
  h1 { font-size: 76px; }
  html:lang(ar) h1 { font-size: 88px; }
  html:lang(fr) h1 { font-size: 67px; }
  .hero-description { font-size: 15px; }
  .hero-action { gap: 20px; }
  .share-button { gap: 18px; padding-inline: 19px; }
  .domain { font-size: 11px; }
  .bag-handle { border-width: 8px; }
  .little-handle { border-width: 6px; }
  .community-label { padding: 9px 13px; gap: 7px; font-size: 11px; }
}
@media (max-width: 760px) {
  .page-shell { width: calc(100% - 40px); }
  .header { min-height: 86px; gap: 12px; }
  .brand { width: 140px; }
  .header-note { display: none; }
  .language-switch { gap: 1px; padding: 3px; }
  .language-switch button { width: 33px; height: 32px; }
  .hero { grid-template-columns: 1fr; gap: 0; padding-block: 37px 24px; }
  .hero-copy { text-align: center; padding: 0; }
  .eyebrow { justify-content: center; font-size: 12px; margin-block-end: 15px; }
  h1, html:lang(fr) h1 { font-size: clamp(54px, 10vw, 77px); line-height: 1.1; }
  html:lang(ar) h1 { font-size: clamp(65px, 13vw, 88px); line-height: 1.36; }
  .headline-first, .headline-second { display: inline-block; }
  .headline-first { margin-inline-end: .18em; }
  html:lang(en) .headline-first, html:lang(fr) .headline-first { display: block; margin-inline-end: 0; }
  .underline { height: 15px; inset-block-end: -8px; }
  html:lang(ar) .underline { inset-block-end: 0; }
  .hero-description { font-size: 14px; margin-block: 24px 23px; }
  .hero-action { justify-content: center; gap: 23px; }
  .share-button { min-height: 48px; padding: 10px 19px; font-size: 12px; border-radius: 10px; }
  .share-button svg { width: 18px; height: 18px; }
  .hero-art { width: min(100%, 450px); margin-inline: auto; margin-block: 19px 0; aspect-ratio: 1 / 1; }
  .bag-handle { border-width: 8px; }
  .little-handle { border-width: 6px; }
  .bag-wordmark { font-size: clamp(24px, 6vw, 33px); }
  .little-bag-body > span:first-child { font-size: clamp(42px, 11vw, 58px); }
  .orange-tag > span:nth-child(2) { font-size: 13px; }
  .orange-tag svg { width: 25px; height: 25px; }
  .community-label { font-size: 10px; padding: 8px 13px; }
  .label-symbol { font-size: 24px; }
  .art-caption { font-size: 9px; bottom: -1%; }
  .footer { min-height: 77px; gap: 12px; font-size: 10px; }
  .copyright { font-size: 9px; }
  .footer-signature { display: none; }
  .morocco { width: 21px; height: 21px; }
}
@media (max-width: 360px) {
  .page-shell { width: calc(100% - 32px); }
  .brand { width: 123px; }
  .hero { padding-block-start: 30px; }
  html:lang(ar) h1 { font-size: 59px; }
  .domain { display: none; }
  .orange-tag > span:nth-child(2) { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}