@font-face { font-family: "IBM Plex Sans"; src: url("IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("IBMPlexSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("IBMPlexSans-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("IBMPlexSansArabic-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("IBMPlexSansArabic-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("IBMPlexSansArabic-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root { --green: #00493A; --aqua: #06AB97; --white: #FFFFFF; --ink: #142821; --porcelain: #F9F7F2; --mist: #EEF4F1; font-family: "IBM Plex Sans", Arial, sans-serif; color: var(--green); background: var(--porcelain); }
* { box-sizing: border-box; }
html { background: var(--porcelain); }
body { min-inline-size: 20rem; margin: 0; background: var(--porcelain); }
img { display: block; max-inline-size: 100%; block-size: auto; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 10; inset: .75rem auto auto .75rem; transform: translateY(-220%); padding: .7rem 1rem; border-radius: .6rem; background: var(--green); color: var(--white); }
.skip-link:focus { transform: translateY(0); }

.launch-page { position: relative; isolation: isolate; min-block-size: 100dvh; overflow-x: clip; background: radial-gradient(circle at 50% 44%, var(--white) 0 20%, rgb(255 255 255 / 0) 57%), linear-gradient(145deg, var(--porcelain), var(--mist)); }
.launch-page::before { position: absolute; z-index: -2; inset: 12% 24% auto; block-size: 48%; border-radius: 50%; background: rgb(6 171 151 / 6%); filter: blur(4rem); content: ""; pointer-events: none; }
.launch-page__products { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.product-visual { position: absolute; max-inline-size: none; filter: drop-shadow(0 .8rem 1.1rem rgb(20 40 33 / 10%)); animation: product-float 10s ease-in-out infinite alternate; transform: rotate(var(--angle)); transform-origin: center; }
.product-visual--spray { inline-size: clamp(7.5rem, 10vw, 9.5rem); inset: 6% auto auto clamp(2rem, 4vw, 4.5rem); --angle: -9deg; --drift: .3rem; animation-duration: 10s; }
.product-visual--jug { inline-size: clamp(9.5rem, 13.5vw, 13.5rem); inset: 34% auto auto clamp(1.25rem, 4vw, 4.5rem); --angle: 5deg; --drift: -.35rem; animation-delay: -2.5s; animation-duration: 12s; }
.product-visual--towels { inline-size: clamp(11rem, 15vw, 15rem); inset: auto auto 2% clamp(1.25rem, 3.5vw, 4rem); --angle: -4deg; --drift: .22rem; animation-delay: -5s; animation-duration: 11s; }
.product-visual--pump { inline-size: clamp(5.7rem, 7vw, 7rem); inset: 55% auto auto clamp(11rem, 14vw, 16rem); --angle: -8deg; --drift: -.22rem; animation-delay: -1s; animation-duration: 8s; }
.product-visual--cups { inline-size: clamp(7.75rem, 11vw, 11rem); inset: 6% clamp(4rem, 6vw, 7rem) auto auto; --angle: 7deg; --drift: -.28rem; animation-delay: -5s; animation-duration: 11s; }
.product-visual--bowl { inline-size: clamp(6.2rem, 8.5vw, 8.75rem); inset: 42% clamp(3rem, 5vw, 5.5rem) auto auto; --angle: -5deg; --drift: .2rem; animation-delay: -3s; animation-duration: 9s; }
.product-visual--clamshell { inline-size: clamp(12.5rem, 17vw, 18rem); inset: auto clamp(1.5rem, 2vw, 2.5rem) 1% auto; --angle: 3deg; --drift: -.3rem; animation-delay: -6s; animation-duration: 12s; }
.product-visual--tray { inline-size: clamp(7.5rem, 10.5vw, 10.5rem); inset: auto clamp(6.5rem, 9vw, 10rem) 24% auto; --angle: -6deg; --drift: .26rem; animation-delay: -2s; animation-duration: 10s; }

.launch-page__shell { position: relative; z-index: 1; display: grid; place-items: center; min-block-size: 100dvh; padding: clamp(.75rem, 1.2vw, 1.25rem) clamp(1rem, 3vw, 3.5rem); }
.launch-page__content { inline-size: min(100%, 42rem); text-align: center; }
.hero-brand-stack { display: block; color: var(--green); text-align: center; }
.brand-logo { display: block; position: static; inline-size: clamp(11.875rem, 15vw, 14.6875rem); block-size: auto; object-fit: contain; margin: 0 auto 1.125rem; }
.hero-title-en { display: block; position: static; margin: 0; color: var(--green); font-size: clamp(3rem, 3.7vw, 4.125rem); line-height: .98; font-weight: 700; letter-spacing: -.065em; }
.hero-title-ar { display: block; position: static; margin: .75rem 0 0; color: var(--green); font-family: "IBM Plex Sans Arabic", Arial, sans-serif; font-size: clamp(2.6875rem, 3.2vw, 3.625rem); line-height: 1.18; font-weight: 700; }
.divider { display: flex; position: static; align-items: center; justify-content: center; gap: .75rem; margin: 1rem auto 0; color: var(--aqua); }
.divider span { inline-size: clamp(4.25rem, 9vw, 6.5rem); block-size: 1px; background: linear-gradient(90deg, transparent, var(--aqua), transparent); }
.divider b { font-size: 1rem; line-height: 1; }
.hero-tagline { display: block; position: static; margin: 1rem 0 0; font-family: "IBM Plex Sans Arabic", Arial, sans-serif; color: var(--green); font-size: clamp(1.4375rem, 1.8vw, 1.875rem); line-height: 1.25; font-weight: 700; }
.marketplace-positioning { max-inline-size: 47.5rem; margin: .625rem auto 0; text-align: center; }
.marketplace-positioning__english { display: block; position: static; margin: 0; color: var(--green); font-size: clamp(.9375rem, 1.15vw, 1.1875rem); line-height: 1.25; font-weight: 700; }
.marketplace-positioning__arabic { display: block; position: static; margin: .25rem 0 0; color: var(--green); font-family: "IBM Plex Sans Arabic", Arial, sans-serif; font-size: clamp(1rem, 1.2vw, 1.25rem); line-height: 1.4; font-weight: 700; }
.identity { display: grid; gap: .18rem; margin: 0; }
.intro { max-inline-size: 37.5rem; margin: .625rem auto 0; color: var(--ink); font-size: clamp(.8125rem, .95vw, .9375rem); line-height: 1.4; }
.intro--arabic { margin-block-start: 0; font-family: "IBM Plex Sans Arabic", Arial, sans-serif; }

.countdown-wrap { margin: clamp(.75rem, 1vw, .875rem) auto 0; }
.countdown-wrap h2 { display: flex; align-items: center; justify-content: center; gap: clamp(.55rem, 1vw, .8rem); margin: 0 0 .4rem; color: var(--green); font-size: clamp(.875rem, 1vw, 1.0625rem); line-height: 1.2; font-weight: 700; }
.countdown-wrap h2 i { inline-size: 1px; align-self: stretch; background: rgb(0 73 58 / 35%); }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.5rem, .8vw, .625rem); max-inline-size: 32rem; margin: 0 auto; }
.countdown > div { min-block-size: 6rem; padding: .42rem .3rem .35rem; border: 1px solid rgb(0 73 58 / 20%); border-radius: .75rem; background: rgb(255 255 255 / 45%); box-shadow: 0 .5rem 1rem rgb(20 40 33 / 4%); }
.countdown strong, .countdown span, .countdown b { display: block; }
.countdown strong { color: var(--green); font-size: clamp(2.125rem, 2.5vw, 2.75rem); line-height: 1; letter-spacing: -.06em; }
.countdown span, .countdown b { color: var(--ink); font-size: .75rem; line-height: 1.25; }
.countdown span { margin-block-start: .18rem; }
.countdown b { font-family: "IBM Plex Sans Arabic", Arial, sans-serif; font-weight: 600; }
.noscript { margin: .6rem 0 0; color: var(--ink); }

.whatsapp { display: flex; align-items: center; justify-content: center; gap: clamp(.7rem, 1.2vw, 1rem); min-block-size: 3.375rem; max-inline-size: 37.5rem; margin: .75rem auto 0; padding: .45rem .85rem; border: 1px solid var(--aqua); border-radius: .85rem; background: var(--green); box-shadow: 0 .75rem 1.2rem rgb(0 73 58 / 20%); color: var(--white); text-decoration: none; transition: transform 180ms ease, box-shadow 180ms ease; }
.whatsapp:hover { transform: translateY(-2px); box-shadow: 0 1rem 1.45rem rgb(0 73 58 / 25%); }
.whatsapp svg { flex: 0 0 auto; inline-size: 2.15rem; block-size: 2.15rem; padding-inline-end: .6rem; border-inline-end: 1px solid rgb(255 255 255 / 50%); }
.whatsapp > span { display: grid; flex: 1 1 auto; gap: 0; text-align: start; font-size: clamp(.78rem, 1vw, .92rem); font-weight: 600; }
.whatsapp > span b { font-family: "IBM Plex Sans Arabic", Arial, sans-serif; font-size: clamp(.82rem, 1.05vw, .96rem); }
.whatsapp > strong { flex: 0 0 auto; font-size: clamp(.94rem, 1.3vw, 1.1rem); letter-spacing: .01em; white-space: nowrap; }
.closing { display: flex; align-items: center; justify-content: center; gap: .55rem; margin: .45rem 0 0; color: var(--green); font-size: .82rem; }
.closing i { color: var(--aqua); font-size: 1rem; font-style: normal; }
.closing span:last-child { font-family: "IBM Plex Sans Arabic", Arial, sans-serif; }

.reveal { animation: reveal .6s both; animation-delay: var(--delay, 0ms); }
.reveal--identity { --delay: 340ms; }
.reveal--countdown { --delay: 480ms; }
.reveal--whatsapp { --delay: 600ms; }
.reveal--closing { --delay: 720ms; }
@keyframes reveal { from { opacity: 0; transform: translateY(.85rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes product-float { from { translate: 0 .12rem; } to { translate: var(--drift, .25rem) -.7rem; } }

@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .launch-page__content { inline-size: min(100%, 42.5rem); }
  .product-visual--jug, .product-visual--pump, .product-visual--bowl, .product-visual--tray { display: none; }
  .product-visual--spray, .product-visual--cups { opacity: .75; }
  .product-visual--jug, .product-visual--tray { opacity: .65; }
  .product-visual--towels, .product-visual--clamshell { inline-size: 11.5rem; opacity: .68; }
}

@media (max-width: 47.9375rem) {
  .launch-page { min-block-size: 100svh; }
  .launch-page__products { overflow: hidden; }
  .product-visual { display: none; opacity: .7; block-size: auto; object-fit: contain; filter: drop-shadow(0 .55rem .85rem rgb(20 40 33 / 8%)); }
  .product-visual--spray { display: block; inline-size: clamp(3.4375rem, 15vw, 4.5rem); inset: 5% auto auto -1.3rem; }
  .product-visual--cups { display: block; inline-size: clamp(4.375rem, 18vw, 5.625rem); inset: 5% -1.35rem auto auto; }
  .product-visual--towels { display: block; inline-size: clamp(5.9375rem, 25vw, 7.8125rem); inset: 72% auto auto -.375rem; opacity: .8; }
  .product-visual--clamshell { display: block; inline-size: clamp(5.9375rem, 25vw, 7.8125rem); inset: 74% -.375rem auto auto; opacity: .78; }
  .launch-page__shell { align-items: start; min-block-size: 100svh; padding: .75rem .75rem 1rem; }
  .launch-page__content { inline-size: min(92%, 26.875rem); }
  .brand-logo { inline-size: clamp(9.0625rem, 47vw, 11.875rem); margin-block-end: 1.125rem; }
  .hero-title-en { font-size: clamp(2.625rem, 11vw, 3.25rem); line-height: 1; }
  .hero-title-ar { margin-block-start: 1rem; font-size: clamp(2.375rem, 10vw, 2.875rem); line-height: 1.3; }
  .hero-divider { margin-block-start: 1.125rem; }
  .hero-tagline { margin-block-start: 1rem; font-size: clamp(1.3125rem, 5.8vw, 1.6875rem); line-height: 1.35; }
  .marketplace-positioning { max-inline-size: 92%; margin-block-start: .75rem; }
  .marketplace-line { display: block; }
  .marketplace-positioning__english { font-size: clamp(.875rem, 3.8vw, 1rem); line-height: 1.3; }
  .marketplace-positioning__arabic { margin-block-start: .375rem; font-size: clamp(.9375rem, 4vw, 1.0625rem); line-height: 1.5; }
  .identity { display: none; }
  .countdown-wrap { margin-block-start: .875rem; }
  .countdown-wrap h2 { display: grid; grid-template-columns: 1fr; justify-items: center; gap: .15rem; margin-block-end: .5rem; font-size: .8125rem; }
  .countdown-wrap h2 i { display: none; }
  .countdown { grid-template-columns: repeat(2, minmax(0, 1fr)); inline-size: min(82%, 19.375rem); max-inline-size: none; gap: .5rem; }
  .countdown > div { min-block-size: 4.25rem; padding: .5rem .375rem; border-radius: .65rem; }
  .countdown strong { font-size: clamp(1.875rem, 9vw, 2.375rem); }
  .countdown span, .countdown b { font-size: .6875rem; }
  .whatsapp { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .75rem; row-gap: .12rem; inline-size: min(90%, 24.375rem); min-block-size: 3.875rem; margin-block-start: .75rem; padding: .5625rem .875rem; border-radius: .875rem; }
  .whatsapp svg { grid-row: span 2; inline-size: 2.15rem; block-size: 2.15rem; padding-inline-end: .6rem; }
  .whatsapp > span { grid-template-columns: 1fr; justify-items: center; text-align: center; font-size: .6875rem; line-height: 1.2; }
  .whatsapp > span b { font-size: .75rem; font-weight: 700; }
  .whatsapp > strong { grid-column: 2; justify-self: center; font-size: .9375rem; font-weight: 800; letter-spacing: .0125rem; }
  .closing { display: none; }
}

@media (min-width: 56.25rem) and (max-height: 51.25rem) {
  .launch-page__shell { padding-block: .625rem; }
  .brand-logo { inline-size: clamp(10.75rem, 13.5vw, 12.875rem); margin-block-end: .9375rem; }
  .hero-title-en { font-size: clamp(2.75rem, 3.25vw, 3.625rem); }
  .hero-title-ar { margin-block-start: .625rem; font-size: clamp(2.5rem, 2.85vw, 3.25rem); }
  .hero-divider { margin-block-start: .8125rem; }
  .hero-tagline { margin-block-start: .8125rem; font-size: clamp(1.375rem, 1.6vw, 1.65rem); }
  .marketplace-positioning { margin-block-start: .5rem; }
  .marketplace-positioning__english { font-size: clamp(.875rem, 1vw, 1.05rem); }
  .marketplace-positioning__arabic { font-size: clamp(.9375rem, 1.05vw, 1.1rem); }
  .intro { font-size: .8125rem; }
  .countdown-wrap { margin-block-start: .625rem; }
  .countdown-wrap h2 { margin-block-end: .3rem; font-size: .875rem; }
  .countdown > div { min-block-size: 5.5rem; }
  .whatsapp { min-block-size: 3.125rem; margin-block-start: .625rem; padding-block: .36rem; }
  .closing { display: none; }
  .product-visual--spray { inline-size: 7rem; }
  .product-visual--jug { inline-size: 8.5rem; }
  .product-visual--towels { inline-size: 9.75rem; }
  .product-visual--pump { inline-size: 5.1rem; }
  .product-visual--cups { inline-size: 7.1rem; }
  .product-visual--bowl { inline-size: 5.5rem; }
  .product-visual--clamshell { inline-size: 11rem; }
  .product-visual--tray { inline-size: 6.8rem; }
}

@media (max-width: 47.9375rem) and (max-height: 54rem) {
  .launch-page__shell { padding-block: .5rem .25rem; }
  .brand-logo { inline-size: clamp(8.5rem, 44vw, 10.5rem); margin-block-end: 1.125rem; }
  .hero-title-en { font-size: clamp(2.625rem, 11vw, 3rem); }
  .hero-title-ar { margin-block-start: 1rem; font-size: clamp(2.375rem, 10vw, 2.625rem); }
  .hero-divider { margin-block-start: 1.125rem; }
  .hero-tagline { margin-block-start: 1rem; font-size: clamp(1.3125rem, 5.8vw, 1.55rem); }
  .marketplace-positioning { margin-block-start: .75rem; }
  .marketplace-positioning__english { font-size: clamp(.875rem, 3.8vw, .95rem); }
  .marketplace-positioning__arabic { font-size: clamp(.9375rem, 4vw, 1rem); }
  .identity { display: none; }
  .countdown-wrap { margin-block-start: .875rem; }
  .countdown-wrap h2 { margin-block-end: .25rem; font-size: .8125rem; }
  .countdown > div { min-block-size: 4rem; padding-block: .3125rem; }
  .countdown strong { font-size: clamp(1.875rem, 9vw, 2.125rem); }
  .whatsapp { min-block-size: 3.875rem; margin-block-start: .5rem; padding-block: .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}