@font-face{font-family:Vazirmatn;src:url("/assets/hero-v3/7f3c44f0a0b45cd7.ttf")}@font-face{font-family:Vazirmatn;src:url("/assets/hero-v3/95d882dc939061c6.ttf");font-weight:900}*{box-sizing:border-box}body{margin:0;background:#e7e7e7;color:#24262a;font-family:Vazirmatn,Arial;min-height:100svh;display:grid;place-items:center;padding:6vh 5vw}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;font:inherit;color:inherit;border:0;background:none}button:focus-visible,a:focus-visible{outline:3px solid #9558ea;outline-offset:5px}a{color:inherit;text-decoration:none}.showcase{width:min(1180px,100%);height:min(760px,85svh);min-height:610px;position:relative;border-radius:54px;background:linear-gradient(150deg,#fff 50%,#f1f2f1);box-shadow:0 50px 65px -45px #0006;isolation:isolate;overflow:hidden;--color:#a454f0;--mx:0;--my:0}.color-field{position:absolute;left:-8%;top:-10%;width:56%;height:85%;background:var(--color);border-radius:14% 35% 40% 8% / 15% 24% 33% 10%;transform:rotate(8deg);transition:background 1s,border-radius 1.3s,transform 1.3s;z-index:-2}.showcase[data-slide="1"] .color-field{border-radius:16% 47% 28% 8% / 15% 38% 33% 10%;transform:rotate(-9deg)}.showcase[data-slide="2"] .color-field{border-radius:16% 26% 49% 8% / 15% 45% 28% 10%;transform:rotate(5deg)}.floor-glow{position:absolute;left:9%;top:60%;width:35%;height:16%;background:var(--color);opacity:.22;filter:blur(30px);border-radius:50%;transition:background 1s}header{position:absolute;top:36px;left:40px;right:40px;display:flex;justify-content:space-between;direction:ltr;align-items:center}header img{width:55px;mix-blend-mode:multiply}.hello{font:30px Arial;background:#ffd576;width:38px;height:38px;border-radius:50%;text-align:center;line-height:38px}.hero-copy{position:absolute;left:7%;top:21%;width:38%;color:white;direction:rtl;text-align:left;z-index:2}.hero-copy small{font:9px Arial;letter-spacing:2px;opacity:.8}.hero-copy h1{font-size:clamp(36px,4.5vw,67px);line-height:1.3;font-weight:900;margin:17px 0}.flavor-tag{font-size:12px;opacity:.85}.product-stage.product-3d{position:absolute;left:-1%;top:16%;width:57%;height:70%;z-index:3;pointer-events:none}.product-3d canvas{width:100%;height:100%;filter:drop-shadow(0 25px 15px #30263726)}.store{position:absolute;right:7%;top:21%;width:36%;z-index:5}.caption{font:9px Arial;letter-spacing:2px;color:#888}.store h2{font-size:29px;font-weight:400;line-height:1.4;margin:14px 0 32px}.list-head{display:flex;justify-content:space-between;font-size:9px;color:#999;padding-bottom:18px;border-bottom:1px solid #eee}.product-row{display:grid;grid-template-columns:1fr 45px 46px 24px;align-items:center;gap:12px;width:100%;height:82px;border-bottom:1px solid #eeeeee;text-align:right;font-size:12px;transition:background .3s,transform .3s}.product-row img{height:59px;width:43px;object-fit:contain}.product-row .weight{font-size:9px;color:#777}.product-row b{font-size:19px;font-weight:400}.product-row[aria-current=true]{background:linear-gradient(90deg,#fff0,#f0ebf8);transform:translateX(-6px)}.explore{display:flex;justify-content:space-between;font-size:11px;color:#666;margin-top:22px}.dock{position:absolute;bottom:46px;left:50%;transform:translateX(-50%);display:flex;align-items:center;direction:ltr;gap:18px;background:#fff9;border:1px solid white;backdrop-filter:blur(14px);border-radius:25px;padding:7px 8px 7px 18px;box-shadow:0 10px 30px #00000008;z-index:7}.next{background:#282b2e;color:white;border-radius:17px;width:45px;height:45px;font-size:22px}.pause{font:15px Arial;width:24px}.dots{display:flex;gap:10px}.dots button{width:9px;height:9px;border-radius:50%;background:#d4d4d4;padding:0}.dots button[aria-current=true]{background:var(--color);box-shadow:0 0 0 4px #ffffff}.divider{height:15px;width:1px;background:#ddd}footer{position:absolute;bottom:46px;left:35px;right:35px;display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#777;direction:ltr}footer .counter{margin-left:auto;margin-right:18px;font:10px Arial;letter-spacing:2px}footer button{background:#e9ebea;width:37px;height:37px;border-radius:12px}.orbit-fruit{position:absolute;width:110px;height:110px;background-image:url("/assets/hero-v3/ae70bc29163ab5c6.webp");background-size:300% 200%;z-index:4;pointer-events:none;animation:drift 4s ease-in-out infinite alternate}.fruit-a{left:2%;top:59%;background-position:0 100%;filter:blur(2px);transform:rotate(20deg)}.fruit-b{left:38%;top:4%;width:80px;height:80px;background-position:50% 100%;filter:blur(3px);animation-delay:-2s}.fruit-c{left:39%;top:69%;width:60px;height:60px;background-position:100% 0;filter:blur(1px);animation-delay:-1s}.switching .product-3d{animation:product-pass 1.05s cubic-bezier(.65,0,.2,1)}.switching h1{animation:title-pass 1.05s ease}.switching .orbit-fruit{animation:fruit-pass 1.05s ease}.progress{position:absolute;bottom:0;left:8%;right:8%;height:2px;overflow:hidden}.progress i{display:block;height:100%;background:var(--color);transform-origin:left;animation:countdown 5s linear infinite}.paused .progress i,.paused .orbit-fruit{animation-play-state:paused}.sr{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}@keyframes drift{to{translate:0 -20px;rotate:10deg}}@keyframes product-pass{0%{translate:0 0}40%{translate:0 110%;opacity:0}41%{translate:0 -110%;opacity:0}100%{translate:0 0;opacity:1}}@keyframes title-pass{0%,100%{opacity:1;translate:0 0}40%{opacity:0;translate:-30px 0}41%{opacity:0;translate:30px 0}}@keyframes fruit-pass{0%{translate:0 0;opacity:1}40%{translate:20px 130px;opacity:0}41%{translate:-20px -130px;opacity:0}100%{translate:0 0;opacity:1}}@keyframes countdown{from{scale:0 1}to{scale:1 1}}@media(max-width:700px){body{padding:18px 12px}.showcase{min-height:900px;height:calc(100svh - 36px);border-radius:32px}.color-field{width:110%;height:48%;left:-20%;top:-7%}.hero-copy{top:12%;left:8%;width:80%}.hero-copy h1{font-size:42px}.product-stage.product-3d{top:13%;left:8%;width:90%;height:39%}.store{top:53%;right:8%;width:84%}.store h2{font-size:21px;margin:8px 0 12px}.store h2 br{display:none}.caption,.list-head{display:none}.product-row{height:61px}.product-row img{height:46px}.explore{margin-top:13px}.dock{bottom:20px}footer{bottom:24px;left:20px;right:20px}footer>span:first-child{display:none}.fruit-a{top:35%;left:-3%}.fruit-b{top:10%;left:78%}.fruit-c{top:44%;left:73%}header{top:24px;left:25px;right:25px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.fallback-jar{position:absolute;left:17%;top:28%;width:25%;height:48%;object-fit:contain;z-index:3}.has-product-3d .fallback-jar{display:none}@media(max-width:700px){.fallback-jar{top:20%;left:32%;width:40%;height:31%}}

.studio-intro{position:fixed;inset:0;z-index:100;background:#f3f2f0;display:grid;place-items:center;overflow:hidden;isolation:isolate;clip-path:inset(0);transition:clip-path 1s cubic-bezier(.76,0,.24,1)}
.intro-shape{position:absolute;width:65vmax;height:65vmax;z-index:-1;animation:shape-arrive 1.65s cubic-bezier(.16,1,.3,1) both}
.shape-purple{background:#a454f0;left:-28vmax;top:-30vmax;border-radius:32% 44% 36% 24%;rotate:25deg}
.shape-mint{background:#67eed0;right:-37vmax;bottom:-41vmax;border-radius:40% 26% 44% 30%;rotate:-20deg;animation-delay:.18s}
.shape-yellow{background:#ffd16b;width:20vmax;height:20vmax;right:12%;top:-9vmax;border-radius:40% 30% 45% 28%;rotate:22deg;animation-delay:.3s}
.intro-brand{text-align:center;display:flex;flex-direction:column;align-items:center;animation:studio-brand-in 1s .25s cubic-bezier(.16,1,.3,1) both}.intro-brand img{width:140px;mix-blend-mode:multiply;margin-bottom:26px}.intro-brand span{font-size:24px}.intro-brand strong{font-size:clamp(62px,10vw,125px);font-weight:900;line-height:1.4;letter-spacing:-3px}.intro-brand small{font:9px Arial;letter-spacing:4px;margin-top:20px}.studio-skip{position:absolute;right:35px;top:30px;border:1px solid #24262a25;border-radius:24px;padding:10px 20px;font-size:11px}.intro-edition{position:absolute;bottom:32px;font:9px Arial;letter-spacing:3px}.studio-intro.leaving{clip-path:inset(100% 0 0 0);pointer-events:none}.studio-intro.leaving .intro-brand{translate:0 75px;opacity:0;transition:translate .65s,opacity .5s}
.studio-opening{overflow:hidden}.studio-opening .showcase{visibility:hidden}.studio-revealing .showcase{animation:studio-card-in 1.3s cubic-bezier(.16,1,.3,1) both}.studio-revealing .product-3d,.studio-revealing .fallback-jar{animation:studio-jar-drop 1.55s .15s cubic-bezier(.16,1,.3,1) both}.studio-revealing .store{animation:studio-brand-in 1s .55s both}.studio-revealing .dock{animation:studio-dock-in 1s .7s both}.studio-revealing .orbit-fruit{animation:studio-fruit-drop 1.6s .3s both}.studio-revealing .progress i{animation-play-state:paused}
@keyframes shape-arrive{from{translate:0 -110vh;rotate:-35deg}to{translate:0 0}}
@keyframes studio-brand-in{from{opacity:0;translate:0 35px;filter:blur(8px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes studio-card-in{from{scale:.92;opacity:.4}to{scale:1;opacity:1}}
@keyframes studio-jar-drop{0%{translate:0 -110%;rotate:-12deg;opacity:0}20%{opacity:1}70%{translate:0 16px;rotate:3deg}100%{translate:0 0;rotate:0deg;opacity:1}}
@keyframes studio-fruit-drop{from{translate:0 -260px;opacity:0}to{translate:0 0;opacity:1}}
@keyframes studio-dock-in{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.studio-intro{display:none}}

/* Nibella identity: palette approximated from the supplied brand board. */
:root{--brand-navy:#073044;--brand-cream:#f6eedf;--brand-orange:#ee7412;--brand-yellow:#f5ad00;--brand-gray:#c6cccb}
body{background:#e5e6e5;color:var(--brand-navy)}
.showcase{background:var(--brand-cream);--color:var(--brand-navy)}
.store h2{color:var(--brand-navy);font-weight:900}.caption{color:#6a746f;line-height:1.7;letter-spacing:1.3px}
.hero-copy{color:var(--brand-cream)}.showcase[data-slide="1"] .hero-copy,.showcase[data-slide="2"] .hero-copy{color:var(--brand-navy)}
.hero-copy small{font-size:8px;letter-spacing:1px;line-height:1.6;display:block;max-width:260px}
header img{width:78px;background:var(--brand-cream);border-radius:10px;padding:8px;mix-blend-mode:normal}
.next{background:var(--brand-navy);color:var(--brand-cream)}.dock{background:#f6eedfe6;border-color:#fffc}.product-row[aria-current=true]{background:linear-gradient(90deg,#f6eedf00,#0730440e)}
.list-head,.product-row{border-color:#07304418}.explore,footer,.product-row .weight{color:#4e635f}
.brand-triangle,.brand-symbol,.intro-shape.shape-mint,.intro-shape.shape-yellow{clip-path:path('M 24 10 Q 13 3 12 18 L 7 91 Q 6 106 20 101 L 98 72 Q 110 67 98 58 Z')}
.brand-triangle{position:absolute;width:115px;height:115px;pointer-events:none;z-index:0}.triangle-one{background:var(--brand-orange);left:39%;bottom:18%;rotate:-14deg}.triangle-two{background:var(--brand-yellow);left:41%;bottom:16%;rotate:9deg;opacity:.9}.brand-square{position:absolute;width:62px;height:62px;border-radius:13px;background:var(--brand-gray);rotate:-31deg;left:39%;bottom:30%;opacity:.6;z-index:0}
.brand-symbol{display:block;width:110px;height:110px;background:var(--brand-yellow);scale:.36;transform-origin:right center;margin:-35px -5px -35px -65px}
.studio-intro{background:var(--brand-cream);color:var(--brand-navy)}
.shape-purple{background:var(--brand-navy);border-radius:24% 42% 38% 18%;left:-37vmax;top:-32vmax}
.intro-shape.shape-mint{background:var(--brand-orange);width:110px;height:110px;right:10%;bottom:15%;scale:2.8;rotate:-12deg}
.intro-shape.shape-yellow{background:var(--brand-yellow);width:110px;height:110px;right:8%;top:auto;bottom:12%;scale:2.9;rotate:9deg;opacity:.92}
.studio-intro::after{content:'';position:absolute;width:110px;height:110px;right:17%;bottom:34%;border-radius:24px;background:var(--brand-gray);rotate:-32deg;opacity:.75;z-index:-1;animation:studio-brand-in 1.4s .35s both}
.intro-brand{padding:25px;max-width:85vw}.intro-brand img{width:190px;margin-bottom:36px}.intro-brand strong{font-size:clamp(32px,5.5vw,74px);letter-spacing:0;line-height:1.6;color:var(--brand-navy)}.intro-brand small{font-size:clamp(9px,1.15vw,14px);letter-spacing:2px;line-height:1.8;color:#a54908;font-weight:bold;direction:ltr}.intro-edition{color:var(--brand-navy);font-size:8px;letter-spacing:1.5px}.studio-skip{color:var(--brand-navy);border-color:#07304435}
button:focus-visible,a:focus-visible{outline-color:var(--brand-orange)}
@media(max-width:700px){.shape-purple{left:-48vmax;top:-44vmax}.intro-shape.shape-mint{scale:1.5;right:13%;bottom:12%}.intro-shape.shape-yellow{scale:1.6;right:6%;bottom:9%}.studio-intro::after{width:70px;height:70px;bottom:25%;right:14%;border-radius:15px}.intro-brand img{width:150px}.intro-brand small{letter-spacing:1px}.triangle-one{left:65%;bottom:52%;scale:.6}.triangle-two{left:70%;bottom:50%;scale:.6}.brand-square{left:70%;bottom:62%;scale:.6}header img{width:63px}.hero-copy small{max-width:200px}}

/* Separate text, product and decorations into non-overlapping areas. */
header img,.intro-brand img{background:transparent;padding:0;border-radius:0;mix-blend-mode:normal}
header{z-index:8}header img{width:72px}
.hero-copy{top:18%;left:6%;width:40%;z-index:5;text-align:left}
.hero-copy h1{font-size:clamp(28px,3.1vw,43px);line-height:1.25;margin:12px 0 8px}
.hero-copy h1 br{display:none}.hero-copy small{max-width:none}.flavor-tag{font-size:11px}
.product-stage.product-3d{left:0;top:34%;width:53%;height:48%;overflow:hidden}
.fallback-jar{left:17%;top:39%;width:21%;height:39%}
.store{right:6%;width:35%;top:22%}
.fruit-a{left:2%;top:64%;width:75px;height:75px}.fruit-b{left:42%;top:38%;width:55px;height:55px}.fruit-c{left:40%;top:74%;width:48px;height:48px}
.triangle-one{left:auto;right:-28px;bottom:5px;scale:.72;opacity:.8}.triangle-two{left:auto;right:-12px;bottom:-14px;scale:.75;opacity:.8}.brand-square{left:auto;right:42px;bottom:50px;width:38px;height:38px;opacity:.45}
.intro-shape.shape-mint{right:0;bottom:5%;scale:1.6}.intro-shape.shape-yellow{right:-2%;bottom:2%;scale:1.7}.studio-intro::after{width:65px;height:65px;right:8%;bottom:16%;border-radius:15px}.shape-purple{left:-48vmax;top:-44vmax}.intro-brand{position:relative;z-index:2}.intro-brand img{width:170px}
@media(max-width:700px){.showcase{min-height:1000px}.hero-copy{top:12%;left:8%;width:84%}.hero-copy h1{font-size:32px}.product-stage.product-3d{top:23%;left:12%;width:76%;height:29%}.fallback-jar{top:26%;left:35%;width:30%;height:25%}.store{top:55%;right:8%;width:84%}.fruit-a{top:40%;left:3%;width:65px;height:65px}.fruit-b{top:28%;left:82%;width:50px;height:50px}.fruit-c{top:47%;left:76%;width:40px;height:40px}.triangle-one,.triangle-two,.brand-square{display:none}.intro-shape.shape-mint{right:-25px;bottom:5%;scale:1.1}.intro-shape.shape-yellow{right:-35px;bottom:3%;scale:1.2}.studio-intro::after{right:9%;bottom:16%;width:44px;height:44px;border-radius:10px}.intro-brand{max-width:100%;padding:20px}.intro-brand img{width:145px}.intro-brand strong{font-size:clamp(27px,7vw,40px)}header img{width:61px}}

/* Full-size product in a dedicated central column. */
.hero-copy{left:5%;top:25%;width:23%;text-align:left}
.hero-copy h1{font-size:clamp(30px,3.5vw,48px);line-height:1.35}
.hero-copy h1 br{display:block}
.hero-copy small{max-width:190px;line-height:1.8}
.product-stage.product-3d{left:16%;top:16%;width:57%;height:70%;overflow:hidden}
.fallback-jar{left:33%;top:25%;width:24%;height:53%}
.store{right:4%;width:25%;top:23%}
.store h2{font-size:26px}.caption{font-size:8px;letter-spacing:.7px}
.product-row{grid-template-columns:1fr 35px 35px 18px;gap:7px;font-size:11px}.product-row img{width:35px}
.fruit-a{left:27%;top:67%;width:95px;height:95px}.fruit-b{left:57%;top:12%;width:80px;height:80px}.fruit-c{left:61%;top:73%;width:60px;height:60px}
.triangle-one{left:-10px;right:auto;bottom:7%;scale:1.2;opacity:.9}
.triangle-two{left:25px;right:auto;bottom:3%;scale:1.25;opacity:.9}
.brand-square{left:7%;right:auto;bottom:23%;width:62px;height:62px;opacity:.6}
.intro-shape.shape-mint{right:0;bottom:5%;scale:2.8}
.intro-shape.shape-yellow{right:-2%;bottom:2%;scale:2.9}
.studio-intro::after{width:110px;height:110px;right:13%;bottom:24%;border-radius:24px}
@media(max-width:700px){.showcase{min-height:1120px}.hero-copy{left:8%;top:11%;width:84%}.hero-copy h1{font-size:32px;margin:8px 0}.hero-copy h1 br{display:none}.hero-copy small{max-width:none}.product-stage.product-3d{left:0;top:22%;width:100%;height:37%}.fallback-jar{left:29%;top:26%;width:42%;height:32%}.store{top:62%;right:8%;width:84%}.store h2{font-size:23px}.product-row{grid-template-columns:1fr 45px 46px 24px;font-size:12px;gap:12px}.product-row img{width:43px}.fruit-a{left:2%;top:46%;width:80px;height:80px}.fruit-b{left:80%;top:25%;width:65px;height:65px}.fruit-c{left:78%;top:53%;width:55px;height:55px}.triangle-one,.triangle-two,.brand-square{display:block}.triangle-one{left:-40px;bottom:39%;scale:1}.triangle-two{left:-10px;bottom:36%;scale:1}.brand-square{left:0;bottom:50%;width:48px;height:48px}.intro-shape.shape-mint{right:-25px;bottom:5%;scale:1.65}.intro-shape.shape-yellow{right:-35px;bottom:3%;scale:1.75}.studio-intro::after{width:70px;height:70px;right:14%;bottom:21%;border-radius:15px}}

/* Restore list sizing and fruit positions; retain the centered jar. */
.store{right:6%;width:35%;top:22%}
.store h2{font-size:29px}
.caption{font-size:9px;letter-spacing:1.3px}
.product-row{grid-template-columns:1fr 45px 46px 24px;gap:12px;font-size:12px}
.product-row img{width:43px}
.fruit-a{left:2%;top:64%;width:75px;height:75px}
.fruit-b{left:42%;top:38%;width:55px;height:55px}
.fruit-c{left:40%;top:74%;width:48px;height:48px}
@media(max-width:700px){
.store{top:62%;right:8%;width:84%}
.store h2{font-size:23px}
.fruit-a{top:40%;left:3%;width:65px;height:65px}
.fruit-b{top:28%;left:82%;width:50px;height:50px}
.fruit-c{top:47%;left:76%;width:40px;height:40px}
}

/* Full-size fruit accents outside the centered product silhouette. */
.fruit-a{left:1%;top:61%;width:110px;height:110px}
.fruit-b{left:20%;top:8%;width:80px;height:80px}
.fruit-c{left:17%;top:78%;width:60px;height:60px}
@media(max-width:700px){
.fruit-a{left:-3%;top:40%;width:100px;height:100px}
.fruit-b{left:auto;right:-2%;top:25%;width:80px;height:80px}
.fruit-c{left:auto;right:0;top:52%;width:60px;height:60px}
}

/* Per-product decoration sets, switched with the product copy. */
.orbit-fruit{background-image:url("/assets/hero-v3/ae70bc29163ab5c6.webp");background-size:300% 200%;background-repeat:no-repeat;filter:none}
.showcase[data-decorations="0"] .fruit-a{background-position:0 100%}
.showcase[data-decorations="0"] .fruit-b{background-position:50% 100%}
.showcase[data-decorations="0"] .fruit-c{background-position:0 100%}
.showcase[data-decorations="1"] .orbit-fruit{background-position:0 0}
.showcase[data-decorations="2"] .orbit-fruit{background-image:url("/assets/hero-v3/0ed013339cef02d2.webp");background-size:300% 100%}
.showcase[data-decorations="2"] .fruit-a{background-position:0 0}
.showcase[data-decorations="2"] .fruit-b{background-position:50% 0}
.showcase[data-decorations="2"] .fruit-c{background-position:100% 0}
.fruit-a{left:3%;right:auto;top:57%;width:110px;height:110px}
.fruit-b{left:24%;right:auto;top:7%;width:80px;height:80px}
.fruit-c{left:24%;right:auto;top:76%;width:60px;height:60px}
@media(max-width:700px){
.fruit-a{left:-12px;right:auto;top:34%;width:110px;height:110px}
.fruit-b{left:auto;right:0;top:25%;width:80px;height:80px}
.fruit-c{left:auto;right:0;top:51%;width:60px;height:60px}
}


/* Separate CSS masks let the supplied PNG ring rotate around its fixed center. */
header{justify-content:flex-end;pointer-events:none}
.ring-logo{position:relative;display:block;width:94px;height:94px;border-radius:50%;pointer-events:auto;flex:none}
.ring-logo-center,.ring-logo-orbit{position:absolute;inset:0;background:url("/assets/hero-v3/d1d19a2bff417c02.webp") center/100% 100% no-repeat;border-radius:50%}
.ring-logo-center{clip-path:circle(43% at 50% 50%)}
.ring-logo-orbit{mask-image:radial-gradient(circle at center,transparent 0 61%,#000 61.5% 66%,transparent 66.5%);-webkit-mask-image:radial-gradient(circle at center,transparent 0 61%,#000 61.5% 66%,transparent 66.5%);animation:logo-turn-pause 4.8s infinite;will-change:transform}

.paused .ring-logo-orbit{animation-play-state:paused}
@media(max-width:700px){.ring-logo{width:72px;height:72px}header{top:19px;right:22px}}
@media(prefers-reduced-motion:reduce){.ring-logo-orbit{animation:none}}

@keyframes logo-step-pause{0.00000%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}2.50000%{transform:rotate(30deg);animation-timing-function:linear}8.33333%{transform:rotate(30deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}10.83333%{transform:rotate(60deg);animation-timing-function:linear}16.66667%{transform:rotate(60deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}19.16667%{transform:rotate(90deg);animation-timing-function:linear}25.00000%{transform:rotate(90deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}27.50000%{transform:rotate(120deg);animation-timing-function:linear}33.33333%{transform:rotate(120deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}35.83333%{transform:rotate(150deg);animation-timing-function:linear}41.66667%{transform:rotate(150deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}44.16667%{transform:rotate(180deg);animation-timing-function:linear}50.00000%{transform:rotate(180deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}52.50000%{transform:rotate(210deg);animation-timing-function:linear}58.33333%{transform:rotate(210deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}60.83333%{transform:rotate(240deg);animation-timing-function:linear}66.66667%{transform:rotate(240deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}69.16667%{transform:rotate(270deg);animation-timing-function:linear}75.00000%{transform:rotate(270deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}77.50000%{transform:rotate(300deg);animation-timing-function:linear}83.33333%{transform:rotate(300deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}85.83333%{transform:rotate(330deg);animation-timing-function:linear}91.66667%{transform:rotate(330deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}94.16667%{transform:rotate(360deg);animation-timing-function:linear}100%{transform:rotate(360deg)}}
.ring-logo-orbit{animation:logo-step-pause 18s infinite;backface-visibility:hidden;mask-image:radial-gradient(circle at center,transparent 60.3%,#000 61.2%,#000 66.1%,transparent 67%);-webkit-mask-image:radial-gradient(circle at center,transparent 60.3%,#000 61.2%,#000 66.1%,transparent 67%)}
.paused .ring-logo-orbit{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.ring-logo-orbit{animation:none}}

.ring-logo{width:80px;height:80px}@media(max-width:700px){.ring-logo{width:62px;height:62px}}


/* Keep backdrop inside the card; give animated objects an unclipped stage. */
.showcase{overflow:visible}
.studio-backdrop{position:absolute;inset:0;overflow:hidden;border-radius:inherit;z-index:-1;pointer-events:none}
.studio-backdrop .color-field{z-index:0}.studio-backdrop .floor-glow{z-index:0}
.product-stage.product-3d{overflow:visible}
.product-3d canvas{position:absolute;width:200%;height:200%;left:-50%;top:-50%;max-width:none;pointer-events:none}
.switching .product-3d{animation:glass-product-orbit 1.05s cubic-bezier(.65,0,.2,1) both}
.switching .product-3d canvas{animation:glass-product-blur 1.05s ease both}
.switching .orbit-fruit{animation:glass-fruit-orbit 1.05s cubic-bezier(.65,0,.2,1) both;transform-origin:130px 90px;will-change:transform,filter}
.switching .fruit-b{transform-origin:-110px 130px}
.switching .fruit-c{transform-origin:100px -110px}
@keyframes glass-product-orbit{0%,100%{translate:0 0;rotate:0deg}25%{translate:35px -35px;rotate:9deg}50%{translate:0 -55px;rotate:0deg}75%{translate:-35px -25px;rotate:-7deg}}
@keyframes glass-product-blur{0%,100%{filter:drop-shadow(0 25px 15px #30263726) blur(0) brightness(1)}40%,60%{filter:drop-shadow(0 20px 24px #ffffff55) blur(7px) brightness(1.18) saturate(.85)}}
@keyframes glass-fruit-orbit{0%{transform:rotate(0deg);filter:blur(0);opacity:1}40%{filter:blur(6px) brightness(1.2);opacity:.65}60%{filter:blur(6px) brightness(1.2);opacity:.65}100%{transform:rotate(360deg);filter:blur(0);opacity:1}}
@media(max-width:700px){.switching .orbit-fruit{transform-origin:60px 65px}.switching .fruit-b{transform-origin:-60px 65px}.switching .fruit-c{transform-origin:-55px -60px}}
@media(prefers-reduced-motion:reduce){.switching .product-3d,.switching .product-3d canvas,.switching .orbit-fruit{animation:none!important}}

/* Independent circular variation: the previous jar stays outside the card. */
body{padding:12vh 8vw;overflow-x:clip}
.showcase{width:min(1080px,100%)}
.product-3d canvas{width:300%;height:300%;left:-100%;top:-100%}
.switching .product-3d{animation:none}
.switching .product-3d canvas{animation:none}
.switching .orbit-fruit{animation-duration:1.35s}
@media(max-width:700px){body{padding:100px 18px 30px}}

/* Three persistent product layers around a right-shifted circular axis. */
.product-stage.product-3d{left:22%;top:16%;width:57%;height:70%;overflow:visible}
.product-3d canvas.orbit-jar-layer{position:absolute;inset:0;width:100%;height:100%;max-width:none;transform-origin:center;pointer-events:none;will-change:transform,filter;animation:none!important}
body{padding:20vh 16vw 20vh 8vw;overflow-x:clip}
@media(max-width:700px){body{padding:90px 10px 80px}.product-stage.product-3d{left:-10%;top:23%;width:90%;height:35%}}

/* Mirror the orbital center to the left; keep secondary product treatment. */
body{padding:20vh 8vw 20vh 16vw;overflow-x:clip}
.product-stage.product-3d{left:16%}
@media(max-width:700px){body{padding:90px 10px 80px}.product-stage.product-3d{left:20%}}

/* Fruit paths share the product's clockwise arc and 2.2 second deceleration. */
.orbit-fruit.fruit-synced,.switching .orbit-fruit.fruit-synced{animation:none!important;transform-origin:center!important;translate:0 0;rotate:0deg;will-change:transform,filter,opacity}
.orbit-fruit.fruit-previous{pointer-events:none}

/* Cluster the fruit around the jar; each uses the jar's actual orbital center. */
.fruit-a{left:27%;right:auto;top:61%;width:110px;height:110px}
.fruit-b{left:52%;right:auto;top:29%;width:80px;height:80px}
.fruit-c{left:53%;right:auto;top:66%;width:60px;height:60px}
@media(max-width:700px){
.fruit-a{left:32%;right:auto;top:43%;width:110px;height:110px}
.fruit-b{left:auto;right:2%;top:27%;width:80px;height:80px}
.fruit-c{left:auto;right:1%;top:52%;width:60px;height:60px}
}

/* Raise the product and its companion fruit together by the same amount. */
.product-stage.product-3d{top:calc(16% - 26px)}
.fruit-a{top:calc(61% - 26px)}
.fruit-b{top:calc(29% - 26px)}
.fruit-c{top:calc(66% - 26px)}
@media(max-width:700px){
.product-stage.product-3d{top:calc(23% - 18px)}
.fruit-a{top:calc(43% - 18px)}
.fruit-b{top:calc(27% - 18px)}
.fruit-c{top:calc(52% - 18px)}
}

/* Move the third fruit from lower right to upper left of the product. */
.fruit-c{left:29%;right:auto;top:calc(29% - 26px);width:90px;height:90px}
@media(max-width:700px){.fruit-c{left:33%;right:auto;top:calc(27% - 18px);width:90px;height:90px}}

/* Center the complete card in the viewport without document scrolling. */
html,body{width:100%;height:100%;min-height:0;margin:0;overflow:hidden}
body{height:100svh;padding:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center}
.showcase{width:var(--card-width,1080px);height:var(--card-height,760px);min-height:0;max-height:none;flex-shrink:0;transform:scale(var(--viewport-fit,1));transform-origin:center}
@media(max-width:700px){body{padding:0}.showcase{min-height:0;height:var(--card-height,1120px);width:var(--card-width,360px)}}

/* A single motion owner prevents snapping between CSS bobbing and orbital keyframes. */
.orbit-fruit:not(.fruit-synced),.switching .orbit-fruit:not(.fruit-synced){animation:none!important;transform:translate(0,0) rotate(0deg) scale(1);translate:0 0;rotate:0deg;filter:none;opacity:1}
.product-3d canvas.orbit-jar-layer{transition:none!important}

/* Soft, raised cards inspired by the supplied reference board. */
body{background:radial-gradient(ellipse at 8% 70%,#f5b85d70,transparent 45%),radial-gradient(ellipse at 95% 5%,#fffaf0 0,transparent 42%),linear-gradient(125deg,#b9b3ae,#e6e1d9 65%,#c8c6c2)}
.showcase{background:linear-gradient(135deg,#ffffff80,#edeeebba 50%,#ffffff9c);border:1px solid #ffffffa6;border-radius:38px;box-shadow:0 32px 55px -22px #3c302c40,0 8px 18px #4f42361a,inset 0 1px 1px #fff;backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px)}
.studio-backdrop{border-radius:inherit}
.color-field{background:linear-gradient(150deg,#fff5df 2%,#f9c47d 48%,#ee8b29 100%);opacity:.7;box-shadow:inset 0 1px 2px #fff9;transition:background 1.2s,border-radius 1.3s,transform 1.3s}
.showcase[data-slide="1"] .color-field{background:linear-gradient(140deg,#fff4df,#ffd27b 55%,#eda32e)}
.showcase[data-slide="2"] .color-field{background:linear-gradient(140deg,#b6cfcb,#356775 60%,#073044)}
.hero-copy{padding:22px 20px 26px;border-radius:25px;background:linear-gradient(145deg,#f9f6f0ef,#ecece7df);border:1px solid #ffffff85;box-shadow:10px 15px 22px #43392f24,-5px -5px 18px #ffffff75,inset 0 1px 1px #fff;color:var(--brand-navy)}
.showcase[data-slide="1"] .hero-copy,.showcase[data-slide="2"] .hero-copy{color:var(--brand-navy)}
.hero-copy small{font-size:8px;line-height:1.8;opacity:.7}.hero-copy h1{font-size:clamp(28px,3vw,40px)}
.flavor-tag{display:inline-block;padding:7px 12px;margin-top:12px;border-radius:20px;background:linear-gradient(#fff9ec,#f1e3cf);box-shadow:0 4px 7px #49362224,inset 0 1px #fff;font-size:10px}
.store h2{margin-bottom:22px}.list-head{border:0;padding-bottom:12px}
.product-list{display:grid;gap:12px}
.product-row{height:82px;padding:8px 13px;border:1px solid #ffffffa8;border-radius:19px;background:linear-gradient(140deg,#ffffffa6,#f0eee8e8);box-shadow:6px 9px 15px #433c3221,-3px -3px 10px #ffffff85,inset 0 1px #fff;transform:none;transition:background .5s,box-shadow .5s,color .5s}
.product-row[aria-current=true]{background:linear-gradient(140deg,#fff2d9,#f7c681 70%,#efae58);box-shadow:7px 12px 18px #8f5c282b,inset 0 1px 1px #fff;color:#073044;transform:none}
.product-row b{width:23px;height:23px;border-radius:50%;background:#ffffff80;display:grid;place-items:center;font-size:17px;box-shadow:0 2px 3px #3f332417}
.explore{margin-top:20px;width:fit-content;min-width:155px;margin-right:auto;padding:10px 18px;gap:25px;border-radius:25px;background:linear-gradient(145deg,#145064,#073044);color:#fff6e6;box-shadow:0 6px 10px #07304430,inset 0 1px #ffffff26}
.dock{border:1px solid #ffffffb3;background:linear-gradient(145deg,#fff9eecc,#e9e8e2cc);box-shadow:8px 12px 20px #493f3326,-3px -3px 12px #ffffff70,inset 0 1px #fff;border-radius:30px}
.next{background:linear-gradient(140deg,#185268,#073044);box-shadow:0 4px 8px #07304438,inset 0 1px #ffffff30;border-radius:50%}
footer button{background:linear-gradient(145deg,#fffaef,#e7e3da);box-shadow:3px 5px 9px #42372b25,inset 0 1px #fff;border-radius:50%}
.ring-logo{filter:drop-shadow(0 5px 7px #54442d22)}
@media(max-width:700px){.showcase{border-radius:30px}.hero-copy{padding:15px 18px 18px;width:84%;top:10%}.hero-copy h1{font-size:30px;margin:7px 0}.flavor-tag{margin-top:3px}.product-list{gap:9px}.product-row{height:61px;padding:5px 12px}.store h2{margin-bottom:15px}.explore{margin-top:14px}.hero-copy small{max-width:none}}

/* Separate edge-to-edge variation; preserve the circular card edition. */
html,body{width:100%;height:100%;overflow:hidden}
body{display:block;padding:0;background:#eeece6}
.showcase{width:100%;height:100svh;min-height:0;max-height:none;transform:none;border:0;border-radius:0;box-shadow:none;background:linear-gradient(135deg,#f8f7f1,#e8e9e5)}
.studio-backdrop{border-radius:0}
header{top:clamp(20px,4vh,48px);left:4%;right:4%}
.hero-copy{left:5%;top:29%;width:23%;padding:clamp(18px,2vw,32px)}
.hero-copy h1{font-size:clamp(30px,3.3vw,56px)}
.product-stage.product-3d{left:16%;top:12%;width:57%;height:74%}
.store{right:5%;width:33%;top:24%}
.store h2{font-size:clamp(27px,2.6vw,40px);margin-bottom:22px}
.product-row{height:clamp(72px,10vh,96px);font-size:13px}
.fruit-a{left:29%;top:62%}
.fruit-b{left:52%;top:27%}
.fruit-c{left:31%;top:26%}
.dock{bottom:4vh}
footer{bottom:4vh;left:4%;right:4%}
.progress{left:0;right:0;height:3px}
@media(min-width:701px) and (max-height:740px){
 .store{top:20%}.store h2{font-size:28px;margin:8px 0 14px}
 .product-row{height:68px}.product-list{gap:10px}.explore{margin-top:14px}
 .list-head{padding-bottom:8px}.hero-copy{top:28%}
}
@media(max-width:700px){
 header{top:16px;left:6%;right:6%}.ring-logo{width:58px;height:58px}
 .hero-copy{top:11%;left:6%;width:64%;padding:12px 15px;border-radius:20px}
 .hero-copy h1{font-size:clamp(23px,6vw,32px);margin:5px 0}
 .hero-copy small{font-size:6px;letter-spacing:.6px}
 .flavor-tag{font-size:9px;padding:4px 9px;margin-top:2px}
 .product-stage.product-3d{left:10%;top:24%;width:90%;height:34%}
 .fruit-a{left:24%;top:43%;width:85px;height:85px}
 .fruit-b{left:74%;right:auto;top:28%;width:62px;height:62px}
 .fruit-c{left:27%;top:27%;width:70px;height:70px}
 .store{top:60%;right:6%;width:88%}
 .store h2{font-size:20px;margin:0 0 10px}
 .product-list{gap:7px}.product-row{height:clamp(43px,6.3svh,60px);padding:3px 12px;font-size:12px;border-radius:15px}
 .product-row img{height:40px}.explore{margin-top:9px;padding:7px 14px;font-size:10px}
 .dock{bottom:13px;padding:5px 6px 5px 14px;gap:13px}.next{width:36px;height:36px}
 footer{bottom:18px;left:6%;right:6%}footer .counter{display:none}
 .triangle-one{bottom:42%}.triangle-two{bottom:40%}.brand-square{bottom:52%}
}
@media(max-width:700px) and (max-height:700px){
 .store{top:57%}.store h2{font-size:17px;margin-bottom:6px}
 .product-row{height:41px}.product-row img{height:34px}.product-list{gap:5px}
 .explore{padding:5px 12px;margin-top:7px}.hero-copy{top:10%}
 .hero-copy h1{font-size:22px}.flavor-tag{display:none}
}

html{height:auto;overflow-x:clip;overflow-y:auto;scroll-behavior:smooth;scroll-padding-top:25px}
body{height:auto;overflow:visible}.showcase{overflow:hidden;overflow:clip}body.studio-opening{overflow:hidden;height:100svh}
.site-content{position:relative;z-index:8;background:#f3f0e8;color:#073044}
.section-nav{padding:28px 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #0730441a;gap:24px}
.wordmark{font:900 28px Arial;letter-spacing:-1px}.wordmark span{display:block;font:11px Vazirmatn;letter-spacing:0;margin-top:5px}
.section-nav>div{display:flex;gap:30px;font-size:13px}.section-nav a:hover{color:#d26c0c}
.page-section{padding:100px 6%;max-width:1600px;margin:auto}.eyebrow{display:block;font:10px/1.7 Arial;letter-spacing:2px;direction:ltr;text-align:inherit;opacity:.65}
.page-section h2{font-size:clamp(32px,4.4vw,66px);line-height:1.35;margin:18px 0 24px;font-weight:900;letter-spacing:-1.5px}
.page-section p{font-size:15px;line-height:2;color:#536563}.section-heading{max-width:700px;margin-bottom:45px}.section-heading p{max-width:490px}
.discovery-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:25px}.discovery-main,.texture-card{border-radius:32px;padding:44px;border:1px solid #fff9;box-shadow:12px 18px 35px #39301b13,-5px -5px 18px #fff8}
.discovery-main{background:linear-gradient(140deg,#fff4de,#f6b855 80%,#ee941e)}.page-section h3{font-size:30px;line-height:1.5;margin:20px 0}.discovery-main p{max-width:500px;color:#48534d}
.process-track{margin-top:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px}.process-track b{display:block;font:26px Arial;margin-bottom:12px;color:#986110}.process-track i{font-style:normal;opacity:.5}
.texture-card{position:relative;overflow:hidden;background:linear-gradient(145deg,#285e68,#073044);color:#fff4df;padding-top:170px}.texture-card p{color:#d3ded8}.texture-fruit{position:absolute;left:25px;top:10px;width:165px;height:165px;background:url("/assets/hero-v3/ae70bc29163ab5c6.webp") 0 0 / 300% 200%;transform:rotate(-18deg);filter:drop-shadow(0 18px 12px #001c3144)}
.flavors-section{padding-top:40px}.flavor-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:35px}.flavor-heading h2{font-size:clamp(30px,3.5vw,52px);margin-bottom:0}.flavor-heading p{font-size:13px}
.flavor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.flavor-card{border:1px solid #ffffffa8;border-radius:30px;padding:26px;box-shadow:10px 18px 28px #50463117,inset 0 1px white;overflow:hidden}.cream-card{background:linear-gradient(145deg,#fff7df,#efe4ce)}.berry-card{background:linear-gradient(145deg,#fff3ed,#edd5d5)}.summer-card{background:linear-gradient(145deg,#eff4e3,#cedcd0)}
.flavor-card-top{display:flex;justify-content:space-between;gap:10px;font-size:11px}.flavor-card-top>span:first-child{font:10px Arial;letter-spacing:1px}.flavor-visual{height:300px;display:grid;place-items:center;position:relative}.flavor-visual img{position:relative;z-index:1;max-height:255px;max-width:70%;object-fit:contain;filter:drop-shadow(8px 18px 9px #403b3329);transform:rotate(-8deg);transition:transform .65s cubic-bezier(.2,.7,.2,1)}.flavor-card:nth-child(2) img{transform:rotate(7deg)}.flavor-card:hover img{transform:translateY(-10px) rotate(0)}.flavor-word{position:absolute;font:900 clamp(30px,4vw,64px) Arial;color:#ffffffb0;letter-spacing:-3px;direction:ltr}.flavor-card h3{font-size:24px;margin:0 0 7px}.flavor-card p{font-size:12px;margin:0 0 25px}.flavor-card>a{border-top:1px solid #07304420;padding-top:17px;display:flex;justify-content:space-between;font-size:13px;align-items:center}.flavor-card>a span{display:grid;place-items:center;border-radius:50%;width:35px;height:35px;background:#fff8}
.story-section{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center;padding-top:60px}.story-art{aspect-ratio:1;border-radius:40px;background:linear-gradient(145deg,#e3e3dc,#fffaf0);position:relative;display:grid;place-items:center;overflow:hidden;box-shadow:15px 20px 30px #473b2c1a,inset 1px 1px #fff}.story-art img{width:47%;position:relative;z-index:2}.story-orbit{position:absolute;width:78%;height:78%;border:35px solid #f4ad00;border-left-color:#d0d5d0;border-bottom-color:#073044;border-radius:50%;transform:rotate(-25deg)}.story-shape{position:absolute;width:110px;height:110px;background:#ee7412;border-radius:25px;transform:rotate(30deg);right:-40px;top:22%}.story-stamp{position:absolute;bottom:7%;left:8%;font:9px/1.6 Arial;letter-spacing:2px}.story-copy p{max-width:470px}.story-signature{font-size:22px!important;font-weight:900;color:#073044!important}.section-button{display:inline-flex;align-items:center;justify-content:space-between;gap:40px;background:#073044;color:#fff3da;padding:15px 23px;border-radius:28px;font-size:13px;box-shadow:0 7px 12px #07304422;transition:transform .2s}.section-button:hover{transform:translateY(-3px)}
.contact-section{max-width:none;background:#073044;color:#fff2d9;padding-bottom:28px;border-radius:44px 44px 0 0;margin-top:35px}.contact-row{display:flex;align-items:center;justify-content:space-between;gap:40px}.contact-row h2{font-size:clamp(34px,4.5vw,68px)}.contact-row p{color:#c5d4d1}.contact-row .section-button{background:#f4ad00;color:#073044}.contact-email{display:block;margin-top:18px;font:13px Arial;letter-spacing:1px}.site-bottom{border-top:1px solid #fff3;margin-top:65px;padding-top:25px;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:#ced8d1}.site-bottom span:last-child{font:9px Arial;letter-spacing:1px}
@media(max-width:700px){.section-nav{padding:24px 6%;align-items:start}.section-nav>div{display:grid;grid-template-columns:1fr 1fr;gap:15px;font-size:10px}.wordmark{font-size:23px}.page-section{padding:60px 6%}.section-heading{margin-bottom:28px}.page-section h2{letter-spacing:-.8px}.discovery-grid,.flavor-grid,.story-section{grid-template-columns:1fr;gap:22px}.discovery-main,.texture-card{padding:28px;border-radius:26px}.texture-card{padding-top:55px;min-height:310px}.texture-card h3,.texture-card p{position:relative;max-width:65%}.texture-fruit{left:-8px;top:90px;width:155px;height:155px}.process-track{font-size:10px;margin-top:30px}.flavor-heading{display:block}.flavor-heading p{margin-top:16px}.flavor-visual{height:280px}.flavor-word{font-size:65px}.flavor-card{padding:24px}.flavor-card h3{font-size:25px}.story-art{max-width:480px;width:100%;margin:auto}.story-copy{padding-top:15px}.contact-section{margin-top:0;border-radius:28px 28px 0 0;padding-bottom:25px}.contact-row{display:block}.site-bottom{flex-wrap:wrap;line-height:1.7;margin-top:45px}.site-bottom span:last-child{width:100%}.page-section p{font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.flavor-visual img,.section-button{transition:none}}

/* The imported page is used as a single-viewport homepage hero. */
html,body{height:100%;overflow:hidden}